Embed Size (px)
Citation preview
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
