PageSpeed Insights: test de velocidad web de Google

Para dar contexto a qué es PageSpeed Insights, lo mejor que podemos hacer es lanzarte una pregunta: ¿conoces esa sensación de estar navegando en internet y decir “Qué lenta va esta web”? Efectivamente, le pasa a cualquiera que haya pasado más de 10 minutos en internet. Esa sensación de querer tirar el móvil o el ordenador por la ventana es absolutamente exasperante para cualquier usuario… y bot.

¿A qué nos referimos con esto? A que Google ve tu sitio web “a través de los ojos de” Googlebot, su araña de rastreo y que ni a bots ni a humanos les gusta una web lenta. Es decir, una web que cargue en más de 3 segundos. La herramienta que Google nos facilita para medir esto, se llama PageSpeed Insights.

WPO: Web Performance Optimization

Antes de lanzarnos a hablar sobre PageSpeed Insights, hay que entender el origen de la necesidad de uso de una herramienta como Google PageSpeed Insights. No tenemos que olvidar que PageSpeed Insights no es más que una herramienta que podemos utilizar al realizar una auditoría SEO y que nos servirá, sobre todo, para detectar aquellos puntos de mejora a aplicar para mejorar nuestro WPO.

Qué es WPO

El WPO, por sus siglas en inglés Web Performance Optimization, hace referencia al conjunto de optimizaciones SEO que podemos hacer en las páginas de nuestro sitio web para mejorar el rendimiento y, por tanto, la velocidad de carga de las mismas.

El WPO cobró especial relevancia en el momento en el que Google puso su foco en la velocidad de carga de los sitios web como parte de la experiencia de usuario de los mismos. De hecho, sabemos que hoy en día, la velocidad es uno más de los múltiples factores que afectan al ranking de nuestras páginas en las SERP.

Es más, con el reciente anuncio (en mayo de 2020) de los Core Web Vitals (traducido por Google como Métricas web principales), esto del WPO sube un punto más en la lista de prioridades de las acciones de SEO On Page de cualquier sitio web ya que han dejado claro que estos Core Web Vitals, pasarán a ser un indicador más en el conjunto de señales que recibe Google para posicionar un sitio web por encima de otro en las SERP.

En resumen, que una web cargue rápido tanto para Google como para los visitantes de nuestra web es fundamental. Sobre todo si navegamos desde un dispositivo móvil que, habitualmente, tiene una conexión más inestable que un ordenador portátil o de sobremesa. Pero… ¿afecta al SEO?

Factores de SEO: WPO, mito o realidad 

Llegados a este punto, es normal pararse y pensar: “vale, pero ¿afecta el WPO al posicionamiento de mi web?” ¿tengo que invertir tiempo en mejorar lo que refleja el test de velocidad web de PageSpeed Insights?

La respuesta es no y sí respectivamente.

No: no afecta directamente al posicionamiento SEO de tu web.

Sí, afecta al rastreo por parte de Google (TTFB) y ayuda a optimizar el Crawl Budget mediante el tiempo de carga del HTML.

EL WPO y la experiencia de usuario

Para Google, la experiencia de usuario prima sobre la velocidad de carga pero la velocidad web es fundamental para tener una buena experiencia de usuario. Por eso, centrarnos en las sugerencias de optimización (WPO) que nos da Google PageSpeed Insights no es suficiente. Tenemos que tener muy en cuenta los Core Web Vitals que mencionábamos anteriormente para conseguir que esta experiencia de navegación sea óptima.

Google, en un estudio que hizo público en febrero de 2018, nos da algunos datos muy interesantes que demuestran una correlación directa entre velocidad de carga lentas y pérdida de usuarios y, por lo tanto, de conversiones y/o ventas.

Como ves, la optimización de la velocidad web no es moco de pavo. Tiene implicaciones en tu negocio más allá de que la web cargue rápido. Puede afectar a tus visitas y a tu conversión. Antes de pasar a analizar el test de velocidad web de Google PageSpeed Insights , reflexiona sobre lo siguiente:

¿Necesitas acciones WPO para mejorar tu velocidad web?

Test Google PageSpeed Insights 

Ya ha quedado claro que la velocidad web es el tiempo que tarda en mostrarse una página en nuestro móvil u ordenador y que Google tiene una herramienta para testear dicha velocidad: Google PageSpeed Insights. Hagamos un test y veamos qué ocurre.

