Descargar como PDF, PPTX
Subido porJuan Eladio Sánchez Rosas
Mejores practicas para acelerar sitios web
El documento presenta mejores prácticas para acelerar la carga de sitios web, enfatizando la reducción de peticiones HTTP, la combinación de archivos CSS y JavaScript, y el uso de CSS sprites. También se aborda la importancia de optimizar imágenes y utilizar redes de distribución de contenido (CDN) junto con técnicas de compresión como GZIP. Además, se sugieren herramientas como Firebug y YSlow para analizar y mejorar el rendimiento web.
Más contenido relacionado
![Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]](https://cdn.slidesharecdn.com/ss_thumbnails/04-aplicar-seo-a-un-desarrollo-wordpress-141117040329-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]](https://cdn.slidesharecdn.com/ss_thumbnails/08-mejora-el-rendimiento-de-tu-wordpress-141117040405-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar a Mejores practicas para acelerar sitios web
Mejores practicas para acelerar sitios web
- 1. Mejores prácticas para acelerar sitios web Juan EladioSánchez Rosas Mozilla Perú
- 2.
- 3. ¿Cómo abrimos unapágina web?
- 4. Cuando una páginademora ... • Culpamos al: • Navegador de Internet • Proveedor de Internet • Programador
- 5. ¿Donde nos vamosa enfocar?
- 6.
- 7. Contenido • Realizar menospeticiones 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: 1imagen 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 enel mundo real
- 11. Contenido • Reducir búsquedasde DNS • Evitar redirecciones • Evitar errores 404
- 12. Servidor • Usar unaContent 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.
- 14. Content Delivery Network •Red de distribución de contenido
- 15. Expires / Cache-ControlHeaders • 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 alrededorde 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">
- 19.
- 20. CSS: Hojas deestilo • 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) • Optimizarimá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) • Noescalar imágenes en HTML • NO significa dejar de usar width y height • Hacer que favicon.ico sea pequeño y cacheable
- 24. Otros • Repartir componentesentre dominios • Minimizar uso de iframes • Mantener componentes bajo 25 KB • Evitar <img src=””> (sin dirección)
- 25. Y todo esto, ¿quetienen 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.
- 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 + GooglePageSpeed • 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 + GooglePageSpeed
- 32. “Bueno, leerlo esuna cosa, entenderlo es otra”
- 33. Una nota alpie 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 acelerarsitios 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
- #32 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.