100/100 Google PageSpeed con WordPress

En junio de 2017, durante algunas pruebas en WPFormation, me divertí al encontrar lo que algunos consideran el Grial de la optimización, la nota de 100/100 en Google PageSpeed con WordPress !

Por lo tanto, este artículo es una cuenta de las optimizaciones y ajustes que hice para obtener este resultado.

Nota : Estas optimizaciones son específicas de WPFormation y no todas podrán aplicarse a sus respectivos WordPress, todo depende de su tema, sus complementos, su alojamiento y el uso o no de un CDN

Google pagepeed mobile

100/100 en móvil

computadora google pagepeed

100/100 en computadora

Google PageSpeed qué es ?

La herramienta Página de Speed Insights medirlos rendimiento de la página en dispositivos móviles y de oficina. Explora la URL dos veces, una con un agente de usuario móvil y otra con un agente de usuario de oficina.

El puntaje PageSpeed varía de 0 a 100 puntosCuanto mayor sea el puntaje, mejor será el rendimiento y. una puntuación de 85 o más indica que la página se está ejecutando bien.

PageSpeed Insights mide cómo se puede mejorar el rendimiento de la página en términos de:

  • tiempo de carga del contenido sobre la línea de flotación : tiempo transcurrido entre el momento en que un usuario de Internet envía una solicitud para una nueva página y el momento en que el navegador muestra el contenido sobre la línea de flotación.
  • Tiempo de carga de página completa : tiempo transcurrido entre el momento en que un usuario de Internet envía una solicitud para una nueva página y el momento en que el navegador muestra la página en su totalidad.

También puede medir la dimensión “moviéndose amigable“Al probar la nueva herramienta puesta a disposición por Google : https://testmysite.thinkwithgoogle.com/

100 google pagepeed WordPress

Recomendaciones de Google PageSpeed

Esto es lo que necesita implementar para todos sus sitios web:

Se asigna un indicador de prioridad a cada sugerencia para indicar su importancia:

google pagepeed OK

Pruebas de velocidad adicionales

Más allá de la calificación de Google PageSpeed, el sitio también ha sido probado con las siguientes herramientas para medir la velocidad de carga promedio del sitio:

Descripción del entorno WPFormation

Antes de comenzar, veamos qué entorno está activando el sitio WPFormation :

  • Servidor dedicado optimizado por WPServeur
  • CGI con Apache
  • Versión de PHP 7.0.19
  • Wp_memory_limit: 256Mo
  • CDN por KeyCdn
  • SSL Comodo
  • CDN por KeyCdn
  • Servidor oculto + WPRocket
  • 38 complementos instalados + 7 mu-plugins
  • Tema utilizado Voz por meks

El servidor dedicado y su administración, el uso de un CDN tienen un costo significativo. Los certificados SSL pueden ser gratuitos gracias a Let’s Encrypt y la mayoría de los anfitriones lo ofrecen hoy.

Técnicamente, se pueden implementar buenas prácticas independientemente de su alojamiento, Google PageSpeed teniendo en cuenta las optimizaciones y no el rendimiento intrínseco del servidor.

El único valor importante para PageSpeed en el lado del servidor es el tiempo de respuesta del servidor (puede medirlo aquí) y a veces puede ser bastante largo. En este caso y si esto se repite con demasiada frecuencia, recibirá el mensaje de advertencia anterior, para optimizar tendrá que considerar cambiar el servidor.

respuesta del servidor del tiempo

El tiempo de respuesta de su servidor no debe exceder los 200 msHay docenas de factores potenciales que pueden retrasar la respuesta de su servidor, como la lentitud de una lógica de aplicación, consultas de bases de datos, enrutamiento, marcos, bibliotecas o recursos o memoria de procesador insuficientes.

logo wordpress adation wpserver

Al principio !

Antes de buscar 100, atribuí una importancia moderada a la velocidad de carga y las buenas prácticas impuesto recomendado por Google PageSpeed Insights, que mientras no pasara un segundo cargando la casa, todo estaba bien !

Aquí están las áreas de mejora que PageSpeed me dio:

Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison
Votre page contient 10 ressources de script et 4 ressources CSS qui bloquent l'affichage de votre page, et donc le retardent.
Aucune partie du contenu situé au-dessus de la ligne de flottaison sur votre page n'a pu être affichée avant que le chargement des ressources suivantes n'ait été terminé. Essayez de différer le chargement des ressources qui bloquent votre page, de les charger de manière asynchrone, ou d'intégrer les parties essentielles de ces ressources directement dans le code HTML.

Exploiter la mise en cache du navigateur
Si vous définissez une date d'expiration ou une durée de validité maximale pour les ressources statiques dans les en-têtes HTTP, vous indiquez au navigateur d'aller chercher les ressources déjà téléchargées sur le disque local plutôt que sur le réseau.

