-

WPO - Pol Martinez

WPO - WEB	

PERFORMANCE	

OPTIMIZATION
QUIEN SOY
Pablo (Pol) Martínez	

@polmtnez	

!
Desarrollador...
-

WPO - Pol Martinez

WEB PERFORMANCE OPTIMIZATION
Mide y analiza la forma de carga de una página web y propone
cambios p...
-

WPO - Pol Martinez

MEJORA EL SEO / SEM
La optimización de una página y la velocidad de carga son los
principales facto...
-

WPO - Pol Martinez

DATOS
“LA VELOCIDAD NO ES SÓLO UNA CARACTERÍSTICA, ES LA	

CARACTERÍSTICA” Urs Holzle, Ingeniero je...
-

WPO - Pol Martinez

DATOS
Por segundo extra:	

7% menos conversiones	

11% menos páginas vistas	

16% menos satisfacció...
-

WPO - Pol Martinez

ARQUITECTURA
Arquitectura de servicio web (ejemplo) y sus distintas capas y
uso.

Otras alternativa...
-

WPO - Pol Martinez

MEDIR PARA TOMAR DECISIONES
¿Que medir?
!

Velocidad, del primer byte (TTFB)	

Patrón de descarga	
...
-

WPO - Pol Martinez

MEDIR PARA TOMAR DECISIONES
Velocidad, del primer byte (TTFB)	

El tiempo del primer byte es lo que...
-

WPO - Pol Martinez

MEDIR PARA TOMAR DECISIONES
Las herramientas permiten conocer la velocidad y el estado de
cada una ...
-

WPO - Pol Martinez

MEDIR PARA TOMAR DECISIONES
WEBPAGETEST.ORG
Mide el patrón de descarga de una página, tiempos prime...
-

WPO - Pol Martinez

MEDIR PARA TOMAR DECISIONES
GTMETRIX.COM
Mide el patrón de descarga y muestra la valoración de Page...
-

WPO - Pol Martinez

MEDIR PARA TOMAR DECISIONES
PAGE SPEED INSIGHT
Métricas priorizadas y agrupadas por dispositivo

ht...
-

WPO - Pol Martinez

MEDIR PARA TOMAR DECISIONES
GOOGLE WEBMASTER TOOLS
Gráfica de volumen de descarga y tiempos medios

...
-

WPO - Pol Martinez

SOLUCIONES
ALTA PRIORIDAD
Estos son los problemas que hay que solucionar de forma urgente.	

Tened ...
-

WPO - Pol Martinez

SOLUCIONES
ALTA PRIORIDAD
Habilitar keep-alive (configuración Apache)
Mantiene una conexión persiste...
-

WPO - Pol Martinez

SOLUCIONES
ALTA PRIORIDAD
Especificar Header Vary
Se utiliza el archivo de configuración .htaccess ju...
-

WPO - Pol Martinez

SOLUCIONES
ALTA PRIORIDAD
Habilitar compresión GZIP
Se utiliza el archivo de configuración .htaccess...
-

WPO - Pol Martinez

SOLUCIONES
ALTA PRIORIDAD
Compresión de imágenes
Eliminar información innecesaria como datos EXIF y...
-

WPO - Pol Martinez

SOLUCIONES
ALTA PRIORIDAD
Cache de navegador
Se indica desde la configuración de Apache .htaccess el...
-

WPO - Pol Martinez

SOLUCIONES
ALTA PRIORIDAD
Combinar estáticos
Combinar por ejemplo varios archivos css en uno solo p...
-

WPO - Pol Martinez

SOLUCIONES
PRIORIDAD MEDIA
Compresión de HTML	

Utilizar CSS3 en vez de imágenes	

Carga de JS asín...
-

WPO - Pol Martinez

SOLUCIONES
PRIORIDAD MEDIA
Compresión de HTML
Comprimir el HTML para que no se transmitan espacios,...
-

WPO - Pol Martinez

SOLUCIONES
PRIORIDAD MEDIA
Carga de JS asíncronos o al final de la página
Cargar los JS al final de l...
-

WPO - Pol Martinez

SOLUCIONES
PRIORIDAD MEDIA
Eliminar cookies de estáticos
Las cookies se guardan en el navegador y s...
-

WPO - Pol Martinez

SOLUCIONES
PRIORIDAD MEDIA
Botones sociales
¿Son realmente necesarios?	

Estos botones cargados a t...
-

WPO - Pol Martinez

SOLUCIONES
CDN
Distribuye contenido estático físicamente para mejorar la latencia en las transmisio...
-

WPO - Pol Martinez

BONUS ANALYTICS
SUGERENCIAS DE VELOCIDAD
Nuevo informe de velocidad del sitio que muestra los tiemp...
-

MUCHAS GRACIAS ;)	

!
Pablo (Pol) Martínez	

@polmtnez	

http://www.linkedin.com/in/polmartinez

