Compartir algunos mecanismos para agilizar los tiempos de carga de las aplicaciones, especialmente con optimizaciones al servidor web, endpoints con la REST API de WordPress así como prácticas de caché en navegador, base de datos y carga en demanda de recursos (lazy load e inserción de scripts y CSS solo donde es requerido).

1. Si tu aplicación
no responde
rápido…
1
pierdes clientes.

2. Quiobo
Jesús Franco Martínez
Para servir a la virgencita de
Guadalupe y a usted.
Twitter @jefrancomix
Github @tzkmx 2
Samaya Companion
Aplicación móvil para distribuir
contenidos a fuerza de ventas.
Trabajo para

3. No hay soluciones, solo compromisos
● Excelente producto, pero muy caro.
● ¡Es muy fácil de usar! Pero,
¿por qué no hace …? ¡Lo necesito!
● ¡Hace todo lo que necesitamos ....
pero es difícil de usar!
3
La realidad es que la solución perfecta NO EXISTE.

4. ESTRATEGIA, para alcanzar OBJETIVOS
4
¿Page Speed?
¿Contentful Paint?¿Time to Paint?
“Que cargue rápido”
¿Y Slow?
¿Todo? Pero tienes muchos contenidos
¿Por donde empezar?

5. YAGNI
You Ain’t Gonna Need It
5
Si no lo necesitas YA, ve
primero por lo que sí.
● Estilos
● Videos
● Widgets
● Imágenes
● Scripts
● Fuentes
● Íconos

6. 1.
Métricas
¿Todos los indicadores son
igual de importantes?

7. “ Mide dos
veces,
corta solo
una.
7

8. ¿Cómo medir, para establecer objetivos?
8No uses solo una métrica, mide dos (o más) veces

9. ¿Qué métricas importan más?
9
Mide dos (o más) veces
Lo más importante es tus clientes, y para ellos sus clientes.

10. YAGNI
El primer truco está en traer
10
primero lo que YA necesitas.

11. Lazy Loading
Descarga recursos en
demanda.
Cuidado con ‘onScroll’
Drena batería y bloquea.
Usa IntersectionObserver
No hay soluciones, solo compromisos (2)
11
Lazy Loading mejor para...
● Imágenes grandes.
● Vídeos y widgets externos
(YouTube, “Me gusta”, timelines)
● Anuncios
No tan bueno para…
● Animaciones por scroll.
● Muchas imágenes pequeñas.

12. No uses Lazy Loading para
Imágenes y tipografías
“above the fold”.
Estructura del contenido
(accesibilidad e
indexabilidad).
No hay soluciones, solo compromisos (3)
12
CSS Critical Path
● CSS que se requiere ya, cárgalo
primero.
Algo bueno, algo malo
● Wix nos optimiza el Critical Path
● Wix nos hace muchos requests
para SUS métricas.

13. 2.
Primero lo
primero
“Reach for the low hanging
fruit”

14. Cache 1. Navegador
Costo de
implementación: bajo
Poner en el lugar adecuado.
Ganancia: 30 a 40 puntos de
PageSpeed (recursos sin cacheo
bajan puntos).
¿Lugar adecuado?
● .htaccess
● Httpd.conf (mejor)
● location block en
NginX
Compromisos
.htaccess implica
performance hit
httpd.conf hosting
barato no da acceso
14

15. Cache de Navegador (implementación)
Consejo si vas empezando
Usa W3 Total Cache.
Copia y estudia
las directivas que introduce.
Mide tus ganancias.
Si usas NginX, después retíralo,
tiene caché propio más óptimo.
Si usas Apache quédatelo.
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1
month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus
1 month"
</IfModule>
15
Ejemplo

16. Aprovecha aún más el navegador
Comprime
Costo bajo.
Ahorro en tiempos
y ancho de banda.
Directivas en .htaccess,
location, etc.
16
Optimiza estilos
Concatena y minimiza estilos.
Hummingbird y AssetsMinify (le falta amor)
Evita que los plugins metan sus scripts
por todos lados, al menos.

17. 17
Evita 404, más aún en estilos y scripts
Un solo recurso mal enlazado puede costar más
en resolverse que recursos 10,000% mayores
que sí son descargables.
¡1.4Kb de 404 tardó más que 150.4Kb!

18. Otras recomendaciones esenciales
18
Optimiza
imágenes
SmushIt
Vigila tus
plugins
Evita cargar
fuentes y scripts
innecesarios

19. 19
3.
Vigila plugins y
temas
Vigila
● Scripts por todos lados
● Fuentes que no necesitas
● Estilos a 404 o con @import
Manténlos actualizados…
● Tienes que hacer pruebas
● No tengas plugins inactivos

20. 20
Actualiza
wordpress.org libera
continuamente versiones
con correcciones de
seguridad
Los plugins no tanto,
pero al menos
inténtalo.
Prueba
Y prueba, y prueba.
Automatiza por tu
salud mental:
● Respaldos
● Pruebas
● Disponibilidad
Refina
No modifiques temas y
plugins, a menos que
tu los vayas a
mantener.
Escribe temas hijo y
plugins de
optimización.

21. Resumiendo
Métricas de alto impacto
● Caché de assets estáticos
● Compresión de assets
● Evitar 404 (monitorea)
● Optimiza imágenes.
● Elimina lo que tu (micro)sitio, o
páginas específicas clave, no
necesitan.
● Si lo necesitan, pero no al
apenas entrar, carga en
demanda.
21
La seguridad es un
proceso
No tengas nada en producción
“por si se ocupa”. (YAGNI)
Manténte actualizado.
Escribe tus propios plugins para
controlar excesos por los que se
optó para salir rápido a mercado.

22. 22
¡Gracias!
¿Preguntas, comentarios?
Atento en
@jefrancomix
jesus.franco@samaya.mx