Enrique Amarista Graterol - eCommerce Day Chile 2024
Wpo mejora los tiempos de carga de tu web
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 | #SEMrushRoom
3. 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? @ALVAROFONTELA | #SEMrushRoom
4. 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? @ALVAROFONTELA | #SEMrushRoom
5. 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? @ALVAROFONTELA | #SEMrushRoom
7. 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 @ALVAROFONTELA | #SEMrushRoom
8. 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
@ALVAROFONTELA | #SEMrushRoom
9. 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 @ALVAROFONTELA | #SEMrushRoom
10. 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 @ALVAROFONTELA | #SEMrushRoom
11. 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 @ALVAROFONTELA | #SEMrushRoom
12. 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.
@ALVAROFONTELA | #SEMrushRoom
13. 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.
@ALVAROFONTELA | #SEMrushRoom
14. 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 @ALVAROFONTELA | #SEMrushRoom
15. 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.
@ALVAROFONTELA | #SEMrushRoom
16. 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 @ALVAROFONTELA | #SEMrushRoom
17. 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 @ALVAROFONTELA | #SEMrushRoom
18. 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 @ALVAROFONTELA | #SEMrushRoom
19. 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 @ALVAROFONTELA | #SEMrushRoom
20. 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 @ALVAROFONTELA | #SEMrushRoom
21. 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 @ALVAROFONTELA | #SEMrushRoom
22. 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
@ALVAROFONTELA | #SEMrushRoom
23. DOMAIN SHARDING O CARGA
PARALELA PARTE 2
2.10 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
21
@ALVAROFONTELA | #SEMrushRoom
24. 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
@ALVAROFONTELA | #SEMrushRoom
25. 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
@ALVAROFONTELA | #SEMrushRoom
26. HTTP/2 PARTE 2
2.12 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
24
HTTP /1.1 HTTP /2
@ALVAROFONTELA | #SEMrushRoom