Mejores practicas para acelerar sitios web
-
Upload
juan-eladio-sanchez-rosas -
Category
Technology
-
view
4.499 -
download
4
description
Transcript of Mejores practicas para acelerar sitios web
![Page 1: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/1.jpg)
Mejores prácticas para acelerar sitios webJuan Eladio Sánchez RosasMozilla Perú
![Page 2: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/2.jpg)
Hablemos de desarrollo web
![Page 3: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/3.jpg)
¿Cómo abrimos una página web?
![Page 4: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/4.jpg)
Cuando una página demora ...
• Culpamos al:
• Navegador de Internet
• Proveedor de Internet
• Programador
![Page 5: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/5.jpg)
¿Donde nos vamos a enfocar?
![Page 6: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/6.jpg)
Mejores prácticas, ¡Ahora!
![Page 7: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/7.jpg)
Contenido
• Realizar menos peticiones HTTP
• Combinar archivos CSS y JavaScript
• CSS Sprites y Mapas de imágenes
![Page 8: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/8.jpg)
¿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')}
![Page 9: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/9.jpg)
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;}
![Page 10: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/10.jpg)
CSS Sprites en el mundo real
![Page 11: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/11.jpg)
Contenido
• Reducir búsquedas de DNS
• Evitar redirecciones
• Evitar errores 404
![Page 12: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/12.jpg)
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
![Page 13: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/13.jpg)
¿Qué fue todo eso?
![Page 14: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/14.jpg)
Content Delivery Network
• Red de distribución de contenido
![Page 15: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/15.jpg)
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>
![Page 16: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/16.jpg)
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
![Page 17: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/17.jpg)
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>
![Page 18: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/18.jpg)
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">
![Page 19: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/19.jpg)
Elementos estáticos
![Page 20: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/20.jpg)
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
![Page 21: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/21.jpg)
... 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
![Page 22: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/22.jpg)
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
![Page 23: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/23.jpg)
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
![Page 24: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/24.jpg)
Otros
• Repartir componentes entre dominios
• Minimizar uso de iframes
• Mantener componentes bajo 25 KB
• Evitar <img src=””> (sin dirección)
![Page 25: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/25.jpg)
Y todo esto, ¿que tienen que ver con Firefox?
![Page 26: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/26.jpg)
Firebug
• Inspeccionar código
• Modificar estilo y estructura
• Depurar código JavaScript
• Analizar uso de red y desempeño
• Extender con más complementos
![Page 27: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/27.jpg)
Firebug
![Page 28: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/28.jpg)
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
![Page 29: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/29.jpg)
Firebug + Yahoo! YSlow
![Page 30: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/30.jpg)
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
![Page 31: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/31.jpg)
Firebug + Google PageSpeed
![Page 32: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/32.jpg)
“Bueno, leerlo es una cosa, entenderlo es otra”
![Page 33: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/33.jpg)
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
![Page 34: Mejores practicas para acelerar sitios web](https://reader034.fdocument.pub/reader034/viewer/2022042512/554c206ab4c905f1518b55fb/html5/thumbnails/34.jpg)
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