Cómo pasar la prueba de velocidad de Google con Pagespeed Insights

¿Quién quiere esperar años para que se cargue una página? Sobre todo en el móvil. Una buena puntuación en la prueba de velocidad de Google es vital para su sitio.

La velocidad de la página y Core Web Vitals son cruciales hoy en día, y no hay razón para tener tiempos lentos de carga de páginas o sitios web, especialmente con sitios de WordPress.

Si el tiempo promedio de carga de su sitio es de más de tres a cinco segundos usando una prueba de velocidad del sitio web, está perdiendo tráfico. Su tasa de rebote será alta porque los lectores no esperarán y verán una pantalla en blanco.

El rendimiento del sitio web es un factor vital de SEO y lo ayudará a mejorar su clasificación en los motores de búsqueda y su tasa de conversión. De hecho, Google ahora tiene una prioridad móvil de Core Web Vitals para clasificar palabras clave y páginas.

Cómo asegurarte de que tu blog esté actualizado

Muchos factores afectan los resultados de una prueba de velocidad.

Los servicios de Internet que brindan pruebas de velocidad varían de un país a otro o incluso de una ciudad a otra.

Si ha probado su conexión a Internet, sabrá que la velocidad de descarga y carga depende de su proveedor de servicios y la eficiencia de verificar su conexión a Internet y wi-fi.

Sin embargo, con la prueba de velocidad de Google usando Pagespeed Insights, puede obtener una descripción general de su velocidad de descarga y el rendimiento del sitio para los visitantes de su sitio.

No hay necesidad de pensar que llegar a 100 es siempre el objetivo principal. Puede perder mucho tiempo persiguiendo la perfección en el rendimiento web. Pero obtener puntajes verdes es relativamente fácil y significará que su sitio está funcionando bien.

Just Publishing Advice tiene una gran cantidad de funcionalidades, widgets e imágenes incorporados, pero aun así se las arregla para obtener una puntuación muy buena en cuanto a la velocidad del sitio. Aquí hay un vistazo rápido al rendimiento de su sitio.

La puntuación móvil suele ser un poco más baja porque Google reduce el resultado si no usas imágenes en formatos next-gen.

En la actualidad, esta sería una tarea muy grande para cualquier blog, ya que requiere reemplazar cada imagen en su sitio con archivos de imagen JPEG 2000, JPEG XR o WebP. Para la mayoría de los bloggers, puede ignorar esta advertencia y continuar usando archivos de imagen JPEG y PNG.

Cómo probar el rendimiento de la velocidad de su sitio

La prueba de velocidad de Google te da una buena medida aproximada de la velocidad de tu sitio.

También puede verificar el tiempo promedio de carga de su página en Google Analytics. Pero no le brinda la información que necesita para analizar el rendimiento de su sitio en detalle.

Necesita mejores herramientas de SEO para hacer el trabajo.

Si sus datos de laboratorio son todos verdes, está bien. Pero si sus calificaciones son de color naranja o rojo, debe tomar alguna medida.

Según la cantidad de tráfico que reciba, es posible que vea o no su evaluación de Core Web Vitals.

Esto mide los datos reales de velocidad del usuario desde el navegador Chrome.

Es una prueba de aprobación o falla si tiene suficiente tráfico para generar el informe.

Estos informes le brindan orientación sobre dónde puede mejorar el rendimiento de su sitio.

Pero las herramientas de prueba de velocidad de la página de Google no le brindan mucha ayuda para rastrear y solucionar problemas.

Encontrar cómo solucionar problemas

Una forma mucho mejor de verificar la velocidad del sitio es usar GTMetrix.

Es de código abierto y utiliza la puntuación de Google Pagespeed y YSlow de Yahoo, y le brinda mucha más información que Google.

Cuando está monitoreando el rendimiento y midiendo su velocidad, hay dos tiempos que debe verificar.

Si bien la mayoría de los servicios de prueba utilizan el tiempo de carga completa para medir el rendimiento del sitio, no es la estadística más importante.

La medida más precisa en el mundo real de la velocidad del sitio es el tiempo de carga del Modelo de objetos del documento (DOM).

Es el punto en el proceso de carga del sitio cuando una página web está activa para un usuario.

