- 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

- 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

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

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

- 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

- WPO - Pol Martinez -

ARQUITECTURA

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

Otras alternativas: nginx y IIS, asp, redis, Oracle.

- 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

- 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

- 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

- 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

- WPO - Pol Martinez -

MEDIR PARA TOMAR DECISIONES

GTMETRIX.COMMide el patrón de descarga y muestra la valoración de PageSpeed y YSlow

- WPO - Pol Martinez -

MEDIR PARA TOMAR DECISIONES

PAGE SPEED INSIGHT

Métricas priorizadas y agrupadas por dispositivo

https://developers.google.com/speed/pagespeed/insights/

- 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

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

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

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

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

- 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

- 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

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

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

- 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

- 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

- 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

- 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

- WPO - Pol Martinez -

SOLUCIONES

CDNDistribuye contenido estático físicamente para mejorar la latencia en las transmisiones

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

- WPO - Pol Martinez -

MUCHAS GRACIAS ;) !

Pablo (Pol) Martínez @polmtnez

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