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

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