Para mí, esta es la estadística más importante a la hora de medir la velocidad real de una página web.

Puede ver en la imagen a continuación que, mientras que el tiempo de carga completa es de 1,9 segundos, el tiempo de carga del DOM es de solo 1,3 segundos.

Aquí hay otra vista a continuación. La línea roja marcada por la flecha es el punto cargado de DOM.

Puede ver que los elementos que no son necesarios en la primera vista de usuario se cargan más tarde.

Los elementos que se cargan más tarde suelen ser imágenes que se cargan de forma diferida y archivos javascript que se posponen hasta que se necesitan para ayudar a que su página funcione mejor.

Cada vez que revise su sitio, siempre preste mucha atención al tiempo de carga de su DOM porque es una medida mucho más precisa de qué tan rápido es su sitio para un usuario.

Además, realice una prueba dos o tres veces porque las velocidades de Internet varían de un minuto a otro.

Puede obtener una mejor idea promediando sus resultados durante, digamos, una hora más o menos o incluso más.

Todas las pruebas de velocidad de Internet tienen esta variación natural, así que no te preocupes por obtener un mal resultado al azar.

También puede consultar con otros sitios de prueba de velocidad.

Si su sitio no obtiene calificaciones verdes de Google y GTMetrix, aquí hay once formas simples, rápidas y fáciles de solucionar el problema y mantener contentos a los visitantes de su sitio y a los motores de búsqueda.

1. Primero, limpia el desorden de la barra lateral

Lo primero que debes hacer es revisar tu barra lateral. ¿Necesitas todos esos widgets y anuncios? De hecho, ¿realmente necesitas una barra lateral?

Debe pensar en sus páginas como bienes inmuebles de primera.

¿Cuánta área valiosa se desperdicia en su sitio por elementos que tienen muy poco propósito real y ralentizan su sitio?

Una página web desordenada también es difícil de leer porque hay demasiadas distracciones.

La mayoría de los elementos de la barra lateral aumentan la velocidad de carga, por lo que cuanto más puedas eliminar, mejor.

2. Evite el contenido en la página que depende de sitios externos

Uno de los peores delincuentes por ralentizar una página web y fallar la prueba de velocidad de Google es un botón Me gusta de Facebook.

Su página tiene que esperar a Facebook antes de que se cargue. Es un problema común con la mayoría de los widgets de redes sociales y botones para compartir.

Algunos pueden agregar hasta dos segundos o más al tiempo de carga de su página.

Si necesita compartir en las redes sociales, busque un complemento ligero.

Otros servicios de Internet que pueden ralentizar los elementos de su sitio incluyen los anuncios y widgets de Amazon y los anuncios publicitarios grandes de Google.

Si tiene Google Adsense, intente usar anuncios en el artículo en lugar de grandes anuncios publicitarios y establezca su saldo de anuncios en alrededor del 70-80 por ciento.

Al contrario de lo que pueda leer sobre Adsense, no hay una gran carga en un sitio si utiliza anuncios en el artículo.

Aquí hay una página en nuestro sitio con anuncios de Google medidos por GTmetrix.

El efecto sobre el tiempo de carga es mínimo.

Con dos anuncios, el tiempo de carga completa es perfecto en poco más de dos segundos, y el DOM se carga en 1,6 segundos.

Además, los anuncios se cargan tarde, lo que significa que la página no está esperando en Google antes de que se muestre la página.

3. Compruebe si hay archivos javascript lentos

Cada elemento que tiene en su sitio tarda en cargarse.

Llenar su sitio con muchos complementos, widgets y complementos tiene un costo de velocidad enorme.

Aquí hay una evaluación de GTMetrix de un sitio web que realmente necesita atención urgente. Una página que se carga en 12,4 segundos es pésimo hoy.

Puede usar GTMetrix para localizar cada elemento que ralentiza su sitio.

Haga clic en el signo + junto a cada GET para averiguar qué está ralentizando su sitio y qué necesita corregir, eliminar u optimizar.

Un sitio como el de arriba se puede mejorar rápidamente tomando tres medidas muy sencillas.

Los siguientes tres puntos explicarán cómo agregar un caché, minimizar y agregar CSS y Javascript, e imágenes de carga diferida.

