Caché y WordPress

Caché y WordPress
Fernando Puente
@fpuenteonline
Caché y WordPress – SemanaWP - @fpuenteonline

0
BIO
@fpuenteonline - Informático de vocación y de profesión,
formador ocasional y beginner de comer y beber.
Desde 1996 trabajando en TI, los últimos 12 en medios de
comunicación online y comercio electrónico
• Consultor Enterprise en SiteGround
• Consultor Desarrollo de Negocio en YITH
• CTO de Exprime Viajes y Dormir de Chollo
• Formador en Fundación COPE
• Consultor freelance especializado en performance

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
Caché
Una de las estrategias más
importantes hablando de
WPO

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?

1.- Acelerar la velocidad de navegación del
usuario
3
Objetivos

usuario
2.- Descargar el menor número de
contenidos al navegar
3
Objetivos

usuario
2.- Descargar el menor número de
contenidos al navegar
3.- Reducir la carga y número de recursos
necesarios en nuestro servidor
3
Objetivos

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 - 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).
Estrategia Full page.
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é
•  Por delante de los servicios web.
•  Intervalos muy cortos de tiempo.
•  Soporte sólo en memoria.
4.3

Proxy inversa/Balanceador
4.3

Programación
Fragmentos de una página, reutilizables, que guardamos en
memoria
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.
DB 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.
•  Mejores puntuaciones en los test de velocidad.
•  Se pueden combinar diferentes estrategias de caché.
•  Compatible con otras estrategias WPO, como balanceo de carga,
HTTP/2, compresión o minify 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

Ahora, no vuelvas a decir:
“¿Has probado a borrar la
caché?”

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

Caché y WordPress

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Caché y WordPress

Similar a Caché y WordPress (20)

Más de Fernando Puente

Más de Fernando Puente (16)

Último

Último (20)

Caché y WordPress