WPO - Pol Martinez

-	...
Upcoming SlideShare
Loading in …5
×

Curso WPO - Web Performance Optimization 2013

711 views
654 views

Published on

Explico como medir y analizar la forma de carga de una página web y diseñar cambios para mejorar los tiempos de descarga.
Mejora el SEO / SEM, Mejora la conversión (UX), Optimización del hosting.

Published in: Technology

Curso WPO - Web Performance Optimization 2013

  1. 1. - WPO - Pol Martinez WPO - WEB PERFORMANCE OPTIMIZATION QUIEN SOY Pablo (Pol) Martínez @polmtnez ! Desarrollador web Adrenalina CTO Floraqueen Fundador toolows.com 2013-10-09 -
  2. 2. - WPO - Pol Martinez WEB PERFORMANCE OPTIMIZATION Mide y analiza la forma de carga de una página web y propone cambios para su mejora Mejora el SEO Mejora la conversión (UX) Optimización del hosting -
  3. 3. - WPO - Pol Martinez MEJORA EL SEO / SEM La optimización de una página y la velocidad de carga son los principales factores que Google tiene en cuenta para el calculo del ranking SEO (factor de ranking) Google Adwords (Quality Score) -
  4. 4. - WPO - Pol Martinez DATOS “LA VELOCIDAD NO ES SÓLO UNA CARACTERÍSTICA, ES LA CARACTERÍSTICA” Urs Holzle, Ingeniero jefe de Google ! ! Google ha calculado que aumentar 4 décimas de segundo podría perder 8 millones de búsquedas al día lo que implica que perderían millones de anuncios para mostrar ! Shospzilla, pasó de 7 a 2 segundos. La publicidad creció un 112% y las páginas vistas un 25% -
  5. 5. - WPO - Pol Martinez DATOS Por segundo extra: 7% menos conversiones 11% menos páginas vistas 16% menos satisfacción del cliente EVOLUCIÓN fuente: Akamai + http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/ -
  6. 6. - WPO - Pol Martinez ARQUITECTURA Arquitectura de servicio web (ejemplo) y sus distintas capas y uso. Otras alternativas: nginx y IIS, asp, redis, Oracle. -
  7. 7. - WPO - Pol Martinez MEDIR PARA TOMAR DECISIONES ¿Que medir? ! Velocidad, del primer byte (TTFB) Patrón de descarga Paralelización Bloqueos Pesos de estáticos -
  8. 8. - WPO - Pol Martinez MEDIR PARA TOMAR DECISIONES Velocidad, del primer byte (TTFB) El tiempo del primer byte es lo que se valora para conocer el coste de servidor (en tiempo) para entregar una página al navegador del usuario. Ref. : webpagetest.org -
  9. 9. - WPO - Pol Martinez MEDIR PARA TOMAR DECISIONES Las herramientas permiten conocer la velocidad y el estado de cada una de nuestras páginas. ! • webpagetest.org • Gtmetrix.com • PageSpeed Insights / YSlow • GWT / Analytics -
  10. 10. - WPO - Pol Martinez MEDIR PARA TOMAR DECISIONES WEBPAGETEST.ORG Mide el patrón de descarga de una página, tiempos primera vez y siguientes, y TTFB -
  11. 11. - WPO - Pol Martinez MEDIR PARA TOMAR DECISIONES GTMETRIX.COM Mide el patrón de descarga y muestra la valoración de PageSpeed y YSlow -
  12. 12. - WPO - Pol Martinez MEDIR PARA TOMAR DECISIONES PAGE SPEED INSIGHT Métricas priorizadas y agrupadas por dispositivo https://developers.google.com/speed/pagespeed/insights/ -
  13. 13. - WPO - Pol Martinez MEDIR PARA TOMAR DECISIONES GOOGLE WEBMASTER TOOLS Gráfica de volumen de descarga y tiempos medios https://www.google.com/webmasters/tools -
  14. 14. - WPO - Pol Martinez SOLUCIONES ALTA PRIORIDAD Estos son los problemas que hay que solucionar de forma urgente. Tened en cuenta que cada vez más se tiene en cuenta el dispositivo. Habilitar keep-alive (configuración Apache) Especificar Header Vary “Accept-Encoding” y “User-Agent”(mod headers) Habilitar compresión GZIP (mod deflate) Compresión de imágenes Cache de navegador (mod expire) Combinar estáticos (css y js) -
  15. 15. - WPO - Pol Martinez SOLUCIONES ALTA PRIORIDAD Habilitar keep-alive (configuración Apache) Mantiene una conexión persistente durante un periodo de tiempo determinado y hace que las peticiones al servidor se contesten de forma rápida. -
  16. 16. - WPO - Pol Martinez SOLUCIONES ALTA PRIORIDAD Especificar Header Vary Se utiliza el archivo de configuración .htaccess junto con el módulo headers para activar esta funcionalidad. ! Utilizando “Accept-Encoding” y “User-Agent” se indica a los proxies la variabilidad del contenido. -
  17. 17. - WPO - Pol Martinez SOLUCIONES ALTA PRIORIDAD Habilitar compresión GZIP Se utiliza el archivo de configuración .htaccess junto con el módulo de Apache deflate para activar esta funcionalidad. Envía los datos comprimidos para ganar velocidad en la comunicación. <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript </IfModule> ! <IfModule mod_deflate.c> SetOutputFilter DEFLATE </IfModule> -
  18. 18. - WPO - Pol Martinez SOLUCIONES ALTA PRIORIDAD Compresión de imágenes Eliminar información innecesaria como datos EXIF y compresión adecuada, junto con la elección correcta del formato (jpg, png, gif) Herramientas online: smush.it http://smush.it -
  19. 19. - WPO - Pol Martinez SOLUCIONES ALTA PRIORIDAD Cache de navegador Se indica desde la configuración de Apache .htaccess el tiempo de expiración de un archivo estático. Es necesario activar el mod expires <IfModule mod_expires.c> ExpiresActive On ExpiresDefault A0 <FilesMatch ".(html|htm|ico|gif|jpg|jpeg|png|js|css)$"> ExpiresDefault "access plus 55 week" </FilesMatch> <FilesMatch ".(txt|xml)$"> ExpiresDefault "access plus 1 day" </FilesMatch> </IfModule> ! FileETag None -
  20. 20. - WPO - Pol Martinez SOLUCIONES ALTA PRIORIDAD Combinar estáticos Combinar por ejemplo varios archivos css en uno solo permite que el navegador solo haga una petición al servidor y se ahorra todo el tiempo y los datos de protocolo. <script <script <script <script type="text/javascript" type="text/javascript" type="text/javascript" type="text/javascript" src="/js/librerias/jquery-1.3.2.min.js" ></script> src="/js/librerias/jquery-ui-1.7.2.custom.min.js" ></script> src="/js/librerias/jquery.bgiframe.min.js" ></script> src="/js/librerias/jquery.autocomplete.js" ></script> <script type="text/javascript" src=“/js/librerias/all.min.js" ></script> -
  21. 21. - WPO - Pol Martinez SOLUCIONES PRIORIDAD MEDIA Compresión de HTML Utilizar CSS3 en vez de imágenes Carga de JS asíncronos o al final de la página Eliminar cookies de estáticos ¿Botones sociales? -
  22. 22. - WPO - Pol Martinez SOLUCIONES PRIORIDAD MEDIA Compresión de HTML Comprimir el HTML para que no se transmitan espacios, saltos de línea y demás caracteres que no se utilizan en la visualización de la página. <ul> <li> <a href=“#tabs-1">Primer elemento</a> </li> <li> <a href=“#tabs-2">Segundo elemento</a> </li> </ul> ! <ul><li><a href=“#tabs-1">Primer elemento</a></li><li><a href=“#tabs-2">Segundo elemento</a></li></ul> -
  23. 23. - WPO - Pol Martinez SOLUCIONES PRIORIDAD MEDIA Carga de JS asíncronos o al final de la página Cargar los JS al final de la página (antes de cerrar el tag </body>) hace que la carga del js no bloquee otros elementos visuales los cuales deberían esperar al js si éste estuviera solicitándose antes servidor. ! Cargar de forma asíncrona un elemento JS significa que éste se cargará cuando la pagina se haya descargado completamente y el navegador interpretado el DOM. Esto mejora la medición del tiempo total de carga de una página. <script> var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = ‘/js/jquery.min.js’; insertBefore() </script> -
  24. 24. - WPO - Pol Martinez SOLUCIONES PRIORIDAD MEDIA Eliminar cookies de estáticos Las cookies se guardan en el navegador y se envían al servidor por cada petición. La manera de pedir estáticos sin transmitir esta información que puede llegar a los cientos de Kb es utilizando dominios distintos solo para servir estos archivos. -
  25. 25. - WPO - Pol Martinez SOLUCIONES PRIORIDAD MEDIA Botones sociales ¿Son realmente necesarios? Estos botones cargados a través de widgets, generalmente añaden un tiempo de carga extra, sumando una media de 1 segundo por cada botón. -
  26. 26. - WPO - Pol Martinez SOLUCIONES CDN Distribuye contenido estático físicamente para mejorar la latencia en las transmisiones -
  27. 27. - WPO - Pol Martinez BONUS ANALYTICS SUGERENCIAS DE VELOCIDAD Nuevo informe de velocidad del sitio que muestra los tiempos por páginas y sugerencias (integrado con PageSpeed Insights) -
  28. 28. - MUCHAS GRACIAS ;) ! Pablo (Pol) Martínez @polmtnez http://www.linkedin.com/in/polmartinez WPO - Pol Martinez -

×