Test de velocidad web. Resultados y acciones:

Antes de comenzar a corregir los errores que te da PageSpeed Insights, un par de apuntes:

1. El test de PageSpeed Insights se realiza de forma individual por cada URL del sitio. Es decir, no vale solo con analizar el dominio principal. Cada página cuenta y Google la analiza de forma individual (lo veremos más adelante en la captura de Google Search Console).
2. Es posible que algunas puntuaciones de PageSpeed Insights varíen según el momento en el que las realices y la carga que tenga el servidor en el que se aloja tu sitio web. Si utilizas un servidor compartido (la mayoría), puede haber otros sitios web dentro del mismo que estén haciendo un uso intensivo de los recursos del servidor. Esto afectará puntualmente al rendimiento de tu web.
3. No te obsesiones con obtener una puntuación de 100/100 en PageSpeed Insights. La web tiene que cargar lo más rápido posible, pero el esfuerzo de subir de un 90 a un 100 puede no merecer la pena si la web carga en un tiempo inferior, por ejemplo, a un segundo. 

Test de velocidad web

Para realizar un test de velocidad con Google PageSpeed Insights, hay que acceder a la página del test de velocidad web, y una vez allí, escribir o pegar la URL que se quiere analizar. El test de velocidad se realiza, de forma simultánea, para la versión móvil y para la versión de ordenador. En cada caso, el resultado es distinto. El criterio de análisis cambia en cuanto a la mayor o menor exigencia que se le aplica al test de cada dispositivo.

El tipo de acceso, desde redes de datos móviles o wifi, al igual que la velocidad de procesamiento del navegador o la ubicación desde la que se accede, determinan la velocidad de renderizado. Sin embargo, al realizar el test a través de PageSpeed Insights, el renderizado del sitio web se realiza desde los servidores de Google.T

La experiencia de navegación del usuario está determinada entre otras por la velocidad de carga (peso de la web) y la usabilidad del contenido mostrado. Por eso los resultados para cada tipo de dispositivo pueden variar mucho.

Veamos un ejemplo de test de velocidad de carga de una web:

Test de velocidad web Móvil

Tal y como muestra la imagen superior, el resultado para el test de velocidad web en su versión de móvil, arroja un valor de 21 sobre 100. Es un valor comprendido entre los negativos (0-49: rojo). Gracias al test de Google PageSpeed Insights, queda en evidencia que la versión móvil de esta web, necesita mejoras sustanciales. 

Veamos qué resultados arroja el test de velocidad de carga web en su versión Desktop o de ordenador.

Test de velocidad web Ordenador

En el caso del dato de velocidad de carga web que nos da la versión de ordenador de PageSpeed Insights que muestra la imagen superior, el resultado para el test de velocidad web, arroja un valor de 61 sobre 100. Es un valor comprendido entre los medios (50-89: naranja).

Comparándola con la versión de smartphone de la web, es un resultado que deja a las claras que tanto a la hora de cargar la página como la experiencia de usuario servida al visitante, es mejor, o en todo caso, el test de velocidad web es más permisivo con la versión de ordenador.

Rango de valores de Test de velocidad de PageSpeed Insights

• 0 a 49 (rojo): pobre
• 50 a 89 (naranja): necesita mejorar
• 90 a 100 (verde): bueno

Si nos fijamos en los rangos delimitados para la puntuación de PageSpeed Insights, queda claro que el tramo de puntuación idónea es muy exigente y que los sitios deben esforzarse por obtener una buena puntuación (entre 90-100). Para ello, deben proporcionar la mejor experiencia de usuario a la que la web pueda aspirar. Queda claro que lograr una puntuación «perfecta» de 100 en PageSpeed Insights es extremadamente difícil. De hecho, según el propio Google, aspirar a un resultado de entre 99 a 100 implica una inversión de mejora técnica similar a la inversión necesaria para lograr mejoras en el rango de 90 a 94. Casi nada.

Resultado de test de velocidad web

Una vez mostrados los resultados a grandes rasgos, el test de velocidad web de Google PageSpeed Insights nos da parámetros más específicos (siempre con diferencias para cada dispositivo). Para ayudar a entender dónde incidir o invertir más tiempo en las mejoras, crea un rango de prioridad dividida por colores:

