Cómo aumentar la puntuación de Google PageSpeed ​​de su sitio web de WordPress

Entonces, te has topado con el Perspectivas de velocidad de página de Google herramienta y están mortificados por la puntuación que ha recibido su sitio web.

¡No estás solo y hay esperanza! Google ofrece guías genéricas sobre cómo resolver algunos de los problemas encontrados con su sitio web, pero dependiendo de la plataforma en la que se haya creado su sitio web y su experiencia en desarrollo web, hay formas muy diferentes de resolver estos problemas.

Este artículo será de gran ayuda para aquellos que tienen un sitio web de WordPress y conocimientos mínimos de codificación. Cubre dos de los factores más importantes para aumentar la puntuación de velocidad de su página:

1. Optimización de JavaScript y CSS
2. Reducción de imágenes

Siguiendo los pasos establecidos en esta serie de artículos, pude mejorar nuestro puntaje de Velocidad del sitio móvil Google PageSpeed ​​de 62 a 95 y nuestro puntaje de Sugerencia de escritorio de 72 a 85.

¿Por qué debería preocuparme por mi puntuación de Google PageSpeed?

Gran pregunta. Google anunciado en 2010 que la velocidad de su sitio web es parte del algoritmo para determinar el ranking de Google de su sitio web.

Google también anunciado recientemente que pronto también tendrán en cuenta la velocidad del sitio móvil en sus clasificaciones.

Si la velocidad del sitio es importante para Google en su clasificación en los motores de búsqueda, entonces debería ser importante para usted.

La herramienta PageSpeed ​​Insights de Google le brinda, bueno, información sobre cómo acelerar su sitio.

Si ejecutó Google PageSpeed ​​Insights en su sitio y recibió una puntuación abismalmente baja, ¡está en buena compañía!

La herramienta PageSpeed ​​Insights de Google es un excelente lugar para comenzar a determinar posibles mejoras en la velocidad del sitio web, pero tenga en cuenta que no es el único analizador de velocidad de la página y no debe considerarse la fuente definitiva de la verdad.

De hecho, si ejecutó Google PageSpeed ​​Insights en su sitio y recibió una puntuación abismalmente baja, ¡está en buena compañía!

Consulte la puntuación de PageSpeed ​​para Twitter, Facebook y Mashable. En el momento de escribir este artículo, los 3 de estos sitios tienen una puntuación de velocidad móvil de 60 o inferior.

De hecho, generalmente se reconoce entre los webmasters que Google PageSpeed ​​no es la mejor vara para medir la velocidad real de una página. Es importante (¡y útil!) ejecutar pruebas en otros analizadores de sitios web también. ^{1 , 2}

Estos son algunos de los mejores analizadores de velocidad de sitios web que he probado:

1. GT Metrix
2. Prueba de página web
3. Pingdom
4. Mostrar lento

Algunas notas importantes antes de comenzar

1. La mayor parte de esto fue MUCHO de prueba y error. Pasé mucho tiempo probando mi sitio para asegurarme de que aún funcionaba después de cada cambio, y volví a ejecutar PageSpeed ​​Insights después de cada cambio para ver qué marcaba la diferencia.
2. Mi configuración (cuanto más se acerque su configuración a esto, más útil será probablemente esta guía para usted):
   1. Usando WordPress
   2. Usando Control deslizante de revolución
   3. Uso de fuentes de Google
   4. Usar WPEngine como mi host, lo que restringe algunos complementos: no puedo usar "W3 Total Cache" o "WP Rocket", que es ampliamente recomendado por la comunidad en línea para resolver problemas de PageSpeed.

Guía para optimizar JavaScript y CSS en un sitio web de WordPress

Si ha recibido las siguientes advertencias de las estadísticas de Google PageSpeed, estamos aquí para ayudarlo:

Elimine el JavaScript que bloquea la visualización y el CSS en el contenido de la mitad superior de la página.. Esto provoca un retraso en la visualización de su página.

Optimice la entrega de CSS de lo siguiente..

Quitar el JavaScript que bloquea el renderizado..

Los dos factores más importantes para reducir el tiempo que lleva cargar JavaScript y CSS son:

1. Combinar los scripts en la menor cantidad de archivos posible

Los sitios de WordPress son especialmente susceptibles de cargar muchos scripts al cargar la página. Esto se debe a que los complementos y los temas a menudo tienen sus propios scripts que deben cargarse para funcionar.

En un sitio web más tradicional, el desarrollador tendría más control sobre estos scripts y los combinaría manualmente para reducir la sobrecarga al cargar la página.

2. Aplazar la carga de scripts “no críticos”

