6. dariobf.com
WPO o Web Performance Optimization es el proceso de
optimización de sitios web tanto a nivel usuario como a nivel
servidor para reducir el tiempo de carga del mismo.
Hagamos sitios web más rápidos.
¿QUÉ ES WPO?
7. dariobf.com
“
“WPO es similar al SEO en términos de que optimizar el
tiempo de carga genera mayor tráfico hacia tu sitio web.
Sin embargo, WPO no termina ahí. Existe clara evidencia
de que WPO mejora, además, la experiencia de usuario,
aumenta las ganancias y reduce costos operativos.”
Steve Souders, encargado del equipo de WPO en Google
8. dariobf.com
¿POR QUÉ WPO?
El tiempo de carga del sitio influye en las métricas de negocio.
Pérdidas:
• Bing: una página dos segundos más lenta resulta en una reducción de un 4,3% en
ganancias por usuario.
• Yahoo: Una demora de 400 milisegundos supone una pérdida del 5% al 9% en toda la
página.
• Google: Una demora de 400 milisegundos genera una bajada del 0,59% de
búsquedas por usuario.
• Amazon: 100 milisegundos de demora en el tiempo de carga les hace perder un 1%
de ventas.
Ganancias:
• Mozilla: Hizo su página de descargas 2,2 segundos más rápida e incrementó el
número de descargas en el 15,4%.
• Google Maps: Aligeró los ficheros que conformaban la página en un 30% y la consulta
al sitio aumentó en un 30%.
• Netflix: Al habilitar la compresión Gzip hizo que su web fuese entre el 13 y el 25% más
rápida; redujo su volumen de tráfico a la mitad.
12. dariobf.com
Front End Optimization u Optimización del lado cliente
• Reducir peticiones HTTP:
• Combinar JS y CSS en un único fichero. Mejor uno
grande que muchos pequeños.
• Combinar imágenes: CSS Sprites.
• CSS en la parte superior.
• JS en la parte inferior.
• Evitar 404.
• Cachear, cachear y CACHEAR el contenido estático
(imágenes, css, js, etc)
• Evitar redirecciones.
• Compresión Gzip.
FEO
15. dariobf.com
Front End Optimization u optimización del lado cliente.
•Reducir peticiones HTTP:
•Combinar JS y CSS en un único fichero. Mejor uno
grande que muchos pequeños.
•Combinar imágenes: CSS Sprites.
•CSS en la parte superior.
•JS en la parte inferior.
•Evitar 404.
•Cachear, cachear y CACHEAR el contenido estático
(imágenes, css, js, etc)
•Evitar redirecciones.
•Compresión Gzip.
FEO
24. dariobf.com
IMÁGENES
Geolocalización de contenidos (CDN)
• Se replica en centros de datos de todo el mundo y el sistema
redirecciona al contenido geolocalizado que ha de descargarse.
• Recomendado para sitios grandes, con cierto tamaño y
proyección internacional.
• Caro.
Photon de Jetpack
27. dariobf.com
MEJORA EL THEME
• Reducir el número de peticiones HTTP: para ello, debemos minificar y
reducir ficheros javascript, CSS y, siempre que nos sea posible, usar
Sprites CSS. WP Minify
• Paralelizar peticiones HTTP: Los navegadores descargan contenidos
simultáneamente, podemos aprovecharnos de esto utilizando un CDN o
un sistema de Domain Sharding. Photon
• Cuidar el tamaño y orden de los componentes: A veces es mejor uno
grande que muchos pequeños y otras es mejor muchos medianos que
uno grande. Además, influye el orden en que llamamos a estos
componentes; mejor CSS en la cabecera y javascript en el pié de página.
• Evitar 404.
• Sobre CSS y JS: Intenta externalizar algunos de ellos, haz que sean
cacheables y minifícalos (haz que sólo sean un fichero).
29. dariobf.com
CACHEA
• A nivel cliente. Incrementar cabeceras de expiración.
• El Browser caching es un parámetro que se especifica en las
cabeceras de los ficheros como tal (cualquier imagen, fichero CSS, JS y
demás). ¿Podemos modificar estas cabeceras? Poder… se puede, pero
no es recomendable. Lo suyo es decirle al navegador web en cuestión
el tiempo de caducidad que va a tener ese tipo de fichero, pero desde
el servidor.
• A nivel servidor.
• Cacheo de las páginas.
• Cacheo de la base de datos.
• Cacheo de objetos (Object Caching).
• Opcode Caching.
30. dariobf.com
CACHEA CLIENTE
# ------------------------------------------------------------------------------
# | Expires headers |
# ------------------------------------------------------------------------------
# Serve resources with far-future expires headers.
# IMPORTANT: If you don't control versioning with filename-based cache
# busting, consider lowering the cache times to something like one week.
<ifmodule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 year"
# Data interchange
ExpiresByType application/json "access plus 0 seconds”
…
.htaccess en http://dariobf.com/wordpress-wpo/
31. dariobf.com
BASE DE DATOS
• Elimina las revisiones de entradas.
• Elimina los comentarios no aprobados o spam.
• Elimina los comentarios de la papelera.
• Elimina los metadatos de Akismet para comentarios (son
muchos, creeme).
• Elimina otros metadatos de los comentarios que son
prescindibles.
• Limpia los autoguardados en borradores.
• Limpia la papelera de entradas.
• Aplica acciones predeterminadas de WordPress para
optimizar las tablas de la base de datos.
WP-Optimize
32. dariobf.com
IMÁGENES, CSS Y JS
• Optimizar con Photoshop y pasar por ImageOptim si son
elemento de diseño.
• Utilizar WP Smush.it para optimizar las subidas.
• EWWW Image Optimizer
• Minificar CSS y JS con WP Minify Fix.
33. dariobf.com
CONCLUSIONES
• ¿Es bueno optimizar todo, siempre?
• Consejo: NO OS VOLVÁIS LOCOS; Optimiza lo básico y ve
puliendo poco a poco.
• No siempre, hay que encontrar el equilibrio perfecto
para nuestra instalación y sus medios (servidor y demás
componentes)
34. dariobf.com
EXTRA: +PLUGINS
Plugins WPO
• WP Super Cache o W3 Total Cache.
• Lazy load. (carga imágenes de forma asíncrona; según el
usuario hace scroll).
• EWWW Image Optimizer – Optimiza multimedias cuando se
suben al panel).
• WP Minify.
• WP Parallel Loading System – Automatiza (bastante) el
domain sharding de imágenes.