IMPORTANTE: Actualmente utilizo un plugin de pago llamado WP-Rocket. En este artículo explico como hacerlo con un plugin gratuito, pero sin lugar a dudas recomiendo utilizar wp-rocket para conseguir resultados profesionales.
Volvemos con una nueva entrega de #OptimizarWeb, una serie de tutoriales en tres píldoras que nos permitirán optimizar el rendimiento de nuestras páginas significativamente.
En el anterior, hablamos de cómo implantar un sistema de paralelización de carga de imágenes, con el ejemplo de uno de los plugins para WordPress que nos facilita esta labor.
En este caso, hablaremos del cacheado de páginas dinámicas, una de las técnicas de optimización de rendimiento más utilizadas, y que por lo general, arroja más de un quebradero de cabeza.
Cacheado de páginas dinámicas ¿Por qué?
Antes de ponerse como locos a implantarlo, debemos saber el porqué de esta técnica, sus beneficios y también sus posibles inconvenientes.
La mayoría de las webs actuales son dinámicas. Esto es así ya que mantener una web estática requiere de un gasto en recursos (dinero/tiempo) más alto, al requerir siempre la figura del desarrollador para cualquier actualización de contenido.
Para ello, surgieron los CMS, gestores de contenido, software enfocado a abstraer la parte técnica del usuario final, que únicamente actualiza el contenido como si estuviera frente a una suite de ofimática. Para que esto funcione, la arquitectura de una web dinámica se carga cada vez que un cliente hace la petición para entrar. Es decir, los artículos de este blog (por poner un ejemplo) no existen como tal hasta que un usuario pide verlos, sino que es en tiempo de carga que el gestor de contenido unifica la cabecera, con el cuerpo del artículo y el pié de página, y vuelca los datos de la base de datos (el contenido) en la página.
Esto se hace cada vez que un usuario pide una página, por lo que resulta sencillo entender que afectará considerablemente al tiempo de carga de cada una, además de un gasto de ancho de banda considerable.
Como solución, aparecen los sistemas de caché de contenido. Servicios que se encargan de generar páginas estáticas a partir de páginas dinámicas como las de este blog, con el fin de que cuando un usuario pida una, le redireccione a la estática si es que ya la tenía cacheada, y si no, genere una. Por tanto, la primera vez tardará ligeramente más, pero a partir de ahí, y mientras siga “viva” esa página estática, cualquier otra petición se hará mucho más rápida.
Cacheado de páginas dinámicas ¿Cómo aplicarlo?
Todos los gestores de contenido tienen a su disposición plugins o extensiones que nos automatizan esta función. En el caso que nos compete, y por ser WordPress uno de los CMS más populares de la actualidad, hablaremos del plugin WP Super Cache (EN), una de las posibles alternativas, y la elección de un servidor para esta página.
Tanto si usa WP Super Cache como si usa cualquier otro, hay que tener en cuenta algunos puntos muy a considerar, y que son los siguientes:
- Implementar cambios con un sistema de caché activo: Mi experiencia me dice que siempre que vaya a modificar elementos de la página con un sistema de caché instalado, tendrá problemas para visualizarlos. La mayoría de plugins permite que el administrador acceda directmente al contenido sin cachear, pero aun así, lo recomendable es que cuando esté modificando algo, lo deshabilite, y una vez terminado, borre todo el caché y vuelva a habilitarlo.
- Tiempo de refresco de las páginas estáticas: Será un factor trascendental para la buena implementación de un sistema de cacheado. El fijar un tiempo mínimo para que al publicar nuevo contenido este se vea por el usuario final, y que ello no interfiera muy negativamente en el ancho de banda. Lamentablemente, y aunque daré algunas directrices en el artículo, no hay unos valores exactos, sino que depende de cada página, de la propia instalación y de su nivel de actualizaciones.
- Minimizado de JS y CSS: La mayoría de los sistemas de caché cuentan además con la opción de activar el minify, una herramienta que se encarga de agrupar JS y CSS bajo un mismo archivo (o varios dependiendo de su extensión), lo que permite mejorar sensiblemente la carga de la página (al tener esta que realizar menos peticiones). Sin embargo, esto suele causar más de un problema (páginas que no cargan, estilos que se solapan, otros plugins que dejan de funcionar,…), por lo que para una fase 1 yo lo desestimaría, volviendo a retomarlo cuando ya tenga el sistema de cacheado en funcionamiento.
Como podemos observar en la imagen, el sistema de cacheado de WP Super Caché está ordenado por varias pestañas, de las que para este artículo solo tocaremos la de Easy, Avanzado, Preload y quizás Plugins.
- Avanzado: Comenzaremos por esta pestaña, al ser aquí donde definimos la mayoría de configuraciones previas.
- Caching: Lo activamos, y seleccionaremos la opción de mod_rewrite. Es la opción más rápida de cacheado (ya que la redirección se hace por .htacces), pero en algunos casos puede dar problemas. Si al final usted observa que tiene problemas, pruebe a utilizar el modo PHP, que es más lento pero más seguro.
- Miscellaneous: Básicamente activaremos todas las que aparecen como (Recommended), y que nos permiten que el administrador no vea las páginas cacheadas, si no las originales, que las páginas se envíen comprimidas (para agilizar la carga de las mismas),… El resto no debería ser activado a no ser que por el tipo de página le interese (por ejemplo, para una tienda virtual que no suele actualizar mucho su cartera, quizás la opción de cachear peticiones de búsqueda pueda ser interesante).
- Avanzado: De aquí solo activaremos Extra homepage checks, que evita que publiquemos un artículo, y este no aparezca en la home hasta que vuelva a refrescar la página. El resto no debería interesarle (al menos en mi caso, no he notado la necesidad por ejemplo de activar la opción de refresco cuando hay un nuevo comentario, ya que lo hace automáticamente).
- Actualizar el .htacces: Puesto que hemos activado el cacheo por mod_rewrite, es necesario bajar el scroll hacia abajo de la pantalla para activar esta función (y seguramente actualizar estado para que la interfaz se actualice). Si hubiéramos elegido PHP, no habría que hacer este paso. Le damos a actualizar, y ya estaría. Solo es necesario hacerlo la primera vez.
- Tiempo de caducidad y recogida de basura: Aquí cada uno debe decidir cuantas veces cree oportuno que una página se recargue en el lado del cliente. En mi caso, tengo puesto que cada página tenga una vigencia de 3600 segundos. Poner menos hace que a la hora de la verdad haya más peticiones y más gasto de ancho de banda, pero también se asegura que el contenido esté más actualizado. Si actualiza el contenido una vez al día, 3600 me parece una buena elección. Si actualiza varias veces al día, ponga menos, y viceversa.
- Actualizar estado: cuando acabemos, le damos a actualizar estado, para guardar todos los datos.
- Preload: En esta sección definimos una herramienta vital para el buen funcionamiento de un sistema de caché. La precarga de contenido. De esta manera, el sistema, sin que el usuario haga la petición, va cacheando continuamente el contenido, desde aquel que más peticiones tiene al que menos, de forma que es bastante probable que cuando un usuario intente entrar en nuestra página, el sistema ya tenga esa página cargada, y evitamos así la espera. Para activarlo, basta con darle click a la opción Preload Mode, y seleccionar los segundos entre cada carga, que en mi caso he fijado en 4000. Puesto que este blog tiene relativamente pocas páginas (alrededor de 1000), me puedo permitir precargar todo el contenido. Si su web tiene miles de páginas, quizás prefiera que se cargue solo las 1000 más pedidas.
- Plugins: No está demás asegurarse que usted no está usando alguno de los plugins que requieren compatibilidad con WP Super Caché. Si entre esta lista, encuentra alguno que ya está utilizando, actívelo para asegurarnos que no haya problemas.
- Easy: Una vez que tenemos todo configurado.
- Test Caché: El primer paso es ver que el plugin tiene permisos para crear una carpeta que contendrá las páginas cacheadas. Debería devolverle un OK.
- Caching On: Si todo está correcto, lo activamos.
- Borrar caché: Aunque no lo vayamos a usar ahora mismo, esta opción nos permite trabajar cómodamente con la herramienta siempre que cambiemos el diseño de la página, o implementemos nuevas funcionalidades.
Hechos todos los pasos anteriores, ahora toca abrir una ventana de incógnito (ya que recordemos el usuario administrador ve el contenido sin cachear) y asegurarnos que todo funciona correctamente.
Deberíamos notar, así mismo, que la página ya carga bastante más rápido (al menos la segunda vez que entramos). Además, y siempre y cuando esté bien implementado, un análisis de la herramienta de Pingdom (EN) debería darnos un índice de optimización mayor.
Algunos puntos a considerar son:
- Ver que todos los plugins con funcionalidades que podamos observar funcionan, sobre todo aquellos que utilicen JS asíncrono o JQuery.
- La carga de CSS y el diseño de la página es el correcto.
- Podemos acceder a todas las secciones de las mismas, y realizar un camino habitual (y no tan habitual) del uso de la página (por ejemplo, la compra de un producto que tengamos).
Una vez todo esté funcionando, quedaría la opción de activar el minify, aunque como digo, depende muchísimo de las prestaciones de la página, y seguramente le obligue a suprimir algunas o modificar otras.
Con ello, habremos habilitado en nuestra web (sea WordPress o no) un sistema de cacheado de páginas dinámicas, lo que sin duda favorece la carga rápida de la misma, y por tanto la posición que ocupamos en el ranking de Google.
En el siguiente tutorial, hablaremos de la implantación de un CDN.
Otros artículos sobre WPO
Enlaces al resto de tutoriales #OptimizarWeb (actualizados conforme se vayan publicando):
- Paralelización de contenido.
- Cacheado de páginas.
- Implantación de un CDN.
Si os ha gustado el tutorial, agradecería que me dejarais un comentario y lo compartierais por redes sociales, con el fin de que pueda ayudar a más personas. Muchas gracias.
Imagen de iconcept, Full Potencial (EN) cedida por Depositphotos.com.
________
¿Quieres conocer cuáles son mis dispositivos de trabajo y juego preferidos?
Revisa mi setup de trabajo, viaje y juego (ES).
Y si te gustaría ver más de estos análisis por aquí. Si el contenido que realizo te sirve en tu día a día, piénsate si merece la pena invitarme a lo que vale un café, aunque sea digitalmente.
