Optimizando rendimiento de un sitio con PageSpeed Insights

Un importante cliente ha solicitado optimizar el rendimiento de su sitio web utilizando una herramienta de análisis de sitios llamada PageSpeed Insights

¿Qué es PageSpeed Insights ?

PageSpeed Insights es una herramienta para desarrolladores disponibilizada por Google que permite medir el rendimiento de las páginas de un sitio asignándole puntuación de 0 a 100 de acuerdo a los siguientes factores:

  • Tiempo de carga en la mitad superior de la página.
  • Tiempo de carga completa de la página.

Lo primero que hacemos es analizar una página específica del sitio en el que deseamos mejorar el rendimiento. Para ello ingresamos la URL del sitio en la caja de texto destacada en color rojo

Luego presionamos el botón "Analizar" y al cabo de un par de segundos obtendremos un informe con las sugerencias que PageSpeed Insights tiene para mejorar el rendimiento del sitio.

En este caso, PageSpeed Insights indica que el sitio en cuestión tiene un puntaje de 46/100 y para mejorar su rendimiento debemos tomar algunas acciones como :

  • Habilitar compresión
    Comprimir recursos con gzip o con deflate puede reducir el número de bytes enviados a través de la red.


  • Especificar caché de navegador
    Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos indica al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red.


  • Optimizar imágenes
    Formatear y comprimir correctamente las imágenes puede ahorrar una gran cantidad de bytes de datos.


  • Minificar JavaScript
    Compactar el código JavaScript puede ahorrar una gran cantidad de bytes de datos y acelerar los tiempos de descarga, análisis y ejecución.


  • Minificar CSS
    Compactar el código CSS puede ahorrar una gran cantidad de bytes de datos y acelerar los tiempos de descarga y análisis.


Siguiendo las recomendaciones de PageSpeed Insights

Como se puede apreciar en la imagen anterior, la página consultada tiene una puntuación de 46/100. Puntaje muy lejano a los 85/100 para considerar una página de buen rendimiento.

Habilitar compresión

Lo primero que haremos será Habilitar compresión de los recursos utilizando deflate. Esto significa que le diremos al servidor web que comprima algunos recursos antes de ser enviados al cliente. La forma de indicarle esto a Apache es editando el archivo .htaccess en la raíz del sitio y agregando la siguiente directiva:

<IfModule mod_deflate.c> 
    <filesMatch "\.(js|css|html|php|ttf)$"> 
        SetOutputFilter DEFLATE
    </filesMatch> 
</IfModule> 

Así le estamos indicando a Apache "si tienes habilitado el módulo deflate, entonces comprime los recursos js, css, html, php y ttf antes de ser enviados al cliente".

Luego vamos a ejecutar nuevamente el análisis en PageSpeed Insights y ¡sorpresa! ya hemos mejorado la puntación de la página: de los 46/100 puntos iniciales hemos alcanzado 64/100.

Especificar caché de navegador

Existen ciertos recursos en cada sitio web como logos, archivos CSS, js y tipos de letra que no son modificados durante un largo tiempo. Entonces, la idea principal detrás de esta recomendación es aprovechar el almacenamiento en caché de los navegadores evitando la descarga de un recurso que ya existe almacenado localmente.

Lo que haremos será agregar la siguiente directiva al archivo .htaccess de la raíz del sitio:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|ttf)$"> 
        Header set Cache-Control "max-age=604800, public"
</FilesMatch> 

Con esta directiva le estamos diciendo a Apache "cada vez que envíes un recurso ico, pdf, flv, jpg, jpeg, png, gif, js, css, swf y/o ttf añade un header indicando al browser que este no será modificado en un plazo determinado" (max-age=604800 es una semana)

Ejecutando nuevamente el análisis en PageSpeed Insights después de haber agregado esta directiva obtenemos una nueva puntuación de ¡86/100!. Así hemos alcanzado el umbral que Google reconoce como una página de buen rendimiento.

Optimizar imágenes

Una de las recomendaciones que seguir para mejorar el rendimiento de un sitio es optimizar las imágenes cortando espacios innecesarios, reduciendo la profundidad de color a un nivel mínimo aceptable, eliminando los comentarios de las imágenes así como guardándolas en el formato adecuado. Google también recomienda aplicar una optimización avanzada usando algún compresor de imágenes.

Para efectos de este trabajo conocí dos compresores de imágenes: jpegtran para imágenes JPG y optipng para imágenes en formato PNG.

jpegtran

Para mi sorpresa, esta herramienta se encontraba ya instalada en mi Debian así como en el hosting donde mi cliente aloja su sitio. Por lo tanto sólo me quedaba aprender a usarla. La forma de uso de esta herramienta es bastante sencilla. Primero mediante línea de comandos nos dirigimos al directorio donde están las imágenes que deben ser optimizadas, y una vez allí se ejecuta el comando:

jpegtran -copy none -optimize nombre_imagen.jpg > nombre_imagen_optimizada.jpg

Con esto indicamos que se debe crear una copia optimizada de la imagen "nombre_imagen.jpg" y se debe generar un nuevo archivo llamado "nombre_imagen_optimizada.jpg". Ahora, si deseamos optimizar la imagen y dejar el mismo nombre original podemos ejecutar

jpegtran -copy none -optimize nombre_imagen.jpg > nombre_imagen_optimizada.jpg && mv nombre_imagen_optimizada.jpg nombre_imagen.jpg

optipng

Esta herramienta no se encontraba instalada en mi Debian pero felizmente se encuentra disponible en los repositorios, así que la instalé y usé de la siguiente manera:

En línea comandos nos dirigimos al directorio donde se deben optimizar los archivos PNG y una vez allí ejecutamos:

optipng nombre_imagen.png

Esta herramienta tiene la ventaja de poder optimizar varios archivos PNG ubicados en un mismo directorio

optipng *.png

Minificar JavaScript, CSS y HTML

Esta recomendación consiste en minificar los archivos CSS, JavaScript y HTML eliminando bytes innecesarios, como los espacios adicionales, saltos de línea y sangría.

Esta tarea se puede llevar a cabo utilizando un "minifier" como yui-compressor. Su forma de uso también es bastante sencilla.

yui-compressor -o compressed.js original.js

Conclusión

Al momento de abordar este trabajo, existía la incertidumbre acerca de qué puntaje lograríamos alcanzar en el rendimiento del sitio aplicando las recomendaciones de Google. Sin embargo, gracias a la guía de PageSpeed Insights y las herramientas antes mencionadas logramos alcanzar un puntaje de 86/100 con lo cual nuestro cliente ahora tiene un sitio catalogado por Google como de buen rendimiento.

Herramientas tecnológicas: