Al margen de ser la espinita clavada de numerosos webmasters de WordPress, esta herramienta PageSpeed Insights de Google es igualmente una aliada para la mejora de la velocidad en WordPress.
Estos resultados ya han dejado atrás la teoría, para basarse en información real sobre su rendimiento y tener un efecto real en el sitio, ya un factor de ranking que Google considera para obtener resultados positivos en las plataformas de búsqueda móvil y de escritorio.
A continuación, vamos a explicar los recientes cambios en PageSpeed Insights. Después, explicaremos algunos trucos sobre la aceleración de las páginas web de WordPress que podrás utilizar para mejorar la velocidad y la puntuación de tu sitio web.
Funcionamiento de la Nueva Herramienta PageSpeed Insights para Móviles
Anteriormente, PageSpeed Insights únicamente ofrecía un grupo de sugerencias sobre cómo mejorar su sitio, y su calificación se calculaba en términos de la implementación de dichas recomendaciones. No se incluían en el test de rapidez de la misma datos relativos al rendimiento real.
Esta situación ha variado con la versión actual. Ahora, PageSpeed Insights evalúa su sitio en función de su comportamiento real utilizando una herramienta denominada Lighthouse.
Con la última versión de PageSpeed Insights se han incluido dos tipos diferentes de datos de rendimiento real:
Los datos de laboratorio : son pruebas emuladas para mostrar el periodo de carga de su página web en una red móvil (como la 3G).
Resultados de campo: incorporan datos de usuarios reales y anónimos de Chrome a modo de informe acerca de la experiencia de los clientes de Chrome (CrUX).
Basándose en la velocidad de carga de tu sitio para diversas medidas de rendimiento (cuadro completo), en Google te dan un resultado que sitúa el sitio en uno entre tres grupos:
¿Cómo Acelerar la Velocidad de su Sitio de WordPress Sobre los Dispositivos Móviles?
Es esencial que su sitio esté preparado para recibir la aceleración. Más abajo tienes una guía dedicada a todos los sitios de WordPress.
Los redireccionamientos de un sitio móvil, como el de tu página web, podrían ocasionar un retardo en la visualización del sitio. Lo más sencillo es hacer responsive el propio sitio usando la URL de la página original. Si se trata de tu página, déjala así.
Para activar la compresión, una manera sencilla es agregar los códigos siguientes en el htaccess:
Consiste en fijar una política de caché, si el sitio puede guardar los recursos en la memoria caché o por cuánto tiempo. De acuerdo con Google, se recomienda un mínimo de tiempo de almacenamiento en caché de una semana y de hasta un año para activos estáticos.
El funcionamiento de la caché del navegador se vería así:
Trabajar con la minimización de recursos supone reducir los elementos innecesarios en tu código HTML, código CSS y código Javascript. Se trata de eliminar el tráfico de información que no se usa o de usar una variedad más breve.
Hay herramientas concretas que se usan para un tipo determinado y para WordPress usamos el plugin de memoria caché W3C.
En un sitio móvil, la imagen puede ser el factor más importante de la carga lenta. En realidad, provoca la mayoría de las descargas de bytes, especialmente si no se optimiza para aparatos móviles. Lo fundamental en esto es usar una solución de compresión.
Sencillo truco: para descargar imágenes ya optimizadas basta con recurrir a Google PageSpeed Insights. Y además, cuentas con un bonus: podrás descargar los recursos JavaScript y CSS minificados.
Los archivos de estilo exterior podrían causar retrasos si no se optimizan debidamente, porque pueden influir en la presentación inicial del contenido del sitio. Se recomienda añadir unas pequeñas hojas de estilo externo en el fichero HTML con el fin de optimizar la distribución de CSS.
A continuación se muestra el consejo de google sobre la inserción de un único archivo CSS.
Siempre que el aspecto del documento HTML sea éste:
Y el recurso small.css queda así:
A continuación, inlining el small.css quedaría así:
Los dispositivos móviles no admiten todo el tráfico de los contenidos de los ordenadores de sobremesa. En este caso, es vital fijar prioridades, sobre todo en lo que se refiere a imágenes. Es recomendable restringir el tamaño de tu marcado de HTML, tus imágenes, CSS y Javascript.
En el caso de una moderna plantilla para WordPress, actualmente es lo más sencillo; sólo tiene que esconder las garantías de las instalaciones o el material que no es preciso para los aparatos móviles. Basta con ir a través del menú de opciones responsive.
Aquí la clave es impedir o reducir al mínimo el bloqueo de JavaScript mediante la utilización de inlining. Se aconseja añadir los pequeños javascript exteriores al propio documento HTML.
A continuación, otra guía extraída de Google Page Insights.
Si el documento HTML se parece a lo siguiente:
La apariencia del recurso small.js será como la siguiente:
Introduciendo el javascript tendría el aspecto siguiente:
Conclusión
Hay que prestar especial atención a la optimización de los scripts por parte del servidor y de los navegadores. Google PageSpeed es una excelente extensión de caché de WordPress para la optimización de JavaScript.
Mantener la curiosidad y hacer muchas pruebas distintas para ver qué configuraciones tienen mayor impacto en la optimización de la rapidez de tu sitio web.
