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.
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
PHPBarcelona Conference - Optimización aplicaciones PHP - Client side
1. Optimización de aplicaciones PHP: Client side
Optimización de aplicaciones PHP
Client side
Manuel Aguilar
Desarrollo web & sistemas
maguilar@harecoded.com
2. Optimización de aplicaciones PHP: Client side
Manuel Aguilar
Desarrollo web & sistemas
Atrapalo.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
3. Optimización de aplicaciones PHP: Client side
Puntos que vamos a tratar
‣ 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.
4. Optimización de aplicaciones PHP: Client side
http://www.dominio.com
www1.dominio.com
images.dominio.com
INTERNET
5. Optimización de aplicaciones PHP: Client side
http://www.dominio.com
<?xml v
<ref:
<gr
HTML
www1.dominio.com
images.dominio.com
INTERNET
6. Optimización de aplicaciones PHP: Client side
http://www.dominio.com
<?xml v
<ref:
<gr
HTML
www1.dominio.com
<?xml v <?xml v <?xml v
<ref: <ref: <ref:
<gr <gr <gr
xml js css
images.dominio.com
jpg gif
INTERNET flash
7. Optimización de aplicaciones PHP: Client side
http://www.dominio.com
<?xml v
<ref:
<gr
HTML
www1.dominio.com
<?xml v <?xml v <?xml v
<ref: <ref: <ref:
<gr <gr <gr
xml js css
images.dominio.com
jpg gif
INTERNET flash
8. 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.)
9. 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.
24. 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.
25. 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.
26. Optimización de aplicaciones PHP: Client side
Manos a la obra... ¿por dónde empezamos?
‣ Mi web tarda en cargar más de la cuenta, efectivamente,
pero... ¿cuáles son los motivos?
27. Optimización de aplicaciones PHP: Client side
Manos a la obra... ¿por dónde empezamos?
‣ 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.
28. Optimización de aplicaciones PHP: Client side
Herramientas para detectar
cuellos de botella en la carga de páginas
Mozilla Firefox 2 & 3
+
Firebug (extensión Firefox)
+
YSlow (extensión para Firebug)
29. Optimización de aplicaciones PHP: Client side
Hay un antes y un después
de Firebug en el mundo del desarrollo web...
1994 2000 2008
30. Optimización de aplicaciones PHP: Client side
Herramientas:
‣ Plugin de Firefox que integra muchas herramientas para el
desarrollador web, de gran utilidad. Por ejemplo:
Nos muestra la actividad de red: qué carga
nuestra página, en qué orden y con qué tiempos.
Inspecciona y edita el HTML en vivo.
Consola de javascript: evaluación y debug.
34. 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
35. Optimización de aplicaciones PHP: Client side
http://www.dominio.com
<?xml v
<ref:
<gr
HTML
www1.dominio.com
<?xml v <?xml v <?xml v
<ref: <ref: <ref:
<gr <gr <gr
xml js css
images.dominio.com
jpg gif
INTERNET flash
37. Optimización de aplicaciones PHP: Client side
En Apache:
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
38. 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.
39. Optimización de aplicaciones PHP: Client side
Librerías javascript más populares
Librería Peso* Peso min. Peso min+gzip
prototype/script.aculo.us 280kb
jquery (con plugins) 200kb
Yahoo! YUI +400kb
* Sin contar css’s, imágenes, librerías auxiliares, etc.
40. Optimización de aplicaciones PHP: Client side
Librerías javascript más populares
Librería Peso* Peso min. Peso min+gzip
prototype/script.aculo.us 280kb 148kb
jquery (con plugins) 200kb 105kb
Yahoo! YUI +400kb 320kb
* Sin contar css’s, imágenes, librerías auxiliares, etc.
41. Optimización de aplicaciones PHP: Client side
Librerías javascript más populares
Librería Peso* Peso min. Peso min+gzip
prototype/script.aculo.us 280kb 148kb 52kb
jquery (con plugins) 200kb 105kb 36kb
Yahoo! YUI +400kb 320kb 83kb
* Sin contar css’s, imágenes, librerías auxiliares, etc.
42. 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).
43. Optimización de aplicaciones PHP: Client side
Optimización:
Combinar ficheros para reducir peticiones
Descargas en paralelo
‣ 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.
44. Optimización de aplicaciones PHP: Client side
Optimización: usar subdominios
para aumentar descargas en paralelo
‣ Usar subdominios del tipo:
static.dominio.com,
images.dominio.com, etc. para 2 en paralelo
aumentar el número de
descargas en paralelo.
4 en paralelo
8 en paralelo
45. 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/)
53. 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).
59. 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.
61. 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.
62. 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.
67. 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.
69. Optimización de aplicaciones PHP: Client side
Herramientas: YSlow
‣ 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.
74. 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.
75. 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
76. Optimización de aplicaciones PHP: Client side
¡Gracias!
Esta presentación y más cosas las tienes en:
http://www.phpbarcelona.org
Manuel Aguilar
Desarrollo web & sistemas
maguilar@harecoded.com
Patrocinadores
77. Optimización de aplicaciones PHP: Client side
¡Gracias!
Esta presentación y más cosas las tienes en:
http://www.phpbarcelona.org
Manuel Aguilar
Desarrollo web & sistemas
maguilar@harecoded.com
Patrocinadores