Estrategias de caché para un proyecto WordPress - WordCamp Bilbao 2017

ESTRATEGIAS DE CACHÉ
PARA UN PROYECTO
WORDPRESS
Fernando Puente
@fpuenteonline

0
BIO
@fpuenteonline - Soy informático de vocación y de profesión,
formador frustrado y beginner de comer y beber.
Tengo 21 años trabajando en TI, los últimos 11 en medios de
comunicación online y desde 2007 con plataformas.
CTO de La Estrategia de Chapman, formador para no técnicos y,
consultor y colaborador de SiteGround
Estrategias de caché para un proyecto WordPress – WordCamp Bilbao 2017 - @fpuenteonline

1. Definición y características
2. Uso
3. Objetivo
4. Estrategias
5. Conclusiones y notas
Sumario

1
Definición (RAE)
caché.
Del inglés cache
1. f. Inform. memoria caché. Memoria de
acceso rápido de una computadora, que
guarda temporalmente las últimas
informaciones procesadas.

1
Definición (cuando falla algo)
“Eso es problema de la caché”
El desarrollador

1
Definición
Almacenamiento intermedio
que guarda datos de
manera temporal

Almacenamiento intermedio que guarda
datos de manera temporal
• Es un tipo de almacenamiento, posible en diferentes soportes.
• Intermedio, que requiere de un elemento origen y destino.
• Datos, válido para diferentes tipos de contenido.
• Temporal, limitado en el tiempo, es volátil.
1

1.- Objetos estáticos
2.- Objetos dinámicos, su respuesta
3.- Fragmentos de datos, en código
2
¿Qué almacenar en caché?

2
¿Dónde almacenar?

3
Objetivo 1
Acelerar la velocidad de
navegación del usuario

3
Objetivo 2
Descargar el menor número
de contenidos

3
Objetivo 3
Reducir la carga y número
de recursos necesarios en
nuestro servidor

4
Estrategias de caché
1. Navegador cliente
2. CDN intermedia
3. Proxy inversa o balanceador
4. Programación
5. WordPress
6. Base de datos

4
Tareas previas
• Qué estrategias de caché podemos implementar en nuestro
proyecto.
• Qué objetos son cacheables y qué periodo de expiración tendrán.
• Qué recursos son necesarios para las estrategias a implementar.
• Conocer cómo poner, vaciar y quitar de la caché los objetos.
• Marcar objetivos de rendimiento, siempre cuantificables.

Navegador cliente
Cabeceras HTTP (Cache-Control & Expires)
• Configurado en el fichero de configuración del servicio web o
en el .htaccess o en la cabecera HTML.
• Para objetos estáticos.
• Cuidado con los domain sharding.
Service Workers + Local storage
Cookies
4.1

Navegador cliente (ejemplo)
<IfModule mod_expires.c>
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
4.1

CDN intermedia
CDN de tipo DNS, entre tus servidores web y el usuario
Servicio intermedio entre el navegador y nuestro servidor, y que es
transparente para el usuario.
Cachea objetos estáticos en sus sistemas.
Posee servidores diseminados geográficamente para maximizar la
entrega de contenido.
Añade más funcionalidades de rendimiento.
Requiere una configuración inicial básica.
4.2

CDN intermedia (ejemplo)
4.2

Proxy inversa
Proxy inverso – Reverse proxy
Se sitúa por delante del servidor web, cacheando en memoria la
respuesta por URL.
Para cualquier URL (estática o dinámica).
Requiere de una configuración especial para los contenidos no
cacheables.
Se utilizan también como balanceadores de contenido y capa de
seguridad frente a ataques DDoS.
4.3

Balanceador
Micro-caché
A nivel de balanceador, por delante de los servicios web.
Intervalos muy cortos de tiempo.
Soporte sólo en memoria.
4.3

Proxy inversa/Balanceador (ejemplo)
4.3

Programación
Se denomina caché fragmentada
Almacenamiento en memoria o persistente de objetos.
Clase WP_Object_Cache + Memcached.
Transients API.
4.4

Programación (ejemplo)
4.4
<?php
// Check for transient. If none, then execute WP_Query
if ( false === ( $featured = get_transient( 'foo_featured_posts' ) ) ) {
$featured = new WP_Query(
array(
'category' => 'featured',
'posts_per_page' => 5
));
// Put the results in a transient. Expire after 12 hours.
set_transient( 'foo_featured_posts', $featured, 12 * HOUR_IN_SECONDS );
} ?>

WordPress (I)
Plugin de caché estándar
• Configurado en el propio WordPress.
• Para objetos dinámicos, nuestras páginas. Algunos, para objetos
estáticos.
• Incorporan otras funcionalidades y mejoras de rendimiento.
• Basados normalmente en filesystem.
• Sólo recomendable para discos SSD en el servidor.
4.5

WordPress (I) (ejemplo)
4.5

WordPress (II)
Plugin avanzado de caché
• Configurado en el propio WordPress.
• Para objetos dinámicos (páginas y objetos) y estáticos.
• Incorporan muchas funcionalidades y mejoras de rendimiento
adicionales.
• Basados en memoria, filesystem local o CDN propio.
• Requieren configuraciones más avanzadas, incluso servicios
adicionales como Memcached, APC o Redis.
4.5

WordPress (II) (ejemplo)
4.5

4.6
Base de datos
Servidor
• Habilitar y configurar Query Cache.
• Almacenamiento en memoria.
Proxy
• Almacenamiento en memoria.
• Añaden más funcionalidades.
• El mejor ejemplo, ProxySQL.

4.6
Base de datos (ejemplo)
# MySQL config file
# Habilitar Query Cache
# [mysqld] section
# Enable
query_cache_type = 1
# total cache cannot exceed
query_cache_size = 16M
# limit on any one cache result
query_cache_limit = 5M

5
Conclusiones
• No es costoso de implementar en el proyecto.
• Reduce la cantidad de tráfico transferido.
• Mejora el rendimiento del servidor.
• Acelera la carga de páginas y recursos en el cliente.
• Se pueden combinar diferentes estrategias de caché.
• Compatible con otras estrategias WPO, como balanceo de carga,
HTTP/2, compresión o minificado de archivos.

5
Notas de uso
• El uso o diseño inadecuado pueden generar problemas durante el
desarrollo o explotación.
• Se activa tras la segunda visita.
• Algunas estrategias dependen del usuario y navegador.
• Misma funcionalidad con o sin caché en nuestro proyecto.
• No podemos utilizarla en todos los entornos, por ejemplo,
entornos transaccionales (login, carrito, pago, …) o de
geoposicionamiento de recursos.

La caché es tu amiga y
una buena estrategia de
mejora de rendimiento
para tu proyecto web

"Let's be careful out there“
Eskerrik asko
Fernando Puente
@fpuenteonline

Estrategias de caché para un proyecto WordPress - WordCamp Bilbao 2017

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (11)

Similar a Estrategias de caché para un proyecto WordPress - WordCamp Bilbao 2017

Similar a Estrategias de caché para un proyecto WordPress - WordCamp Bilbao 2017 (20)

Más de Fernando Puente

Más de Fernando Puente (20)

Último

Último (19)

Estrategias de caché para un proyecto WordPress - WordCamp Bilbao 2017