EL WPO es un conjunto de técnicas a cualquier nivel para mejorar el rendimiento y velocidad de carga de una web. Aquí encontrarás los 10 mandamientos para hacer que tu WordPress cargue rápido

1. Pablo López
@desarrollowp

2. ¿QUÉ NO ES WPO?
WordPress Optimization

3. ¿QUÉ NO ES WPO?
Instalar 3 ó 4 plugins y listo

4. ¿QUÉ SI ES WPO?
Web Performance Optimization (Optimización de
Rendimiento Web)
WPO son un conjunto de técnicas a cualquier nivel
para optimizar el rendimiento y velocidad de carga de
nuestra web.
El WPO es una estrategia y consta de varios pasos
y/o fases:
- Auditoría
- Consultoría

5. ¿POR QUÉ ES IMPORTANTE?
- Amazon registra una disminución del 1% en los
ingresos por cada 100ms de aumento en el tiempo
de carga
- AliExpress redujo el tiempo de carga un 36% y
registró un incremento del 10,5% en pedidos y un
27% en la conversión para nuevos clientes
- Netflix rebajó un 43% en su factura de ancho de
banda después de activar Gzip
- 53% de las visitas a sitios móviles se abandonan
después de 3 segundos
- Más información en https://wpostats.com/

6. ¿POR QUÉ ES IMPORTANTE?

7. WPO: AUDITORÍA
Dentro de la estrategia WPO el primer paso es la
Auditoría: Medir, analizar e identificar los posibles
problemas de velocidad de nuestro sitio (No sólo la
home)
- PageSpeed Insights
- GTmetrix
- Pingdom Tools
- WebPageTest
- Lighthouse (Chrome)
- Webgrind / X-debug
- Microtime

8. WPO: CONSULTORÍA
Una vez identificados los problemas el siguiente paso
es definir un plan de acción y hacerse muchas
preguntas:
- ¿Necesito cambiar el diseño?
- ¿Necesito cambiar de proveedor de hosting?
- ¿Necesito instalar algún plugin?
- ¿Me sobran algunos plugins?
- ¿Necesito educar a los que contribuyen contenido?
- ¿Necesito refactorizar alguna parte del código de
mi tema?
- ¿Qué hago si algún o algunos problemas son de
plugins de terceros?
- …

9. WPO: LOS 10 MANDAMIENTOS
1. Optimizarás las imágenes sobre todas las cosas
2. LazyLoad, no cargarás contenido en vano
3. Minificarás los CSS, JS y HTML
4. Utilizarás correctamente la caché
5. No contratarás hostings baratos
6. No bloquearás con JS y CSS la visualización del
contenido de la mitad superior de la página
7. Cargarás condicionalmente las librerías/recursos y
utilizarás solamente lo necesario
8. Optimizarás el código
9. Mantendrás limpia y optimizada tu base de datos
10.Utilizarás una CDN

10. WPO: OPTIMIZAR IMÁGENES
Cuanto más pesen nuestras imágenes, más lenta
cargará nuestra web
- Debemos optimizar las imágenes antes de subirlas.
En dos sentidos:
- En tamaño
- En calidad
- Los archivos PNG son casi siempre superiores a los
GIF.
- Los archivos GIF están desaconsejados. Plantéatelo
solo para gráficos muy pequeños o simples.
- Usa archivos JPG para todas las imágenes de estilo
fotográfico.
- No utilices los archivos BMP o TIFF.
1

11. WPO: OPTIMIZAR IMÁGENES
Optimizar imágenes en tamaño o peso:
- Server Scaled Images
- Crear thumbnails para utilizar en diferentes
resoluciones
- Guardar para web y eliminar meta información
(autor, cámara, ISO, tiempo exposición, etc..)
1

12. WPO: OPTIMIZAR IMÁGENES
Optimizar imágenes en calidad:
- EWWW Image Optimizer, WP Smush, Imagify…
- Lossless Compression vs Lossy Compression
1
Imagen Proporción Peso
Original 3072x2304 2,40MB
Optimizada en tamaño 1024x768 730KB
Optimizada para web 1024x768 121KB
Compresión Agressive 1024x768 63,1KB
Compresión Ultra 1024x768 35,4KB

13. WPO: OPTIMIZAR IMÁGENES
1

14. WPO: LAZY LOAD
Es aplazar la carga de los elementos (imágenes,
vídeos, frames…) que están fuera del viewport hasta
que el usuario llegue a ellos haciendo scroll
2

15. WPO: MINIFICAR CSS, JS Y HTML
Minificar archivos CSS, JS y HTML es eliminar bytes
innecesarios como espacios, saltos de línea, sangrías,
comentarios, etc…
Conseguimos reducir el peso y acelerar la descarga,
el análisis y el tiempo de ejecución
3
Recurso Development Min
Font Awesome 4.7.0 37KB 31KB
Bootstrap 3.3.7 CSS 143KB 119KB
Bootstrap 3.3.7 JS 69KB 37KB
jQuery 3.2.0 262KB 85KB

