Cómo conseguir 100% en Google PageSpeed Insights

Tiempo estimado de lectura: 15 minutos

¡Hola! En esta ocasión vengo a hablar del análisis de velocidad, de la puntuación perfecta y de cómo conseguir 100% en Google PageSpeed Insights. Sin duda es un tema controvertido, y es que creo que todas las personas que intentamos mejorar nuestro sitio web nos hemos obsesionado con alcanzar la tan ansiada puntuación de 100% (o 100/100), y así conseguir unos sitios con alta velocidad de carga y gran experiencia de usuario.

Pero... ¿Es tan importante esta cifra? Desde una perspectiva más amplia, sería posible una web con un tiempo medio de carga muy bajo (0.4 segundos, por ejemplo) que no consiguiese la puntuación perfecta, aunque muestre el contenido lo antes posible y no existan recursos que bloqueen el renderizado, por lo que tampoco nos podemos fiar al completo de que una buena puntuación sea equivalente a una web rápida o mejor para el usuario final.
Debemos tener en cuenta que la cifra tan sólo es una orientación que nos servirá para medir si lo estamos haciendo bien o mal en cuanto a optimización se refiere.

Desde el año 2018, la velocidad de carga de la versión móvil de la web es un factor de posicionamiento más, por lo que podemos ser penalizados si nuestra web carga extremadamente lento. Es por ello que debemos prestar atención al rendimiento y optimización de nuestro sitio, y ¡espero que esta publicación te ayude a mejorar tu puntuación en Pagespeed!

Core Web Vitals y Google PageSpeed Insights

Las Core Web Vitals son el conjunto de métricas que analiza Google en relación a la experiencia de usuario de un sitio web. Es uno de los muchos factores que afectan directamente al posicionamiento de un sitio web. Si lo unimos al Mobile-First Indexing (MFI), podemos entender que una de nuestras misiones principales para posicionar un sitio web será optimizar la velocidad de carga y la experiencia de usuario de nuestro sitio, sobre todo en su versión móvil.

Podemos analizar las Core Web Vitals analizando nuestra web con Google PageSpeed, aunque también veremos errores en otros lugares como Search Console si necesitamos mejorar en este aspecto nuestro sitio.

First Input Delay (FID)

El First Input Delay (FID) es el tiempo que tarda en responder (medido en milisegundos) un sitio web a la primera interacción del usuario. Por ejemplo, hacer clic en un botón. El zoom o deslizar hacia abajo no está incluido en esta métrica.

Por lo general, es causado porque el navegador está ocupado realizando otras tareas, sigue cargando algún script o estilo del sitio web (o de terceros).

Optimizando el First Input Delay

Aquí tienes algunas recomendaciones rápidas, aunque puedes leer más aquí.

  • Minifica y difiere o pospón tanto el código JavaScript como el CSS. Más abajo te explico cómo hacerlo.
  • Utiliza los mínimos scripts posibles, únicamente los necesarios. Elimina todo aquel que no utilices, o trata de cargarlo sólo en las zonas del sitio donde sean requeridas.
  • Utiliza un buen sistema de cacheo.
  • Si utilizas Page Builders como Divi o Elementor, tu sitio será más pesado de códigos CSS y JS extra. Trata de no utilizarlo en zonas recurrentes, como en barras laterales, cabeceras o pies de página.
  • Utiliza código de terceros sólo cuando sea necesario. Si puedes evitarlo y almacenar localmente los recursos, es la mejor opción.
  • Optimiza el tamaño y el peso de tus imágenes. Utiliza el formato WebP para servirlas siempre que sea posible.
  • No utilices redirecciones innecesarias.

Cumulative Layout Shift (CLS)

