Algo que es claro en el mundo del desarrollo web es que es un entorno altamente competitivo, donde todos los días se compite por ofrecer la mejor experiencia al usuario y los mejores resultados para los clientes. Para alcanzar dichas expectativas, se deben tener en cuenta muchos factores que aseguran una buena experiencia para el usuario y una mayor retención de los visitantes. Entre esos factores, uno de los más importantes es la optimización de las páginas web, un aspecto fundamental para cualquier sitio web. Para quienes están comenzando en el desarrollo de sitios web, este tema puede ser un poco desconocido, pero dominarlo puede marcar una gran diferencia en los resultados. En este artículo hablaremos sobre las mejores prácticas que puedes aplicar para optimizar tus proyectos.
Cuando creamos nuestra primera página, es común que se nos pase por alto el peso de las imágenes. Esto es normal cuando no se tiene mucha experiencia, ya que no solemos pensar en cómo la carga de la página puede verse afectada. Por ejemplo, puede que la imagen que colocaste en un espacio de 200 px tenga un tamaño real de 2300 px y un peso considerable, lo cual impactará negativamente en el rendimiento de la página. A continuación, te dejo algunas recomendaciones para optimizar tus imágenes:
Comprime y redimensiona tus imágenes: Trata de reducir el tamaño de tus imágenes disminuyendo su calidad o ajustando sus dimensiones (lo ideal es aplicar ambas opciones). Existen muchas herramientas online para esto, como TinyPNG o iLoveIMG, las cuales usamos frecuentemente para diseñar nuestras páginas web en Villahermosa.
por experiencia puedo decir que cuando haces tu primer diseño o creas esa idea que tienes plasmado en tu cabeza, puede que no salga a la primera o simplemente no te convence y quieres volver a intentar cierta parte, entonces agregas más líneas a tu trabajo más hecho y borras otras sin fijarte bien en lo que hace, al final tienes una combinación de código nuevo y código viejo el cual no todo funciona y hasta tienes líneas que están combinadas entre sí, esto es normal si estas iniciando, pero ya una vez que tengas cierta experiencia en la creación de las páginas, verás que no es algo óptimo ni para el orden de tu código, ni para el espacio que puede tomar el código que no estas usando. El código que no estás usando siempre va ocupar un espacio en la carga de tu página, que en un inicio no puede ser mucho pero después de un tiempo, los cambios empiezan a tener efecto en el rendimiento de tu página. cuando tengas que cambiar tu código, revisa cómo puedes optimizar de mejor manera que tu página tenga el mejor el rendimiento, además nunca está demás poder revisar el código de la página y realizar ajuste para tu sitio.
Este consejo es más relevante cuando tu sitio está en una etapa avanzada y es muy útil si estás utilizando un framework. Minificar tu código consiste en eliminar datos innecesarios o redundantes sin afectar la funcionalidad del sitio. Google define la minificación como “el proceso mediante el cual se eliminan datos innecesarios o redundantes de un recurso sin que se vea afectada la forma en que los navegadores lo procesan”. Este proceso es ideal cuando tu página no va a tener cambios mayores en su estructura, ya que mejora considerablemente la velocidad de carga. Algunas herramientas recomendadas son:
Para HTML: HTMLMinifier
Para JavaScript: UglifyJS o Closure Compiler
es bueno que tu página tenga redirecciones ya que puede ser un medio para vincular con otra información al usuario y así pueda tener la posibilidad de ingresar a más sitios, pero como todo hay excesos, ya que, cuando tú agregas una redirección puede agregar un tiempo de carga de adicional, entonces si agregas muchas redirecciones, entonces puedes que generes problemas para la carga por todas esas redirecciones, siempre trata de reducir la cantidad solicitudes y en caso que no puedas hacerlo, entonces puedes intentar minimizar las redirecciones de tu sitio como por ejemplo, de http a https o de non-wow a www para que sea un poco más ligero.
cuando se trata de gestionar paquetes, dependencias o librerías existen diversas formas para poder llamarlos y hacer uso de las mismas, pero depende de cual tengamos nosotros para tener un resultado u otro en cuando se trata de rendimiento. Usualmente se utilizan entre el CDN y el NPM.
NPM:
NPM, conocido como Node Package Manager, es un gestor de paquetes para JavaScript que permite manipular dependencias dentro de tu proyecto. Es ideal para proyectos grandes o cuando la estructura del sistema es compleja. Recomendamos usar NPM cuando:
Si tu proyecto requiere de un entorno de desarrollo local como Angular, React, Node.js entre otros ejemplos, en donde no solo te va ayudar a gestionar tus dependencias, sino que también te permite controlar las versiones de las mismas
Modificaciones de las dependencias o un uso avanzado de las dependencias solo se puede hacer cuando los tienes localmente para su modificación, si ese es tu caso, entonces te recomendamos utilizar NPM.
Si has hecho uso de las herramientas Build como Webpack o Parcel con el fin de optimizar tu sitio, es una mejor opción utilizar NPM para manejar de mejor manera tu flujo de trabajo.
En el caso que seas un desarrollador Full-Stack o que estés en el área de Back-End para alguna aplicación, puede que te sea esencial el uso de NPM para tus trabajos.
CDN:
Las CDNs (Redes de Distribución de Contenidos) son redes de servidores diseñadas para entregar archivos estáticos, como librerías JavaScript, desde el servidor más cercano al usuario. Algunos casos donde es mejor utilizar una CDN son:
En el caso que tu proyecto sea algo pequeño o sin muchas funcionalidades Back-End, puede ser más sencillo y el uso de CDN en donde no debe de haber problemas con la carga de los archivos.
Cuando se cargan las librerías por medio de los CDNs, lo hacen por medio de los servidores externos, haciendo que la máquina del usuario no tenga que cargar todo estos archivos, si tienes la intención de realizar la carga de tu página por este medio, entonces los CDNs son mejores para ti.
Si tu página no hace uso de solicitudes para algún servidor, entonces es una gran idea utilizar los CDNs para un trabajo más directo.
Utilizar los CDNs es muy bueno cuando estamos iniciando en el mundo del desarrollo ya que cuenta con una mejor complejidad de uso, porque no necesitas instalar nada para su uso.
Cuando creas que tu pagina esta totalmente optimizada para el usuario y para sus diferentes visualizaciones, nunca está demás poder tener la confianza de hacer uso de herramientas que nos faciliten en la visualización de nuestro rendimiento, existen diversas zonas en las cuales puedes revisar el rendimiento de tu página, pero nosotros te recomendamos las siguientes:
Google Lighthouse
PageSpeed Insights
GTmetrix
Estas son algunas de las páginas que te pueden ayudar al momento de querer realizar una visualización sobre la velocidad de tu sitio, donde no solo te darán información respecto a tu rendimiento, sino que igual te pueden dar ciertos consejos para mejores resultados.
La optimización de la velocidad de carga de un sitio web es crucial para ofrecer una experiencia de usuario fluida y eficiente, especialmente en un entorno digital tan competitivo. Implementar prácticas como la compresión de imágenes, la minificación de archivos CSS, HTML y JavaScript, y la reducción de redirecciones, no solo mejorará el rendimiento de tu página, sino que también puede ayudar a tener una mejor posicionamiento en motores de búsqueda, tema que se habló anteriormente en este artículo ( ¿Qué es el SEO en el desarrollo de páginas web? ). Espero que con estos datos puedas tener una mejor optimización en tus futuros proyectos o que puedas ayudar a otros con esta información que has adquirido el día de hoy.
Si tienes más interés en aprender sobre el fascinante mundo del diseño y desarrollo de páginas web, sistemas, aplicaciones o la creación de CRMs, te invitamos a que revises nuestros blogs. Allí encontrarás más artículos, recursos y guías que te ayudarán a profundizar en estos temas y mejorar tus habilidades.
Contácto
