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
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
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
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
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
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
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