Esta charla hace una introducción al funcionamiento de sitios web en Internet para luego explicar una serie de prácticas para optimizar el tiempo de descarga de páginas web, enfocándose en configuración a nivel de servidores web, código HTML, CSS, JavaScript, imágenes y adjuntos.
7. Contenido
• Realizar menos peticiones HTTP
• Combinar archivos CSS y JavaScript
• CSS Sprites y Mapas de imágenes
8. ¿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')}
9. 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;}
15. 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>
16. 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
17. 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>
18. 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">
20. 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
21. ... 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
22. 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
23. 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
24. Otros
• Repartir componentes entre dominios
• Minimizar uso de iframes
• Mantener componentes bajo 25 KB
• Evitar <img src=””> (sin dirección)
26. Firebug
• Inspeccionar código
• Modificar estilo y estructura
• Depurar código JavaScript
• Analizar uso de red y desempeño
• Extender con más complementos
28. 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
30. 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
33. 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.
34. 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
Notes de l'éditeur
Pequeña huella de memoria Pequeño y bueno, Firefox usa menos de la memoria de tu equipo mientras funciona. Administración de memoria Con nuevas funciones, Firefox mantiene el uso de la memoria bajo control. El recolector de ciclos XPCOM limpia continuamente la memoria que ya no se usa. Además, cientos de pérdidas de memoria fueron solucionadas. Carga de páginas más rápida Un motor mejorado de mostrado de páginas significa que puedes ver las páginas web más rápido y en la forma en que se supone deben verse. Super veloz Ajústate el cinturón, Firefox incluye el mototr de Javascript Tracemonkey que le da al navegador mucho mejor rendimiento que antes. Firefox siempre fue rápido, pero este es el Firefox más rápido hasta ahora (más de tres veces más rápido que Firefox 3 y 20% más rápido que Firefox 3.5), lo que permite que las aplicaciones de correo, de fotos o procesadores de texto en línea respondan más rápido y de forma continua.