Presentación utilizada en la ponencia de Alvaro Fontela de Raiola Networks en el DMD Madrid 2017, donde se habla de como utilizar técnicas de optimización WPO para conseguir una mejora radical en la conversión y en la usabilidad, provocando de rebote una subida de los beneficios aportados por cualquier proyecto web o ecommerce.

1. CONSULTOR WORDPRESS & CO-FUNDADOR DE RAIOLA NETWORKS
“MEJORAR LA USABILIDAD Y
LA CONVERSIÓN CON WPO”

2. ¿QUÉ SON TÉCNICAS WPO Y PARA QUÉ SIRVEN?
¿QUÉ SON TÉCNICAS WPO Y PARA QUE SIRVEN?
@ALVAROFONTELA#DMD17
REDUCEN LOS TIEMPOS DE CARGA
MEJORAN LA INDEXACIÓN
REDUCEN EL CONSUMO DE RECURSOS
MEJORAN LA USABILIDAD

3. ¿CÓMO TE PUEDEN AYUDAR LAS TÉCNICAS WPO?
¿CÓMO TE PUEDEN AYUDAR LAS TÉCNICAS WPO?
@ALVAROFONTELA#DMD17
Aplicar correctamente técni-
cas WPO a tu proyecto web
puede hacer que la conversión y los resul-
tados generales de tu proyecto se dispa-
ren.

4. EL CASO DE WALMART
¿CÓMO TE PUEDEN AYUDAR LAS TÉCNICAS WPO?
@ALVAROFONTELA#DMD17
Walmart consiguió una mejora del
2% en las conversiones al mejorar
1 segundo los tiempos de carga,
además de mejorar los ingresos
en un 1% por cada 0,1 segundos de
mejora en el tiempo de carga.

5. EL CASO DE ALIEXPRESS
¿CÓMO TE PUEDEN AYUDAR LAS TÉCNICAS WPO?
@ALVAROFONTELA#DMD17
AliExpress redujo el tiempo de car-
ga un 36% y esto se reflejó en un
10% más de pedidos y un 27% más
de conversión en nuevos clientes.

6. EL CASO DE AMAZON
¿CÓMO TE PUEDEN AYUDAR LAS TÉCNICAS WPO?
@ALVAROFONTELA#DMD17
Amazon vio una caída del 1% en los
ingresos por cada 0,1 segundo de
retraso añadido en el tiempo de
carga.

7. EL CASO DE GOOGLE
¿CÓMO TE PUEDEN AYUDAR LAS TÉCNICAS WPO?
@ALVAROFONTELA#DMD17
Google ha demostrado que si re-
trasa la velocidad de carga de los
resultados de búsqueda en 0,4 se-
gundos, se abandonan un 0,59% de
búsquedas.

8. EL CASO DE BING
¿CÓMO TE PUEDEN AYUDAR LAS TÉCNICAS WPO?
@ALVAROFONTELA#DMD17
Un retraso en la carga de 1 segun-
do en los resultados de búsqueda
de Bing, supone una bajada de in-
gresos en publicidad del 2,8% y un
retraso de 2 segundos supone una
bajada de ingresos del 4,3%.

9. EL CASO DE YAHOO
¿CÓMO TE PUEDEN AYUDAR LAS TÉCNICAS WPO?
@ALVAROFONTELA#DMD17
Un retraso de 0,4 segundos en la
carga del buscador provoca una
bajada del 5% en el tráfico general
de la página del buscador.

10. EL CASO DE NETFLIX
¿CÓMO TE PUEDEN AYUDAR LAS TÉCNICAS WPO?
@ALVAROFONTELA#DMD17
Aplicar la compresión GZIP a to-
dos los elementos web del servicio
consiguió una mejora de casi el
25% en velocidad de carga y un 43%
de ahorro en el ancho de banda
usado por los servidores web de
NetFlix.

11. 8 TÉCNICAS WPO
QUE PODEMOS
APLICAR
¿QUÉ TÉCNICAS WPO EFECTIVAS
PODEMOS APLICAR?
@ALVAROFONTELA#DMD17