Los tres complementos recomendados a continuación son gratuitos.

4. Instalar caché total W3

Hay muchos complementos de almacenamiento en caché muy buenos para WordPress, incluidos WP Super Cache y WP Fastest Cache.

Pero he usado W3 Total Cache durante más de diez años en todos mis sitios.

Hay muchas configuraciones que puede usar con todos estos complementos para aprovechar el almacenamiento en caché del navegador, pero solo hay dos que necesita configurar y usar.

Aquí están los ajustes para Total Cache. Pero son similares para todos los complementos de almacenamiento en caché.

Solo necesitas activar el navegador y la caché de la página.

Estas dos configuraciones acelerarán su sitio al almacenar en caché elementos de su sitio que no cambian, como sus encabezados, pies de página, elementos de la barra lateral y menús.

5. Instalar Autooptimizar

La mayoría de los complementos de almacenamiento en caché también pueden minimizar y agregar Javascript y CSS.

Si bien todos funcionan bastante bien, algunos pueden ser muy complicados de configurar.

Uso Autoptimize para hacer este trabajo porque es más rápido, más fácil de configurar y mucho más eficiente. De hecho, puede configurarlo en menos de un minuto.

Lo que hace es reducir el tamaño de todos los archivos CSS y Javascript y luego los agrega en un archivo CSS y un archivo Javascript.

Luego, estos dos archivos se cargan para que no bloqueen el procesamiento, lo que a menudo es un problema con una prueba de velocidad de Google para algunos sitios.

Minimizar y agregar marcan una gran diferencia en la velocidad de su sitio.

Aquí están las configuraciones que uso para todos mis sitios.

Otra ventaja adicional con Autoptimize es que el soporte es fantástico.

6. Instalar a3 Lazy Load

Cuando un usuario visita su sitio web, todas las imágenes que tiene en una página web deben cargarse antes de que su página se active y pueda ser utilizada por su visitante.

Al usar la carga diferida, todas las imágenes que no aparecen en la pantalla del usuario solo se cargan a medida que se desplazan.

Hacer esto hace una gran diferencia en la velocidad de su sitio porque sus imágenes se cargarán después del tiempo de carga completa del DOM.

Probé algunos complementos diferentes antes de decidirme por a3 Lazy Load. Gana en rendimiento y facilidad de uso.

Una vez instalado, puede usar la configuración predeterminada o puede hacer algunos ajustes.

El complemento cargará de forma diferida todas sus imágenes, videos e iFrames.

7. Instalar WP Rocket

Si desea una opción todo en uno para reemplazar las tres opciones gratuitas anteriores, WP Rocket puede hacer todo y más.

En lugar de tener que usar y configurar tres complementos, puede usar WP Rocket para configurar su página y el caché del navegador, minimizar su Javascript y CSS, así como cargar sus imágenes de forma diferida.

También puede optimizar su base de datos y ofrece integración con Cloudflare.

WP Rocket es una solución económica todo en uno para hacer que su sitio sea ultrarrápido en minutos con muy poco esfuerzo.

8. Cambia el tamaño de tus imágenes

Las imágenes grandes no ralentizan la velocidad del sitio. Pero las imágenes que no tienen el tamaño adecuado para una página web pueden reducir drásticamente la velocidad de su sitio.

Siempre debe cambiar el tamaño de sus imágenes exactamente al tamaño que necesita antes de cargarlas.

Si desea una imagen de ancho completo, debe tener el tamaño del ancho de la página de su blog.

Este sitio tiene 750 px de ancho con una barra lateral de 300 px. Cualquier imagen que sea más ancha que 750px ralentizará el sitio.

Pero nunca ajuste el tamaño de sus imágenes sobre la marcha en su cuadro de detalles de medios. No reducirá el tamaño de su página.

Como puede ver, esta imagen tiene 1218px de ancho. Si selecciona el tamaño Grande , la imagen se ajustará.

Pero en realidad, la página cargará la imagen de tamaño completo de 1218 px y reducirá la velocidad del sitio.

Nunca use el cuadro Detalles de la imagen en WordPress para cambiar el tamaño de sus imágenes de forma perezosa.

