Page Caching (o cacheo de páginas)

Entrada publicada por JC

El cacheo de páginas (page caching) es una de las técnicas de optimización más usadas. En esta entrada voy a explicar en qué consiste y por qué es tan importante cachear las páginas si queremos mejorar el tiempo de carga de nuestro sitio web.

Vamos a centrarnos en el lenguaje PHP que es el que usa WordPress y en la optimización de un sitio web en WordPress.

Imaginemos para ello dos escenarios: en el primero cargamos una página original tal y como se encuentra en el servidor y en el segundo una página cacheada.

Carga de una página sin cachear

Una página sin cachear es una página con código en PHP, que es el lenguaje que usa WordPress para generar su contenido. Voy a hablar primero un poco de PHP para luego explicar cómo el navegador carga una página de nuestro servidor.

El lenguaje PHP

PHP es un lenguaje interpretado y del lado del servidor.

¿Qué significa que sea interpretado?

En un lenguaje interpretado las instrucciones no se compilan, sino que se ejecutan directamente. Cada vez que en una página aparecen instrucciones en código PHP el intérprete las procesa para convertirlas en código que entiende el navegador (HTML en este caso).

¿Qué significa que sea del lado del servidor?

Básicamente que el navegador no entiende PHP, todo se ejecuta en el servidor, que es donde está el intérprete. Por lo tanto no podemos descargar desde el navegador una página con código PHP para mostrarla. Tenemos que realizar una petición de esa página y mostrar la respuesta que nos da el servidor, que es la página procesada y ya convertida en HTML, que como dijimos antes es el lenguaje que el navegador entiende.

Petición de una página sin cachear

Vamos a imaginar que queremos cargar esta página en el navegador.

Una vez que hacemos una petición al servidor para cargar un recurso, este la recibe, la estudia, la procesa si es necesario, crea la respuesta que va a recibir el navegador y la devuelve.

A esto se le llama petición HTTP y en este caso vamos a solicitar cargar esta entrada del blog (introduciendo la URL que vemos arriba o clicando un enlace que venga hasta aquí).

En este caso al tratarse de una página PHP el intérprete tiene que convertir todo el código PHP en código que entienda el navegador.

Procesamiento PHP

Una vez que se recibe la petición hay muchas formas de determinar qué recurso o recursos deben cargarse. No quiero hablar de arquitecturas, ni de modelos MVC, solo voy a centrarme en WordPress.

En este caso WordPress se da cuenta de que es una entrada de blog y carga el archivo single.php (hay otros casos donde puede cargar otros archivos, pero no es el caso que nos ocupa).

Aquí es donde el intérprete de PHP viene a nuestro rescate. Tiene que procesar el archivo single.php, que sería algo parecido a lo que muestro a continuación. El resultado final será la página que estás viendo ahora.

<?php get_header(); ?>

<div id="main-content">
...
<?php while ( have_posts() ) : the_post(); ?>

    <?php get_template_part( 'partials/blog/content', get_post_format() ); ?>

    <?php if ( comments_open() || '0' != get_comments_number() ) comments_template(); ?>
<?php endwhile; // end of the loop. ?>

</div>

<?php get_sidebar(); ?>

</div>
...
<?php get_footer(); ?>

El intérprete solo procesa el código que aparece entre las etiquetas de apertura <?php y de cierre ?>. El resto lo ignora y el servidor lo devuelve tal y como está. En este caso devuelve HTML (entendible por el navegador).

Lo primero que se encuentra es get_header(). Esta función busca el archivo header.php y coloca ahí su contenido. Veamos unas líneas del archivo header.php.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  
 ...
 
 <!-- Title -->
 <title><?php wp_title(); ?></title> 
 
 <?php wp_head(); ?>
 
</head>

<body <?php body_class(); ?>>
<?php
wp_body_open();

Vemos que en header.php se forma el HTML inicial común para todas las páginas. Las instrucciones PHP que aparecen devuelven el título de la entrada, los estilos y scripts que hayamos añadido, etc.

Si seguimos procesando single.php, ya una vez procesado header.php, nos encontramos con “el loop”. WordPress lo usa para buscar en la base de datos el contenido a mostrar. En este caso muestra el contenido de esta entrada en el formato que se indica.