Analicemos los resultados obtenidos

Datos de campo

Los datos de campo se basan en la experiencia de usuario de Google Chrome. Tiene en cuenta parámetros como el FCP y el DLC. Dependiendo del resultado de estos parámetros los conclusiones pueden ser:

• Rápida: todas las métricas de una página se encuentran en el tercio más rápido.
• Lenta: alguna métrica de una determinada página está en el tercio más lento.
• Normal: el resto de los casos.

Origin Summary

En este caso no tenemos resultados. Pero ¿qué datos refleja este sumario?

El sumario de origen resume la experiencia de usuario. Es un análisis que cubre todo su sitio web, lo que implica que PageSpeed insights ​​recopila datos para toda la sesión de navegación del usuario.

Datos de experimentos (Rendimiento)

El análisis de rendimiento de la web se divide el los siguientes 6 parámetros. Veamos cuales son.

• Primer renderizado con contenido:
  Cuando un usuario llega a tu página web, su navegador comienza en la parte superior del código de la web y lee de arriba a abajo. A ese primer “pintado” del contenido se le denomina First contentful Paint (FCP).

En este proceso encontrará código variado como CSS o JavaScript. Pondrá en espera dicha lectura para descargar y procesar esos archivos de código. El tiempo de pausa usado para descargar y analizar podría ser usado para cargar la parte del contenido de la web que es visible nada más aterrizar alguien en la URL.

• Índice de velocidad:
  El índice de velocidad, mide la rapidez con la que se muestra visualmente el contenido durante la carga de la web. PageSpeed Insights (a través de tecnología Lighthouse) hace una captura de video de la carga de la web en el navegador. Después, calcula la progresión visual de fotogramas haciendo una comparativa. Gracias a dicha comparativa y a un rango de valores propios, genera la puntuación del índice de velocidad.
  
• Largest Contentful Paint:
  La métrica de Largest Contentful Paint (LCP) indica el tiempo de representación gráfica (“pintado” o “pintura” en pantalla) del elemento más grande que es visible dentro de la pantalla.
  
  Por mor a la experiencia de usuario, las webs deben lograr la el “pintado” del elemento gráfico más grande se produzca dentro de los primeros 2,5 segundos desde que la página comienza a cargarse. Un buen resultado de este índice ronda el valor 75 tanto para dispositivos móviles como para escritorio.
  
• Tiempo hasta que está interactiva (TTI):

Hora de interactuar. Algunos sitios optimizan la web dando importancia a la visibilidad del contenido, sacrificando en el proceso la interactividad. Esto puede crear una experiencia de usuario vacía, dado que el sitios es muy bonito pero cuando el usuario quiere interactuar con él, no tiene elementos con los que hacerlo.

Las webs que obtienen una puntuación TTI de noventa y nueve, es por que logran una media de interactividad web de aproximadamente 2.2 segundos. Es decir: si el TTI de tu sitio web es de 2.2 segundos, obtendrás un TTI de 99.

• Tiempo total de bloqueo (TBT):

El TBT mide la cantidad total de tiempo que una web se bloquea y no responde a la entrada del usuario a dicha web. Esos bloqueos se dan con los clics del ratón, toques de pantalla o pulsados del teclado.

El índice se calcula sumando el tiempo de demora o bloqueo de todas las tareas que se realizan entre el First Contentful Paint (FCP) y Time to Interactive (TTI). Cualquier tarea que en ejecución que se demore más de 50 ms es considerada una tarea de duración larga. La cantidad de tiempo que resta después de esos 50 ms es la porción de bloqueo. Por ejemplo, si Google PageSpeed Insights detecta una tarea de 70 ms de duración, la porción o índice de bloqueo sería de 20 ms.

• Cambios de diseño acumulados:
  ¿Alguna vez has estado leyendo una entrada de blog cuando de pronto se produce algún cambio? Inesperadamente, el texto se mueve que estabas leyendo se ve desplazado y has pierdes el hilo de lectura. O tal vez estabas a punto de pulsar un enlace, pero justo en ese momento el enlace se mueve, ¡y terminas entrando a otro enlace o perdiendo el contexto de donde estabas.
  
  El CLS se mide haciendo la suma total de los cambios de diseño individuales por cada cambio de diseño inesperado. Es decir, sumando la cantidad de versiones posibles de dicha URL provocadas por los cambios de diseño inesperados. ¡Ojo con los anuncios y CTAs agresivos!

