Optimizando Sitios Web

Mejores
prácticas
para
acelerar
sitios web
Juan Eladio Sánchez Rosas
Mozilla Perú

¿Cómo abrimos una página web?

Cuando una página demora ...

• Culpamos al:
• Navegador de Internet
• Proveedor de Internet
• Programador

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

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

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 png
ExpiresByType 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 Etag
FileETag 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>http-equiv="Content-Type"
<meta
content="text/html;charset=utf-8">

CSS: Hojas de estilo
• Colocar hojas de estilo al principio
• <head><link rel="stylesheet"
href="style.css" /></head>
type="text/css"

• 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 + 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 + Google PageSpeed
• No disponible en Firefox Addons
• code.google.com/speed/page-speed/
• Reglas basadas en
• Web Performance Best Practices
code.google.com/speed/page-
speed/docs/rules_intro.html

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

Una nota al pie
Rendimiento en Firefox
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.

Mejores prácticas para
acelerar sitios web
Mozilla Perú
mozilla.pe
www.facebook.com/mozillaperu
groups.google.com/group/mozilla-peru

Juan Eladio Sánchez Rosas
jesanchez(a)mozilla.pe
blogs.antartec.com/opensource
slideshare.net/juaneladio

Optimizando Sitios Web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (10)

Similar a Optimizando Sitios Web

Similar a Optimizando Sitios Web (20)

Optimizando Sitios Web