Mejores prácticas para acelerar sitios web
•
4 recomendaciones•1,564 vistas
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.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Mejores prácticas para acelerar sitios web
Similar a Mejores prácticas para acelerar sitios web (20)
Más de Juan Eladio Sánchez Rosas
Más de Juan Eladio Sánchez Rosas (20)
Último
Último (20)
Mejores prácticas para acelerar sitios web
- 1. Mejores prácticas para acelerar sitios web Juan Eladio Sánchez Rosas Mozilla Perú
- 3. ¿Cómo abrimos una página web?
- 4. Cuando una página demora ... • Culpamos al: • Navegador de Internet • Proveedor de Internet • Programador
- 5. ¿Donde nos vamos a enfocar?
- 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;}
- 10. CSS Sprites en el mundo real
- 11. Contenido • Reducir búsquedas de DNS • Evitar redirecciones • Evitar errores 404
- 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
- 14. Content Delivery Network • Red de distribución de contenido
- 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)
- 25. Y todo esto, ¿que tienen que ver con Firefox?
- 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. Firebug
- 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. Firebug + Yahoo! YSlow
- 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. Firebug + Google PageSpeed
- 32. “Bueno, leerlo es una cosa, entenderlo es otra”
- 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
Notas del editor
- 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.