No todos los parámetros de medición tienen el mismo peso. Hay factores que tienen más peso que otros. En la siguiente imagen se ve cual es la distribución de peso de cada factor en esta versión de Google PageSpeed Insights (sí, estos pesos han ido variando con el tiempo).

Una vez entendidos los parámetros en los que se basa el test para dar a cada puntuación y lo que implica no obtener buenos resultados en cada caso, observemos las diferencias que muestran las dos versiones del test de velocidad web de Google PageSpeed Insights.

Resultado de test de velocidad web para Móvil:

Como observamos en la imagen mostrada a continuación, los resultados para móvil y para ordenador cambian mucho, ratificando la falta de transigencia por parte de Pagespeed Insights (y LightHouse) hacia las versiones móviles de las webs que incurren en problemas de carga y usabilidad web.

Resultado de test de velocidad web para Ordenador:

Queda patente que las versiones desktop no se incurren en tantos problemas de velocidad y usabilidad. Hay que tener en cuenta que es más fácil distribuir y mostrar el contenido deseado por el usuario cuando tenemos a nuestra disposición un mínimo de ancho y de alto de 1024×768 pixeles (resolución estándar de pantalla, aunque a día de hoy prácticamente todo el mundo navega en pantallas de mayor resolución). Este tipo de dispositivos suelen acceder por redes Wifi, lo que mejora la experiencia en cuanto a velocidad de carga web, en comparación a accesos o visitas realizadas desde datos móviles.

Una vez entendidos los parámetros de rendimiento y observado los resultados obtenidos en dichos índices, es momento de reflexionar sobre qué hacer con todo esto.

Oportunidades

Cómo dar solución a estas indicaciones de Google PageSpeed Insights.

Soluciones para las indicaciones de PageSpeed Insights

• Elimina los recursos que bloqueen el renderizado: los plugins de caché como Autoptimize + Async JavaScript, Cohete WP o LightSpeed caché para WordPress, pueden ayudarte a solucionar este punto. Se trata de hacer que los CSS y JavaScript críticos se caguen lo antes posible, pero el resto, se carguen una vez el sitio web ya esté interactivo para el usuario. 
• Publica imágenes con formatos de próxima generación: utiliza imágenes con formatos JPEG 2000, JPEG XR y WebP que te ayuden a comprimir mejor las imágenes y que éstas se descarguen más rápido. Plugins de WordPress como Express Webp hacen compatible estos formatos de nueva generación con el conocido CMS.
• Codifica las imágenes de forma eficaz: la codificación de imágenes es fundamental para una mejora de la carga de velocidad web. Dejamos información ampliada en el post sobre optimización de imágenes.
• Pospón la carga de imágenes que no aparecen en pantalla: en las últimas versiones de WordPress la carga diferida de imágenes viene activada por defecto. Esto te ayudará, una vez más, a que cargues de forma prioritaria los elementos que el usuario va a ver en el primer pantallazo del sitio web y, que los que estén más abajo (aquellos que necesites hacer scroll para ver), se carguen a posteriori. Si lo que quieres tener un control más exhaustivo, puedes usar plugins de Lazy Load (lazy load wp) o de Caché (Litespeed caché).
• Quita los recursos JavaScript que no se usen: menos es más. Los plugins que modifican el front-end, es decir, la parte visible de la web para los usuarios, tienden a cargar más código del necesario. Por poner un ejemplo, los plugins de formularios de contacto cargan sus scripts y CSS en absolutamente todas las páginas tengas un formulario en uso o no. Si solo tienes el formulario en uso en la URL de contacto, cargar código extra en el resto de URL es innecesario y contraproducente. Para ayudar a controlar y administrar qué código se usa y cual no, Asset CleanUp: Page Speed Booster es una buena solución.
• Elimina archivos CSS sin usar: de esta acción no te libra ni el tato-plugin. Este es uno de los peligros de las plantillas multipurpose. Vienen preparadas con varios diseños para que tú elijas cual quieres. Pero toda esta personalización tiene un coste. Elijas la que elijas, insertarán más estilos de la cuenta, por lo que la única solución que conocemos, es meter mano a la plantilla. No hay plugin para solucionarlo.
• Minifica los archivos CSS: los estilos CSS (estilos en cascada), se ordenan de manera vertical, para la compresión de quien los está creando y quien les quiera modificar a posteriori. Pero los navegadores no necesitan esta comprensión visual del código. La acción de comprimir toda estructura visual, eliminando todos los espacios, saltos de línea, tabulaciones y comentarios hasta crear un fichero de una sola línea (casi siempre) es «minificar» el fichero. Para minificar los archivos CSS, existe la opción de descargar el fichero CSS del servidor y usar un editor de código para modificarla (para volverla a subir otra vez sustituyendo el fichero anterior). En caso de que la web esté realizada con WordPress, la opción de usar plugins de Minimizar CSS (WP Super Minify) o usar plugins de Caché (Total cache, Super caché, LiteSpeed caché) son tan válidas como cómodas.

