wpo: aprende a optimizar wordpress en un plis · 2020. 1. 28. · consultor wordpress y rendimiento...
TRANSCRIPT
WPO: Aprende a optimizar WordPress en un plis
ESPECIALIZADO EN WPO
CO-FUNDADOR y ceo
RAIOLA NETWORKS
CONSULTOR WORDPRESS
y rendimiento web
@alvarowpo@RaiolaNetworks
¿Qué es el WPO y cómo nos ayuda?(I)
WPO son las siglas de Web Performance Optimizationy consiste en técnicas o buenas
prácticas para mejorar la velocidad de carga de un sitio web.
@alvarowpo@RaiolaNetworks
¿Qué es el WPO y cómo nos ayuda?(II)
2004 2008 - 2012 2018 2019 2020
Desde 2004 hasta la actualidad, el WPO ha pasado por distintos momentos y ha tenido distintas finalidades.
@alvarowpo@RaiolaNetworks
¿Qué es el WPO y cómo nos ayuda?(III)
EXPERIENCIADE USUARIO
MEJORA ENLOS RASTREOS
CONSUMO DERECURSOS
@alvarowpo@RaiolaNetworks
Algunos ejemplos de WPO (I)
En 2008, un empleado de Amazon dijo en público que, en un experimento que hicieron,
mejoraron los beneficios en un 1% al bajar 100ms el tiempo de carga.
@alvarowpo@RaiolaNetworks
Algunos ejemplos de WPO (II)
En el año 2013, se publicó un informe en el cual Walmart explicaba una mejora del 2% en la conversión al mejorar el tiempo de carga en una
media de 1 segundo.
@alvarowpo@RaiolaNetworks
Algunos ejemplos de WPO (III)
En el año 2018, el equipo de Zalando publicó un informe detallado sobre
cómo consiguieron mejorar la velocidad de carga alrededor de
100ms y mejorar los beneficios en un 0,7%.
¿Cuáles son las técnicas WPOindispensables en 2020 para
optimizar WordPress?
@alvarowpo@RaiolaNetworks
Cache de página (I)
Se trata de la técnica WPO básicaactualmente y algo indispensableteniendo en cuenta la complejidad
de las webs actuales.
@alvarowpo@RaiolaNetworks
Cache de página (II)
En WordPress el cache de página es el cache más común. Existen
múltiples plugins para implementarlofácilmente.
@alvarowpo@RaiolaNetworks
Cache de página (III)
w3 TOTAL CACHE WPROCKET LITESPEED CACHE
@alvarowpo@RaiolaNetworks
Optimización de imágenes (I)
El 99% de los sitios web de Internet NO tienen las imágenes lo
suficientemente optimizadas.
@alvarowpo@RaiolaNetworks
Optimización de imágenes (II)
Existen DOS tipos de optimización deimágenes: la COMPRESIÓN y el
ESCALADO.
@alvarowpo@RaiolaNetworks
Ewww imagify re.smush
Optimización de imágenes (III)
@alvarowpo@RaiolaNetworks
Configurar un CDN (I)
Un CDN es un servicio que te ayudará a servir imágenes, vídeos, PDF y otros
archivos de la estructura de las web (CSS y JS) de una forma
optimizada y rápida.
@alvarowpo@RaiolaNetworks
Configurar un CDN (II)
Un CDN sirve los contenidos desde servidores más cercanos
geográficamente al visitante, de modo que la latencia es menor y la
velocidad de descarga mucho mayor.
@alvarowpo@RaiolaNetworks
CDN77 keycdn cloudflare
Configurar un CDN (III)
¿Te han gustado estas técnicas WPO?
Pues ahora vienen las mejores...
PREVENCIÓN Y PLANIFICACIÓN EN LA FASE DE DESARROLLO
@alvarowpo@RaiolaNetworks
Planificación y diseño web WPO (I)
Muchas webs no se pueden optimizar sin hacer milagros. Por eso, es
importante pensar en el WPO y el UX al comenzar un proyecto WordPress.
Los milagros no existen...
@alvarowpo@RaiolaNetworks
Planificación y diseño web WPO (II)
Actualmente, el MOBILE-FIRST está cada vez más extendido y eso ayuda a simplificar las webs, pero se abusa bastante del Javascript y eso puede dañar la experiencia de los usuarios
móviles.
Mobile-first y responsive...
@alvarowpo@RaiolaNetworks
Planificación y diseño web WPO (III)
Debemos tener en cuenta que NO todos los visitantes tienen
un dispositivo potente para navegar
por tu web.
CONSEJO FINAL
THEME PLUGIN THEME
@alvarowpo@RaiolaNetworks
Algo más de información
• alvaro.click/optimizarwordpress
• alvaro.click/impactojavascript
• alvaro.click/servidorparawordpress
@alvarofontela - @raiolanetworks
gracias
@alvarowpo - @RaiolaNetworks
Álvaro Fontela - Raiola Networks
Álvaro Fontela - Raiola Networks