Google PageSpeed Insights: Cómo aumentar la puntuación de tu WordPress, parte I

PageSpeed Insights es una herramienta de Google para analizar el redimiento de webs en ordenador y móvil. Analiza 10 aspectos de la carga y nos ofrece recomendaciones para aumentar nuestra puntuación. Dicha puntuación (junto con otros muchos factores como la calidad del contenido, etc) influye directamente en el ranking que Google otorga a nuestra web, por lo que es recomendable mantener una puntuación lo más alta posible en nuestro site. Dentro de las cosas que podemos hacer para aumentar nuestra puntuación hay algunas muy sencillas y rápidas (como instalar un plugin de caché) y otras mas complejas que pueden chocar directamente con nuestra forma de trabajo (como incluir los estilos mas importantes inline), por lo que siempre habrá que analizar cada proyecto para evaluar hasta donde podemos/queremos llegar. Además, Google mide 10 puntos, pero hay otras muchas cosas que podemos hacer para que nuestro site cargue más rápido y que veremos en un tercer post. Estos son los 10 puntos que mide Google y algunas posibles soluciones:

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

Este es uno de los puntos más sencillos de solucionar y al mismo tiempo una de los más complejos. Cuando tenemos archivos css o javascript enlazados en el header de nuestra página, esta no se muestra hasta que todos esos archivos no se han cargado. Si embargo, si enlazamos estos mismos archivos debajo de la etiqueta de cierre de nuestro html, la página se mostrará en pantalla (sin estilos ni la funcionalidad de los js), el navegador continuará con la carga de los archivos, y al terminar la carga los aplicará sobre el contenido que está mostrando. Para pasar este punto, basta con que movamos la carga de nuestros archivos externos al pie de la página, pero esto tiene un inconveniente, y es que el usuario verá la página sin estilos por un momento. Pero esto podemos arreglarlo con el punto 2, priorizar el contenido visible.

Prioriza el contenido visible

Cuando un usuario entra en nuestra página, antes de interactuar con ella solo puede ver la parte superior (lo que «cabe» en su pantalla). Así que tiene sentido dar prioridad a la carga de estilos de la parte superior de la página, que es lo primero que el usuario ve, y una vez que el usuario ya está viendo la página, continuar con la carga del resto. Google propone incluir estos «estilos principales» dentro del header de la página, pero no en una hoja externa (lo que chocaría con el punto anterior), si no directamente dentro de una etiqueta style. La solución más simple a la que he llegado para integrar este punto en nuestro workflow es ir poniendo los estilos en una hoja propia, e incluirlos en el header de la página mediante php:

Si ya tenemos hecha nuestra hoja de estilos y queremos averiguar que estilos son los que utilizamos en la parte superior de la página, podemos utilizar alguna herramienta para extraer dichos estilos. Pal Kinlan ha creado este snippet que analiza nuestra página y nos devuelve los estilos prioritarios. Solo tenemos que pegar la función en la consola de Chrome y se imprimirán en pantalla dichos estilos.

Optimizar imágenes

Este punto es de los fáciles, pero se puede complicar bastante según la funcionalidad de nuestro site. Lo podemos subdividir en dos puntos:

Las imágenes deben estar optimizadas para web

Este punto es relativamente sencillo. Para los sprites que conformen el site, debemos comprimir las imágenes desde algún programa de edición de foto antes de subirlas. Por ejemplo en Photoshop, guardar para web, JPG calidad media / alta puede ser una buena opción. Si tenemos PNGs, por ejemplo para nuestros iconos, podemos utilizar la herramienta TinyPNG. Simplemente arrastramos nuestros PNGs y nos descargamos la versión optimizada.

Para las imágenes que sube el usuario (o nosotros mismos) al blog cuando crea los posts, lo mejor es instalar un plugin que haga este trabajo cuando subimos las imágenes a WordPress. Para esto podemos utilizar uno de estos dos plugins:

• EWWW Image Optimizer
• WP Smush

Estos dos plugins comprimen automaticamente las imágenes cuando las subimos a WordPress, e incluso permiten comprimir las que habiamos subido antes de la instalación.

Las imágenes deben cargar al tamaño que las visualiza el usuario

WordPress recorta automaticamente las imágenes que subimos a través del Administrador para crear 4 versiones de la imagen:

• Thumbnail: de 150px x 150px max
• Medium: 300px x 300px max
• Large: 640px x 640px
• Original: Imagen sin modificar

Cuando analicemos el diseño de nuestro site, podemos analizar los tamaños que vamos a necesitar para cada pantalla y modificar estos tamaños o crear unos nuevos. Por ejemplo si detectamos que vamos a necesitar imágenes a 500px x 500px no tiene sentido que hagamos que el usuario cargue una imagen de 640×640. Podemos modificar la versión «large» de nuestras imágenes para el tamaño que necesitamos añadiendo esta linea a nuestro functions.php:

Y después utilizarla con

Ir a la segunda parte del post.