Listado de 12 técnicas WPO (Web Performance Optimization) para optimizar Wordpress y conseguir que cargue lo mas rápido posible. Presentación utilizada por Alvaro Fontela de Raiola Networks en el congreso online DSM17 organizado por Miguel Florido de MarketingandWeb.

1. CONSULTOR WORDPRESS & CO-FUNDADOR DE RAIOLA NETWORKS
“12 TÉCNICAS WPO PARA OPTIMIZAR
WORDPRESS”

2. ¿QUÉ CONSEGUIMOS APLICAN-
DO TÉCNICAS WPO?
01
MEJORAMOS LA
USABILIDAD Y LA
CONVERSIÓN.
APROVECHA-
MOS MEJOR EL
CRAWL BUDGET
ASIGNADO.
REDUCIR EL
CONSUMO DE
RECURSOS DE
LA WEB EN EL
SERVIDOR.
1.0 ¿QUÉ CONSEGUIMOS APLICANDO TÉCNICAS WPO? @ALVAROFONTELA | #DSM17

3. @ALVAROFONTELA | #DSM17
02
Los usuarios, clientes y visitantes de
una web quieren que la web cargue
rápido.
Si un sitio carga rápido, la experiencia de usuario mejo-
rará. Al mejorar la usabilidad y la experiencia de usua-
rio conseguiremos aumentar la conversión.
¿QUÉ CONSEGUIMOS APLICAN-
DO TÉCNICAS WPO?
1.1 ¿QUÉ CONSEGUIMOS APLICANDO TÉCNICAS WPO?

4. @ALVAROFONTELA | #DSM17
03
Si Google puede descargar más rápido
nuestro sitio web, podrá rastrear más
páginas en el mismo tiempo.
Cuantas más páginas sea capaz de
rastrear el bot de Google, mejor apro-
vecharemos el “presupuesto de ras-
treo” o “crawl budget”.
APROVECHAR MEJOR EL
CRAWL BUDGET
1.2 ¿QUÉ CONSEGUIMOS APLICANDO TÉCNICAS WPO?

5. @ALVAROFONTELA | #DSM17
04
Con técnicas WPO además de mejorar la veloci-
dad de carga, reducimos el consumo de recur-
sos en el servidor.
Las técnicas WPO que más ayudan a reducir el consumo de recursos
en el servidor son las relacionadas con los sistemas de cache.
¿QUÉ CONSEGUIMOS APLICAN-
DO TÉCNICAS WPO?
1.3 ¿QUÉ CONSEGUIMOS APLICANDO TÉCNICAS WPO?

6. 12 TÉCNICAS WPO
PARA OPTIMIZAR
WORDPRESS

7. @ALVAROFONTELA | #DSM17
05
En WordPress podemos implementar un siste-
ma de cache mediante plugins.
Lo más común es implementar un cache de página, es decir, que
guarda una copia preprocesada de la página.
Existen decenas de plugins de cache para WordPress.
IMPLEMENTAR UN CACHE
PARTE 1
2.1 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS

8. @ALVAROFONTELA | #DSM17
06
En Raiola Networks tenemos 3 plugins de cache favoritos:
IMPLEMENTAR UN CACHE
PARTE 2
2.1 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
WP ROCKET W3 TOTAL CACHEWP FASTEST CACHE

9. @ALVAROFONTELA | #DSM17
07
Al minificar archivos JS y CSS reducimos su tama-
ño y los simplificamos.
Al combinar archivos JS y CSS combinamos varios
archivos JS o varios archivos CSS en uno solo.
COMBINAR Y MINIFICAR CSS Y
JAVASCRIPT PARTE 1
2.2 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS

10. @ALVAROFONTELA | #DSM17
08
Podemos minificar y combinar de forma manual si somos
programadores.
Podemos minificar y combinar de forma automática con
plugins, aunque no suele ser efectivo.
Un buen plugin para minificar y combinar en WordPress
es Autoptimize.
COMBINAR Y MINIFICAR CSS Y
JAVASCRIPT PARTE 2
2.2 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS

11. @ALVAROFONTELA | #DSM17
09
Mediante carga asíncrona podemos hacer que varios elementos o
scripts se carguen al mismo tiempo.
CARGA ASÍNCRONA
Esto elimina muchas esperas innecesarias.
2.3 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS

12. @ALVAROFONTELA | #DSM17
10
COMPRESIÓN GZIP O DEFLATE
PARTE 1
2.4 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
Mediante la compresión GZIP o Deflate conse-
guimos comprimir los archivos del sitio web
con GZIP automáticamente.
Podemos activar la compresión GZIP en Apache mediante el .htac-
cess o en Nginx haciendo los cambios en los archivos de configura-
ción.

13. @ALVAROFONTELA | #DSM17
11
COMPRESIÓN GZIP O DEFLATE
PARTE 2
2.4 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
NetFlix ha conseguido ahorrar un
43% de ancho de banda y ha me-
jorado la velocidad de carga un
25% solo activando la compresión
GZIP.
Evidentemente, no todos los sitios web tienen el
trafico de NetFlix y por lo tanto no se conseguirán
los mismos resultados con la compresión GZIP.

