Vehicle, de Taun Stewart

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…

Clip de una mujer yendo en coche cuya velocidad no puede rebasar las 50 millas por hora
¿Es tu web demasiado lenta, o su velocidad ya está bien?

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 Unlocker

Pásate a WordPress manteniendo tus diseños y contenidos

Mejora hoy mismo el SEO de tu web y acelera su velocidad de carga convirtiendo tus páginas a estándares HTML, CSS y WordPress. No necesitas conocimientos técnicos y solo pagarás por aquello que necesites.

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.

Resultados de GTMetrix.
Resultados de GTMetrix.

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.

Resultados de Google PageSpeed Insights.
Resultados de Google PageSpeed Insights.

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.

12 respuestas a «¿Vale la pena conseguir el excelente en Google PageSpeed Insights?»

  1. Avatar de Daniel Vaquero
    Daniel Vaquero

    La verdad es que a veces nos centramos demasiado en puntuaciones y estadísticas y al final nos olvidamos de lo que es más importante: el contenido y la experiencia del usuario con ese contenido.
    Gracias por el artículo, muy revelador.
    Un saludo.

    1. Avatar de Antonio Villegas

      Gracias a ti por el comentario.

  2. Avatar de Carlos Román

    Considero prudente y necesario no enfocarse excesivamente en las estadísticas que ese tipo de servicios nos entregan, he tenido clientes que prácticamente se obsesionan con ello, tanto así, que la estética y contenido de sus sitios, pasa a segundo plano.

    Creo también, que la hoja de estilos siempre debe ir cargada en el header y como único archivo, uno como desarrollador tiene ciertas directrices que seguir, para que este archivo no sea gigante o pesado, reutilizar clases es una de ellas, ya que el usuario visitante es el que se lleva una impresión del sitio y tener los problemas que al final de este artículo se mencionan, es algo que se puede evitar.

    Se agradece la publicación

    1. Avatar de Antonio Villegas

      Hola Carlos. Lo que dices es cierto. A veces nos ofuscamos demasiado con los números cuando deberíamos centrarnos en la experiencia de usuario. Gracias por el comentario.

  3. Avatar de Zoila
    Zoila

    Hola, tu publicación es de los más claros y completos que he encontrado. Aunque yo soy principiante y no conozco de códigos.

    Es posible que me ayudes a revisar mi sitio y mejorar su rendimiento?

    Muchas gracias!

    1. Avatar de Antonio Villegas

      Hola Zoila. Gracias por el comentario. Lamentablemente no proporcionamos este tipo de trabajos de consultoría. Pero seguro que en tu zona puedes encontrar profesionales que te ayuden. Un saludo.

  4. Avatar de Bogdan
    Bogdan

    Buenas tardes a todos.
    Hasta un cierto punto creo que si es importante optimizar una página web. Nadie dice que tiene que obtener 100 pero tampoco obtener un 30 y cargar en 29 segundos.

    1. Avatar de Antonio Villegas

      Eso es exactamente lo que queremos expresar en este artículo. Gracias por el comentario, Bogdan.

  5. Avatar de Javier
    Javier

    Muy interesante el post!!! Gracias

    Estaba realizando el test GTMETRIX y hay tres apartados que deberia mejorar pero no se como hacerlo…

    Sobretodo los que me salen en «Defer parsing of JavaScript» y en «Leverage browser caching» son los Javascript de Google (recaptcha y analytics)

    Hay alguna forma de asignarle async o defer a estos?

    Gracias

    1. Avatar de Antonio Villegas

      Hay plugins para WordPress que te añaden el defer y el async. Sin embargo, ten cuidado al meter async y defer a saco sin pensar. Esto puede cambiar el orden de ejecución de los scripts y, por tanto, romper el funcionamiento de tu tema y/o plugins.

  6. Avatar de Freddy
    Freddy

    Bueno en mi opinión, todo depende del objetivo de tu página o sitio web, porque hay diferencia, cuando tienes una página web, normalmente es una landing page, y vas a realizar campañas para atraer gente a tu landing y puedas conseguir clientes potenciales y los tiempos de carga en este objetivos son muy importantes porque disminuye el rebote de los leads para ver tu publicidad, sea que vengan de instagram o facebook, por el contrario, un sitio web ya no es 100% importante que tu sitio cargue en menos de 1 segundo, porque se supone que el usuario que entra en tu sitio está buscando algo que le interesa y muchas veces entrará a tu sitio esperando encontrarlo. Por eso para mi el objetivo de una pagina o sitio web determina la necesidad de mejorar o no los tiempos de carga…
    Por otra parte, google analiza los tiempos de carga pero no de manera gráfica, por lo que se considera (es verdad lo que dices de que nadie sabe a ciencia cierta los criterios de google para el seo de tu sitio web), importante tener un sitio optimizado, según muchas estadísticas el público tarda entre 3 y 5 segundo en determinar si el sitio carga o no rápido y puede abandonar la espera, por lo que es importante tener un buen tiempo de carga, y según otras especulaciones otro factor importante para google posicionarte en sus resultados también lo determina la velocidad porque lo compara con otros sitios web de tu mismo nicho. Hay tantas opciones que lo mejor es definir bien tus objetivos desde un principio y saber que tienes que hacer…
    Saludos…

    1. Avatar de Antonio Villegas

      Gracias, Freddy, por el comentario.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.