curso wpo - web performance optimization 2013
DESCRIPTION
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.TRANSCRIPT
![Page 1: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/1.jpg)
- WPO - Pol Martinez -
WPO - WEB PERFORMANCE OPTIMIZATION
Pablo (Pol) Martínez @polmtnez
!Desarrollador web Adrenalina
CTO Floraqueen Fundador toolows.com
QUIEN SOY
2013-10-09
![Page 2: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/2.jpg)
- 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
![Page 3: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/3.jpg)
- 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)
![Page 4: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/4.jpg)
- 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%
![Page 5: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/5.jpg)
- WPO - Pol Martinez -
DATOSPor segundo extra:
7% menos conversiones 11% menos páginas vistas
16% menos satisfacción del cliente
fuente: Akamai + http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/
EVOLUCIÓN
![Page 6: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/6.jpg)
- WPO - Pol Martinez -
ARQUITECTURA
Arquitectura de servicio web (ejemplo) y sus distintas capas y uso.
Otras alternativas: nginx y IIS, asp, redis, Oracle.
![Page 7: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/7.jpg)
- WPO - Pol Martinez -
¿Que medir? !
Velocidad, del primer byte (TTFB)
Patrón de descarga
Paralelización
Bloqueos
Pesos de estáticos
MEDIR PARA TOMAR DECISIONES
![Page 8: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/8.jpg)
- 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
![Page 9: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/9.jpg)
- 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
![Page 10: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/10.jpg)
- WPO - Pol Martinez -
MEDIR PARA TOMAR DECISIONES
WEBPAGETEST.ORGMide el patrón de descarga de una página, tiempos primera vez y siguientes, y TTFB
![Page 11: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/11.jpg)
- WPO - Pol Martinez -
MEDIR PARA TOMAR DECISIONES
GTMETRIX.COMMide el patrón de descarga y muestra la valoración de PageSpeed y YSlow
![Page 12: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/12.jpg)
- WPO - Pol Martinez -
MEDIR PARA TOMAR DECISIONES
PAGE SPEED INSIGHT
Métricas priorizadas y agrupadas por dispositivo
https://developers.google.com/speed/pagespeed/insights/
![Page 13: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/13.jpg)
- 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
![Page 14: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/14.jpg)
- WPO - Pol Martinez -
SOLUCIONES
ALTA PRIORIDADEstos 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)
![Page 15: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/15.jpg)
- WPO - Pol Martinez -
SOLUCIONES
Habilitar keep-alive (configuración Apache)
ALTA PRIORIDAD
Mantiene una conexión persistente durante un periodo de tiempo determinado y hace que las peticiones al servidor se contesten de forma rápida.
![Page 16: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/16.jpg)
- WPO - Pol Martinez -
SOLUCIONES
Especificar Header Vary
ALTA PRIORIDAD
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.
![Page 17: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/17.jpg)
- WPO - Pol Martinez -
SOLUCIONES
Habilitar compresión GZIP
ALTA PRIORIDAD
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>
![Page 18: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/18.jpg)
- WPO - Pol Martinez -
SOLUCIONES
Compresión de imágenes
http://smush.it
ALTA PRIORIDAD
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
![Page 19: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/19.jpg)
- WPO - Pol Martinez -
SOLUCIONES
Cache de navegador
ALTA PRIORIDAD
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
![Page 20: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/20.jpg)
- WPO - Pol Martinez -
SOLUCIONES
Combinar estáticos
ALTA PRIORIDAD
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 type="text/javascript" src="/js/librerias/jquery-1.3.2.min.js" ></script> <script type="text/javascript" src="/js/librerias/jquery-ui-1.7.2.custom.min.js" ></script> <script type="text/javascript" src="/js/librerias/jquery.bgiframe.min.js" ></script> <script type="text/javascript" src="/js/librerias/jquery.autocomplete.js" ></script>
<script type="text/javascript" src=“/js/librerias/all.min.js" ></script>
![Page 21: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/21.jpg)
- WPO - Pol Martinez -
SOLUCIONES
PRIORIDAD MEDIA
por un tema de rendimiento en dispositivos limitados.
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?
![Page 22: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/22.jpg)
- WPO - Pol Martinez -
SOLUCIONES
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>
PRIORIDAD MEDIA
![Page 23: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/23.jpg)
- WPO - Pol Martinez -
SOLUCIONES
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>
PRIORIDAD MEDIA
![Page 24: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/24.jpg)
- WPO - Pol Martinez -
SOLUCIONES
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.
PRIORIDAD MEDIA
![Page 25: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/25.jpg)
- WPO - Pol Martinez -
SOLUCIONES
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.
PRIORIDAD MEDIA
![Page 26: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/26.jpg)
- WPO - Pol Martinez -
SOLUCIONES
CDNDistribuye contenido estático físicamente para mejorar la latencia en las transmisiones
![Page 27: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/27.jpg)
- WPO - Pol Martinez -
BONUS ANALYTICS
SUGERENCIAS DE VELOCIDADNuevo informe de velocidad del sitio que muestra los tiempos por páginas y sugerencias
(integrado con PageSpeed Insights)
![Page 28: Curso WPO - Web Performance Optimization 2013](https://reader034.vdocument.in/reader034/viewer/2022052601/5597bc1d1a28abde5a8b472f/html5/thumbnails/28.jpg)
- WPO - Pol Martinez -
MUCHAS GRACIAS ;) !
Pablo (Pol) Martínez @polmtnez
http://www.linkedin.com/in/polmartinez