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á Fred Wilson Co-fundador de Union Square Ventures (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
 Vicepresidente Shopzilla

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 Soporte de Google Adwords

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. Bill Scott
 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
 Vicepresidente senior de infraestructura técnica en Google

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

Informe obtenido con: https://developers.google.com/speed/pagespeed/insights/

existen elementos que deben corregirse existen elementos que puedes plantearte corregir o mejorar no existen problemas importantes

Google PageSpeed Insights www.smashingmagazine.com Móvil

100/100

Ordenador

100/100

Case study, 8º aniversario: http://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/

existen elementos que deben corregirse existen elementos que puedes plantearte corregir o mejorar no existen problemas importantes

Google PageSpeed Insights www.blogestudio.com Móvil

100/100

Ordenador

100/100

Informe obtenido con: https://developers.google.com/speed/pagespeed/insights/

existen elementos que deben corregirse existen elementos que puedes plantearte corregir o mejorar no existen problemas importantes

Google PageSpeed Insights ¿Qué mide PageSpeed Insights? • Velocidad: 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
 
 1.

Google PageSpeed Insights ¿Qué mide PageSpeed Insights? • Experiencia de usuario (móvil): 1. 2. 3. 4. 5. 6.

Adaptación del contenido a la ventana gráfica Aplicar el tamaño adecuado a los botones táctiles Configurar ventana gráfica Evita intersticiales de instalación de aplicaciones que oculten contenido (BETA) Evitar los plugins Utilizar tamaños de fuente que se puedan leer
 


Yahoo YSLOW

• 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.)

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 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