Siempre cambie el tamaño de las imágenes antes de cargarlas, de modo que el tamaño completo sea el tamaño real de su imagen en su página.

9. Optimizar imágenes

Smush es un complemento popular para reducir imágenes mediante el uso de compresión con pérdida. Yo uso la versión gratuita, y funciona perfectamente.

Sin embargo, doy un paso más antes de subir una imagen a cualquiera de mis sitios. Uso una pequeña aplicación de escritorio llamada ImageOptim.

Como puede ver, reduce las imágenes con pérdida en alrededor del 80%.

Desafortunadamente, solo está disponible para usuarios de Mac. Si es usuario de Windows, puede utilizar un optimizador de imágenes en línea para obtener el mismo resultado.

También puede leer un artículo anterior sobre cómo reducir imágenes.

10. Usa la CDN de Cloudflare

¿Necesita utilizar una red de entrega de contenido (CDN)?

Eso depende. Una CDN almacena sus archivos estáticos en servidores de todo el mundo para ayudar a que su sitio se cargue un poco más rápido. Si los visitantes de su sitio están lejos de usted, puede ayudar.

Pero si su sitio recibe principalmente tráfico local, no ayudará mucho.

Just Publishing Advice está alojado en Europa, pero un gran porcentaje del tráfico proviene de EE. UU. Entonces tiene sentido usar un CDN.

Si su sitio está alojado en Australia, por ejemplo, y recibe mucho tráfico del Reino Unido y los EE. UU., probablemente desee considerar el uso de una CDN.

Cloudflare es popular, eficiente y gratuito. Así que es una buena elección.

Sin embargo, necesita un poco de habilidad técnica para implementarlo en su sitio.

Puede leer más sobre cómo configurar Cloudflare con WordPress en nuestro artículo de guía práctica.

11. Revisa una vez por semana

Una vez que haya mejorado su sitio con las medidas anteriores, debe realizar una verificación periódica.

Las cosas siempre cambian en un blog, por lo que vale la pena vigilar su desempeño.

Utilizará Pagespeed Insights y GTMetrix la mayor parte del tiempo.

Sin embargo, hay una prueba de velocidad de sitio web gratuita más que puede realizar para comprobar el rendimiento de su sitio en 25 ubicaciones de todo el mundo.

Dot-Com Tools prueba la velocidad de su sitio en tiempo real para que pueda ver cómo califica su sitio.

Es una muy buena herramienta de prueba y una guía si está considerando si un CDN vale la pena para usted.

Cuando realice la prueba, tenga en cuenta que Google recomienda una velocidad máxima de página de carga completa de 3 segundos.

Con WordPress, esto es bastante fácil de lograr si utiliza las sugerencias de optimización de este artículo.

Resumen

¿Necesita hacer todo lo que se indica en esta guía?

WordPress listo para usar generalmente funciona bastante bien en lo que respecta a la velocidad.

Pero si usa un tema lento y agrega muchos complementos y usa imágenes grandes, entonces sí, debería considerar hacer algo de trabajo si su sitio califica mal para la velocidad de carga.

Otra causa puede ser un servidor host poco fiable o lento. Si necesita cambiar su proveedor, un host rápido cuesta solo unos pocos dólares al mes.

Si obtiene una puntuación roja en la prueba de velocidad de Google, entonces definitivamente necesita trabajar con urgencia.

Un consejo es activar un tema predeterminado de WordPress como Twenty Seventeen y volver a probar. La mayoría de los temas ahora son receptivos, pero algunos temas más antiguos pueden causar que la velocidad del sitio sea lenta.

Si su tema está bien, las principales prioridades para mejorar un sitio como el de la imagen de arriba serían:

1. Instale un complemento de almacenamiento en caché.

2. Instalar Optimización automática

3. Instala un cargador diferido

Siga estos tres pasos y el rendimiento de su sitio mejorará al instante.

Para sus imágenes, instalar Smush y luego hacer una optimización masiva también ayudará mucho.

No hay razón para tener un sitio de WordPress lento y fallar la prueba de velocidad de Google.

Si implementa los diez pasos enumerados en este artículo, su sitio pasará la prueba de Pagespeed Insight para dispositivos móviles y de escritorio con facilidad.