Algunas consideraciones a tener en cuenta antes de lanzarnos a corregir:

• Todas las recomendaciones que nos aparecen en pantalla son clicables y ofrecen información ampliada si desplegamos cada uno de los encabezados. Esto nos ayudará a entender mejor qué nos quiere decir Google con cada uno de estos puntos de mejor.
• Algunas de las recomendaciones que nos da Google PageSpeed no podremos mejorarlas sin contar con un desarrollador experto. Hay factores que afectan directamente al rendimiento del sitio como la estarán limitadas, en el caso de utilizar un CMS, por la plantilla que tengamos instalada.

Diagnósticos

• Asegúrate de que el texto permanece visible mientras se carga la fuente web: a la hora de maquetar un sitio web, tenemos una variedad impresionante de fuentes que podemos utilizar para dar a nuestra web el aspecto visual que queramos. La desventaja es que si utilizamos fuentes de recursos externos, como por ejemplo Google Fonts, el tiempo en el que carga esa fuente, el texto no estará visible. Esta recomendación está orientada a determinar, mediante CSS «font-display”, una fuente base que se utilizará para mostrar el texto al usuario mientras la tipografía termina de descargarse del servidor remoto.
• Reduce el uso de código de terceros: los códigos de terceros son habitualmente scripts, aunque pueden ser también fuentes o incluso imágenes que solicitamos a servidores de terceros. Son recursos que no están alojados en nuestro propio servidor, por lo que el navegador deberá hacer la solicitud al servidor de turno y esperar a recibir el recurso para poder mostrársela al usuario. Para ayudarnos con códigos de terceros como Google Analytics, Google Ads, Facebook Ads y demás, lo ideal sería utilizar Google Tag Manager para evitar cargar todos estos códigos hasta que el usuario dé su consentimiento mediante el aviso de cookies. Esto hará que gran parte del código utilizado para analítica o marketing se cargue después de que la web esté interactiva. Aunque tiene un coste a tener en cuenta: no recibiremos datos si el usuario no da su consentimiento explícito. Aunque por otra parte, estaremos cumpliendo la ley.
• No usa listeners pasivos para mejorar el desplazamiento: hay veces que la respuesta a las interacciones táctiles como clic o scroll horizontal y vertical hacen que el bloqueo de carga se demore demasiado. A groso modo y dando una explicación de andar por casa, los listeners u oyentes son aquellos scripts que se dedican a analizar estas demoras. Desde hace varias versiones de navegadores, se puede desactivar dichos oyentes para mejorar el rendimiento de demora, declarando dichos listeners como pasivos.
• Publica recursos estáticos con una política de caché eficaz: la caché es una forma estupenda de mejorar la velocidad web y usabilidad de una web. Gracias a plugins de caché como los mencionados en puntos anteriores, podemos establecer fechas de caducidad para recursos estáticos, como las imágenes, que al descargarse en los dispositivos de los usuarios, no tienen que volver a descargarse cada vez que cambian de página dentro del mismo sitio. Un ejemplo claro de esto es el logo o las hojas de estilos comunes a todo el sitio web. 
• Minimiza el trabajo del hilo principal: los sitios web pueden utilizar código JavaScript que permita realizar cálculos “al vuelo”. Es una forma muy buena a nivel de diseño de conseguir estructuras más complejas, pero requiere que los navegadores realicen análisis, compilación y ejecución de JavaScript, lo que hace que la carga del sitio se pare un tiempo hasta que el navegador ha realizado todo este proceso.
• Evita encadenar solicitudes críticas: un código limpio favorece la velocidad web, y lo mismo pasa con la cantidad de solicitudes que tiene que hacer el navegador al servidor. Reducir la longitud de las cadenas, disminuir el tamaño de los recursos o posponer la descarga de recursos no necesarios hasta que lo sean, puede ayudar mucho a la velocidad web.
• Reduce el número de solicitudes y el tamaño de las transferencias: se trata de reducir las solicitudes http de tu web. Para que la experiencia de usuario sea la mejor posible en la parte visible de la web, en el backend o trastienda de tu web se realizan y procesan una cantidad de solicitudes de información que no se contemplan salvo que se ponga el foco en ellas. A más peticiones realizadas, más demora en la velocidad web. Minimizar el uso de plugins innecesarios y controlar las peticiones que se hacen en cada URL es vital para no incurrir en exceso de peticiones.
• Largest Contentful Paint element: esta sugerencia, introducida recientemente en los Core Web Vitals y no existente en Google PageSpeed Insights hasta hace poco, marca el tiempo en el que el navegador pinta el texto o imagen más grande. Por ahora, y hasta que Google no incorpore los Core Web Vitals a su algoritmo principal, Google PageSpeed Insights únicamente nos mostrará el dato sin decir si es algo a corregir o no.
• Avoid large layout shifts: hace referencia al cambio de diseño que se da una vez el navegador ha descargado todos los estilos y JavaScripts y puede renderizar el diseño final. En la medida de lo posible, mostraremos este diseño final sin cambios de interfaz radicales desde el principio.

