Optimizando Sitios Web

389 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
389
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Optimizando Sitios Web

  1. 1. Mejoresprácticasparaacelerarsitios webJuan Eladio Sánchez RosasMozilla Perú
  2. 2. Hablemos dedesarrollo web
  3. 3. ¿Cómo abrimos una página web?
  4. 4. Cuando una página demora ... • Culpamos al: • Navegador de Internet • Proveedor de Internet • Programador
  5. 5. ¿Donde nos vamos a enfocar?
  6. 6. Mejores prácticas,¡Ahora!
  7. 7. Contenido• Realizar menos peticiones HTTP • Combinar archivos CSS y JavaScript • CSS Sprites y Mapas de imágenes
  8. 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. 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;}
  10. 10. CSS Sprites en el mundo real
  11. 11. Contenido• Reducir búsquedas de DNS• Evitar redirecciones• Evitar errores 404
  12. 12. 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
  13. 13. ¿Qué fuetodo eso?
  14. 14. Content Delivery Network• Red de distribución de contenido
  15. 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 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>
  16. 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. 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 EtagFileETag None</FilesMatch>
  18. 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">
  19. 19. Elementos estáticos
  20. 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. 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. 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. 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. 24. Otros• Repartir componentes entre dominios• Minimizar uso de iframes• Mantener componentes bajo 25 KB• Evitar <img src=””> (sin dirección)
  25. 25. Y todo esto,¿que tienen que vercon Firefox?
  26. 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
  27. 27. Firebug
  28. 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
  29. 29. Firebug + Yahoo! YSlow
  30. 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
  31. 31. Firebug + Google PageSpeed
  32. 32. “Bueno, leerlo es una cosa,entenderlo es otra”
  33. 33. Una nota al pieRendimiento en FirefoxConstantemente trabajamos en Firefox para que se comportemejor en tu experiencia en la web.Nuestro objetivo es llevarte donde necesitas ir lo más rápido yfácil posible.
  34. 34. Mejores prácticas paraacelerar 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

×