El Cumulative Layout Shift (CLS) mide los cambios en tu sitio web mientras está cargando. Penaliza los grandes cambios de diseño. Puede mejorarse y optimizarse:

  • Especifica el ancho y alto de las imágenes, vídeos e iframes (no deberías utilizar iframes). También deberías intentar hacer lo propio con los div.
  • Añade "font-display: swap" al CSS de tu fuente para evitar que el texto no se pueda leer hasta que la fuente no sea cargada.
  • Almacena las fuentes en el servidor. Google Fonts es muy cómodo, pero no es la mejor opción para mejorar PageSpeed.
  • Si utilizas animaciones, especifica sus dimensiones a través de transformación CSS en vez de atributos ancho/alto.
  • Retrasa la carga de códigos JavaScript que pueden ser retrasados (aquellos no imprescindibles por WP u otros Plugins necesarios).
  • Puedes leer más en Web.dev

Largest Contentful Paint (LCP)

El LCP es el elemento más grande de nuestro sitio. El reporte nos mostrará cuál es, y suele ser una imagen de fondo, algún banner o diapositiva, animaciones o vídeos. Podemos hacer algo con este elemento:

  • Precargarlo usando preload (te lo explico más abajo)
  • Comprimir la imagen y utilizar el tamaño óptimo.
  • Servirla a través de CDN, utilizando WebP.
  • Prueba a analizar el sitio activando y desactivando la carga diferida de la imagen o el vídeo. Se supone que la carga diferida es beneficiosa, pero en estos casos lo mejor es comprobar cada caso en concreto.
  • No cargues códigos JavaScript al inicio, retrasa su carga siempre que sea posible.
  • Utiliza CSS crítico y minifica tu CSS.
  • Utiliza preconnect (también más abajo) para cargar recursos de terceros.
  • Puedes leer más aquí.

¿Cómo mejorar PageSpeed Insights?

Pagespeed nos muestra las oportunidades de optimización de nuestro sitio tras realizar un análisis. Para conseguir mejorar la puntuación y conseguir 100% en Google PageSpeed Insights, debemos solucionar todos y cada uno de estos errores o advertencias. Comencemos:

Reducir el tiempo de respuesta inicial del servidor

Éste error es muy frecuente, sobre todo en servidores compartidos, y es causado porque el servidor ha tardado más de 0.2 segundos en dar una respuesta. Esto puede ser debido a que nuestro servidor no cuente con suficientes recursos para procesar las peticiones más rápido, estemos utilizando una versión desactualizada de PHP, o el código de nuestra página web sea pobre en cuanto a optimización.

La solución a esto es instalar un plugin de caché. Los mejores son WP Rocket (de pago, el más completo bajo mi criterio), W3 Total Caché (gratuito), WP Fastest Cache (gratuito, funciona muy bien) o LiteSpeed Cache (sólo si estás usando un alojamiento web con tecnología LiteSpeed).

Si un Plugin no puede solucionar este error, quizá es hora de plantearte cambiar de hosting hacia uno que ofrezca mejores prestaciones. Yo actualmente utilizo Cloudways.

Publica imágenes con formatos de próxima generación

La advertencia es causada por el uso de imágenes con formatos PNG o JPG. La solución más sencilla es utilizar WebP para servir nuestras imágenes, y para ello podemos utilizar un Plugin como Smush, EWWW Image Optimizer o Imagify.
También podemos optimizar nuestras imágenes sin Plugins, utilizando herramientas Online. La mejor (y creada por Google) es Squoosh, donde podremos comprimir (advertencia siguiente) nuestras imágenes y descargarlas en formato WebP (entre muchos otros)

Codifica las imágenes de forma eficaz

El error es causado por utilizar imágenes sin comprimir. Está muy relacionado con la advertencia anterior, por lo que puede solucionarse con los mismos Plugins mencionados en el párrafo anterior, y también con Squoosh. Es una sencilla forma de mejorar PageSpeed.

Elimina los recursos que bloqueen el renderizado

Esta advertencia se debe a que, durante el proceso de lectura del sitio web por parte del navegador (el cual se realiza desde la parte superior hacia la inferior), existen archivos JavaScript o CSS que impiden que el navegador pueda seguir leyendo, debiendo esperar a que estos archivos o recursos sean cargados. Esta espera del navegador se traduce en espera de usuario.