Auditorías aprobadas

• Usa un tamaño adecuado para las imágenes: trata de que el tamaño del hueco destinado para contener una imagen, lo ocupe una imagen que tenga las mismas dimensiones que el hueco. Nunca más. Si quieres saber más sobre este tema, te dejamos más info en la entrada específica de la optimización de imágenes para mejorar la velocidad web.
• Habilita la compresión de texto: la utilización de sistemas de compresión como Gzip, deflate o Brotli ayuda mucho a reducir el peso de la información en tránsito desde el servidor a tu navegador. A menos peso mayor velocidad web.
• Establece conexión previamente con los orígenes necesarios: para un mayor rendimiento en las consultas realizadas, tratar de establecer conexiones previas con los elementos clave de la BBDD, ayudan a realizar el resto de consultas con mayor agilidad.
• Initial server response time was short: hace referencia a la primera respuesta o respuesta inicial del servidor. Si su tiempo de respuesta es corto, ayuda en el primer renderizado y en el “pintado” del contenido más largo de la URL. Cuanto más rápido sea la respuesta inicial del servidor (capacidad de reacción), mayor será la velocidad web. El Time to First Byte (ttfb) es clave en este asunto. Revisar y preguntar cuál es el TTFB del servidor contratado es indispensable para saber si es suficientemente rápido o en consecuencia, si tenemos que cambiar a un servidor con una capacidad de reacción a la primera petición más rápida.
• Evita que haya varias redirecciones de página: las redirecciones 301 y redirecciones 302 son uno de los recursos más importantes con los que contamos cuando hacemos cambios importantes en nuestra web. Sirven para evitar llevar a los usuarios a error y para redirigir las URLs indexadas en Google a una nueva URL si hemos decidido cambiar la estructura de cualquier recurso por cualquier motivo. Pero deberían usarse únicamente para hacer este tipo de correcciones desde sitios de terceros al nuestro. No dentro de nuestro propio sitio web donde tenemos el control absoluto para cambiar la URL en cuestión y evitar retrasos adicionales antes de que la página se pueda cargar.
• Carga previamente las solicitudes clave: la carga de recursos se realiza de forma secuencial, de esta forma, los recursos que estén más abajo en el código fuente, se cargarán más tarde que los que aparecen arriba del todo. Si tenemos un recurso que es importante en el primero de los casos, podemos darle prioridad con <link rel=preload>. Una vez más, es una solución a nivel de código de plantilla.
• Usa formatos de vídeo para incluir contenido animado: aunque los GIF animados se han apoderado nuevamente de internet, no son el mejor formato para mostrar contenido animado. Si quieres ahorrar peso, te recomendamos que utilices los formatos de vídeo MPEG4 o WebM para incluir animaciones.
• Evita cargas útiles de red de gran tamaño: todos estamos acostumbrados ya a las páginas que utilizan botones de ‘ver más’ o paginaciones mediante números para cargar elementos adicionales. Cargar todos de golpe sería una locura. Por ponerte un ejemplo, imagínate cargar una categoría entera de productos de Amazon de una sola vez
• Evita un tamaño excesivo de DOM: para la interpretación del código de la web por parte de los navegadores, existe una declaración del código que se está usando en la web (DOM). Para evitar ponernos técnicos, diremos que cuanto menos código utilicemos en el DOM y menos modificaciones mediante JavaScript realicemos, más fluido y rápido irá todo. 
• Medidas y marcas de User Timing: existe un script de sincronización de la experiencia de usuario con la web que ayuda a medir el rendimiento de JavaScript de la web. Una vez implantadas las llamadas necesarias en el Javascript de la web, es fácil extraer datos detallados del tipo de navegación realizada y el tiempo en la carga de recursos. Así se puede optimizar la carga del código relacionado con la visita del usuario.
• Evita document.write(): es posible mediante document.write() inyectar código en un punto concreto del código. Habitualmente podremos hacerlo directamente a través del HTML evitando el procesado de JavaScript que ralentice la carga del sitio.