14. @ALVAROFONTELA | #DSM17
12
El mayor problema de WPO de la mayoría de las webs son las
imágenes sin optimizar.
El 99% de los autores de contenido web no ajustan las di-
mensiones de las imágenes antes de subirlas.
Podemos optimizar las imágenes automáticamente al subir-
las mediante plugins.
OPTIMIZAR IMÁGENES PARTE 1
2.5 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS

15. @ALVAROFONTELA | #DSM17
13
OPTIMIZAR IMÁGENES PARTE 2
2.5 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
EWWW IMAGE OPTIMIZER O IMAGIFY IMSANITY
EWWW Image Optimizer o Imagify son
dos excelentes alternativas para optimi-
zar imágenes automáticamente al subir-
las.
Imsanity es un plu-
gin para Wordpress
que puede ajustar los
tamaños máximos
automáticamente en
WordPress.

16. @ALVAROFONTELA | #DSM17
14
Los servicios de CDN permiten servir los contenidos estáticos des-
de servidores cercanos al visitante geográficamente hablando.
En un Internet tan globalizado e internacional, los CDN cobran es-
pecial importancia para cualquier proyecto web.
Al servir los archivos desde localizaciones geográficas cercanas al
visitante, bajan las latencias y la web carga más rápido.
IMPLEMENTAR UN CDN PARTE 1
2.6 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS

17. @ALVAROFONTELA | #DSM17
15
Existen cientos de servicios de CDN, nosotros recomendamos estos:
IMPLEMENTAR UN CDN PARTE 2
CLOUDFLARE KEYCDN CDN77 CLOUDFRONT
2.6 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS

18. @ALVAROFONTELA | #DSM17
16
Esto es un Query String:
DESACTIVAR LOS QUERY
STRINGS
A efectos prácticos reales no aportan nada, pero pueden dificultar
el cacheo de los elementos que cargan con Query Strings.
2.7 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS

19. @ALVAROFONTELA | #DSM17
17
El API Heartbeat permite usar AJAX en Wordpress.
Muchos plugins grandes como WooCommerce y muchos themes
complejos abusan del API Heartbeat y pueden provocar problemas
de rendimiento.
El API Heartbeat realiza peticiones cada ciertos segundos al servi-
dor.
CONTROLAR EL API HEARTBEAT
EN WORDPRESS PARTE 1
2.8 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS

20. @ALVAROFONTELA | #DSM17
18
Mediante plugins o mediante una función en el
functions.php podemos desactivar los “pulsos” del
API Heartbeat o aumentar el periodo de tiempo
entre “pulsos”.
CONTROLAR EL API HEARTBEAT
EN WORDPRESS PARTE 2
2.8 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS

21. @ALVAROFONTELA | #DSM17
19
El cache de navegador ahorra recursos en general, pero sobretodo
ahorra peticiones al servidor.
Mediante el cache de navegador se guardan archivos en el ordena-
dor del visitante al hacer la primera visita para que en las siguien-
tes visitas no sea necesario descargar los archivos.
Podemos activar el “browser caching” mediante el .htaccess en
Apache o en los archivos de configuración de Nginx.
ACTIVAR EL CACHE DE
NAVEGADOR
2.9 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS

22. @ALVAROFONTELA | #DSM17
DOMAIN SHARDING O CARGA
PARALELA PARTE 1
2.10 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
20
Mediante Domain Sharding o Carga Paralela po-
demos hacer que se carguen varios elementos
de la web a la vez.
El Domain Sharding también se suele aplicar cuando implementamos
un CDN. Podemos configurar la carga paralela en WordPress usando el
plugin “Domain Sharding” o con algunos plugins de cache conocidos
como W3 Total Cache o WP Rocket

23. @ALVAROFONTELA | #DSM17
DOMAIN SHARDING O CARGA
PARALELA PARTE 2
2.10 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
21

24. @ALVAROFONTELA | #DSM17
PHP7 MEJOR QUE PHP5
2.11 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
22
Una de las mejoras de PHP7 frente a las versiones anteriores es el rendimiento.
PHP7 puede llegar a ofrecer un 300% más de rendimiento que PHP 5.4
PHP 5.4.45
PHP 7.0.0
BENCHMARK DE VERSIONES DE PHP
Test math Test stringmanipulation Test loops Test ifelse

25. @ALVAROFONTELA | #DSM17
HTTP/2 PARTE 1
2.12 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
23
HTTP/2 ofrece varias mejoras en lo que a WPO se
refiere.
La mejora principal de WPO de HTTP/2 es la multiplexación.La multipl-
exación mejora la carga de páginas con muchas peticiones.
HTTP/2 solo funciona con SSL, es decir, con HTTPS

26. @ALVAROFONTELA | #DSM17
HTTP/2 PARTE 2
2.12 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
24
HTTP /1.1 HTTP /2

27. CONSULTOR WORDPRESS & CO-FUNDADOR DE RAIOLA NETWORKS
#DSM17
@ALVAROFONTELA
@RAIOLANETWORKS
RAIOLANETWORKS.ES