Optimiser les images
En choisissant un format approprié pour vos images et en les compressant, vous pouvez libérer de nombreux octets de données.

Estas son algunas cosas que deben hablarse con muchos de ustedes;)

Por lo tanto, mi índice Google PageSpeed fluctuó silenciosamente entre 80 y 90 para computadoras y 60 y 70 para móviles, dependiendo de los complementos que instalé o desinstalé.

WPF-may-do mejor

Optimizamos las imágenes

Lo primero y más simple es optimizar imágenes : Tamaño, peso, compresión.

El peso de una imagen es, de hecho, el tamaño del archivo de imagen en bytes (o kilobytes o mega bytes) calculamos lo siguiente: el peso de una imagen en bytes es igual al número de píxeles que componen la imagen multiplicado por el número de bytes que compone un píxel.

Las ponderaciones y los tamaños no son necesariamente inseparables, la resolución deberá tenerse en cuenta. Así que puedo configurar perfectamente una imagen de fondo muy amplia con un peso de suma muy modesto.

Qué interés también poner imágenes en un ancho superior a 3000px ? No ! La mayoría de las pantallas de sus visitantes se convierten en 15, 17 y 19 “, sin mencionar a los usuarios de tabletas, teléfonos.

Por optimiza tus imágenes en WordPress, Le aconsejo que lea los siguientes artículos:

compress-image-wordpress

Explotar el caché

De este lado, solo Analytics y algunos recursos externos raros fueron problemáticos para mí.

https://connect.facebook.net/fr_FR/sdk.js (20 minutes) P'tain 20mn j'y crois pas !
https://api.optnmstr.com/v1/optin/ (délai d'expiration non spécifié) Arghhhhh quelle horreur ce truc ^^
https://www.google-analytics.com/analytics.js (2 heures)

Sabiendo que no tenemos en nuestras manos fuentes que no están en nuestro dominio, Opté por una solución radical : O podría descargar el script Js en cuestión en mi servidor, o lo eliminé por completo.

Para Analytics, el problema ocurre porque su script tiene una vida de caché de solo 2 horas. Google ya ha declarado que no lo hacen No cambiaría eso, lo que nos deja con una advertencia de que no podemos reparar.

Por lo tanto, puede colocar el archivo Js de Google Analytics en su servidor con un script para actualizarlo con una tarea CRON; de lo contrario, se llamará un complemento gratuito de WordPress Host Analytics.js Local quién puede hacer el trabajo (para probar).

velocidad de páginas

Elimine los códigos de bloqueo de JavaScript y CSS

El problema es este : Dado que los archivos JavaScript pueden modificar el HTML de la página, el navegador debe esperar sus cargas completas, antes de mostrar algo al usuario. Los archivos en cuestión pueden vincularse a complementos o incluso a su tema.

De nuevo, Tuve que tomar decisiones y pruebasPor ejemplo, me di cuenta de que mi complemento para compartir. Guerra social (versión pro) no se optimizó (sin embargo / social-warfare / css / style.min.css y min.js ?). En resumen, probé otro complemento para compartir, a saber, Monarch, y por casualidad más que un problema de CSS no optimizado !

Decidí eliminar el diaporama de artículos de la casa que exigía demasiado Js para un UX insignificante. Esta diapositiva ha sido reemplazada ventajosamente por una simple caja que muestra los últimos 8 artículos y las ofertas de capacitación de WordPress.

También noté que si colocaba la barra lateral de la página de inicio a la izquierda, recibía un mensaje de advertencia “móvil” con respecto al retroceso / avance adicional en la red para que se muestre la parte sobre la línea de flotación. Al estar puramente relacionado con mi tema, simplemente coloqué esta barra lateral a la derecha permitiendo que el rastreador comience con la columna principal. Problema resuelto;)

contenido visible

Hice esto para cada elemento de bloqueo. Al final, solo reemplacé 2 complementos ventajosamente y solo eliminé uno (adivina cuál;) !

Tenga en cuenta también que el tema premium que uso, a saber Voz, no me planteó un problema importante. No hace falta decir que he cuidado bien mi página de inicio y los elementos que aparecen en ella.

HTML_CSS_JavaScript

El CDN para distribuir la carga y más !

Yo uso un CDN para WPFormation. A decir verdad, incluso uso 2 zonas CDN, una para imágenes y la otra para CSS y Js. Entonces creé dos zonas en “tirar” con dos alias a mis subdominios CDN y CDN2.

La razón es simple, solo mira la imagen a continuación para entender. La carga general del sitio se distribuye así en 3 áreas:

área de cdn

