View
1.254
Download
4
Category
Preview:
Citation preview
Fernando Serer
@fserer
26/9/2015 – Meetup WP Valencia
Gestionan todo tipo de casos.
Especializados en ámbito
tecnológico y nuevas tecnologías.
Asesoramiento legal para web,
marketing online, proyectos
digitales y startups tecnológicas.
Especialistas en estrategias de
comunicación y marketing y en
evaluación y medición de resultados.
Proyectos a medida y formación a
medida para startups, empresas y
agencias.
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:
¿Quién soy?
Servicios de Blogestudio
Servicios orientados específicamente a webs basadas en WordPress:
Optimización
de rendimiento
Alojamiento y
mantenimiento
Consultoría y
proyectos a
medida
Indice Propuesto
Sesión 1 (toma de contacto WPO):1. ¿Qué es WPO y en qué nos afecta un mejor/peor rendimiento?
2. ¿Cómo medir y analizar el rendimiento de nuestra página web?
3. Consejos de optimización WPO
4. Plugins de WordPress que nos pueden ayudar en la optimización WPO
Sesión 2 (propuesta de taller):1. Configuración y optimización de un servidor
2. Configuración WordPress y plugins (W3 Total Cache)
1.- ¿Qué es WPO y en qué nos afecta un
mejor o peor rendimiento?
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 LAcaracterística
Urs HöelzleVicepresidente 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á
Fred WilsonCo-fundador de Union SquareVentures (Twitter, Tumblr, Foursquare, Zynga, Kickstarter…)
¿Qué es el WPO?
¿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
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 DixonVicepresidente Shopzilla
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!
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 WorkKISSmetrics
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.
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öelzleVicepresidente senior de infraestructura técnica en Google
El WPO y el posicionamiento (SEO)
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).
Mejorar el tiempo de carga de sus 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
Soporte de Google Adwords
El WPO y Adwords
Ranking=Nivel de Calidad x CPC máx
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.
Bill ScottNetflix
El WPO y los costes de
infraestructura
¿Y todo esto cómo me puede afectar a mi?
Penalización en los resultados de búsqueda (SEO) y posible pérdida de todo el tráfico de búsqueda móvil.
Problemas en la conversión de tu página web.
Ineficacia en la captación y pérdida de clientes potenciales.
Altas tasas de rebote y abandono de la página web.
Disminución de las páginas por visita de cada usuario.
Si usas Google Adwords estás pagando más que tu competencia por las mismas palabras clave.
Si usas Google Adsense estás cobrando menos por cada anuncio publicado en tu página.
Mala experiencia de los usuarios por elevados tiempos de espera.
¿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
• Empresas o profesionales de servicios de consultoría
• Startups / empresas con soluciones SaaS: SpeedCurve, ZoomPF, …
• Eventos / Conferencias: VelocityConf
Todo un ecosistema que demuestra la importancia y el interés de la optimización del rendimiento
Industria WPO
Industria WPO
2.- ¿Cómo medir y analizar nuestro rendimiento?
Google PageSpeed Insights
www.wpvalencia.org
OrdenadorMóvil
Informe obtenido con:https://developers.google.com/speed/pagespeed/insights/
64/100
existen elementos que deben corregirseexisten elementos que puedes plantearte corregir o mejorarno existen problemas importantes
79/100
Google PageSpeed Insights
www.smashingmagazine.com
Móvil Ordenador
100/100 100/100
Case study, 8º aniversario:http://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/
existen elementos que deben corregirseexisten elementos que puedes plantearte corregir o mejorarno existen problemas importantes
Google PageSpeed Insights
www.blogestudio.com
Móvil Ordenador
100/100 100/100
Informe obtenido con:https://developers.google.com/speed/pagespeed/insights/
existen elementos que deben corregirseexisten elementos que puedes plantearte corregir o mejorarno existen problemas importantes
¿Qué mide PageSpeed Insights?
• Velocidad:1. Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad
superior de la página
2. Especificar caché de navegador
3. Evita los redireccionamientos a páginas de destino
4. Habilitar compresión
5. Minificar CSS
6. Minificar HTML
7. Minificar JavaScript
8. Optimizar imágenes
9. Prioriza el contenido visible
10. Reducir el tiempo de respuesta del servidor
Google PageSpeed Insights
¿Qué mide PageSpeed Insights?
• Experiencia de usuario (móvil):1. Adaptación del contenido a la ventana gráfica
2. Aplicar el tamaño adecuado a los botones táctiles
3. Configurar ventana gráfica
4. Evita intersticiales de instalación de aplicaciones que oculten contenido (BETA)
5. Evitar los plugins
6. Utilizar tamaños de fuente que se puedan leer
Google PageSpeed Insights
• Acerca de PageSpeed Insights:
https://developers.google.com/speed/docs/insights/about
• Web Fundamentals (Best Practices) – Optimizing Performance
Performance is a feature:
https://developers.google.com/web/fundamentals/performance/
1. Ruta de renderización importante (Critical rendering path)
2. Optimizar la eficacia del contenido (Optimizing Content Efficiency)
3. Rendimiento de la representación (Rendering performance)
Google PageSpeed Insights
• El departamento de Yahoo!'s Exceptional Performance team 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.)
Yahoo YSLOW
Yahoo YSLOW
1. Minimizar las solicitudes HTTP2. Usar una red CDN (Content Delivery
Network)3. Evitar src o href vacíos4. Añadir expires o cabeceras de cache-
control 5. Comprimir la transferencia (Gzip)6. Incluir las hojas de estilo en la cabecera 7. Incluir los scripts al final de la página8. Evitar expresiones CSS9. Cargar JSS y CSS de forma externa10. Reducir solicitudes DNS11. Minificar JSS y CSS12. Evitar redirecciones
13. Eliminar scripts duplicados14. Configurar etags15. Hacer que las respuestas AJAX se puedan
cachear16. Usar GET para solicitudes AJAX17. Reducir el número de elementos en el
DOM18. Evitar 404s19. Reducir el tamaño de las cookies20. Usar dominios cookie-free para
componentes21. Evitar filtros22. No escales las imágenes en HTML23. Tener un Favicon.ico pequeño y cacheable
• Herramienta de la empresa de monitorización de sitios web para analizar el rendimiento de la página
http://tools.pingdom.com/fpt/
Pingdom Website Speed Test
• Servicio SaaS de monitorización web y respecto a tu competencia
https://speedcurve.com/
SpeedCurve
• Servicio SaaS de análisis del rendimiento de tu página y envío de alertas
https://zoompf.com/
ZoomPF
• Servicio SaaS de análisis del rendimiento de tu página
https://gtmetrix.com/
GTMetrix
• 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
• 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)
How fast is fast enough?
• 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)
Profiling vs Benchmarking
3.- Consejos de optimización WPO
1. Optimizaciones a nivel de servidor
• Apache• MaxClients, definir límite en función del consumo de RAM de los procesos (ps -ylC httpd --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 Cachequery_cache_type = 1
query_cache_size = 32M
query_cache_limit = 1M
• mySQL keybuffer y otros ajusteskey_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
A nivel de servidor
3. Activar compresión
• Apache:
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xmltext/css text/x-js application/x-javascript application/javascript
BrowserMatch ^Mozilla/4 gzip-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:
gzip on;
gzip_static on;
gzip_comp_level 9;
gzip_min_length 0;
gzip_types text/plain text/css application/javascript text/xml application/xml+rss;
A nivel de servidor
3. Activar compresión
A nivel de servidor
4. Cache en cliente (navegador)
Apache (fichero .htaccess):
<ifmodule mod_headers.c><filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">Header set Cache-Control "max-age=2678400, public"</filesmatch><filesmatch "\.(pdf)$">Header set Cache-Control "max-age=86400, public"</filesmatch><filesmatch "\.(js)$">Header set Cache-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_log off;expires 40d;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
A nivel de servidor
1. Optimiza la consulta DNS
2. Minimiza la latencia del servidor con tus usuarios
3. Contrata un servidor con buen ancho de banda
4. Optimiza tiempo de generación de las páginas
5. Cachea todo lo cacheable
6. Devuelve el contenido above the fold lo más rápido posible (14 kb)
A nivel de TTFB
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 imágenes
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
A nivel de recursos
4.- Plugins que nos pueden ayudar en la
optimización WPO
1. W3 Total Cache https://wordpress.org/plugins/w3-total-cache/
2. WP-Supercachehttps://wordpress.org/plugins/wp-super-cache/
3. BatCache (memcached)https://wordpress.org/plugins/batcache/
4. Hypercachehttps://wordpress.org/plugins/hyper-cache/
5. WP-Rockethttp://wp-rocket.me/
Cache WordPress
1. EWWW Image Optimizerhttps://wordpress.org/plugins/ewww-image-optimizer/
2. fasterImage Image Optimizerhttps://wordpress.org/plugins/fasterimage/
3. WP Smushhttps://wordpress.org/plugins/wp-smushit/
4. Kraken Image Optimizerhttps://wordpress.org/plugins/kraken-image-optimizer/
Imágenes
1. P3 (Plugin Performance Profiler)https://wordpress.org/plugins/p3-profiler/
2. WPTOP (Code profiler para XHPROF)https://github.com/soulseekah/wptop
Profiling
1. WP Minifyhttps://wordpress.org/plugins/wp-minify/
2. Better WordPress Minifyhttps://wordpress.org/plugins/bwp-minify/
3. Defer CSS Addon for BWP Minifyhttps://wordpress.org/plugins/defer-css-addon-for-bwp-minify/
4. CSS Above The Foldhttps://wordpress.org/plugins/css-above-the-fold/
5. Autoptimizehttps://wordpress.org/plugins/autoptimize/
6. Above The Fold Optimizationhttps://wordpress.org/plugins/above-the-fold-optimization/
Recursos
1. Google Pagespeed Insights for WordPresshttps://wordpress.org/plugins/google-pagespeed-insights/
PageSpeed
Contacto
Blogestudio
www.blogestudio.com
Fernando Serer
@fserer
fserer@blogestudio.com
Plaza Valldecabres, 12 Bajo
46930 Quart de Poblet - Valencia
Tel: 96 336 43 03 – Fax: 96 328 88 93
Recommended