16. WPO: CACHÉ
Un plugin de caché utilizado correctamente
aumentará la velocidad de carga de nuestra web (WP
Super Cache, W3 Total Cache, WP Rocket…)
- Especificar caché de navegador (Caducidad
recursos estáticos)
- Habilitar la compresión (gZIP/deflate)
- Minificar recursos estáticos
- La web se sirve más rápidamente
- Ahorro ancho de banda / transferencia. Menor
sobrecarga servidor
- Ojo con cachear formularios y/o páginas dinámicas
“La caché funciona la segunda vez”
4

17. WPO: HOSTING
No busquéis hostings baratos
- Hardware, SSD, SSL, PHP7, HTTP/2…
- Tiempos de respuesta prolongados espantan a
posibles clientes
- https://www.websitepulse.com/help/testtools.serv
er-test.html
5

18. WPO: JS Ó CSS BLOQUEANDO…
No afecta al tiempo de carga total pero sí a la
percepción del usuario.
Respecto a los archivos JavaScript, la recomendación
es cargar o mover los scripts al footer
- Si el tema o plugin es nuestro, indicaremos true en
el parámetro $in_footer de la función
wp_enqueue_script()
- Si los archivos JS son de un tema o plugin de
terceros debemos moverlos o forzarlos al pie
6

19. WPO: JS Ó CSS BLOQUEANDO…
Respecto a los archivos CSS, la solución no es tan
sencilla y querer pasar este filtro puede provocar
efectos no deseados
Lo normal es añadir las hojas de estilo, las fuentes de
google o FontAwesome, etc… en el <head>
- Para el CSS la solución pasaría por dividir e incluir
en línea los estilos necesarios para el primer
vistazo y cargar el resto del CSS en el pie
- Si cargamos las fonts en el pie aparecerá el FOUT
(Flash Of Unstyled Text)
6

20. WPO: USAR SÓLO LO NECESARIO
Mucha gente tiene tendencia a abusar de la
instalación y uso de plugins
¿Realmente necesito todos?
¿Están optimizados?
“Para dos líneas de código no hace falta instalar un
plugin”
David Navia, WC Sevilla 2016
Si utilizas Bootstrap, selecciona sólo los componentes
que necesites
Si utilizas FontAwesome, plantéate SVG o hacer un
7

21. WPO: USAR SÓLO LO NECESARIO
¿Por qué cargar todos los CSS y JS nuestros y de
terceros en todas las páginas de nuestro sitio?
Lo ideal es cargar condicionalmente los CSS y JS en
los templates donde hagamos uso de ellos
Buscaremos los handles de los recursos añadidos por
nuestro tema y plugins y a través de las funciones
condicionales (is_home(), is_single(), is_page(),
etc…) los eliminaremos de aquellas plantillas donde
no se utilicen
“Pon un if en tu vida”
7

22. WPO: USAR SÓLO LO NECESARIO
7

23. WPO: USAR SÓLO LO NECESARIO
7

24. WPO: OPTIMIZAR CÓDIGO
Optimizar el código a todos los niveles puede
ayudarnos a reducir considerablemente los tiempos
de carga:
8
- Nombres de las variables y clases
- Optimizar las queries
- Cachear las queries
- Lógica Condicional

25. - Controlar los plugins que hemos
instalado/eliminado y nos han dejado sus
tablas/datos
- Controlar número de revisiones
- Controlar comentarios spam
- Opciones/transients
- Vaciar papelera
WPO: BASE DE DATOS
Con el paso del tiempo la base de datos puede crecer
exponencialmente y sin control. Es aconsejable
mantenerla limpia y optimizada:
9

26. WPO: USO DE CDN
El tiempo de carga es mayor cuanto
más lejos está el servidor de Origen.
Un visitante de Madrid que trate de
acceder a una web alojada en
Australia tendrá un tiempo de espera prolongado.
Una CDN minimiza el problema ya que te servirá el
contenido estático (imágenes, CSS, JS) en múltiples
servidores a lo largo del mundo.
10

27. ¿Y SI ES DE TERCEROS?
En nuestras mediciones podemos encontrar errores
que son de terceros, ajenos a nuestro control:
¿Cómo solucionarlo?
- Ponte en contacto con ellos
- Descarga en recurso en local

28. ¿TIEMPO DE CARGA ÓPTIMO?
Lo que transcurre entre que se pone un semáforo en
verde hasta que te pita el conductor de atrás
Nuestro objetivo debe ser menos de 1s - 1.2s

30. ¡ESTO ES TODO AMIG@S!
Pablo López Mestre
@desarrollowp
desarrollowp.com
WP Manager en UNIR
¿Preguntas?