2. 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.
3. 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?
4. 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
5. 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)
6. 1.- ¿Qué es WPO y en qué nos afecta un
mejor o peor rendimiento?
7. 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?
8. ¿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
9. 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 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!
10. 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 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.
11. 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)
12. 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
13. 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 los costes de
infraestructura
14. ¿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.
15. ¿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
16. • 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
19. Google PageSpeed Insights
www.wpvalencia.org
OrdenadorMóvil
Informe obtenido con:
https://developers.google.com/speed/pagespeed/insights/
64/100
existen elementos que deben corregirse
existen elementos que puedes plantearte corregir o mejorar
no existen problemas importantes
79/100
20. 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 corregirse
existen elementos que puedes plantearte corregir o mejorar
no existen problemas importantes
21. 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 corregirse
existen elementos que puedes plantearte corregir o mejorar
no existen problemas importantes
22.
23. ¿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
24. ¿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
25. • 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
26. • 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
27. Yahoo YSLOW
1. Minimizar las solicitudes HTTP
2. Usar una red CDN (Content Delivery
Network)
3. Evitar src o href vacíos
4. 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ágina
8. Evitar expresiones CSS
9. Cargar JSS y CSS de forma externa
10. Reducir solicitudes DNS
11. Minificar JSS y CSS
12. Evitar redirecciones
13. Eliminar scripts duplicados
14. Configurar etags
15. Hacer que las respuestas AJAX se puedan
cachear
16. Usar GET para solicitudes AJAX
17. Reducir el número de elementos en el
DOM
18. Evitar 404s
19. Reducir el tamaño de las cookies
20. Usar dominios cookie-free para
componentes
21. Evitar filtros
22. No escales las imágenes en HTML
23. Tener un Favicon.ico pequeño y cacheable
28. • 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
29. • Servicio SaaS de monitorización web y respecto a tu competencia
https://speedcurve.com/
SpeedCurve
30. • Servicio SaaS de análisis del rendimiento de tu página y envío de alertas
https://zoompf.com/
ZoomPF
31. • Servicio SaaS de análisis del rendimiento de tu página
https://gtmetrix.com/
GTMetrix
32. • 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
33. • 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
37. • 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?
38. • 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
42. 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
43. 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
A nivel de servidor
47. 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
48. 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|mi
d|midi|wav|bmp|rtf|js|swf)$ {
access_log off;
expires 40d;
break;
A nivel de servidor
49. 5. PHP vs HHVM (fuente: hhvm)
A nivel de servidor
50. 5. PHP vs HHVM (fuente: Zend)
A nivel de servidor
52. 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
53. 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
54. 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