En KeyCdn, puedo aplica las siguientes opciones en cada una de mis áreas :

  • GZip y HTTP / 2
  • Caduca y caduca Max
  • SSL (compartido o cifrado)
  • Ignora la cadena de consulta
  • Cookies de caché y cookies de tira
  • y muchos otros …

Esto facilita enormemente la optimización porque puedo trabajar y así actuar en 3 áreas separadas :

  1. mi sitio,
  2. el CDN a cargo de las imágenes,
  3. el CDN2 a cargo del CSS y el JS .

Mi configuración de WP-Rocket

Una vez que me ocupe de las imágenes, el CDN, llega el momento de ocuparse de la configuración del caché. Puedo usar conjuntamente una cubierta del servidor (la carcasa del servidor w) y un complemento de caché (WPRocket, W3Total Cache, Super Cache, etc …) para gestionar el hierro Js, la carga perezosa, la minificación, la concatenación …

WP-Rocket es un complemento de caché premium, hay alternativas gratuitas pero Utilizo WPRocket como prioridad por 4 razones : Es un complemento hecho en Francia, es bastante simple de configurar, es uno de los mejores resultados y es 100% compatible con WPServeur.

wprocket1

  • Opciones básicas : No verifiqué LazyLoad (porque tengo un CDN) o el caché de usuario (para usuarios conectados), sin embargo, todo lo demás está activado. El tiempo de limpieza del caché se establece en 0 (ilimitado).
  • Archivos estáticos : He minimizado todo y he combinado solo el CSS. Excluí 2 archivos Js que se cargan en retraso. Quité las cadenas de consulta de los recursos estáticos. Para que el CSS y el JS bloqueen el renderizado, verifiqué todo y deshabilité el modo seguro (tenga cuidado de verificarlo bien).
  • CDN : Declaré mis dos CNAME, uno para las imágenes y el otro para Js & CSS y no excluí nada fuera del logotipo.
  • Opciones avanzadas : Excluí mi página de conexión y algunas páginas, forcé la purga de mi categoría de WordPress.
  • Base de datos : No uso esta herramienta.
  • Precarga : activado en un automóvil 2s a través de mi sitio web Yoast. precarga de consultas DNS para CDN, Gravatar, estadísticas WP, fuente de Google.

archivos estáticos wprocket

Nota 1: En los archivos estáticos tuve que declarar el Ruta crítica CSS, porque al desactivar el modo seguro tuve un efecto de carga muy desagradable (+ info aquí).

Nota 2: Atención, minificar y combinar CSS y JS a veces puede romper la configuración de su sitio (+ info aquí).

Nota 3: También noté que si trato de configurar LazyLoad para las imágenes (opciones básicas), la nota PageSpeed se degrada.

Luego probé el sitio de un lado a otro para verificar que todo estaba bien y que se mostraba bien en todas las circunstancias, luego rehice mis pruebas de medición, corrigí 2 o 3 pequeñas cosas y listo . Interviní sobre mi tema (a través del tema de mis hijos, por supuesto), para correcciones, pero finalmente no mucho.

100-google-page-speed

Conclusión y última palabra;)

Es largo y tedioso ! Simplemente me divertí y será suficiente para agregar un complemento tambaleante o para cambiar el tema para tener que comenzar de nuevo ^^ Alcanzar la puntuación máxima, es jugable pero implica opciones, entre el UX, funciones adicionales, Js externo … Tendrás que pasar Maestro en el arte del compromiso !

En resumen, si solo necesita recordar una cosa, es solo si su calificación de Google PageSpeed es mayor que 85/100, entonces ya estás bien Presta atención a la nota en dispositivos móviles, Google ya ha declarado que la otorgará! Más importante en el futuro con un bono de SEO y esa sigue siendo la nota más difícil de mejorar.

Nunca descuide los sentimientos en el sitio y la experiencia del usuario El tiempo de carga sigue siendo tan importante, use Pingdom y GTmetrix para comprobarlo. Por ejemplo, el siguiente sitio (probado en Pingdom) que, sin embargo, tiene una velocidad de página de 93/100, carga en promedio en 2.28 segundos. Es demasiado largo !

pingdom vs pagepeed

No es solo Google PageSpeed, también piense en el tiempo de carga !

Espero que este comentario le sea útil, quiero terminar este boleto agradeciendo en particular Benoit de WPServeur por su valiosa ayuda en la creación y Jonathan de WPRocket para apoyar mis estúpidas preguntas, gracias amigos !

Información : Para aquellos que quieran aprender e ir más allá, abordaría la optimización de WordPress y su velocidad con más detalle en mi entrenamiento en línea de WordPress (disponible en 2018).

Aquí hay algunos recursos adicionales útiles:

Te puede interesar:  ¿Qué es el CRON de WordPress? ?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Share This