Esto a menudo implica mover guiones al final de la página. Cuando un navegador está cargando su página, normalmente carga cosas en paralelo hasta que encuentra un script. No se puede cargar nada más mientras se carga un script.

Una vez que el script termina de cargarse, el sitio web puede continuar procesando todo lo demás. Puede ver cómo, especialmente si tiene muchos scripts, esto realmente puede afectar la rapidez con la que se cargará su página.

Pasos para resolver el error de PageSpeed ​​"JavaScript y CSS que bloquean el procesamiento"

Nota: Estamos abordando JavaScript y CSS a la vez porque la mayoría de los complementos creados para resolver estos problemas abordan ambos.

Paso 1. Resuelva cualquier script de complemento que bloquee el renderizado ajustando la configuración del complemento, si es posible

Comience analizando la lista de secuencias de comandos que bloquean el renderizado que Google PageSpeed ​​le proporciona y determine si alguna de estas secuencias de comandos parece provenir de un complemento.

Si puede identificar algún complemento de la lista de secuencias de comandos, vaya a la configuración de cada complemento, uno por uno, y busque una configuración que aplace el JavaScript o lo cargue de forma asíncrona.

Si no puede identificar ningún complemento de la lista de scripts, o si no tiene ninguna de estas configuraciones de complemento disponibles, continúe con el paso 2.

Cambios en la configuración de Revolution Slider:

En mi configuración, noté que mi complemento "Revolution Slider" tenía varios JavaScripts listados como bloqueadores de procesamiento.

Busqué en la configuración de Revolution Slider opciones para cargar el JavaScript de forma asincrónica o diferirlo. Estas son las opciones que terminé usando:

1. En Slider Revolution "Configuración global":
   • Incluir bibliotecas RevSlider globalmente: ON (mi control deslizante se rompió si ajusté esto en OFF, pero podría valer la pena intentarlo en su configuración)
   • Insertar JavaScript en el pie de página: ON
   • Aplazar la carga de JavaScript: DESACTIVADO (nuevamente, esto rompió mi configuración si lo encendía, pero podría valer la pena intentarlo)

2. En cada configuración de presentación de control deslizante individual, configuro lo siguiente:

• En el panel de Optimización de rendimiento y SEO:
  • Carga perezosa: inteligente

• En Manejo de problemas: solución de problemas
  • JQuery Modo sin conflicto: APAGADO
  • Poner JS incluidos en el cuerpo: APAGADO
  • Protección de filtros de salida: ninguna
  • Modo de depuración: APAGADO

3. ¡Después de cambiar la configuración de los complementos individuales, asegúrese de borrar su caché y probar mucho! No quieres que algo se rompa en tu sitio.
4. Consulta las estadísticas de PageSpeed. Hacer estos cambios en Slider Revolution ayudó a reducir la cantidad de secuencias de comandos que bloqueaban el procesamiento que tenía nuestro sitio, pero aún necesitaba la ayuda de otros complementos para limpiar todo lo demás.

Paso 2. Combine los archivos JavaScript y CSS en un solo archivo (uno para JS y otro para CSS) y minícelos

¡Uso un complemento que hace este trabajo por mí! Este complemento combina con éxito todos mis scripts CSS en un solo archivo y lo minimiza, y hace lo mismo con mis archivos JS.

• Instala el complemento” Optimizador de secuencias de comandos JS CSS ” y compruebe los siguientes ajustes:
  • Habilitar el complemento
  • En la configuración de JavaScript, seleccione lo siguiente
    • Empaquetar JavaScripts: Habilitado
    • Minificador de JavaScripts: Minificar por Steve Clay
    • Combine JavaScripts: combine y mueva todos los JavaScripts al final
    • Ignorar: “jquery.js”

• En la configuración de la hoja de estilo, seleccione lo siguiente:
  • Habilitar el optimizador de CSS: usar el complemento para CSS
  • Combine CSS: combine todos los scripts CSS en un solo archivo
  • Empaquetado de hojas de estilo: Minimizar archivos CSS

• Borre su caché y vuelva a cargar su sitio web para asegurarse de que nada se haya roto.
• Ejecute Google PageSpeed ​​y vea si algo ha cambiado. En mis resultados, esto ayudó a reducir la cantidad de llamadas http, pero PageSpeed ​​aún estaba bloqueado en los archivos JS y CSS que estaban bloqueando el procesamiento.

Paso 3. Resuelva el archivo CSS que bloquea el renderizado

Instala el " Autooptimizar ” plugin y verifique la siguiente configuración:

• Habilitar código HTML optimizado
• NO habilite el código JavaScript de Optimize
• Habilitar código CSS optimizado
  • "CSS en línea y diferido"

