View
8.407
Download
0
Category
Preview:
DESCRIPTION
La irrupción de la web 2.0 ha cedido todo el protagonismo del desarrollo web a las de tecnologías de cliente: javascript, css, peticiones http en segundo plano... y no ha hecho más que intensificar su uso. En esta ponencia veremos herramientas para detectar cuellos de botella en el navegador y algunos trucos para optimizar el uso de estos recursos y mejorar drásticamente la carga de nuestras páginas.
Citation preview
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP
Client side
Manuel AguilarDesarrollo web & sistemas
maguilar@harecoded.com
Optimización de aplicaciones PHP: Client side
Manuel AguilarDesarrollo web & sistemasAtrapalo.com & Plastiasite
‣Un Amstrad CPC 464 es el culpable de todo...‣11 años de experiencia en desarrollo web y sistemas.‣En la actualidad:
Atrapalo.com: PHP, front end e internacionalización.Plastiasite: FreeBSD, PHP, Zope/Plone loving.3viajesaldia.com: escritos y viajes 3.0
Optimización de aplicaciones PHP: Client side
‣ Porqué es tan importante optimizar en el lado cliente... La regla del 20/80.
‣ Herramientas de detección de cuellos de botella: Firebug, Yslow.
‣ 10 optimizaciones que harán volar nuestros sitios web.
‣ Ruegos y preguntas.
Puntos que vamos a tratar
Optimización de aplicaciones PHP: Client side
www1.dominio.com
http://www.dominio.com
images.dominio.com
INTERNET
Optimización de aplicaciones PHP: Client side
<?xml v
<ref:
<gr
HTML
www1.dominio.com
http://www.dominio.com
images.dominio.com
INTERNET
Optimización de aplicaciones PHP: Client side
<?xml v
<ref:
<gr
HTML
www1.dominio.com
http://www.dominio.com
images.dominio.com
INTERNET
<?xml v
<ref:
<gr
<?xml v
<ref:
<gr
<?xml v
<ref:
<gr
cssjsxml
jpg gif
flash
Optimización de aplicaciones PHP: Client side
<?xml v
<ref:
<gr
HTML
www1.dominio.com
http://www.dominio.com
images.dominio.com
INTERNET
<?xml v
<ref:
<gr
<?xml v
<ref:
<gr
<?xml v
<ref:
<gr
cssjsxml
jpg gif
flash
Optimización de aplicaciones PHP: Client side
Carga de páginas web:La regla del 20/80
‣ Un estudio de YAHOO! nos dice que del tiempo total de carga de la Home de los sitios más populares de Internet:
Una media del 20% corresponde al lado servidor (entregar un index.html)
El 80% restante corresponde al lado cliente (carga de js, css, img, ajax, flash, etc.)
Optimización de aplicaciones PHP: Client side
Carga de páginas web:La regla del 20/80
‣ Un estudio de YAHOO! nos dice que del tiempo total de carga de la Home de los sitios más populares de Internet:
Una media del 20% corresponde al lado servidor (entregar un index.html)
El 80% restante corresponde al lado cliente (carga de js, css, img, ajax, flash, etc.)
‣ Por tanto, las optimizaciones que realicemos sobre el lado cliente tendrán impacto sobre un 80% del tiempo de carga.
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
20%
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
80%
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Tiempo bajar HTML Tiempo restante
Yahoo!
MySpace
MSN
ebay
Amazon
YouTube
ElPais
Atrápalo
Barrapunto
Terra
10% 90%9% 91%5% 95%5% 95%38% 62%9% 91%15% 85%10% 90%18% 82%4% 96%
Optimización de aplicaciones PHP: Client side
Tiempo bajar HTML Tiempo restante
Yahoo!
MySpace
MSN
ebay
Amazon
YouTube
ElPais
Atrápalo
Barrapunto
Terra
10% 90%9% 91%5% 95%5% 95%38% 62%9% 91%15% 85%10% 90%18% 82%4% 96%
= servidor
Optimización de aplicaciones PHP: Client side
Tiempo bajar HTML Tiempo restante
Yahoo!
MySpace
MSN
ebay
Amazon
YouTube
ElPais
Atrápalo
Barrapunto
Terra
10% 90%9% 91%5% 95%5% 95%38% 62%9% 91%15% 85%10% 90%18% 82%4% 96%
Optimización de aplicaciones PHP: Client side
Tiempo bajar HTML Tiempo restante
Yahoo!
MySpace
MSN
ebay
Amazon
YouTube
ElPais
Atrápalo
Barrapunto
Terra
10% 90%9% 91%5% 95%5% 95%38% 62%9% 91%15% 85%10% 90%18% 82%4% 96%
= cliente
Optimización de aplicaciones PHP: Client side
Tiempo bajar HTML Tiempo restante
Yahoo!
MySpace
MSN
ebay
Amazon
YouTube
ElPais
Atrápalo
Barrapunto
Terra
10% 90%9% 91%5% 95%5% 95%38% 62%9% 91%15% 85%10% 90%18% 82%4% 96%
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Optimización en el cliente:no todo es reducir tiempos...
Optimización de aplicaciones PHP: Client side
Optimización en el cliente:no todo es reducir tiempos...
Lo que importa es la
percepción de velocidad del usuario.
Optimización de aplicaciones PHP: Client side
Optimización en el cliente:no todo es reducir tiempos...
Lo que importa es la
percepción de velocidad del usuario.
‣ Los elementos aparecen progresivamente, siempre hay cambios.
‣ Dejamos para el final de la carga elementos que no requieren interacción.
Optimización de aplicaciones PHP: Client side
‣ Mi web tarda en cargar más de la cuenta, efectivamente, pero... ¿cuáles son los motivos?
Manos a la obra... ¿por dónde empezamos?
Optimización de aplicaciones PHP: Client side
‣ Mi web tarda en cargar más de la cuenta, efectivamente, pero... ¿cuáles son los motivos?
‣ Debemos auditar la carga de la página, y detectar los cuellos de botella.
Manos a la obra... ¿por dónde empezamos?
Optimización de aplicaciones PHP: Client side
Herramientas para detectar cuellos de botella en la carga de páginas
YSlow (extensión para Firebug)
Firebug (extensión Firefox)
Mozilla Firefox 2 & 3
+
+
Optimización de aplicaciones PHP: Client side
Hay un antes y un después de Firebug en el mundo del desarrollo web...
20081994 2000
Optimización de aplicaciones PHP: Client side
Herramientas:
‣ Plugin de Firefox que integra muchas herramientas para el desarrollador web, de gran utilidad. Por ejemplo:
Inspecciona y edita el HTML en vivo.
Nos muestra la actividad de red: qué carga nuestra página, en qué orden y con qué tiempos.
Consola de javascript: evaluación y debug.
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Ahora ya sí... ¡a optimizar!
Optimización de aplicaciones PHP: Client side
Optimización: caché expires
‣ Según Yahoo!, el 75% de las visitas a sus páginas vienen con elementos ya cacheados.
‣ Para el resto de los mortales, entre el 40-60% de las visitas vienen con caché. No es una cifra nada despreciable...
‣ Si aumentamos el tiempo de expiración de elementos que no cambian con frecuencia: imágenes, javascripts, etc. conseguiremos que los navegadores guarden sus cachés por más tiempo.
‣ Cuando queramos forzar el refresco de un elemento, le ponemos de sufijo un id de versión, ej: public.js?v=20081212
‣ Otra opción es poner de nombre al fichero el md5 de su contenido: main-811a8ba4fbabed723fcd9c165b6f5d2c.css
Optimización de aplicaciones PHP: Client side
<?xml v
<ref:
<gr
HTML
www1.dominio.com
http://www.dominio.com
images.dominio.com
INTERNET
<?xml v
<ref:
<gr
<?xml v
<ref:
<gr
<?xml v
<ref:
<gr
cssjsxml
jpg gif
flash
Optimización de aplicaciones PHP: Client side
En Apache:
Optimización de aplicaciones PHP: Client side
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
En Apache:
Optimización de aplicaciones PHP: Client side
Cómo mola la Web 2.0, pero...
‣ Gran parte de la programación pasa al lado cliente: miles de líneas de javascript, css. Enviamos mucha más información... ¡a veces más de 500kb en una página!
‣ Las librerías javascript hacen de todo, pero valen su peso en... Kb. El ADSL es nuestro amigo, pero no hay que abusar.
‣ Mashups: integramos varias herramientas de terceros vía ajax, la latencia de red se convierte en crítica.
Optimización de aplicaciones PHP: Client side
Librería Peso* Peso min. Peso min+gzip
prototype/script.aculo.us
jquery (con plugins)
Yahoo! YUI
Librerías javascript más populares
* Sin contar css’s, imágenes, librerías auxiliares, etc.
280kb
200kb
+400kb
Optimización de aplicaciones PHP: Client side
Librería Peso* Peso min. Peso min+gzip
prototype/script.aculo.us
jquery (con plugins)
Yahoo! YUI
Librerías javascript más populares
* Sin contar css’s, imágenes, librerías auxiliares, etc.
280kb
200kb
+400kb
148kb
105kb
320kb
Optimización de aplicaciones PHP: Client side
Librería Peso* Peso min. Peso min+gzip
prototype/script.aculo.us
jquery (con plugins)
Yahoo! YUI
Librerías javascript más populares
* Sin contar css’s, imágenes, librerías auxiliares, etc.
280kb
200kb
+400kb
148kb
105kb
320kb
52kb
36kb
83kb
Optimización de aplicaciones PHP: Client side
Optimización: extraer js y css a ficheros externos
‣ Porque los ficheros externos son fácilmente cacheables
‣ Una modicación en una propiedad css no ha de provocar que el usuario baje de nuevo todo el html (con css y js empotrado)
‣ Lo mismo para las imágenes: mejor en ficheros externos, cacheadas
‣ Podremos optimizar cómo servimos contenidos. Ejemplo: por Apache (html) y Lighttpd (js, css, imágenes).
Optimización de aplicaciones PHP: Client side
Optimización: Combinar ficheros para reducir peticiones
‣ Combinando js y css en uno o dos ficheros, ahorramos muchísimas conexiones y tiempos de carga.
‣ Los navegadores están configurados para aceptar 2 peticiones simultáneas desde un mismo dominio: cuantas menos peticiones, más rápido descarga toda la página.
Descargas en paralelo
Optimización de aplicaciones PHP: Client side
2 en paralelo
4 en paralelo
8 en paralelo
‣ Usar subdominios del tipo: static.dominio.com, images.dominio.com, etc. para aumentar el número de descargas en paralelo.
Optimización: usar subdominiospara aumentar descargas en paralelo
Optimización de aplicaciones PHP: Client side
Optimización: compactar javascript
‣ Consiste en reducir el tamaño de los ficheros javascript quitando espacios, comentarios, a veces reduciendo nombre de variables, etc.
‣ La reducción es de hasta un 50%.
‣ La convención es llamar al nuevo fichero: home.js => home-min.js
‣ Inconveniente. Tenemos que mantener un fichero más bajo control de versiones, y programar script que genere min cada vez que cambia el js.
‣ Minimizadores más famosos:
• JSMin (http://javascript.crockford.com/jsmin.html)
• YUI Compressor (http://www.julienlecomte.net/blog/)
• Packer (http://dean.edwards.name/packer/)
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
-28%
Optimización de aplicaciones PHP: Client side
javascript sin minimizar
Optimización de aplicaciones PHP: Client side
javascript minimizado
Optimización de aplicaciones PHP: Client side
Optimización: compresión gzip
‣ ¡Comprime js, css en más de un 80%!
‣ Forma parte del protocolo HTTP/1.1 que implementan todos los navegadores modernos.
‣ Apache 1.3 => mod_gzip, Apache 2.x => mod_deflate
‣ Se puede combinar con un minimizador de javascript (#3) para reducir el tamaño del fichero en más de un 90%.
‣ La mayoría de los hostings tienen configurado gzip para html, pero es conveniente comprimir también css y js. Incluso respuestas de XML y JSON.
‣ No comprimir imágenes (ya lo están).
Optimización de aplicaciones PHP: Client side
256 kb
Optimización de aplicaciones PHP: Client side
256 kb
Optimización de aplicaciones PHP: Client side
256 kb
148 kb
Optimización de aplicaciones PHP: Client side
256 kb
148 kb
Optimización de aplicaciones PHP: Client side
256 kb
148 kb
(gzip)52kb
Optimización de aplicaciones PHP: Client side
Optimización: Una imagen que contenga muchos sprites
‣ Cada imagen (icono, botón, rollover, banderas, backgrounds), por muy pequeña que sea, cuenta como petición http request.
‣ Es fácil que tengamos decenas de pequeñas imágenes en una página: las empotradas en los css también cuentan.
‣ Cargamos una sola imagen agrupando el máximo de sprites que vamos a usar, y mediante css vamos posicionando cada uno en su lugar.
‣ La imagen resultante es menor de tamaño que 20 imágenes individuales.
‣ Pero sobre todo, ahorramos http requests.
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Optimización: mover css al <head>
‣ Mover los css al <head> aumenta la percepción de carga rápida de la página, ya que los elementos se renderizan progresivamente.
‣ Internet Explorer no renderiza nada hasta que tiene todos los CSS de la página. Si colocamos uno al final, hay que esperar a que cargue el resto de la página y lo lea.
‣ Lo que comentamos de la percepción: si el usuario ve que se van renderizando cosas en pantalla, la percepción de velocidad es positiva.
Optimización de aplicaciones PHP: Client side
Optimización: mover scripts js al final de la página
‣ Mover los js al final de la página, si es posible. En HTTP/1.1, hasta que no se acaba de leer un js no se sigue con el resto de la carga.
‣ A veces no nos es posible mover todos los js al final (document.write), pero sí los más pesados (librerías).
‣ En todo caso, podemos evaluar de incluirlos a partir de un punto de la carga que sepamos que el usuario ya ha visto cambios en pantalla, y cargarlos mientras éste está “distraido”.
‣ Para mayor control sobre la carga, colocar chivatos en el html que nos indican que ya podemos cargar el js.
Optimización de aplicaciones PHP: Client side
html:
js:
Optimización de aplicaciones PHP: Client side
html:
js:
Optimización de aplicaciones PHP: Client side
html:
js:
Optimización de aplicaciones PHP: Client side
html:
js:
Optimización de aplicaciones PHP: Client side
Optimización: Quitar js y css duplicados
‣ Al montar un html a partir de varios componentes de PHP, en equipos de varios developers, es común que algún js/css lo acabemos llamando varias veces en el renderizado de una página.
‣ Esto penaliza a nivel de peticiones (Firefox) pero también porque hay que evaluar varias veces el mismo código.
‣ Podemos diseñar un pequeño sistema centralizado de inclusión de javascripts y css, tanto en PHP como en javascript.
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Herramientas:
‣ Extensión de Firebug desarrollada por Yahoo!
‣ Audita la carga de una página web, y le pone notas en función de 14 reglas de optimización reconocidas.
‣ Nos muestra explicaciones del porqué de las notas conseguidas y valiosos enlaces a más teoría al respecto.
‣ Muestra estadísticas de uso de cache y componentes en nuestra página, nos ayuda a contextualizar.
YSlow
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP: Client side
Conclusiones
‣ No hay porqué seguir todas las optimizaciones, ni en un orden establecido. Implementar progresivamente.
‣ Reducir peticiones http request = mayor velocidad de carga
‣ caché de navegador agresiva
‣ agrupación de elementos (js, css, imágenes)
‣ Comprimir salida con gzip (excepto imágenes). Además, minimizar ficheros javascript.
‣ Concentrarse en la parte de la página que ve primero el usuario: renderizarla lo antes posible.
‣ Hacer la carga de las páginas progresivas, siempre han de verse cambios.
Optimización de aplicaciones PHP: Client side
Enlaces de interés
- http://getfirebug.com
- http://developer.yahoo.com/performance/rules.html
- http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
- http://yuiblog.com/blog/2006/11/28/performance-research-part-2/
- http://yuiblog.com/blog/2006/11/28/performance-research-part-3/
- http://yuiblog.com/blog/2006/11/28/performance-research-part-4/
- http://www.julienlecomte.net/blog/2007/08/13/
- http://httpd.apache.org/docs/2.0/mod/mod_deflate.html
- http://jeremy.zawodny.com/blog/archives/009272.html
- http://www.vladville.com/using-apache-mod_expires-for-faster-ajax-sites
- http://www.julienlecomte.net/blog/2007/08/11/
- http://alistapart.com/articles/sprites
Optimización de aplicaciones PHP: Client side
¡Gracias!Esta presentación y más cosas las tienes en:
http://www.phpbarcelona.org
Manuel AguilarDesarrollo web & sistemas
maguilar@harecoded.com
Patrocinadores
Optimización de aplicaciones PHP: Client side
¡Gracias!Esta presentación y más cosas las tienes en:
http://www.phpbarcelona.org
Manuel AguilarDesarrollo web & sistemas
maguilar@harecoded.com
Patrocinadores
Recommended