En esta nueva entrada de la serie dedicada a la optimización de webs, vamos a aprender a detectar problemas de rendimiento con GTmetrix. En la anterior entrada aprendimos a realizar una medición inicial del rendimiento. Esta vez aprenderemos a interpretar algunos de los problemas que encuentra GTmetrix en nuestra web y trataremos de solucionar algunos cuellos de botella comunes.
Atención: Por desgracia, GTmetrix es una herramienta disponible sólo en Inglés, así que será mucho más fácil interpretar los resultados si tienes un nivel básico de Inglés técnico.
Pestaña PageSpeed
Justo debajo de los indicadores globales de rendimiento de un informe de GTMetrix, hay una serie de pestañas que podemos pulsar para acceder a un informe detallado de rendimiento y problemas que ha encontrado GTMetrix en nuestra página.
La pestaña abierta por defecto PageSpeed contiene una tabla con los detalles y problemas que ha encontrado GTmetrix a la hora de elaborar nuesta puntuación de PageSpeed.
Cada recomendación o detalle tiene a su vez un grado o nota asignada desde A (Sobresaliente) a F (Suspenso). De modo que la nota de PageSpeed final es una combinación de todas las notas para cada sección de recomendaciones.
Examinar punto por punto cada recomendación nos llevaría múltiples entradas de blog, así que haremos un repaso a las más comunes y sencillas de reparar.
Leverage Browser Caching
Esta es una de las recomendaciones más sencillas de reparar y que tiene un mejor efecto sobre la puntuación tanto en PageSpeed como en YSlow. Sin embargo, su efecto en el rendimiento final de cara al usuario es discutible.
Todos los navegadores como Chrome, Firefox o Edge incorporan una caché de archivos que impide volver a descargar una y otra vez el mismo contenido de una web si este no ha cambiado. Por eso cuando visitamos una página varias veces a lo largo del día, se carga visiblemente más rápido. Esta caché es distinta a la caché de WordPress que ya mencionamos en una anterior entrada ya que está del lado del cliente, no en nuestros servidores.
Aunque al final cada navegador establece sus propias políticas de qué archivos almacenar en caché. Nuestro servidor web puede facilitar esta tarea mediante si lo configuramos de una forma específica. Aunque cada servidor y proveedor de hosting es un mundo aparte, una buena parte ofrecen la posibilidad de configurar el acceso mediante el archivo .htaccess.
Si eres lo suficientemente valiente como para actualizar el archivo .htaccess de tu espacio de alojamiento, hay una infinidad de tutoriales en Internet sobre cómo hacerlo. Basta con añadir esto al final del fichero .htaccess para que GTmetrix deje de dar la lata con la caché:
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>Si no te aclaras, no hay problema. Ponte en contacto con el servicio técnico de tu hosting, o con nosotros directamente. Estaremos encantados de ayudarte a mejorar tu web y llevarla a otro nivel.
Enable Compression
Si obtienes una nota muy baja en esta sección significa que tu servidor no está configurado para comprimir los datos que envía a los navegadores de los usuarios. Esta medida reduce el tamaño total de los datos transmitidos cuando cargamos una página web, por lo que apenas tiene contraindicaciones en su uso.
Si obtienes una nota baja en el indicador Enable Compression, prueba a añadir este bloque de código al archivo de configuración .htaccess en la carpeta de tu proveedor de hosting:
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>Dependiendo de los tipos de contenido de una página, podemos reducir de tamaño total de una página desde el 30% al 70%. Las páginas que mejor se comprimen son aquellas que tienen mucho contenido textual: html, css y javascript. Las páginas que peor responden a la compresión son aquellas que tienen muchas imágenes bien optimizadas.
La mayoría de proveedores de hosting ya activan esta opción por defecto, y es posible activarla a mano en caso contrario. Sin embargo, todavía hay proveedores que impiden activar esta opción porque supone una pequeña carga en el tiempo de proceso que no están dispuestos a asumir.
Si tienes problemas de bloqueos con tu proveedor de hosting, nosotros recomendamos Cyberneticos por su excelente calidad de servicio y soporte técnico.
Optimize Images / Serve Scaled Images
Si te has dejado imágenes sin optimizar en tu web, estas dos recomendaciones te indicarán con todo lujo de detalles lo que tienes que hacer. Sólo tienes que seguir nuestra guía para optimizar imágenes en WordPress.
¡Recuerda!
- Optimiza las imágenes antes de subirlas.
- Reduce el tamaño máximo de las imágenes para no malgastar espacio.
- Usa miniaturas siempre que sea posible.
La recomendación Serve Scaled Images es muy útil para comprobar qué imágenes son más grandes que la ventana que las muestra Por ejemplo, esta web podría ahorrar hasta 575 KiB reduciendo el tamaño de algunas imágenes e iconos. El usuario no notará la reducción porque ya está viendo las imágenes reducidas.
Minimize CSS / Minimize Javascript
Utilizar WordPress junto con una buena cantidad de plugins puede aumentar desproporcionadamente el tamaño de una página web si no tomamos precauciones. Cada plugin o tema de WordPress añade sus propias hojas de estilo CSS y archivos Javascript que mejoran la funcionalidad de tu página a un coste de rendimiento que a veces es demasiado elevado.
Si no puedes vivir sin determinados plugins de WordPress, te recomendamos instalar algún plugin de optimización que intentará recortar y optimizar al máximo estos archivos. Nosotros utilizamos estos plugins dependiendo de la web de nuestros clientes y de la configuración del servidor.
- Fast Velocity Minify – Uno de los más sencillos y seguros y usar.
- Autoptimize – Sencillo de usar y con más opciones de configuración
- W3 Total Cache (Sección Minify ) – Muy complejo de usar pero permite total flexibilidad.
Precauciones
- No actives más de un plugin de minimizado CSS/JS a la vez, sus efectos no son acumulativos.
- Activar el minimizado de CSS y Javascript modifica la estructura de tu web y puede afectar a su funcionalidad. Después de activar uno estos plugins te recomendamos comprobar que tu web funciona correctamente: enlaces, formularios, animaciones, etc.
- Hay páginas que por su estructura no son fácilmente optimizables sin romper su funcionalidad. Contacta con nosotros si necesitas de un análisis completo y una solución de optimización para tu web.
Conclusiones
Al ir recortando segundos y Kilobytes a nuestra página, nos iremos encontrando con cada vez más dificultades y decisiones a tomar. Si no acompañamos estas decisiones de un buen proceso de medida y análisis, estaremos tomando decisiones a ciegas. Las malas decisiones a la larga cuestan tiempo y dinero. En la siguiente entrada seguiremos profundizando en cómo medir mejor para tomar mejores decisiones.
