Empezaremos presentando la herramienta empleada para el análisis de las optimizaciones:
Esta herramienta nos ofrece un informe muy detallado sobre lo que sería mejorable en la web para reducir lo máximo posible la velocidad de carga y mejorar la experiencia del usuario.
Por otra parte tenemos que encontrar la forma de plasmar todas esas mejoras en nuestro sitio Drupal, para ello nuestro mejores aliados son:
- Un buen tematizado responsive (basado en un diseño bien construido).
- El módulo Advanced CSS/JS Aggregation que nos permitirá realizar la mayoría de ajustes relacionados con la optimización de los ficheros css & js.
- Posicionar todos los ficheros javascript al final de la etiqueta body o en su defecto emplear el atributo async (para que el fichero no bloquee la carga del resto de la web).
- Emplear css comprimido con etiquetas style en la cabecera que aunque en algunos casos puede no ser recomendable (hojas de estilo demasiado extensas). Al menos el css relacionado con la mitad superior de la página si debe ser accesible de la forma más rápida posible.
Otras opciones basan en posicionar los estilos al final de la etiqueta body (con la excepción del css relativo a la mitad superior). - No es recomendable el uso de un loader (fondo e icono de carga) dado que se interpretaría un fallo por parte del analizador. Pero en caso de su uso lo adecuado sería incluir un icono animado basado en css, dado que los svg animados no comenzarían a animarse desde el principio. Y cuando cargue la hoja de estilos principal ocultar el loader.
Esta opción solo es mejor si ponemos TODAS las hojas de estilos al final y al entrar se observa el salto del texto en crudo (sin nada de estilo).
- El uso de la caché del navegador para servir ciertos ficheros (png, jpg, js, css, etc.). Esto lo conseguiríamos mediante la definición de la cabecera Cache-Control y su parámetro max-age en segundos.
De nuevo la herramienta de análisis nos suele recomendar el mejor tiempo (max-age) en base al js relacionado.
Una forma de implementarlo sería modificando el fichero .htaccess de nuestro sitio:<FilesMatch "(\.jpg\.png\.gif\.js\.gz|\.css\.gz)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch>Otra sería mediante la definición de la cabera en Drupal (drupal_add_html_head) solo cuando sea neceario (peticiones de archivo con ciertas extensión).
Otra posible forma sería mediante la configuración de la cabecera para dichos archivos en la capa de la caché de nuestro servidor, ie varnish. Emplear hojas de estilos y ficheros javascript minificados, esto es, reducir a su mínima expresión mediante la eliminación de comentarios, saltos de línea y espacios en blanco innecesarios. (ej: con YUI).
Optimización de imágenes con la resolución y tamaño de fichero adecuadas para el dispositivo en el que se van a representar.
En caso de que necesitemos varias imágenes para distintas resoluciones en un mismo componente podemos emplear la etiqueta html picture en lugar de la clásica etiqueta img.
Conclusión
Todos estos consejos son solo los principales y tratados por encima a modo de puntos clave, esta lista puede extenderse todo lo que sea necesario, siempre dependiendo de nuestro sitio. Aunque la idea principal siempre sería; reducir lo máximo posible la velocidad de carga (a ser posible inferior a 2 segundos) y mejorar la experiencia del usuario.
