Caché, compresión y minimización en WordPress – Pagespeed protips (parte 5). En el artículo de hoy me voy a centrar en optimizar la velocidad de carga de una página web hecha con WordPress utilizando plugins gratuitos que sirven para cachear el contenido publicado en la web y comprimir y minimizar los archivos HTML, Javascript y CSS.
Estas tres características, cacheado, compresión y minimización, se pueden conseguir también sin plugins. Pero como esta serie de artículos va orientada a personas sin conocimientos en desarrollo de páginas web con WordPress, lo voy a hacer a través de plugins WordPress.
Como siempre, hay una pequeña penalización en cuanto a velocidad de carga si utilizamos muchos plugins en nuestro blog WordPress, aunque en este caso el beneficio en cuanto a optimización de la velocidad es mucho mayor.
Caché en WordPress
Los plugins de caché de WordPress, de manera muy resumida, lo que hacen es renderizar las páginas de nuestra web y guardarlas en disco periódicamente.
Un usuario al acceder a una página, no tiene que pasar por todo el ciclo de renderizado (pedir la página, ejecutar el código PHP, hacer consultas a base de datos, etc.).
Además, añaden algo de configuración en el servidor web, para que utilice los archivos cacheados en lugar de renderizar cada vez las páginas.
Tener las páginas pre-renderizadas o cacheadas en el servidor supone una gran mejora en el pagespeed y es imprescindible si queremos superar un pagespeed del 90%.
En mi caso, utilizo el plugin WP Super Cache que viene por defecto al hacer una instalación de WordPress en el hosting que utilizo.
Si estamos utilizando un hosting compartido es importante tener en cuenta dos cosas:
- No todos los hostings admiten utilizar un plugin de caché de WordPress. No voy a dar nombres pero me podéis preguntar por privado si queréis
- Si tenemos un espacio limitado en nuestro hosting WordPress y mucho contenido publicado (miles de páginas) hay que tener en cuenta que los plugins de cache, al pre-renderizar las páginas están consumiendo espacio.
Normalmente, no debería haber ningún problema, pero hay que tenerlo en cuenta. En mi caso, esta página que tiene menos de 200 artículos ocupa algo menos de 30MB.
Compresión GZIP de una web WordPress
La compresión es uno de los factores más importantes a la hora de mejorar la velocidad de carga de una web WordPress. Se trata de una de las métricas que suelen medir los portales que analizan el pagespeed.
La compresión GZIP hace lo que su propio nombre indica. En lugar de enviar los archivos de la web planos, los comprime en GZIP de manera que viajan por la red mucho más rápido, ya que ocupan menos espacio.
En mi caso, estoy utilizando el plugin WP Performance Score Booster Settings en el que basta con marcar un checkbox para activar la compresión GZIP.
Optimizar y minimizar HTML, CSS y Javascript en WordPress
Este es otro de los puntos que tienen en cuenta los portales que miden la velocidad de carga de una página web. Comprueban si los archivos estáticos de la web: HTML, CSS y Javascript están correctamente minimizados y optimizados, es decir, si ocupan lo mínimo necesario de manera que la velocidad de transmisión a través de la red sea lo más rápida posible.
Algunas de las cosas que se hacen para optimizar y minimizar archivos de una web son:
- Eliminar comentarios
- Eliminar espacios, saltos de carro
- Renombrar variables, clases, etc.
- Compactar archivos CSS y Javascript en un sólo archivo para evitar realizar varias peticiones al servidor
- Incluir el código CSS y Javascript dentro del propio HTML para minimizar el número de peticiones al servidor
- Evitar cargar fuentes de webs de terceros
- Evitar cargar Javascript de webs de terceros
- Incluir imágenes en Base64 en el propio CSS
- Cachear los archivos compactados y minimizados
- Eliminar código duplicado
- Eliminar parámetros de versiones en los Javascript
- Cargar el Javascript de manera asíncrona
¿Cómo Optimizar y minimizar una web WordPress?
En este caso, el proceso de optimizar y minimizar el HTML, CSS y Javascript sí que requiere conocimientos de desarrollo de páginas web y normalmente, es más sencillo delegar en un par de plugins de WordPress gratis que hagan todo el trabajo sucio.
Además, hay que tener en cuenta que la optimización y minimización es algo que se suele configurar y hacer una vez. Los archivos resultantes quedan cacheados en el servidor y por tanto los plugins no se ejecutan cada vez que cargamos una página.
Por contra, configurar los plugins para optimizar y minimizar el HTML, CSS y Javascript de una web WordPress no siempre es sencillo. Como mínimo no es una configuración que valga para cualquier página, ya que según las opciones que elijamos podemos romper el código de nuestra web WordPress y esta puede dejar de funcionar.
Obviamente, siempre podemos desactivar los plugins y todo volverá a la normalidad.
3 Plugins gratis para optimizar y minimizar una web WordPress
Los plugins WordPress para optimizar y minimizar que uso en esta web son:
Muy fácil, sólo tiene dos checkboxes para minimizar CSS y Javascript.
Este tiene unas cuantas opciones más y es de los que puede romper la página. Prueba y error puede funcionar bien.
Este lo uso para algo muy molón que consiste en cargar únicamente el CSS mínimo necesario para cargar la página rápidamente y el resto del CSS cargarlo en el pie de la página.
Y esto es todo, en el próximo (y probablemente último) artículo de la serie, explicaré como configurar un CDN gratuito para WordPress para que la página cargue como un tiro y llegar (casi) al 100% en los análisis de pagespeed.
