En nuestro webinar gratuito de este mes sobre WordPress tuvimos el placer de contar con Fernando Puente, CTO de La Estrategia de Chapman donde gestiona millones de visitas al mes, a nivel mundial y en cinco idiomas, con sites como SPORTYOU o BASKET4US, que nos dio sus consejos sobre “Estrategias de Caché” (#SGwebinar). En esta webinar repasamos definiciones, claves, técnicas, estrategias y recomendaciones relacionadas con la implementación y el uso de los sistemas de caché para tu proyecto web, y en particular, para tu proyecto con WordPress. La caché es una de las estrategia más importantes dentro del WPO, es decir, mejora del rendimiento de nuestro proyecto y optimización para una mejor gestión de los recursos. Te contamos desde los aspectos básicos de puesta en marcha, para que le pierdas el miedo, hasta las estrategias más avanzados o complejos, para grandes proyectos. Puedes leer más en Twitter #SGwebinar y ver el vídeo en nuestro canal de YouTube https://www.youtube.com/watch?v=wk6_opF-_kQ

1. @SiteGround_ESwww.siteground.es
#SGwebinar
Estrategias de caché
Fernando Puente
@fpuenteonline
por

2. BIO
Fernando Puente
Informático de vocación y de profesión
21 años de experiencia en TI, los últimos 11 en medios online
Consultor y colaborador de SiteGround
Consultor para La Estrategia de Chapman
Formador para no técnicos
@fpuenteonline
@SiteGround_ESwww.siteground.es
#SGwebinar

3. Sumario
● Definición
● Objetivos y estrategias
● Implementación
● Notas finales
@SiteGround_ESwww.siteground.es
#SGwebinar

4. ¿Por qué hablar de caché?
● Estrategia de mejora para nuestro proyecto
● Común a casi todos los proyectos
● Existen múltiples estrategias y servicios
● Válido para proyectos pequeños y grandes
● Es la mejor excusa que tenemos los desarrolladores
“Eso va a ser problema de la caché”
@SiteGround_ESwww.siteground.es
#SGwebinar

5. El caché / La caché
caché.
Del inglés cache
1. femenino. Inform. memoria caché. Memoria de acceso
rápido de una computadora, que guarda temporalmente
las últimas informaciones procesadas.
La caché
@SiteGround_ESwww.siteground.es
#SGwebinar

6. La caché
Almacenamiento intermedio que guarda datos
de manera temporal
● Almacenamiento posible en diferentes soportes
● Intermedio, requiere de un elemento origen y destino
● Datos, válido para diferentes tipos de contenido
● Temporal, limitado en el tiempo, es volátil
@SiteGround_ESwww.siteground.es
#SGwebinar

7. Sumario
● Definición
● Objetivos y estrategias
● Implementación
● Notas finales
@SiteGround_ESwww.siteground.es
#SGwebinar

8. ¿Qué almacenar en caché?
1. Objetos estáticos
2. Objetos dinámicos, su respuesta
3. Fragmentos de datos, en código
4. Datos de navegación
@SiteGround_ESwww.siteground.es
#SGwebinar

9. Objetivos de la caché
1. Acelerar la velocidad de navegación del usuario
2. Descargar el menor número de contenidos
3. Reducir la carga y número de recursos necesarios en
nuestro servidor
@SiteGround_ESwww.siteground.es
#SGwebinar

10. Estrategias de caché
● Navegador cliente
● CDN intermedia
● Servidor (proxy inversa o balanceador)
● Programación
● Plugin de WordPress
● Base de datos
@SiteGround_ESwww.siteground.es
#SGwebinar

11. Sumario
● Definición
● Objetivos y estrategias
● Implementación
● Notas finales
@SiteGround_ESwww.siteground.es
#SGwebinar

12. 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
@SiteGround_ESwww.siteground.es
#SGwebinar

13. Básico (navegador cliente)
Cabeceras HTTP (Cache-Control & Expires)
● Definido 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
● Indica al navegador qué archivos almacenar y por cuanto
tiempo
@SiteGround_ESwww.siteground.es
#SGwebinar

14. Navegador cliente (ejemplo)
@SiteGround_ESwww.siteground.es
#SGwebinar
<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>

15. Básico (plugin de caché)
● Configurado en el propio WordPress
● Para objetos dinámicos, nuestras páginas. Algunos,
incluyen funciones para objetos estáticos
● Pueden incorporar otras funcionalidades y mejoras de
rendimiento (minify o Mod_Rewrite)
● Basados normalmente en filesystem. Sólo recomendable
para discos SSD en el servidor
@SiteGround_ESwww.siteground.es
#SGwebinar

16. Básico (plugin de caché)
@SiteGround_ESwww.siteground.es
#SGwebinar

17. Intermedio (navegador cliente)
Service Workers + Local storage o utilizar Cookies para
almacenar contenido de usuario
● Necesidad de programación específica en nuestro sitio
● Sólo válidos para almacenar recursos de sesión o
específicos del navegador
● Útil para entornos con conectividad reducida
@SiteGround_ESwww.siteground.es
#SGwebinar

18. Intermedio (CDN de tipo DNS)
● Servicio intermedio entre tus servidores web y el
navegador, 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
@SiteGround_ESwww.siteground.es
#SGwebinar

19. Intermedio (CDN de tipo DNS)
@SiteGround_ESwww.siteground.es
#SGwebinar

20. Intermedio (Plugin avanzado)
● 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 o Redis
@SiteGround_ESwww.siteground.es
#SGwebinar

21. Intermedio (Plugin avanzado)
@SiteGround_ESwww.siteground.es
#SGwebinar

22. Intermedio (Programación)
Almacenamiento en memoria o persistente de objetos
● Clase WP_Object_Cache + Memcached
● Transients API
Nota: no acceder nunca directamente a la BD, hacerlo a
través de WP
@SiteGround_ESwww.siteground.es
#SGwebinar

23. @SiteGround_ESwww.siteground.es
#SGwebinar
<?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 );
} ?>
Intermedio (Programación)