Se soluciona utilizando las etiquetas Async y Defer para los archivos Javascript, y retrasando la carga del CSS que no sea crítico o cargarlo de manera asíncrona. El plugin de caché WP Rocket mencionado anteriormente realiza esta función, aunque también se puede realizar de manera gratuita con LiteSpeed (disponible sólo en algunos servidores), con Asset CleanUp: Page Speed Booster o combinando el plugin Autoptimize con Async JavaScript.

Reduce el contenido JavaScript que no se use

Existen plugins que cargan scripts en nuestra web, incluso en páginas en las que el código no es necesario. Esta advertencia es causada por esto, y puede solucionarse de manera muy sencilla con Asset CleanUp.

Pospón la carga de imágenes que no aparecen en pantalla

Es debido a que el navegador ha tenido que cargar imágenes que no aparecen en el primer vistazo inicial. La solución es cargar estas imágenes de manera diferida, hasta que no aparecen en la pantalla y sean necesarias. WordPress incluyó esta opción en sus últimas versiones de manera nativa, y la mayoría de plugins de caché o rendimiento ofrecen esta opción.

Usa un tamaño adecuado para las imágenes

Para mejorar el tiempo de carga, sobre todo en dispositivos móviles, es importante no usar imágenes con tamaños excesivos. Un Plugin de optimización de imágenes como Smush crea las versiones de imágenes que el tema necesita y muestra, redimensionando así el tamaño y mostrando en cada momento la versión necesaria y adecuada.

Asegúrate de que el texto permanece visible mientras se carga la fuente web

Es causado porque el texto no puede cargarse hasta que no es cargado su estilo CSS, provocando que no sea visible y que el visitante vea una desagradable pantalla vacía hasta que el sitio finaliza de cargar (o al menos carga la fuente).

Su solución está en la característica CSS "font-display". Podemos añadirla a nuestra hoja de estilos CSS editando el código de la fuente, o utilizar plugins. Algunos como los ya mencionados WP Rocket o Asset Cleanup cumplen con esta función.

Los elementos de imagen no tienen width y height explícitos

Esta advertencia es debida a que el código HTML de la imagen que hemos introducido no poseen las medidas de la imagen definidas explícitamente. Podemos solucionarlo en el código de la imagen, aunque plugins como WP Rocket ofrecen esta opción para activar en tan sólo un clic.

Publica recursos estáticos con una política de caché eficaz 

Esta sugerencia obtiene su explicación en el tiempo que el navegador almacena en caché los recursos de nuestra web. Cuanto mayor sea este tiempo, menos recursos necesitará el navegador de nuestro servidor para atender futuras visitas, ya que los tendrá almacenados por más tiempo.

La solución la obtenemos añadiendo el siguiente código a nuestro .htaccess en usuarios con servidores Apache, antes de #BEGIN WordPress o después de #END WordPress

## EXPIRES ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES ##

## CACHE-CONTROL ##
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
## CACHE-CONTROL ##

O, en su defecto, añadiendo el siguiente código al archivo de configuración del servidor para aquellos usuarios de Nginx:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 30d;
 add_header Cache-Control "public, no-transform";
}

location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

Si utilizas Google Analytics en tu web, el tiempo de cacheo de su código JavaScript será marcado como error. Esta incongruencia tiene su solución alojando el archivo JavaScript de manera local (en nuestro servidor). Podemos hacerlo gracias a Complete Analytics Optimization Suite (CAOS) o a Perfmatters.

Minimiza el trabajo del hilo principal

En esta advertencia entra mucho en juego el código JavaScript que estemos usando, bien nosotros con nuestros códigos, o los inyectados a través de Plugins. Utilizar más código supone más trabajo. También supone más carga del hilo principal utilizar muchos códigos CSS para la estética de nuestro sitio web, por lo que es importante buscar un equilibrio entre funcionalidad, diseño y rendimiento.