12. 1
Sistemas de
caché de
página
¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODE-
MOS APLICAR?
PARTE 1
¿QUÉ ES Y QUÉ HACE UN CACHÉ?
Los sistemas de cache guardan una copia procesada
de la pagina, ahorrando potencia
de proceso y tiempo de proceso.
@ALVAROFONTELA#DMD17

13. 1
Sistemas de
caché de
página
¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODE-
MOS APLICAR?
PARTE 2
PODEMOS ENCONTRAR SISTEMAS DE CACHÉ
en el servidor como Varnish o Nginx funcionando
como proxy inverso.
Los caches de página en servidor son más potentes,
pero los cache en formato plugin son más accesibles y
configurables para el usuario normal sin conocimientos.
PODEMOS ENCONTRAR SISTEMAS DE CACHÉ
en formato plugin, como por ejemplo WP Rocket o
W3 Total Cache para Wordpress.
#DMD17 @ALVAROFONTELA

14. Optimización del JS y el CSS
PARTE 1
2¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODEMOS APLICAR?
Minificar el HTML, CSS y JS reduce el
peso de los archivos HTML, CSS y JS
que se descargan al navegador del visi-
tante y los hace menos complejos.
Combinar archivos JS o CSS reduce el nu-
mero de archivos JS y CSS, reduciendo las
peticiones de la carga del sitio web, pero no
siempre es posible.
@ALVAROFONTELA#DMD17

15. Optimización del JS y el CSS
PARTE 2
2¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODEMOS APLICAR?
Minificar y combinar de forma manual requiere co-
nocimientos avanzados sobre Javascript y CSS.
En los CMS como Wordpress se
puede minificar y combinar de
forma automática con plugins
como Autoptimize, pero no siem-
pre es efectivo.
@ALVAROFONTELA#DMD17

16. Carga asíncrona
¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODEMOS APLICAR?
3
Algunos elementos pueden cargar de
forma asíncrona, es decir, varios ele-
mentos al mismo tiempo, reduciendo
el tiempo de carga drásticamente en
la mayoría de casos.
@ALVAROFONTELA#DMD17

17. Cuando la web es grande como NetFlix, los resultados
son notables.
4
Compresión
GZIP
¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODE-
MOS APLICAR?
@ALVAROFONTELA
Activar la compresión GZIP reduce el ancho
de banda usado.
Solo se comprimen los archivos base texto
como HTML, CSS y JS.
La diferencia en la velocidad de carga suele
ser inapreciable.
#DMD17

18. El navegador del visitante puede guardar en cache algu-
nos elementos como imágenes, CSS o JS para que no
tenga que ser descargado en posteriores visitas.
Esta técnica reduce mucho los recursos usados y me-
jora la velocidad de carga en visitas recurrentes, pero
puede ser un arma de doble filo a la hora de actualizar la
web.
@ALVAROFONTELA
5
Cache de
navegador
¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODE-
MOS APLICAR?
#DMD17

19. Servicios de CDN
PARTE 1
6¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODEMOS APLICAR?
Un servicio de CDN distribuye los elementos estáticos
como imágenes o archivos JS y CSS entre otros, mediante
servidores ubicados lo mas cerca posible del visitante.
Los archivos se replican por
todos los puntos de presencia
del servicio CDN alrededor del
mundo.
@ALVAROFONTELA#DMD17

20. Servicios de CDN
PARTE 2
6¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODEMOS APLICAR?
Con un servicio de CDN se reducen las latencias al servir los ar-
chivos, además que se puede aplicar la técnica Domain Shar-
ding o carga paralela de elementos sin necesidad de HTTP/2.
@ALVAROFONTELA#DMD17

21. Servicios de CDN
PARTE 3
6¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODEMOS APLICAR?
Existen muchos servicios de CDN, nosotros recomenda-
mos estos:
@ALVAROFONTELA#DMD17
CLOUDFLARE COMO ALTERNATIVA GRATUITA KEYCDN O CDN77 COMO ALTERNATIVA PROFESIONAL