24. Avanzado (Reverse proxy)
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
● Se utilizan también como balanceadores de contenido y
capa de seguridad frente a ataques DDoS
@SiteGround_ESwww.siteground.es
#SGwebinar

25. Avanzado (Reverse proxy)
@SiteGround_ESwww.siteground.es
#SGwebinar

26. Avanzado (MySQL)
Servidor
● Habilitar y configurar Query Cache
● Almacenamiento en memoria
Proxy
● Almacenamiento intermedio en memoria
● Añaden más funcionalidades (balanceo, HA, ….)
● El mejor ejemplo, ProxySQL
@SiteGround_ESwww.siteground.es
#SGwebinar

27. @SiteGround_ESwww.siteground.es
#SGwebinar
# 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
Avanzado (MySQL)

28. Micro-caché en servidor
● A nivel de balanceador, por delante de los servicios web
● Intervalos muy cortos de tiempo
● Soporte sólo en memoria
Precompilar PHP (opcode caching)
● OPcache, APCu, PHP-FPM, ...
Master del Universo
@SiteGround_ESwww.siteground.es
#SGwebinar

29. Sumario
● Definición
● Objetivos y estrategias
● Implementación
● Notas finales
@SiteGround_ESwww.siteground.es
#SGwebinar

30. 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
@SiteGround_ESwww.siteground.es
#SGwebinar

31. 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
@SiteGround_ESwww.siteground.es
#SGwebinar

32. La caché ahora es tu amiga
y una buena estrategia de
mejora de rendimiento para
tus proyectos web
@SiteGround_ESwww.siteground.es
#SGwebinar

33. Síguenos en
@SiteGround_ES
SiteGround España
SiteGround España
@SiteGround_ESwww.siteground.es
#SGwebinar
SiteGround España