• Habilité esta opción; sin embargo, esto requiere un poco de investigación para hacerlo correctamente.
• Esta opción le permite colocar CSS "en la mitad superior de la página" en el encabezado para que se cargue primero antes de cargar el resto del script CSS. Esto permite que el estilo del contenido de la mitad superior de la página se cargue primero para que se muestre lo más rápido posible para el visitante.
• seguí esto excelente guía sobre cómo usar la opción Autoptimize Inline y Defer CSS. Recomiendo encarecidamente seguir esta guía y habilitar esta opción.

• Una vez hecho esto, borre su caché y vuelva a cargar su sitio web para asegurarse de que nada se haya roto. Es interesante notar que habilitar la opción "Optimizar código JavaScript" en mi complemento Autoptimize colapsó por completo mi sitio web, por lo que recomiendo NO habilitar esa función si tiene una configuración similar a la nuestra.
• Ejecute Google PageSpeed ​​y vea si algo ha cambiado. En mis resultados, esto resolvió el archivo CSS que bloqueaba el renderizado en la velocidad de la página móvil. Ahora todo lo que queda es el archivo JS que bloquea el renderizado.

Paso 4. Resuelva el archivo JavaScript que bloquea el renderizado

Para resolver el bloqueo de procesamiento del archivo JavaScript, instale el complemento " Guiones a pie de página.” ¡Simplemente active el complemento y listo! No tiene que editar ninguna configuración. El complemento se habilita automáticamente cuando se activa.

Nuevamente, borre su caché y vuelva a cargar su sitio web para asegurarse de que nada se haya roto.

Finalmente, ejecute Google PageSpeed ​​Insights nuevamente. ¡Esperemos que sus advertencias de "bloqueo de renderizado JS y CSS" ya no estén! Siguiendo los pasos anteriores, se eliminó por completo esta advertencia de nuestro sitio web y se incrementó la velocidad de carga de la página.

El siguiente paso para ver grandes aumentos en el rendimiento de su sitio y mejorar su puntuación de Google PageSpeed ​​es optimizar sus imágenes, ¡lo trataremos en la siguiente sección!

Guía para optimizar imágenes en un sitio web de WordPress

“Optimiza las siguientes imágenes para reducir su tamaño…”

Esta advertencia es bastante directa, ¡afortunadamente! PageSpeed ​​Insights encuentra las imágenes en su página que son grandes y podrían comprimirse, y las enumera por usted.

Comprimir imágenes implica reducir el tamaño del archivo de imagen, sin afectar la calidad de la imagen a simple vista.

Puede comprimir manualmente estas imágenes una por una con un programa de escritorio o en línea, ¡o puede dejar que un complemento lo haga por usted!

Los siguientes complementos son ampliamente utilizados y bien calificados:

• Píxel corto – (cuenta gratuita) 100 imágenes/mes. Sin límite de tamaño de archivo.
• WP-Smushit – (cuenta gratuita) Límite de tamaño de archivo de 1 MB, la opción masiva está limitada a 50 archivos a la vez.
• Optimizador de imágenes EWWW

Después de optimizar las imágenes en nuestro sitio con uno de estos complementos, esta advertencia de Google PageSpeed ​​desapareció.

Formas adicionales de acelerar su sitio web

Si está buscando aún más formas de acelerar su sitio web, dos cosas que podrían marcar la mayor diferencia son:

1. Usando un host de sitio web rápido
2. Uso de una red de entrega de contenido (CDN)

Las explicaciones detalladas de estas dos recomendaciones están más allá del alcance de este artículo, pero para obtener más información, consulte:

https://www.codeinwp.com/blog/best-wordpress-hosting/

http://www.wpbeginner.com/beginners-guide/why-you-need-a-cdn-for-your-wordpress-blog-infographic/

En resumen

Si bien espero que esta guía le haya sido útil, tenga en cuenta que hay muchas configuraciones diferentes en WordPress, y cualquier diferencia en la configuración puede hacer que estos pasos no funcionen para usted. Los mejores resultados pueden venir después de mucho ensayo y error.

Finalmente, si está decepcionado porque parece que no puede obtener su puntaje de Google PageSpeed ​​Insight por encima de cierto punto, recuerde que hay muchos otros puntos de referencia de velocidad y rendimiento de la página.

Ejecute una prueba en su sitio utilizando algunas de las otras herramientas de análisis de rendimiento enumeradas anteriormente en este artículo y vea cómo se clasifica.

Este artículo le ayudo a mejorar su puntuación de Google PageSpeed ​​Insights? ¡Háganos saber su puntaje antes y después en los comentarios!