22. Las imágenes son los elementos que suelen añadir más
peso a un sitio web.
La mayoría de los sitios web no tienen las imágenes bien
optimizadas o no han controlado los tamaños de subida
de las imágenes.
7
Optimización
de imágenes
¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODE-
MOS APLICAR?
@ALVAROFONTELA#DMD17
PARTE 1

23. Podemos optimizar las imágenes antes de subirlas me-
diante herramientas como Kraken.io o Photoshop.
después de subirlas con plugins como por ejemplo Imagi-
fy o EWWW Image Optimizer en el caso de Wordpress.
7
Optimización
de imágenes
¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODE-
MOS APLICAR?
@ALVAROFONTELA#DMD17
PARTE 2

24. Eficiencia del hosting
o servidor
¿QUÉ TÉCNICAS DE WPO EFECTIVAS PODEMOS APLICAR?
8
@ALVAROFONTELA
Por muy bien optimizada que ten-
gamos la web, si el hosting o ser-
vidor no esta a la altura, todo que-
dara en nada.
Debemos elegir un plan de hosting
o servidor adaptado a las nece-
sidades de recursos y trafico de
nuestra web.
El hosting o el servidor puede ser el
primer cuello de botella en la carga
de cualquier sitio web.
#DMD17

25. ¿CON QUÈ HERRAMIENTAS
PODEMOS MEDIR?
@ALVAROFONTELA#DMD17

26. ¿CON QUÉ HERRAMIENTAS PODEMOS MEDIR?
PINGDOM TOOLS GTMETRIX
Analiza la velocidad de un sitio web
BYTECHECK
Analiza el firstbyte de un sitio webMonitoriza sitios web
¿CON QUÉ HERRAMIENTAS PODEMOS MEDIR?
Existen varias herramientas para medir, pero nosotros recomendamos tres:
@ALVAROFONTELA#DMD17

27. Muestra el esquema de carga y algunos consejos que pode-
mos aplicar para mejorar la velocidad de carga de nuestra
web.
Ofrece bastante información en el esquema de carga y nos
permite desglosar y filtrar bien las peticiones.
Permite seleccionar la región desde donde se hace la prueba
para que sea lo más cercana posible al servidor que aloja la
web.
¿CON QUÉ HERRAMIENTAS PODEMOS MEDIR?
PINGDOM TOOLS
@ALVAROFONTELA#DMD17

28. Muestra el esquema de carga y algunos consejos que pode-
mos aplicar para mejorar la velocidad de carga de nuestra
web.
GTMetrix incluye información de Google PageSpeed y de
Yslow, además de datos propios recogidos por el propio
GTMetrix.
La versión gratuita no permite seleccionar ubicación de la
prueba, lo que resta peso a las pruebas realizadas con GT-
Metrix si la región es lejana al servidor que aloja la web.
¿CON QUÉ HERRAMIENTAS PODEMOS MEDIR?
GTMETRIX
@ALVAROFONTELA#DMD17

29. Es un servicio simple, tan solo permite comprobar el
firstbyte de la carga de un sitio web.
También sirve para comprobar conectividad.
Es tan simple que no permite seleccionar ubicación de la
prueba.
¿CON QUÉ HERRAMIENTAS PODEMOS MEDIR?
BYTECHECK
@ALVAROFONTELA#DMD17

30. Existe un MITO que dice que Google PageSpeed sirve para medir
la velocidad de carga.
Google PageSpeed NO sirve para medir la velocidad de carga.
Google PageSpeed solo comprueba si se cumplen al-
gunas reglas o buenos hábitos especificados por Goo-
gle y nos asigna una puntuación en base a eso.
¿CON QUÉ HERRAMIENTAS PODEMOS MEDIR?
PAGESPEED ¿POR QUÉ NO?
@ALVAROFONTELA#DMD17

31. CONSULTOR WORDPRESS & CO-FUNDADOR DE RAIOLA NETWORKS
#DMD17
@ALVAROFONTELA
@RAIOLANETWORKS
RAIOLANETWORKS.ES