Presentación de Alvaro Fontela de Raiola Networks en la primera MeetUp de WordPress Lugo WPO: Lo que debes saber sobre como optimizar correctamente tu WordPress.

1. CONSULTOR WORDPRESS & CO-FUNDADOR DE RAIOLA NETWORKS
“WPO: Lo que debes saber sobre cómo
optimizar correctamente tu WordPress”

2. ¿QUÉ CONSEGUIMOS APLICANDO
TÉCNICAS WPO?
01
MEJORAMOS LA
USABILIDAD Y LA
CONVERSIÓN.
APROVECHAMOS
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 | #WORDPRESSLUGO

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
mejorará. Al mejorar la usabilidad y la experiencia de
usuario conseguiremos aumentar la conversión.
¿QUÉ CONSEGUIMOS APLICANDO
TÉCNICAS WPO?
1.1 ¿QUÉ CONSEGUIMOS APLICANDO TÉCNICAS WPO? @ALVAROFONTELA | #WORDPRESSLUGO

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
aprovecharemos el“presupuesto de
rastreo”o“crawl budget”.
APROVECHAR MEJOR EL CRAWL
BUDGET
1.2 ¿QUÉ CONSEGUIMOS APLICANDO TÉCNICAS WPO? @ALVAROFONTELA | #WORDPRESSLUGO

5. 04
Con técnicas WPO además de mejorar la
velocidad de carga, reducimos el consumo
de recursos 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 APLICANDO
TÉCNICAS WPO?
1.3 ¿QUÉ CONSEGUIMOS APLICANDO TÉCNICAS WPO? @ALVAROFONTELA | #WORDPRESSLUGO

6. 12 TÉCNICAS WPO
PARA OPTIMIZAR
WORDPRESS

7. 05
En WordPress podemos implementar un
sistema 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 | #WORDPRESSLUGO

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
CACHE
WP FASTEST
CACHE
@ALVAROFONTELA | #WORDPRESSLUGO

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 | #WORDPRESSLUGO

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 | #WORDPRESSLUGO

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 | #WORDPRESSLUGO

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
conseguimos comprimir los archivos del
sitio web con GZIP automáticamente.
Podemos activar la compresión GZIP en Apache mediante el .htaccess o en
Nginx haciendo los cambios en los archivos de configuración.
@ALVAROFONTELA | #WORDPRESSLUGO

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 mejorado 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 | #WORDPRESSLUGO

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
dimensiones de las imágenes antes de subirlas.
Podemos optimizar las imágenes automáticamente al
subirlas mediante plugins.
OPTIMIZAR IMÁGENES PARTE 1
2.5 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS @ALVAROFONTELA | #WORDPRESSLUGO

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 opti-
mizar imágenes
automáticamente al subirlas.
Imsanity es un plu-
gin para Wordpress
que puede ajustar los
tamaños máximos
automáticamente en
WordPress.
@ALVAROFONTELA | #WORDPRESSLUGO

16. 14
Los servicios de CDN permiten servir los contenidos estáticos
desde servidores cercanos al visitante geográficamente
hablando.
En un Internet tan globalizado e internacional, los CDN cobran
especial 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 | #WORDPRESSLUGO

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 | #WORDPRESSLUGO

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 | #WORDPRESSLUGO

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
servidor.
CONTROLAR EL API HEARTBEAT EN
WORDPRESS PARTE 1
2.8 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS @ALVAROFONTELA | #WORDPRESSLUGO

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 | #WORDPRESSLUGO

21. 19
El cache de navegador ahorra recursos en general, pero
sobretodo ahorra peticiones al servidor.
Median te el cache de navegador se guardan archivos en el
ordenador del visitante al hacer la primera visita para que en
las siguientes 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 | #WORDPRESSLUGO

22. DOMAIN SHARDING O CARGA
PARALELA PARTE 1
2.10 12 TÉCNICAS WPO PARA OPTIMIZAR WORDPRESS
20
Mediante Domain Sharding o Carga
Paralela podemos 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 | #WORDPRESSLUGO

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

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 | #WORDPRESSLUGO

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 multiplexación mejora la carga de páginas con muchas peticiones.
HTTP/2 solo funciona con SSL, es decir, con HTTPS
@ALVAROFONTELA | #WORDPRESSLUGO

26. @ALVAROFONTELA | #WORDPRESSLUGO
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
#WORDPRESSLUGO
@ALVAROFONTELA
@RAIOLANETWORKS
RAIOLANETWORKS.ES