1. No category

Fernando Serer
@fserer
19/11/2015 – Meetup WP Alicante
¿Quién soy?
▪ Padre de 2, marido, BTT lover, runner frustrado, fundador de
Blogestudio y sysadmin en mis ratos libres.
▪ Blogestudio es una empresa pionera en el desarrollo y optimización de
WordPress en España desde 2005.
▪ Algunos clientes de Blogestudio:
Indice
1.
2.
3.
4.
¿Qué es WPO y en qué nos afecta un mejor/peor rendimiento?
¿Cómo medir y analizar el rendimiento de nuestra página web?
Consejos de optimización WPO
Plugins de WordPress que nos pueden ayudar en la optimización WPO
1.- ¿Qué es WPO y en qué nos afecta un
mejor o peor rendimiento?
¿Qué es el WPO?
Web Performance Optimization (WPO) es un
conjunto de técnicas orientadas a mejorar el
rendimiento de la página web reduciendo así
el tiempo de espera por parte del usuario para
navegar en nuestra página web.
La optimización del tiempo de carga influye en
aspectos tan importantes en un negocio online
como son:
▪El porcentaje de conversión
▪La satisfacción del usuario
▪El posicionamiento en buscadores (SEO)
▪El coste de las campañas publicitarias
(Adwords)
▪Costes de infraestructura
La velocidad no es
solo una
característica, es LA
característica
Urs Höelzle
Vicepresidente senior de
infraestructura técnica en Google
La velocidad es la
característica más
importante. Si tu
aplicación es lenta la
gente NO la usará
FredWilson
Co-fundadordeUnionSquareVentures
(Twitter,Tumblr,Foursquare,Zynga,
Kickstarter…)
¿Qué es el WPO?
El WPO es como
si tu novia te pregunta si la quieres y
tardas más de 5 segundos en contestar.
Esa noche no vas a convertir.
Pedro Martínez, SEO de FriendlyRentals
Junio 2012 #SEO4SEOS
El WPO y la conversión
La velocidad de carga de la página afecta
directamente al porcentaje de conversiones
y el número de ventas según estudios
realizados por empresas como Amazon,
Walmart, Google, AOL o Yahoo!
Optimizamos el
tiempo de carga
de 7 a 2 segundos.
Esto resultó en un
25% de
incremento en las
páginas vistas, un
aumento de entre
el 7% y el 12% en
los beneficios y un
ahorro del 50% en
hardware.
Phil Dixon
VicepresidenteShopzilla
El WPO y la experiencia de usuario
Uno de los factores más
importantes que determinan
la satisfacción de un
cliente en un comercio
online es el tiempo de carga
de las páginas.
Una mala experiencia de uso no solo influye
en las posibilidades de conversión, sino
también en las posibilidades de que vuelvan
a nuestra web en el futuro.
El 47% de los
consumidores
espera que las
páginas web se
carguen en 2
segundos o menos y
el 40% de los
usuarios abandonan
una página que
tarde más de 3
segundos en cargar.
Sean Work
KISSmetrics
El WPO y Adwords
La velocidad de carga es un factor fundamental
para Adwords a la hora de puntuar la experiencia
de usuario en la página de destino.
Esta puntuación determinará en parte el nivel de
calidad que a su vez tiene un impacto dramático
en el CPC (coste por clic).
Ranking=Nivel de Calidad x CPC máx
Mejorar el tiempo de carga de la landing page
puede reducir los costes y mejorar la
posición de los anuncios.
Si tu página web tarda
mucho en cargar cuando
alguien hace clic en tu
anuncio, es más probable
que el usuario se canse y la
abandone. Este
comportamiento indeseado
indica a Google una mala
experiencia de usuario, lo
que puede influir
negativamente en tu nivel de
calidad y el ranking de tus
anuncios
SoportedeGoogleAdwords
El WPO y los costes de
infraestructura
Una buena optimización no solo reduce la
velocidad de carga sino que también reduce
los costes de infraestructura y el consumo de
ancho de banda.
Esto reduce los costes operativos del
servicio y mejora el margen de
contribución.
Implementando
medidas de
optimización
conseguimos entre
el 13% y el 25%
de incremento en
la velocidad y una
reducción del 50%
en el consumo de
ancho de banda.
BillScott
Netflix
El WPO y el posicionamiento (SEO)
Para Google hacer internet más rápido ha sido
una obsesión desde hace mucho tiempo.
Ya en 2010, Google anunció que la velocidad
de carga de las páginas web era uno de los
parámetros que tenía en cuanta a la hora de
ordenar los resultados de búsqueda y que los
sitios lentos podían posicionarse peor que los
más rápidos.
En 2013 Google anunció que los sitios web
con una mala optimización podrían sufrir
penalizaciones en los resultados de
búsqueda.
Si tu página web es
lenta, perderás
posiciones en los
rankings de
resultados, porque
nosotros sabemos
que a los usuarios
no les gustan los
sitios lentos
Urs Höelzle
Vicepresidenteseniorde
infraestructuratécnicaenGoogle
El WPO y el posicionamiento (SEO)
Red Slow Label
¿Y todo esto cómo me puede afectar a mi?
▪ Modelo negocio basado en publicidad:
▪ Antes de WPO: 500.000 impresiones de ADS
▪ Después de WPO: 900.000 impresiones de ADS
▪ Incremento páginas vistas, disminución de rebote, incremento impresiones
de ads
▪ Incremento de INGRESOS
▪ Modelo de negocio basado en transacción (ecommerce)
▪ Antes de hacer WPO: Conversion rate: 0,92%
▪ Después de hacer WPO: Conversion rate: 1,78%
▪ Mejora del comportamiento del usuario en el site, mayor satisfacción,
aumento de conversión
▪ Incremento de INGRESOS
2.- ¿Cómo medir y analizar nuestro rendimiento?
Google PageSpeed Insights
www.wpalicante.org
Móvil
61/100
Ordenador
79/100
Informeobtenidocon:
https://developers.google.com/speed/pagespeed/insights/
existenelementosquedebencorregirse
existenelementosquepuedesplanteartecorregiromejorar
noexistenproblemasimportantes
Google PageSpeed Insights
www.smashingmagazine.com
Móvil
100/100
Ordenador
100/100
Casestudy,8ºaniversario:
http://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/
existenelementosquedebencorregirse
existenelementosquepuedesplanteartecorregiromejorar
noexistenproblemasimportantes
Google PageSpeed Insights
www.blogestudio.com
Móvil
100/100
Ordenador
100/100
Informeobtenidocon:
https://developers.google.com/speed/pagespeed/insights/
existenelementosquedebencorregirse
existenelementosquepuedesplanteartecorregiromejorar
noexistenproblemasimportantes
Google PageSpeed Insights
¿Qué mide PageSpeed Insights?
• Velocidad:
EliminarelJavaScriptquebloquealavisualizaciónyelCSSdelcontenidodelamitadsuperior
delapágina
2. Especificarcachédenavegador
3. Evitalosredireccionamientosapáginasdedestino
4. Habilitarcompresión
5. MinificarCSS
6. MinificarHTML
7. MinificarJavaScript
8. Optimizarimágenes
9. Priorizaelcontenidovisible
10. Reducireltiempoderespuestadelservidor
1.
Google PageSpeed Insights
¿Qué mide PageSpeed Insights?
• Experiencia de usuario (móvil):
1.
2.
3.
4.
5.
6.
Adaptacióndelcontenidoalaventanagráfica
Aplicareltamañoadecuadoalosbotonestáctiles
Configurarventanagráfica
Evitaintersticialesdeinstalacióndeaplicacionesqueocultencontenido(BETA)
Evitarlosplugins
Utilizartamañosdefuentequesepuedanleer
Yahoo YSLOW
• El departamento de Yahoo!'sExceptionalPerformanceteam generó un
conjunto de 34 reglas que afectan al rendimiento de las páginas web
• Generó una herramienta que analiza 23 reglas que se pueden medir
•
Liberó como software libre:
Yslow extension (chrome, firefox, phantomJS, Opera, Safari, NodeJS, etc.)
Pingdom Website Speed Test
• Herramienta de la empresa de monitorización de sitios web para
analizar el rendimiento de la página
http://tools.pingdom.com/fpt/
SpeedCurve
• Servicio SaaS de monitorización web y respecto a tu competencia
https://speedcurve.com/
ZoomPF
• Servicio SaaS de análisis del rendimiento de tu página y envío de alertas
https://zoompf.com/
GTMetrix
• Servicio SaaS de análisis del rendimiento de tu página
https://gtmetrix.com/
Web Page Test
•
•
•
•
•
•
Posiblemente la herramienta más completa
Open Source https://github.com/WPO-Foundation/webpagetest
Inicialmente su desarrollo fue soportado por AOL
Desarrollado y soportado por Google
Puedes crear instancias privadas (AWS) de análisis WPO
La versión online (gratuita) está soportada por partners/sponsors
http://www.webpagetest.org/
Web Page Test
• Introduce el concepto de SpeedIndex
• Índice que mide la progresión visual en la carga de la página
• Índice que realmente toma importancia en la optimización de rendimiento
• Índice que realmente refleja las mejoras en posicionamiento SEO
Web Page Test
Web Page Test
Web Page Test
How fast is fast enough?
• Método de comparación: “Designing and Engineering Time” Steven Seow
• Gente percibe mayor rapidez o lentitud con un cambio del 20% respecto al comparado
• Analiza 10 competidores y mejora un 20% sus tiempos de carga
• Límites importantes en tiempos de respuesta (Jakob Nielsen)
100ms es el tiempo que tienes para que el usuario piense que ha sido instantáneo.
1s es el tiempo que tienes para que el usuario no note interrupción en su tarea.
10s es el tiempo que tienes antes de que el usuario pierda su interés completamente y haga otra cosa.
• SpeedIndex <= 1.000
• Para nota: la vista above the fold <= 14 kb (tamaño RTT, round trip delay time)
https://www.youtube.com/watch?v=R8W_6xWphtw (Delivering the goods)
Profiling vs Benchmarking
• Profiling: medir rendimiento a nivel de código (CPU, memoria, tiempo,
llamadas por función, etc.) Afecta al rendimiento
• Benchmarking se realiza externamente y mide el rendimiento actual, lo que los
usuarios pueden ver.
• Definir objetivos de rendimiento de tu web (100 usuarios ~ 1 s)
• Realizar benchmark para ver si logras esos objetivos. Tests contra entorno real
o copia idéntica.
• Se realiza profiling si se determina que tenemos un problema de rendimiento
Profiling vs Benchmarking
Profiling vs Benchmarking
• Herramientas de benchmark:
• Instalables:
• Apache AB
• Jmeter
• Siege
• SaaS: Loadimpact.com
• Herramientas de profiling:
• Activo vs pasivo
• Activo: Xdebug (activado por desarrollador)
• Pasivo:
• XHProf + XHGui (Facebook, OpenSource)
• New relic (SaaS)
WPO STACK
TMOA
• Test
• Monitor
• Optimize
• Analyze
3.- Consejos de optimización WPO
A nivel de servidor
1. Optimizaciones a nivel de servidor
• Apache
• MaxClients, definir límite en función del consumo de RAM de los procesos (ps-ylChttpd--sort:rss)
• KeepAlive (Si hay suficiente RAM poned ON con tiempo bajo, unos 2 segundos, con poca RAM poned en OFF)
• PHP como FCGI vs MOD_PHP
• Nginx + PHP-FPM (más liviano y mejor rendimiento que apache vs más complejo menos soporte)
• Activar OPCODE cache para PHP (php-pecl-zendopcache)
• MySQL
• Activar Query Cache
• Activar key buffer
A nivel de servidor
2. Optimizaciones MySQL
• mySQL Query Cache
query_cache_type = 1
query_cache_size = 32M
query_cache_limit = 1M
• mySQL keybuffer y otros ajustes
key_buffer = 16M
sort_buffer_size = 4M
read_buffer_size = 4M
thread_stack = 128K
table_cache = 128
thread_cache = 256
thread_concurrency = 4
myisam_sort_buffer_size = 1M
tmp_table_size = 12M
max_heap_table_size = 12M
•MySQL Tuner (mysqltuner.com)
A nivel de servidor
3. Activar compresión
• Apache:
<ifmodulemod_deflate.c>
AddOutputFilterByTypeDEFLATEtext/texttext/htmltext/plaintext/xmltext/css
text/x-jsapplication/x-javascriptapplication/javascript
BrowserMatch^Mozilla/4gzip-only-text/html
BrowserMatch^Mozilla/4\.0[678]no-gzip
BrowserMatch\bMSIE!no-gzip!gzip-only-text/html
</ifmodule>
A nivel de servidor
3. Activar compresión
• Nginx:
gzipon;
gzip_staticon;
gzip_proxiedany;
gzip_comp_level9;
gzip_min_length0;
gzip_typestext/plaintext/cssapplication/javascripttext/xmlapplication/xml+rss;
A nivel de servidor
3. Activar compresión
A nivel de servidor
4. Cache en cliente (navegador)
Apache (fichero .htaccess):
<ifmodulemod_headers.c>
<filesmatch"\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
HeadersetCache-Control"max-age=2678400,public"
</filesmatch>
<filesmatch"\.(pdf)$">
HeadersetCache-Control"max-age=86400,public"
</filesmatch>
<filesmatch"\.(js)$">
HeadersetCache-Control"max-age=2678400,private"
</filesmatch>
</ifmodule>
A nivel de servidor
4. Cache en cliente (navegador)
Nginx (fichero conf del servidor):
location~*^.+\.(xml|gz|jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|txt|tar|
mid|midi|wav|bmp|rtf|js|swf)${
access_logoff;
expires40d;
break;
A nivel de servidor
5. PHP vs HHVM (fuente: hhvm)
A nivel de servidor
5. PHP vs HHVM (fuente: Zend)
A nivel de servidor
5. PHP vs HHVM
RC 7 -> 12/11/2015 -> 2 semanas para GA
A nivel de imágenes
1. Optimiza el tamaño de las imágenes
2. Elimina datos EXIF y metadata
3. Combina ficheros gráficos en css Sprites (reduce número de solicitudes)
4. Habilita la cache para archivos gráficos
5. Paraleliza la carga (subdominios y/o CDN)
6. No escales las imágenes en el código HTML
A nivel de recursos
1. Optimiza el critical path
2. Evita bloqueos en renderización de la página
3. Minimiza solicitudes al servidor combinando archivos (CSS, JS)
4. Minifica ficheros y reduce el tamaño de transferencia
5. Habilita cache para recursos estáticos
6. Comprueba tu código fuente y que valida W3C
4.- Plugins que nos pueden ayudar en la
optimización WPO
Cache WordPress
1. W3 Total Cache
https://wordpress.org/plugins/w3-total-cache/
2. WP-Supercache
https://wordpress.org/plugins/wp-super-cache/
3. BatCache (memcached)
https://wordpress.org/plugins/batcache/
4. Hypercache
https://wordpress.org/plugins/hyper-cache/
5. WP-Rocket
http://wp-rocket.me/
Imágenes
1. EWWW Image Optimizer
https://wordpress.org/plugins/ewww-image-optimizer/
2. fasterImage Image Optimizer
https://wordpress.org/plugins/fasterimage/
3. WP Smush
https://wordpress.org/plugins/wp-smushit/
4. Kraken Image Optimizer
https://wordpress.org/plugins/kraken-image-optimizer/
Profiling
1. P3 (Plugin Performance Profiler)
https://wordpress.org/plugins/p3-profiler/
2. WPTOP (Code profiler para XHPROF)
https://github.com/soulseekah/wptop
3. WP-XHPROF-PROFILER
https://wordpress.org/plugins/wp-xhprof-profiler/
Recursos
1. WP Minify
https://wordpress.org/plugins/wp-minify/
2. Better WordPress Minify
https://wordpress.org/plugins/bwp-minify/
3. Defer CSS Addon for BWP Minify
https://wordpress.org/plugins/defer-css-addon-for-bwp-minify/
4. CSS Above The Fold
https://wordpress.org/plugins/css-above-the-fold/
5. Autoptimize
https://wordpress.org/plugins/autoptimize/
6. Above The Fold Optimization
https://wordpress.org/plugins/above-the-fold-optimization/
PageSpeed
1. Google Pagespeed Insights for WordPress
https://wordpress.org/plugins/google-pagespeed-insights/
Contacto
Blogestudio
www.blogestudio.com
Fernando Serer
@fserer
[email protected]
Plaza Valldecabres, 12 Bajo
46930 Quart de Poblet - Valencia
Tel: 96 336 43 03 – Fax: 96 328 88 93