Mejores
prácticas
para
acelerar
sitios web
Juan Eladio Sánchez Rosas
Mozilla Perú
Hablemos de
desarrollo web
¿Cómo abrimos una página web?
Cuando una página demora ...


                • Culpamos al:
                 • Navegador de Internet
                 • ...
¿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...
CSS Sprites: 1 imagen para todo
 • Solución con CSS Sprites
#nav   li   a {background-image:url('../img/image_nav.gif')}
#...
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 ...
¿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
<IfMo...
GZip
• Comprime alrededor de 70% de respuesta
• Soportado por el 90% de tráfico de navegadores
• Apache: mod_gzip / mod_de...
Entity Tags (ETags)
 • Mecanismo usado para determinar si un componente en
   caché de navegador coincide con servidor de ...
Content-Type y Charset
• Si no son especificados el navegador tratará de
  averiguarlos

• En servidor:
  • Content-Type: ...
Elementos estáticos
CSS: Hojas de estilo
• Colocar hojas de estilo al principio
  • <head><link rel="stylesheet"
    href="style.css" /></head...
... y JavaScript
• Colocar JavaScript al final
  • <script    src="script.js"></script>

• JavaScript y CSS en archivos ex...
Imágenes (A)
• Optimizar imágenes
 • GIF: Probar convertir a PNG
 • JPEG: Usar en fotografías
 • Herramientas: pngcrush / ...
Imágenes (B)
• No escalar imágenes en HTML
 • NO significa dejar de usar width y height
• Hacer que favicon.ico sea pequeñ...
Otros
• Repartir componentes entre dominios
• Minimizar uso de iframes
• Mantener componentes bajo 25 KB
• Evitar <img src...
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ñ...
Firebug
Firebug + Yahoo! YSlow
• Analiza sitios web
• Y sugiere formas de mejorarlos
• Reglas basadas en
 • Best Practices for Spe...
Firebug + Yahoo! YSlow
Firebug + Google PageSpeed
• No disponible en Firefox Addons
 • code.google.com/speed/page-speed/
• Reglas basadas en
 • W...
Firebug + Google PageSpeed
“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 e...
Mejores prácticas para
acelerar sitios web
           Mozilla Perú
           mozilla.pe
           www.facebook.com/mozil...
Upcoming SlideShare
Loading in …5
×

Mejores practicas para acelerar sitios web

4,972 views

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,972
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
93
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 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.
  • Mejores practicas para acelerar sitios web

    1. 1. Mejores prácticas para acelerar sitios web Juan Eladio Sánchez Rosas Mozilla Perú
    2. 2. Hablemos de desarrollo 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é fue todo 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 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. 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 Etag FileETag 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 ver con 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 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. 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

    ×