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

2.
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
Caché y WordPress – SemanaWP - @fpuenteonline

3.
1. Definición y características
2. Uso
3. Objetivo
4. Estrategias
5. Conclusiones y notas
Sumario
Caché y WordPress – SemanaWP - @fpuenteonline

4.
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.
Caché y WordPress – SemanaWP - @fpuenteonline

5.
1
Definición (cuando falla algo)
“Eso es problema de la caché”
El desarrollador
Caché y WordPress – SemanaWP - @fpuenteonline

6.
1
Definición
Almacenamiento intermedio
que guarda datos de
manera temporal
Caché y WordPress – SemanaWP - @fpuenteonline

7.
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
Caché y WordPress – SemanaWP - @fpuenteonline

8.
1
Caché
Una de las estrategias más
importantes hablando de
WPO
Caché y WordPress – SemanaWP - @fpuenteonline

9.
1. Definición y características
2. Uso
3. Objetivo
4. Estrategias
5. Conclusiones y notas
Sumario
Caché y WordPress – SemanaWP - @fpuenteonline

10.
1.- Objetos estáticos
2.- Objetos dinámicos, su respuesta
3.- Fragmentos de datos, en código
2
¿Qué almacenar en caché?
Caché y WordPress – SemanaWP - @fpuenteonline

11.
2
¿Dónde almacenar?
Caché y WordPress – SemanaWP - @fpuenteonline

12.
2
¿Dónde almacenar?
Caché y WordPress – SemanaWP - @fpuenteonline

13.
1. Definición y características
2. Uso
3. Objetivo
4. Estrategias
5. Conclusiones y notas
Sumario
Caché y WordPress – SemanaWP - @fpuenteonline

14.
1.- Acelerar la velocidad de navegación del
usuario
3
Objetivos
Caché y WordPress – SemanaWP - @fpuenteonline

15.
1.- Acelerar la velocidad de navegación del
usuario
2.- Descargar el menor número de
contenidos al navegar
3
Objetivos
Caché y WordPress – SemanaWP - @fpuenteonline

16.
1.- Acelerar la velocidad de navegación del
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
Caché y WordPress – SemanaWP - @fpuenteonline

17.
1. Definición y características
2. Uso
3. Objetivo
4. Estrategias
5. Conclusiones y notas
Sumario
Caché y WordPress – SemanaWP - @fpuenteonline

18.
4
Estrategias de caché
1. Navegador cliente
2. CDN intermedia
3. Proxy inversa o balanceador
4. Programación
5. WordPress
6. Base de datos
Caché y WordPress – SemanaWP - @fpuenteonline

19.
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.
Caché y WordPress – SemanaWP - @fpuenteonline

20.
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
Caché y WordPress – SemanaWP - @fpuenteonline

21.
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
Caché y WordPress – SemanaWP - @fpuenteonline

22.
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
Caché y WordPress – SemanaWP - @fpuenteonline

23.
CDN intermedia (ejemplo)
4.2
Caché y WordPress – SemanaWP - @fpuenteonline

24.
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
Caché y WordPress – SemanaWP - @fpuenteonline

25.
Balanceador
Micro-caché
• Por delante de los servicios web.
• Intervalos muy cortos de tiempo.
• Soporte sólo en memoria.
4.3
Caché y WordPress – SemanaWP - @fpuenteonline

26.
Proxy inversa/Balanceador
4.3
Caché y WordPress – SemanaWP - @fpuenteonline

27.
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
Caché y WordPress – SemanaWP - @fpuenteonline

28.
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 );
} ?>
Caché y WordPress – SemanaWP - @fpuenteonline

29.
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
Caché y WordPress – SemanaWP - @fpuenteonline

30.
WordPress (I) (ejemplo)
4.5
Caché y WordPress – SemanaWP - @fpuenteonline

31.
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
Caché y WordPress – SemanaWP - @fpuenteonline

32.
WordPress (II) (ejemplo)
4.5
Caché y WordPress – SemanaWP - @fpuenteonline

33.
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.
Caché y WordPress – SemanaWP - @fpuenteonline

34.
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
Caché y WordPress – SemanaWP - @fpuenteonline

35.
1. Definición y características
2. Uso
3. Objetivo
4. Estrategias
5. Conclusiones y notas
Sumario
Caché y WordPress – SemanaWP - @fpuenteonline

36.
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.
Caché y WordPress – SemanaWP - @fpuenteonline

37.
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.
Caché y WordPress – SemanaWP - @fpuenteonline

38.
La caché es tu amiga y
una buena estrategia de
mejora de rendimiento
para tu proyecto web
Caché y WordPress – SemanaWP - @fpuenteonline

39.
Ahora, no vuelvas a decir:
“¿Has probado a borrar la
caché?”
Caché y WordPress – SemanaWP - @fpuenteonline

40.
"Let's be careful out there“
Gracias
Fernando Puente
@fpuenteonline
Caché y WordPress – SemanaWP - @fpuenteonline