Fernando 19/11/2015 Meetup WP Alicante

Transcripción

1 Fernando 19/11/2015 Meetup WP Alicante

2 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 Algunos clientes de Blogestudio:

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

4 1.- Qué es WPO y en qué nos afecta un mejor o peor rendimiento?

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

6 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

7 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

8 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

9 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

10 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

11 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

12 El WPO y el posicionamiento (SEO) Red Slow Label

13 Y todo esto cómo me puede afectar a mi? Modelo negocio basado en publicidad: Antes de WPO: impresiones de ADS Después de WPO: 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

14 2.- Cómo medir y analizar nuestro rendimiento?

15 Google PageSpeed Insights Móvil 61/100 Ordenador 79/100 Informe obtenido con: existen elementos que deben corregirse existen elementos que puedes plantearte corregir o mejorar no existen problemas importantes

16 Google PageSpeed Insights Móvil Ordenador 100/ /100 Case study, 8º aniversario: existen elementos que deben corregirse existen elementos que puedes plantearte corregir o mejorar no existen problemas importantes

17 Google PageSpeed Insights Móvil Ordenador 100/ /100 Informe obtenido con: existen elementos que deben corregirse existen elementos que puedes plantearte corregir o mejorar no existen problemas importantes

18

19 Google PageSpeed Insights 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

20 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

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

22 Pingdom Website Speed Test Herramienta de la empresa de monitorización de sitios web para analizar el rendimiento de la página

23 SpeedCurve Servicio SaaS de monitorización web y respecto a tu competencia

24 ZoomPF Servicio SaaS de análisis del rendimiento de tu página y envío de alertas

25 GTMetrix Servicio SaaS de análisis del rendimiento de tu página

26 Web Page Test Posiblemente la herramienta más completa Open Source 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

27 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

28 Web Page Test

29 Web Page Test

30 Web Page Test

31 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 <= Para nota: la vista above the fold <= 14 kb (tamaño RTT, round trip delay time) (Delivering the goods)

32 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

33 Profiling vs Benchmarking

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

35 WPO STACK TMOA Test Monitor Optimize Analyze

36 3.- Consejos de optimización WPO

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

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

39 A nivel de servidor 3. Activar compresión Apache: <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/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>

40 A nivel de servidor 3. Activar compresión Nginx: gzip on; gzip_static on; gzip_proxied any; gzip_comp_level 9; gzip_min_length 0; gzip_types text/plain text/css application/javascript text/xml application/xml+rss;

41 A nivel de servidor 3. Activar compresión

42 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= , public" </filesmatch> <filesmatch "\.(pdf)$"> Header set Cache-Control "max-age=86400, public" </filesmatch> <filesmatch "\.(js)$"> Header set Cache-Control "max-age= , private" </filesmatch> </ifmodule>

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

44 A nivel de servidor 5. PHP vs HHVM (fuente: hhvm)

45 A nivel de servidor 5. PHP vs HHVM (fuente: Zend)

46 A nivel de servidor 5. PHP vs HHVM RC 7 -> 12/11/2015 -> 2 semanas para GA

47 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

48 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

49 4.- Plugins que nos pueden ayudar en la optimización WPO

50 Cache WordPress 1. W3 Total Cache 2. WP-Supercache 3. BatCache (memcached) 4. Hypercache 5. WP-Rocket

51 Imágenes 1. EWWW Image Optimizer 2. fasterimage Image Optimizer 3. WP Smush 4. Kraken Image Optimizer

52 Profiling 1. P3 (Plugin Performance Profiler) 2. WPTOP (Code profiler para XHPROF) 3. WP-XHPROF-PROFILER

53 Recursos 1. WP Minify 2. Better WordPress Minify 3. Defer CSS Addon for BWP Minify 4. CSS Above The Fold 5. Autoptimize 6. Above The Fold Optimization

54 PageSpeed 1. Google Pagespeed Insights for WordPress

55

56 Contacto Blogestudio Fernando Plaza Valldecabres, 12 Bajo Quart de Poblet - Valencia Tel: Fax: