No nos gusta esperar, y si para entrar en tu web me toca hacerlo, lo normal es que me canse y me vaya a otra. Será por webs, ¿verdad? Que tu web ha de cargar rápido es un requisito imprescindible hoy en día. Pero, ¿cómo podemos saber si una web es lenta o rápida?
Lo sé, esta pregunta parece una perogrullada. Si una web es rápida o es lenta lo podemos discernir con tan sólo medir el tiempo de carga de la misma. Lo difícil es saber valorar si el valor resultante de este análisis lo podemos catalogar como «lento» o «rápido». Para mí, esperar 2 segundos no es un problema, pero quizás si mi web cargara en la mitad de tiempo, sería mejor. Y hay que tener un montón de factores en cuenta, ya que mi acceso a Internet es rápido, pero quizás no todo el mundo tiene las mismas condiciones que yo…
Como ves, todo esto es un embrollo más complejo de lo que puede parecer así de primeras. Para poder establecer medidas comparables existen evaluadores del nivel de optimización de las webs, como pueden ser Google PageSpeed Insights o GTMetrix, por poner un par de ejemplos.
Estos evaluadores son capaces de analizar una página web y darle una nota en una escala de 0 a 100 dependiendo de su nivel de optimización. Además, detectan las características de la web e indican sugerencias de mejora que podemos llevar a cabo para subir la nota y, se supone, mejorar la velocidad.
Sin embargo, buscar la perfección puede ser contraproducente. Buscar la excelencia en los resultados de Google PageSpeed Insights puede descuidar otros aspectos de tu web también importantes, como la experiencia de usuario.
Buscando el 100 en Google PageSpeed Insights
Recientemente hemos rehecho el tema de nuestra web desde cero y hemos transformado todas nuestras páginas utilizando bloques del nuevo editor de bloques de WordPress. Ha sido un ejercicio para entender mejor las características del editor de bloques y ver también sus carencias, aprendiendo de todo el conjunto.
Aprovechando esta tarea, hemos analizado nuestra web con Google PageSpeed Insights para intentar mejorar su nota final y acercarnos todo lo posible al deseado 100. A continuación veremos algunos de los puntos que hemos ido mejorando gracias a las indicaciones de Google y nuestras conclusiones al respecto.
Usa un tamaño adecuado para las imágenes
Este tema ya lo hemos tratado con anterioridad en nuestro blog. Recuerda que deberías tratar de usar tamaños de imagen compatibles con lo que tu tema necesite. No abuses de imágenes gigantes porque no aportan nada.
Los algoritmos de compresión de imágenes funcionan genial sin apreciar pérdidas de calidad en sus resultados. Úsalos antes de subir tu imagen a la biblioteca de medios de WordPress. Con esto evitarás problemas.
Si Google PageSpeed Insights se queja de tus imágenes, lo bueno es que te dirá cuáles son las problemáticas y así podrás arreglarlas. Es un trabajo laborioso pero cuyos resultados se notan bastante en el tiempo de carga de tu web.
Nelio Popups
¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.
Juan Hernando
Pospón la carga de imágenes que no aparecen en pantalla
Para todas aquellas imágenes de tu página que para que se vean el visitante ha de hacer scroll hacia abajo, lo que se recomienda es aplicar carga diferida. Lo que en inglés se entiende como lazy load.
Con esto lo que consigues es que sólo se pidan al servidor cuando el visitante haga scroll y las necesite ver. De este modo evitamos sobrecargar la carga inicial y reducimos tiempo, haciendo que la web cargue más rápido. Te recomiendo este artículo de Pablo López al respecto. Y si eres más de plugins, quizás te sirva este.
En nuestro caso, el plugin de optimización de SiteGround incluye lazy loading, así que no hemos necesitado nada más que activar esa opción para aplicar esta técnica en nuestra web.
Asegúrate de que el texto permanece visible mientras se carga la fuente web
Si utilizas Google Webfonts, como nosotros hacemos, resulta irónico comprobar como el propio script que Google te da para cargar las fuentes es detectado por Google PageSpeed Insights como mejorable.
Lo que Google te dice es que deberías utilizar la función de CSS font-display en @font-face para que los usuarios vean el texto mientras se carga la fuente web. En concreto, deberás poner font-display: swap en la carga de las fuentes para que el navegador no bloquee el renderizado del texto hasta que la fuente esté disponible. Puedes descargar las fuentes de Google y meterlas tú directamente utilizando font-display tal y como se explica aquí.
Con esto el visitante es capaz de ver el texto desde el inicio, aunque la fuente concreta de Google no esté cargada. En el momento en que la fuente ya esté disponible, el navegador la aplicará al texto, transformando su estilo al deseado.
Elimina los recursos que bloqueen el renderizado
Los estilos CSS y los scripts en JavaScript son cada vez más usados para cambiar el diseño del contenido y hacerlo dinámico, respectivamente.
Si cargamos los CSS y JS en el <header> de la web, lo normal es que el renderizado de los contenidos quede bloqueado y la web no cargue contenidos hasta que no se procesen los estilos y código JavaScript.
Una opción para evitar esto es mover estos archivos al <footer> de la web. De este modo, todo el contenido que va en el <body> se cargará y renderizará primero, sin bloquear la carga.
Tambien se recomienda utilizar los atributos defer y async en los scripts JavaScript para que la carga se haga en diferido o de forma asíncrona.
Otro aspecto que ayuda a mejorar la nota final de Google PageSpeed Insights es el hecho de minificar y comprimir los archivos CSS y JS, además de combinarlos en un único archivo CSS y JS respectivamente. No obstante, ten mucho cuidado con la combinación ya que si los combinas en un orden incorrecto puedes sufrir fallos en los estilos y en la ejecución del código JavaScript.
Puedes utilizar este plugin para conseguir mejorar resultados, pero repito, úsalo con ojo y mucho cuidado.
Mejorando la velocidad de nuestra web pero, ¿a qué precio?
Después de aplicar soluciones a las sugerencias propuestas por Google mediante los informes de Google PageSpeed Insights, el tiempo de carga de la web se reduce. Sin embargo, esto tiene un precio que no está claro que queramos pagar.
Uno de los efectos secundarios de aligerar nuestra web es que la experiencia de usuario que recibe un visitante no es tan buena. Permíteme que me explique…
Para que el contenido de nuestra web se renderice lo antes posible en el navegador de nuestros visitantes, hemos pospuesto la carga de JavaScripts y estilos CSS en el footer de nuestra web (han pasado del header al footer). Y también hemos permitido que el texto se cargue antes de recibir la fuente web.
Todo esto provoca que el visitante vea rápidamente el contenido de la web sin estilo. Lo que supone que vea todo de forma bastante plana y fea. Además, notará cómo se cambia la fuente del texto cuando esta ya está disponible. Y también verá un parpadeo cuando los estilos CSS y el JavaScript se apliquen y ejecuten.
Antes, en una instalación de WordPress al uso, el visitante veía cargar la web sin problema. Ahora verá que carga un poco antes, pero todo este parpadeo que experimenta reduce la experiencia de usuario y es posible que haga pensar al visitante que la web carga mal o que carga raro. O incluso que algo hay estropeado en la web porque cada vez que navega a una página el parpadeo aparece un instante.
¿Vale la pena dar esta imagen por ganar un puñado de milisegundos en tiempo de carga y unos pocos puntos de más en la nota de Google PageSpeed Insights? Nosotros creemos que no, y por esta razón hemos vuelto a dejar la carga de estilos y scripts tal y como WordPress la establece por defecto.
Si esto tiene o no un efecto negativo en otros aspectos, como el SEO de la web, la verdad es que no lo sabemos (y tampoco creemos que nadie lo sepa a ciencia cierta). Ni tenemos claro si la evaluación de Google PageSpeed Insights tiene tanto peso como algunos quieren darle en este aspecto.
Esta claro que hay aspectos que hay que mejorar sí o sí, como el tratamiento correcto de las imágenes, utilizar archivos minificados para reducir el peso de estos o evitar cargar todo aquello que no se va a utilizar en la página. Pero de ahí a volvernos locos intentando llegar al 100 de nota es algo a evitar.
No te vuelvas loco con los evaluadores de la optimización de tu web y con conseguir la nota máxima. Al fin y al cabo, tu visitante objetivo es de carne y hueso incapaz de apreciar diferencias mínimas en décimas de segundo. Una vez que tu nota sea mínimamente correcta, céntrate en otra cosa.
Imagen destacada de Taun Stewart en Unsplash.
Deja una respuesta