- 1. Optimizar imágenes
- 2. Minificar CSS y JS
- 3. Especificar caché de navegador
- 4. Habilita la compresión
- 5. Reducir el tiempo de respuesta del servidor
- 6. Eliminar el JavaScript que bloquea la visualización del contenido de la mitad superior de la página
- 7. Eliminar el CSS que bloquea la visualización del contenido de la mitad superior de la página
Con esta entrada inicio una serie de posts sobre WPO para ver cómo podemos mejorar nuestra puntuación en Google PageSpeed Insights en WordPress.
El WPO (Web Performance Optimization) son un conjunto de técnicas o medidas a cualquier nivel para mejorar el rendimiento y velocidad de carga de nuestra web. Por ende mejoraremos la experiencia de usuario (UX) y el SEO, ya que la velocidad de carga es un factor clave que los buscadores tienen en cuenta.
Existen muchas herramientas que pueden medir la velocidad de tu web. En esta serie de 7 entradas vamos a hablar sobre Google PageSpeed Insights y cómo resolver en WordPress algunos de sus puntos clave.
Para ello usaremos un ejemplo. He creado un html básico que he utilizado como testing que contiene o carga:
- 2 fuentes de Google Fonts
- Bootstrap, FontAwesome, hoja de estilo personalizado
- jQuery
- Una imagen en el cuerpo y una en el sidebar
- Una cabecera muy básica y un cuerpo con 5 párrafos de lorem ipsum
Me he puesto en el peor de los casos:
- Estoy cargando los CSS y JS sin minificar
- jquery-3.1.1.js y bootstrap.js están en el head
- La imagen del contenido tiene unas dimensiones de 6016x3384px y pesa 25,3MB
- La imagen del sidebar tiene unas dimensiones de 2048x769px y pesa 1MB
- No hay nada en el .htaccess
Con este panorama, el resultado en PageSpeed es el siguiente
De este escenario partimos para ver cómo mejorar nuestra puntuación en PageSpeed Insights.
Optimiza las imágenes
Huelga decir lo importante que es este punto para mejorar el tiempo de carga. Es simple, cuanto más pese nuestra imagen, más lentamente se cargará la web, no hay más misterio.
El problema se agravaría cuantas más imágenes sin optimizar tengamos en nuestra web. Este es el mensaje que nos devuelve el test de Google:
Optimizar imágenes
Google PageSpeed Insights
Formatear y comprimir correctamente las imágenes puede ahorrar una gran cantidad de bytes de datos.
Optimizar estas imágenes para reducir su tamaño en 996,2 KB (reducción del 99 %).
• Al comprimir o modificar el tamaño de https://midominio.com/img/vialactea2.jpg puedes ahorrarte 996,2 KB (un 99 % menos).
La imagen de 25 megas es tan pesada que ni la analiza. Podemos optimizar una imagen en dos sentidos: tamaño y calidad.
Optimizar una imagen en tamaño
Cuando nos referimos a optimizar una imagen en tamaño queremos decir que hay que pensar en el espacio real que va a ocupar en nuestra web. Es muy tentador descargar la imagen a máxima calidad de nuestra cámara reflex y subirla directamente a nuestra página, pero esto matará nuestro rendimiento.
En el ejemplo, utilizamos una imagen para el contenido de 6016 píxeles de ancho, cuando el contenedor ocupa sólo 848px. Lo mismo nos pasa en el sidebar, la imagen es de 2048 píxeles, y el ancho del sidebar es de 263px.
Estamos utilizando imágenes mucho más grandes de lo que realmente necesitamos. Si antes de subirlas a la web las editamos con un editor de imágenes y las escalamos al tamaño de nuestro diseño, obtendremos una mejora de tamaño considerable:
- Imagen 1 de 6016x3384px y 25,3MB a 848x477px y 432KB
- Imagen 2 de 2048x769px y 1MB a 263x99px y 46KB
Optimizar una imagen en calidad
Una vez que tenemos claro que el tamaño importa, lo siguiente es optimizar la imagen en cuanto a calidad. Google PageSpeed nos recomienda:
- Los archivos PNG son casi siempre superiores a los GIF, aunque solo son parcialmente compatibles con algunas versiones antiguas de navegador. Hoy en día esto ya no es un problema salvo que tengas algún equipo con Windows 98 e Internet Explorer 6, que ya sería hora de jubilarlo.
- Usa archivos GIF para gráficos muy pequeños o simples (por ejemplo, inferiores a 10 x 10 píxeles, o con una paleta de color de menos de 3 colores) y para las imágenes que contienen animaciones.
- Usa archivos JPG para todas las imágenes de estilo fotográfico.
- No utilices los archivos BMP o TIFF.
Usando herramientas como Photoshop podemos optimizar la calidad de nuestras imágenes con la opción Guardar para web. Esta opción optimiza la compresión y elimina metadatos y comentarios que pueda tener la imagen para bajar su peso. Para nuestro ejemplo las imágenes quedarían:
- Imagen 1 de 432KB a 86,4KB
- Imagen 2 de 46KB a 8,67KB
También podemos hacer uso de plugins que nos ayudan en esta tarea de compresión, como pueden ser WP Smush, EWWW Image Optimizer ó Imagify. Podemos configurarlos para que automáticamente al subir una imagen a la librería multimedia ésta sea automáticamente optimizada.
Tanto WP Smush, como EWWW Image Optimizer y como Imagify disponen de una versión gratuita, limitada pero en muchos casos puede ser suficiente.
También disponen de una versión de pago por si tus necesidades o volumen de subida de imágenes es muy alto (para más información consulta en la página oficial de cada plugin las características de cada versión).
He hecho una comparativa de los 3 plugins utilizando la versión gratuita de los mismos y tomando como referencia esta imagen del oso y el madroño, teniendo en cuenta que la imagen de origen es un JPG a calidad máxima (sacado con photoshop), de unas proporciones de 1024x768px y con un peso de 817KB.
El resultado es el siguiente:
| Plugin | Tamaño |
|---|---|
| WP Smush | 154KB |
| EWWW Image Optimizer | 154KB |
| Imagify Normal | 154KB |
| Imagify Agressive | 133KB |
| Imagify Ultra | 104KB |
Como puede observarse, en cualquiera de los casos la reducción es notable. En la versión gratuita de WP Smush y EWWW Image Optimizer se usa lossless compresion, es decir, compresión sin pérdida. Al igual que si seleccionas la opción Normal en Imagify. Este plugin además te la la opción de comprimir imágenes utilizando lossy compresion si escoges la opción Agressive, y our strongest compression method using a lossy algorithm si escoges la opción Ultra.
No obstante el filtro de PageSpeed es muy duro y aun así en algunos casos puede salirnos la alerta de que hay imágenes que pueden optimizarse aún más. Un truco que no sabe mucha gente: puedes pasar el test de PageSpeed y al final encontrarás un enlace donde podrás descargar los recursos de imagen, JavaScript y CSS optimizados de esa página
Las imágenes son quizá los elementos que más repercusión pueden tener sobre el peso y tiempo de carga de la web. Tenerlas optimizadas es algo fundamental y por suerte sencillo de conseguir teniendo en cuenta lo que hemos visto en esta entrada.
Hemos bajado la imagen principal de 25,3MB a 86,4KB, es decir, hemos reducido su peso ¡294 veces!
Puede que también te interese