La solución ante esto es comprobar en el análisis qué código posee una mayor duración (Script, CSS & HTML, estilos...) y buscar la forma de reducirlo, bien sea eliminando Plugins que consuman muchos recursos (valorando la funcionalidad que ofrece y su coste en cuanto a rendimiento) o algunos estilos o animaciones que no sean necesarias.

Utilizar un PageBuilder como Divi o Elementor es una gran contra para esta advertencia, ya que suelen cargar muchos recursos e introducir mucho código innecesario en sus estructuras de bloques. Si quieres utilizar un constructor, plantéate el uso de Oxygen, es sin duda el más liviano y rápido.

Evita un tamaño excesivo de DOM

Muy relacionado con la advertencia anterior, el DOM (Document Object Model o Modelo de Objetos del Documento) es utilizado para cumplir el estándar de documentos HTML, XHTML y XML, creado por el World Wide Web Consortium (W3C).

En otras palabras, es un lenguaje que los navegadores son capaces de entender y utilizan para mostrar la web, cuanto más corto sea el DOM más rápido podrá interpretarlo el navegador.

Se esquematiza en forma de árbol, donde la profundidad de dicho árbol (la cantidad de elementos dentro de otros, y de otros, y de otros...) marcará el tamaño con respecto a su elemento principal.

No existe un tamaño excesivo indicado exactamente, no hay un límite de elementos que se pueden mostrar en una página web, pero si hay algo claro es que a menos elementos más rápido cargará.

Al igual que en el punto anterior, si utilizas un PageBuilder, seguramente Pagespeed marque esta advertencia, ya que suelen utilizar una gran profundidad de elementos aumentando así el tiempo de cálculo de los estilos.

Minimizar CSS

Los archivos CSS sin minimizar suelen tener comentarios, espacios, tabulaciones... Minimizar o minificar el CSS es el proceso por el que eliminamos todo lo innecesario, reduciendo así el tamaño de nuestros archivos y mejorando la velocidad de carga del sitio web. Plugins como WP Rocket o Autoptimize realizan esta función.

Minimizar JavaScript

Al igual que en el punto anterior, podemos realizar el mismo proceso con el código JavaScript, eliminando lo innecesario.

Establece conexión previamente con los orígenes necesarios

Para cargar más rápido los recursos de terceros, podemos utilizar los atributos "preconnect" o "dns-prefetch" para avisar al navegador que deben cargar estos recursos.

Para solucionarlo, puedes editar el archivo header.php de tu tema, añadiendo líneas como la siguiente:

<link rel=“preconnect” href=“linkdelrecurso.com”>

PageSpeed muestra en su análisis los recursos que serían interesantes añadir mediante preconnect.

Si deseas utilizar un plugin, puedes hacerlo con WP Rocket (¿cuántas veces lo he mencionado ya?) y Perfmatters.

Carga previamente las solicitudes clave

De manera algo similar al punto anterior, con "<link rel=preload>" podemos indicar archivos que deben ser cargados dentro de nuestro servidor, porque son claves o críticos para la correcta carga de nuestro sitio web.

Puede añadirse editando el archivo header.php de tu tema, añadiendo líneas como:

<link rel=“preload” href=“example.com”>

Los plugins anteriores también incluyen esta funcionalidad.

Habilitar la compresión de texto

Se refiere a la compresión GZIP de tu servidor. Suele estar activada por defecto en la mayoría de servidores. En caso de que no lo tengas activado, puedes hacerlo añadiendo a tu archivo .htaccess las siguientes líneas (usuarios de Apache):

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

O éstas a tu archivo nginx.conf en caso de utilizar Nginx:

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

También puedes utilizar Plugins como WP Rocket.

¿Te ha gustado? ¡Compártelo!
Artículos relacionados:
logo
Política de Cookies - Política de privacidad
© Copyright 2022 © Adicto al SEO. Creado con  
 desde Toledo.
heartmagnifiercrossmenu-circle