Mejorando el performance de tu aplicación
Para esto primero debemos conocer cómo se cargan nuestras páginas en los navegadores y esto nos lleva al CRP — Critical Render Path o Ruta de acceso de representación crítica, una vez que conocemos todo ese proceso que ocurre tras bambalinas; nos interesa dar una experiencia web rápida, que podría requerir de un esfuerzo extra para nuestro navegador.
En el CRP se realizan los siguientes pasos:
- Construye el DOM
- Construye el CSSOM
- Ejecuta JavaScript
- Se crea el árbol de renderizado
- Se estructura
- Se pinta el contenido
Para ampliar esta información te invito a leer el artículo de CRP — Critical render Path.
Ahora que sabemos cómo se cargan nuestras páginas, debemos encontrar una forma de mejorar en rendimiento en ellas y para ello es bueno conocer sobre el WPO (o Web Performance Optimization), que se refiere a optimizar los tiempos de carga de una página web o optimizar el tiempo total que transcurre desde que un usuario accede a tu sitio, navega a través de la página y puede ver el contenido respectivo.
¿Por qué es importante el WPO para una página web?
Es muy importante que nuestros sitios carguen rapido porque permite que nuestros usuarios no las abandonen, además permiten un mejor posicionamiento en la red. Entre esas existen otras ventajas como por ejemplo:
- Mejora la experiencia de usuario en nuestra página web
Una demora de más de 3 segundos en una página ocasiona un abandono garantizado, además de que es difícil mejorar el posicionamiento. Nuestros usuarios pueden estar interesados en un contenido especial que solo nosotros brindemos, pero al demorar esa carga, se empieza a sentir cierto tipo de “impaciencia”.
¿Has intentado realizar esa búsqueda de lo que quieres, una imagen, un video, o ese artículo que siempre quisiste leer y cuando ingresas a la página y no carga, pronto pierdes interés y decides intentar una nueva búsqueda o solo realizar otra actividad?
- Ayuda a mejorar la indexación
Que nuestra página se reindexe nos ayuda a que sean más visitadas, y si la carga es rápida ayuda a que la reindexación se dé y que buscadores como Google recopile todos los datos necesarios.
- Mejora el Quality Score en las campañas de publicidad de Google Ads
El Quality Score es una puntuación de calidad para los anuncios de Google Ads, va del 1 al 10. A mayor puntuación aparece el anuncio en las primeras posiciones. Si la página carga rápido se tiene en cuenta en el cálculo.
Posibles errores que afectan la carga de las páginas
Hemos hablado de cómo nuestros navegadores cargan el contenido de nuestra página y a modo general que es el WPO y porque es importante, ahora vamos a dar paso a esos posibles errores que cometemos en nuestras páginas, para preocuparnos por el rendimiento y ponernos en marcha a ejecutar algo en consecuencia y mejorar nuestros sitios. Algunos de esos errores son los siguientes:
- Página muy pesada
Crear un sitio estático con demasiadas páginas, ayudan a aumentar su peso y en sitios dinámicos que usan una librería o framework es muy importante verificar el peso de la página, el no hacerlo afecta la carga y velocidad.
- Imágenes muy pesadas
Si una imagen tarda mucho pierde su propósito, por ellos es importante verificar el peso, optimizarlas y en lo posible usar un sprite que contenga todas las imágenes importantes, pero que al igual no se muy pesado.
- ¡Cuidado con los códigos CSS y JavaScript!
Verificar el peso del CSS y JS es muy importante, y aparte de su compresión se debe verificar que no se deban cargar varios links de CSS y de JS; lo ideal es unir los scripts en un solo archivo, al igual que importar todas las hojas de estilo en una sola.
- No te excedas con el uso de elementos
Los plugins, las redes sociales y los anuncios publicitarios en exceso pueden hacer muy lenta la pagina.
Los plugins y complementos nos ayudan a añadir características que inyectan en nuestra página cierto dinamismo, e incluso ahorra en algunas ocasiones cierto trabajo al desarrollador para no reinventar la rueda y si rehusar una característica que nos está dando ese plugin, el único detalle es que cuando hacemos uso de ellos no verificamos su peso y al usarlos estamos sacrificando el rendimiento de nuestra página. Por ello es importante verificar el peso del plugin, hacer una prueba de concepto probando cada funcionalidad de los plugins prueba que estás pensando en todos los posibles casos que pueden pasar.
Incluir publicidad es bueno, pero la saturación no ayuda, es importante que la información relevante de la página sea lo único que impacte, en lugar de la publicidad.
Los íconos de las redes sociales, permite al usuario tener la posibilidad de compartir el contenido que se ofrece, no es necesario cargarlos en cada página. Mostrar muchas redes sociales diferentes para cada publicación en la página de inicio o páginas de categoría le suma peso al sitio. No es necesario escoger todas las redes sociales. Es bueno solo incluir las más útiles.
Tips para mejorar el rendimiento
- Optimizando el DOM
Para optimizar nuestro DOM es importante que en nuestro código no incluyamos comentarios. Los comentarios en el CSS, JS y HTML, ayudan a los desarrolladores a tener una guia que les ayude a encontrar mucho más fácil el código que deben modificar, y de una idea de que hace esa porcion de codigo. Cuando se realiza la construcción del DOM no se hace convierten en nodos los comentarios solo se ignoran, pero estos añaden cierto peso a nuestros documentos, por lo que es importante no incluirlos en la página que va a producción.
Cuando se remuevan los elementos innecesarios, es importante minificar el JS y CSS, una vez sean minificados es importante comprimir los archivos y almacenar en la cache solo la información necesario que te evite múltiples peticiones al servidor.
- Optimizar el CSS
Para optimizar el CSS, cuando construimos nuestras reglas con los media queries no es recomendable hacer uso de los @import, para unir nuestros media, o unir el media con los estilos en general de la página, ya que afecta el rendimiento. En un diseño web responsive estamos modificando la vista de nuestra página adaptada al tamaño del dispositivo y para estos estilos en especial, es recomendable tener una hoja de estilos separada, además de incluir este archivo en una etiqueta link incluyendo el atributo media, especificando el tipo, para que este sea solo cargado, cuando se esté usando el dispositivo mencionado en el media, ya que de esta forma se evita el bloqueo en el renderizado.
Cuando tenemos varios links y en el caso de los media queries no especificamos en el media, para que tipo de dispositivo va a ser usado, esto le da más carga al navegador y puede generar un bloqueo, mientras el hace las peticiones y construye el CSSOM, de elementos que en el momento no van a ser usados; pero si se especifica el tipo de media, esto ayuda a que el navegador solo se encarga de hacer las peticiones de los archivos necesarios y construya el CSSOM pertinente al dispositivo en cuestión.
- Optimizar el JS
Nuestro JavaScript depende de donde sea llamado puede ser un bloqueo para la construcción del DOM e incluso del CSSOM, y por ello depende de la forma en como estemos incluyendo los scripts, es buena práctica para nuestros scripts inline, o referencias a nuestros archivos locales, incluir nuestro código al final, antes del cierre del body, para de esta forma no afecte la construcción del DOM, en el caso que desde nuestro código esté modificando el DOM el CSSOM, se deben recrear estos árboles, por medio de nuestros scripts para proceder con los demás pasos del CRP. Para referencia de scripts externos es importante incluir el atributo async o defer, en el caso que sea requerido, para optimizar la carga de nuestras páginas. Para esto te invito a leer el articulo de carga asincrónica.
Además de lo anteriormente mencionado, se pueden tener medidas adicionales en cuenta para mejorar el rendimiento de nuestras páginas, estas medidas implican disminuir el peso (aunque se ha mencionado sobre este punto anteriormente), limitar los requerimientos al servidor, aumentar la ve; y detallando cada una de estas medidas podemos tener en cuenta los siguientes tips:
- Optimizar las imagenes
Comprimir y organizar las imágenes es importante. Es importante considerar el formato, el soporte de animaciones, si deseas incluir un gif es preferible usar un video, en lugar de un gif animado, el tipo de compresión importa, porque nos permite verificar con cual compresión podemos obtener una imagen más liviana sin pérdida de calidad.
- Sprites CSS
En lugar de usar varios iconos, botones e imágenes, se puede usar un sprite que combine todos estos elementos, para que se realice una sola petición y carga.
- CDN (Content Delivery Network)
El CDN hace referencia a un conjunto de servidores ubicados en diferentes puntos que contienen copias de contenidos alojados en otros servidores y guarda en caché la información que no es necesaria actualizar constantemente. El CDN junto con el balanceador de cargas mejora la experiencia de usuario y permite que los usuarios descarguen el contenido rápidamente.
- Gzip
Comprimir los archivos en el servidor para reducir el tráfico entre el servidor y el cliente. Se puede hacer uso de la compresión de Gzip y header expires para los archivos estáticos.
- Evitar el uso de Iframes
Un Iframe es una página que se embebe dentro de otra incluir un iframe en nuestros sitios, usarlos retrasa el evento window.load, que es un indicador del rendimiento en la página.
- Percepción de rapidez
En ocasiones debemos de darle al usuario una espera visual porque no sabemos cuanto pueda tardar un sitio en responder y estas ayudas complementan esta percepción de rapidez que pueden ser, por ejemplo:
Añadir un estado en el boton, se aun cambio de color que aunque el proceso aun este cargando, pueda darle una respuesta inmediata al usuario, para que el pueda esperar.
Incluir un rebote en los dispositivos móviles para darle al usuario la sensación de que ha llegado al final.
Incluir barras de carga, spinners o loading, para mostrarle al usuario que aún se está a la espera de un proceso y el no sienta tanta ansiedad por esa espera indeterminada.
Existen incluso muchas más tips para mejorar el rendimiento, he mencionado solo algunos de ellos, como developers debemos tener presente que además de lo mencionado debemos hacer buen código, hacer uso del lenguaje, la cascada y el marcado correctamente y emplear las buenas prácticas; estoy segura que si usamos estos tips nuestras pagina tendra exitosamente el rendimiento esperado y daremos a nuestros usuarios el resultado esperado por ellos y por nosotros.
Herramientas útiles
Hemos mencionado sobre los problemas que podemos tener en el rendimiento de la página y algunos tips para mejorarlo y evitar esos problemas, ahora vamos a mencionar brevemente algunas herramientas que nos pueden ayudar a medir el rendimiento y darnos recomendaciones para solucionar esos problemas.
Esta herramienta nos permite hacer una análisis de nuestra web, para mejorar la calidad de la misma. En el Developer Tools de chrome podemos encontrar la pestaña de Lighthouse, con la cual podemos generar un reporte, es recomendable ejecutarlo en modo incógnito. Podemos seleccionar las categorías que deseemos incluir en nuestro reporte y podemos seleccionar el tipo de dispositivo en el cual deseamos generar el reporte.
Una vez ejecutamos el reporte podemos exportar nuestro reporte en un archivo de JSON.
Proporciona el rendimiento de las páginas para Desktop y móviles y da consejos para mejorarla. Esta herramienta nos da información de ficheros o elementos de una URL en concreto y también nos aporta un informe detallado de los fallos. Solo tenemos que ir al sitio PageSpeed Insights. La página contiene una caja de texto donde ingresamos la URL que deseamos analizar y pulsamos el botón analizar.
Una vez el análisis llegue al 100%, veremos el informe de resultado de PageSpeed Insights.
Además de las dos herramientas mencionadas existen muchas más que nos pueden ayudar a medir el rendimiento, incluso algunas podemos instalarlas en nuestra aplicación, como por ejemplo:
Conclusiones
El buen rendimiento en nuestra página lo es todo, brindar una página atractiva para nuestros usuarios que capture su atención y que lo enganche son factores por los que debemos velar los Devs, y brindar una carga rápida de la página ayuda a cumplir esos factores. Prever los posibles errores que podamos tener en nuestros páginas nos son de mucha ayuda para mejorarlas y poner en marcha los tips mencionados anteriormente también, porque nos garantiza un buen posicionamiento y experiencia de usuario, pero a veces se nos pueden escapar detalles y por ello es bueno hacer uso de las herramientas para analizar nuestras páginas y trabajar en las recomendaciones que estas nos brindan para garantizar la calidad de ellas.
Te invito a seguirme en twitter con el handle: @vanessamarely
