mejores practicas para acelerar sitios web

Mejores prácticas para acelerar sitios webJuan Eladio Sánchez RosasMozilla Perú

Hablemos de desarrollo web

¿Cómo abrimos una página web?

Cuando una página demora ...

• Culpamos al:

• Navegador de Internet

• Proveedor de Internet

• Programador

¿Donde nos vamos a enfocar?

Mejores prácticas, ¡Ahora!

Contenido

• Realizar menos peticiones HTTP

• Combinar archivos CSS y JavaScript

• CSS Sprites y Mapas de imágenes

¿CSS Sprites?

• Problema: Imágenes a la manera “no tan antigua”

#nav li a {background:none no-repeat left center}#nav li a.item1 {background-image:url('../img/image1.gif')}#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}#nav li a.item2 {background-image:url('../img/image2.gif')}#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

CSS Sprites: 1 imagen para todo

• Solución con CSS Sprites

#nav li a {background-image:url('../img/image_nav.gif')}#nav li a.item1 {background-position:0px 0px}#nav li a:hover.item1 {background-position:0px -72px}#nav li a.item2 {background-position:0px -143px;}#nav li a:hover.item2 {background-position:0px -215px;}

CSS Sprites en el mundo real

Contenido

• Reducir búsquedas de DNS

• Evitar redirecciones

• Evitar errores 404

Servidor

• Usar una Content Delivery Network

• Añadir cabeceras Expires o Cache-Control

• Usar componentes con compresión Gzip

• Configurar ETags

• Usar GET para peticiones AJAX

• Especificar Content-Type y Charset

¿Qué fue todo eso?

Content Delivery Network

• Red de distribución de contenido

Expires / Cache-Control Headers

• Objetivo: Almacenar componentes en memoria caché evitando hacer más peticiones

<IfModule mod_expires.c>ExpiresActive on# Images gif jpeg pngExpiresByType image/x-icon "access plus 1 year"ExpiresByType image/gif "access plus 1 month"# Stylesheets, JavaScript, Others (Flash/FLV/PDF)# text/css, application/x-javascript, # application/x-shockwave-flash, video/x-flv...</IfModule>

GZip

• Comprime alrededor de 70% de respuesta

• Soportado por el 90% de tráfico de navegadores

• Apache: mod_gzip / mod_deflate

• Usar en archivos de texto, no binarios

Entity Tags (ETags)

• Mecanismo usado para determinar si un componente en caché de navegador coincide con servidor de origen

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">Header unset EtagFileETag None</FilesMatch>

Content-Type y Charset

• Si no son especificados el navegador tratará de averiguarlos

• En servidor:

• Content-Type: text/html; charset=UTF-8

• En cliente:

• <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8">

Elementos estáticos

CSS: Hojas de estilo

• Colocar hojas de estilo al principio

• <head><link rel="stylesheet" type="text/css" href="style.css" /></head>

• Evitar CSS Expressions

• background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

• Evitar Filtros

• AlphaImageLoader

... y JavaScript

• Colocar JavaScript al final

• <script src="script.js"></script>

• JavaScript y CSS en archivos externos

• Remover caracteres innecesarios en JavaScript (Minify)

• y también en CSS y HTML

• Remover scripts duplicados

• O no utilizados

Imágenes (A)

• Optimizar imágenes

• GIF: Probar convertir a PNG

• JPEG: Usar en fotografías

• Herramientas: pngcrush / jpegtran

• Combinar imágenes en una sola

• Mostrarlas usando CSS Sprites

Imágenes (B)

• No escalar imágenes en HTML

• NO significa dejar de usar width y height

• Hacer que favicon.ico sea pequeño y cacheable

Otros

• Repartir componentes entre dominios

• Minimizar uso de iframes

• Mantener componentes bajo 25 KB

• Evitar <img src=””> (sin dirección)

Y todo esto, ¿que tienen que ver con Firefox?

Firebug

• Inspeccionar código

• Modificar estilo y estructura

• Depurar código JavaScript

• Analizar uso de red y desempeño

• Extender con más complementos

Firebug

Firebug + Yahoo! YSlow

• Analiza sitios web

• Y sugiere formas de mejorarlos

• Reglas basadas en

• Best Practices for Speeding Up Your Web Site

developer.yahoo.com/performance/rules.html

Firebug + Yahoo! YSlow

Firebug + Google PageSpeed

• No disponible en Firefox Addons

• code.google.com/speed/page-speed/

• Reglas basadas en

• Web Performance Best Practicescode.google.com/speed/page-speed/docs/rules_intro.html

Firebug + Google PageSpeed

“Bueno, leerlo es una cosa, entenderlo es otra”

Una nota al pie

Constantemente trabajamos en Firefox para que se comporte mejor en tu experiencia en la web.

Nuestro objetivo es llevarte donde necesitas ir lo más rápido y fácil posible.

Rendimiento en Firefox

Mejores prácticas paraacelerar sitios web

Mozilla Perúmozilla.pewww.facebook.com/mozillaperugroups.google.com/group/mozilla-peru

Juan Eladio Sánchez Rosasjesanchez(a)mozilla.peblogs.antartec.com/opensourceslideshare.net/juaneladio

mejores practicas para acelerar sitios web

Technology