La respuesta es sí, pero aunque seguir las indicaciones de PageSpeed suele ser una buena idea, hasta cierto punto, debes tener claro que las variables de análisis de esta herramienta son muy estrictas y que no siempre están en consonancia con lo que es una página web realmente optimizada.
Por tanto, no debes obsesionarte con sus indicadores, pues esto te traerá como consecuencia una gran frustración y, de manera irónica, una sobreoptimización de tus recursos que al final terminan perjudicando a tu página web.
Un ejemplo de esto es cuando PageSpeed Insights te sugiere que optimices la entrega de CSS. En un mundo ideal, tu CSS estaría minificado y comprimido al máximo, y separado para mostrar los estilos esenciales (los critical assets) en la cabecera y el resto en el pie de página. Sin embargo, en el mundo real esto no es posible, pues seguramente estás utilizando WordPress.
¿Qué tiene de malo usar WordPress?
No tiene nada de malo. Al contrario, ¡es excelente!, pero lograr 100 puntos de PageSpeed en WordPress al realizar el test de velocidad web de google puede ser una tarea bastante complicada teniendo en cuenta que, al instalar plugins, tendrás de todo: archivos CSS en tu página que no se pueden minificar o estilos que son ineficientes, entre otros, lo cual tendrá una repercusión negativa en los core web vitals de tu página web y consecuentemente en la puntuación de esta.
Hay otras veces en las que, por más que nuestra página sea “perfecta” y pueda llegar a alcanzar un score de 100, no es posible hacerlo debido a factores externos. Por ejemplo, si tenemos un servidor de bajo presupuesto, puede dar errores que no tienen solución, como, por ejemplo, la lentitud en el tiempo de respuesta del servidor o time to first byte (TTFB). En ese caso, siempre podemos contactar con nuestro proveedor de servidor para consultar si es posible mejorar el TTFB o plantearnos contratar otro servicio un poco mejor.
Al fin y al cabo, lo que realmente debería importarnos es el rendimiento percibido por el usuario y no el Google Page Speed. A aquellas personas que visitan nuestra web, lo que realmente les importa es cómo de rápido pueden ver el contenido de nuestra página y es en esto en lo que deberíamos enfocar nuestros esfuerzos. Utilizar la herramienta de Google para identificar los posibles errores de manera que podamos darles solución y mejorar el tiempo de carga real. Aún así, en la próxima sección os explicaremos cuáles son los errores más comunes que Google Page Speed detecta en nuestra web y cómo podemos darles solución.
Principales problemas y cómo solucionarlos
En esta sección vamos a presentar los 5 errores más comunes y que de manera habitual nos ofrecen mayor capacidad de ahorro de tiempo de carga en las páginas webs y explicaremos de manera detallada cómo solucionarlos.
1. Elimina los recursos que bloqueen el renderizado
Tal y como nos explica Google en este artículo los recursos que bloquean el renderizado son aquellos scripts y estilos que bloquean el primer renderizado de la página.
El objetivo de atender estas oportunidades que nos señala Google es el de reducir el impacto que tienen estos archivos en la velocidad de carga. Para ello, tenemos 3 posibles opciones:
- Alinear los archivos críticos en el HTML. Esto se refiere a mover el código desde esa URL que bloquea el renderizado de la página a una etiqueta “inline script” dentro de la página HTML.
- Postergar los archivos que nos son críticos para el primer renderizado de la página. Este cambio podemos hacerlo marcando la url en la que se aloja el contenido con las etiquetas “async” o “defer” en el caso del contenido JavaScript y con la etiqueta “preload” en el caso del contenido css. Ahora bien, hay que tener mucho cuidado a la hora de hacer esto, ya que si postergamos la carga de archivos de los que dependen otros archivos críticos que carguemos previamente, estos archivos no podrán recoger la información necesaria y por lo tanto no funcionarán, por lo que tendremos que testear siempre a fondo después de hacer un cambio de este tipo.
- Eliminar todos aquellos archivos que no se estén utilizando. Este punto se explica por sí solo. Si tenemos archivos que no estamos utilizando, lo mejor sería borrarlos, de manera que no ralenticen nuestra página.
2. Usa un tamaño adecuado para las imágenes
Uno de los errores más comunes que provocan una baja velocidad de carga de nuestra página es la inclusión de imágenes de tamaño gigantesco en la web. Y es verdad, todos queremos que nuestras imágenes se vean con la mejor calidad posible, ya que una imagen de baja calidad provoca un efecto poco profesional.
Pero, ¿es necesario para que las imágenes mantengan una buena calidad que estás sean de un tamaño gigantesco? Pues la verdad es que no. Y esto es así gracias a diferentes herramientas de compresión y optimización de imágenes. Hay muchísimas herramientas de este tipo que podéis utilizar, pero la que nosotros usamos de manera más habitual es la herramienta Squosh, la cual es propiedad de Google.
Gracias a esta herramienta, podemos mantener la calidad de la imagen casi al máximo con una reducción del tamaño de esta de hasta un 90%. Suena bien, ¿verdad? Todo lo que tenemos que hacer es entrar en la página, incluir la foto que queremos comprimir y elegir el nivel de compresión que queramos y una vez hecho esto, podremos descargarla en nuestro pc con un peso muchísimo menor. Si no sabíais esto, haced la prueba y veréis como mejora vuestro Page Speed en varios puntos.
Con respecto a las imágenes, es importante utilizar formatos de nueva generación como WebP.
3. Posterga la carga de imágenes que no aparecen en pantalla
Este punto está muy relacionado con el anterior y es que las imágenes son de los archivos más pesados que podemos incluir en nuestra web, por lo que también son los que nos ofrecen mayor oportunidad de optimización.
A través de este punto lo que Google nos quiere decir es que hay imágenes en nuestra página web que el usuario no verá hasta que no haga scroll por lo que no tiene sentido cargarlas con el primer renderizado de la página, en el que como hemos dicho en el primer punto, sólamente deberíamos cargar los archivos de carácter crítico.
Pero, ¿cómo podemos hacer que las imágenes se carguen sólamente cuando aparezcan en pantalla? Realmente es muy fácil y se puede hacer de 2 maneras.
- Si utilizas WordPress, puedes instalar un plugin que sirva esta funcionalidad a tu página. Entre ellos, podemos destacar los todoterrenos WP- Rocket y Autoptimize. (los cuales hacen mucho más que solo aplazar la carga de imágenes) o plugins más específicos como podría ser el de Smush.
- En el caso de que no utilices WP, puedes agregar el script Lazysizes a tu página. En este enlace podrás descargarlo y obtener más información sobre cómo utilizarlo por lo que te recomendamos que entres y le eches un ojo. Si no eres muy dado a la programación, no te preocupes, todo lo que tendrás que hacer es descargar el archivo e incluirlo en tu página a través de este script <script src=»ruta-al-archivo/lazysizes.min.js» async></script>. Simplemente recuerda modificar el texto de ruta-al-archivo por la verdadera ruta al archivo. Una vez hecho esto, podrás elegir qué imágenes quieres que se posterguen añadiéndoles de manera manual la clase ”lazyload”. Hecho esto y con el punto anterior, te habrás ahorrado unos cuantos segundos de carga en tu página web.
4. Minimizar los archivos CSS y JS
Cuando escribimos los archivos CSS y JS, lo hacemos de manera que sea legible para los humanos, incluyendo carácteres y espacios, que realmente no son necesarios. Esto supone un aumento en el peso de los archivos y consecuentemente un aumento en la velocidad de carga de estos.
Para resolver este problema, podemos minimizar estos archivos CSS y JS, de manera que eliminemos todos esos carácteres y espacios innecesarios y reduzcamos el tiempo necesario para leerlos por el ordenador del usuario.
Para ellos, en el caso de que usemos WordPress, podremos valernos de diferentes plugins de optimización que se encargarán de hacer este trabajo por nosotros. Los más destacables entre estos plugins, podríamos decir que serían los ya mencionados antes WP- Rocket y autoptimize.
En el caso de utilizar otra herramienta que no sea WordPress, podemos encontrar mil herramientas en la web que también pueden hacer este trabajo por nosotros, pero al igual que hemos comentado en el primer punto, es vital hacer un testeo post-minificación en la página de manera que nos podamos asegurar de que todo funcione correctamente.
5. Reducir los tiempos de respuesta del servidos (TTFB)
El Tiempo al Primer Byte (TTFB) se refiere a la cantidad de tiempo que necesita el navegador para recibir el primer byte de datos desde el servidor una vez se ha realizado una solicitud. Google considera que este punto necesita ser mejorado cuando el navegador espera más de 600ms. Pero, ¿qué factores afectan a este TTFB?
Son varios los factores que pueden influir en el TTFB, pero en este punto destacaremos los más importantes:
Uno de los aspectos que mayor afectación tendrán en este punto se dará incluso antes de publicar nuestra web, a la hora de elegir el servidor en el cual la alojaremos. Y es que sí, hay una gran diferencia entre servidores. Mientras que elegir un buen servidor puede ayudarnos a empezar con buen pie y sustentar la base de una buena puntuación de page speed, un mal servidor puede condenar nuestra web a una puntuación negativa hagamos lo que hagamos. Por lo tanto, infórmate de las diferentes opciones del mercado y elige sabiamente.
Otro aspecto que puede influir enormemente en este TTFB es la cantidad de plugins que tengamos instalados en nuestra web, así como el tamaño de estos. Y sí, todos queremos tener todas las funcionalidades posibles en nuestra web y hay infinidad de plugins que nos ofrecen servicios interesantes, pero tenemos que tener en cuenta que con cada uno de ellos, estaremos añadiendo un montón de código que nuestra web tiene que cargar, aumentando consecuentemente el tiempo de carga de esta.
Es necesario, sin duda, que optimices los aspectos técnicos de tu página web, pero no te preocupes tanto por los indicadores. Unos puntos más o unos puntos menos no te van a permitir conseguir más lectores, más suscriptores o más ventas.
Hay páginas web con índices muy bajos de PageSpeed y que, aun así, aparecen en los primeros resultados de búsqueda. Mientras que hay otros sitios web con puntuaciones de casi 100, y que de casi 100 también es su posición en los motores de búsqueda.
Sin embargo, sé que la tentación de lograr los 100 puntos es grande, y justo ahora estarás preocupado por no poder hacerlo. Así que si tienes alguna duda sobre la configuración de tu site, contacta con nosotros, estaremos encantados de ayudarte.