Factores WPO a tener en cuenta para mejorar la velocidad web

Hay muchos más factores de WPO de los que nos cuenta PageSpeed Insights que pueden ayudar a mejorar la velocidad web. Independientemente de que PageSpeed Insights no nos indique todos los factores que determinan la optimización web, os dejamos un listado de algunos de los factores WPO más importantes.

• El servidor utilizado (discos SSD).
• Compresión Gzip.
• HTTP/2.
• Activación de la memoria Caché.
• Carga del código Javascript al final.
• Comprimir archivos CSS, JS, HTML y combinarlos.
• Usar CDN.
• Optimizar las imágenes.
• Cargar las imágenes con Lazy Loading.
• Combinar imágenes en Sprites.

Resumen de tipos de plugins que te ayudarán a mejorar tu velocidad web:

Os dejamos un listado de plugins de WordPress que resultan útiles a la hora de subsanar posibles errores de carga:

• Plugins de caché
• Plugins de optimización de BBDD
• Plugins de Carga diferida (Lazy Load)
• Plugins de Optimización de Imágenes
• Plugins de Administración de scripts de segundo plano

Test de velocidad web: herramientas de WPO alternativas a PageSpeed

Hemos analizado Google PageSpeed Insights por ser una de las más conocidas y por ser propiedad del motor de búsqueda más utilizado del mundo y al que habitualmente nos referimos cuando hablamos de SEO. Sin embargo, el mercado está lleno de soluciones alternativas como las que te proponemos a continuación y que puedes utilizar para analizar la velocidad web de tu sitio.

Fast or Slow	https://www.fastorslow.com/
Free Website Speed Test Tool	https://www.isitwp.com/free-website-speed-test-tool-for-wordpress/
Google LightHouse	https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
Google PageSpeed Insights	https://developers.google.com/speed/pagespeed/insights/
Google Test my site	https://www.thinkwithgoogle.com/intl/es-es/feature/testmysite/
GTmetrix	https://gtmetrix.com/
MetricSpot	https://metricspot.com/
Pingdom Tools	https://tools.pingdom.com/
SEO Spyder Monkey	http://www.seospidermonkey.com/
StatsCrop	https://www.statscrop.com/
UpTime	https://uptime.com/freetools/website-speed-test/162012/zeromoment.marketing
Web Stats Domain	https://webstatsdomain.org/
Web.dev	https://web.dev/measure/
WebPageTest	https://www.webpagetest.org/
Woorank	https://www.woorank.com/es
Yellow Lab	https://yellowlab.tools/

¿No consigues mejorar tu puntuación en PageSpeed o tu velocidad web?

Tener una web rápida es fundamental para conseguir que tus visitantes y clientes tengan una buena experiencia de usuario y para conseguir aumentar tus conversiones y tus ventas. Si la velocidad web de tu proyecto digital es una patata 🥔 y no consigues que tu web sea todo lo rápida que necesitas para tu negocio o quieres mejorar los valores de PageSpeed Insights, podemos ayudarte 🚀.