Luego procesa el archivo sidebar.php (para crear el HTML de la barra lateral si lo necesitáramos). Y por último el archivo footer.php (para crear el pie de página).

En cada archivo hay llamadas a la base de datos, tanto para consultar opciones como para cargar contenido. También puede llamar a funciones para mostrar la fecha en el footer, etc.

Una vez procesados todos los archivos necesarios para crear la página que hemos solicitado la devuelve al navegador.

Todo este proceso se repite cada vez que pedimos una página sin cachear al servidor.

Carga de una página cacheada

Una página cacheada es una página ya procesada y guardada para que el navegador pueda usarla directamente.

La caché de páginas (page cache) contiene una copia de las páginas a las que le hemos aplicado el page caching.

Esa copia puede estar en disco o en memoria. En el primer caso en suele estar en una carpeta dentro de nuestra instalación de WordPress.

Cada vez que pedimos una página que esté dentro de la caché la obtenemos directamente.

Petición de una página cacheada

Una vez que realizamos la petición de la página el servidor no tiene que procesar nada, ya que se encuentra ya guardada en la caché de páginas, por lo que la devuelve indicando en la respuesta que se trata de una página cacheada.

Plugins de caché para WordPress

Hay muchos plugins que permiten la caché de páginas o page caching, entre ellos destaco:

En el caso de W3 Total Cache nos vamos a las opciones del plugin, habilitamos caché de página (page cache) y elegimos donde queremos que se cree la caché (en caso de duda elegir en disco).

Dentro de las opciones tenemos un apartado Caché de página donde podemos indicar qué páginas queremos cachear, durante cuanto tiempo queremos que se guarde la copia en la caché, etc.

Una vez hemos habilitado el page caching o cacheo de páginas con W3 Total Cache y hayamos elegido disco, podemos ver la caché en el siguiente directorio del servidor dentro de nuestra instalación de WordPress:

/wp-content/cache/

Consideraciones a tener en cuenta

En caso de páginas que se actualicen constantemente hay que estudiar si merece la pena incluirlas en la caché o no.

Por ejemplo, si usamos botones para compartir en redes sociales en páginas cacheadas veremos que el contador no se actualizará hasta que se cree una nueva copia de la página. En este caso se puede poner que se cree una nueva copia de forma rápida. Otro caso donde el page caching puede generar problemas es el de los foros y comunidades.

En general, hay que tener en cuenta que al cargar una página cacheada estamos cargando una versión anterior guardada, por lo que es buena costumbre especificar que se generen nuevas copias cada cierto tiempo.

¡Ojo! No confundir la caché de página con la caché del navegador o browser cache. Si necesitamos cargar recursos estáticos anteriores como hojas de estilos quizás necesitamos generar una nueva copia del caché del navegador.

Page caching + CDN

Para optimizar más podemos usar un CDN. O lo que es lo mismo, que la página se entregue desde un servidor cercano, independientemende de la ubicación del servidor donde la tengamos alojada.

Conclusiones finales

Usando un plugin de caché podemos hacer que nuestras páginas se carguen en mucho menos tiempo. He visto casos de páginas donde antes de cachear tardaban entre 5-10 segundos en cargar y tras usar esta técnica se cargaron en menos de un segundo.

Esa es la principal ventaja de cachear las páginas. Y es muy importante para una buena experiencia de navegación y para el SEO.

Además, al ser el tiempo de carga menor los estilos y el código de los scripts del navegador se aplican antes y evitamos ver durante un tiempo contenido sin estilar (FOUC).

Mi recomendación es cachear todas las páginas siempre que sea posible; sobre todo las principales. Tus visitantes lo agradecerán.

Hay que tener en cuenta también que la mayoría de las páginas no sufren modificaciones. Y si nosotros las modificamos desde el panel de WordPress se crea una copia nueva. Igualmente la muchos plugins de caché crean una nueva copia de la caché de páginas y del navegador cada vez que actualizamos un plugin.

En resumen, el uso de un plugin de caché no debería darte problemas y en general son más las ventajas que los inconvenientes que suponen su uso.