PHPBarcelona Conference - Optimización aplicaciones PHP - Client side

Optimización de aplicaciones PHP: Client side

Optimización de aplicaciones PHP

Client side

Manuel AguilarDesarrollo web & sistemas

[email protected]

mailto:[email protected]



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


‣ 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


www1.dominio.com

http://www.dominio.com

images.dominio.com

INTERNET


<?xml v

<ref:

<gr

HTML

www1.dominio.com


images.dominio.com

INTERNET


<?xml v

<ref:

<gr

HTML

www1.dominio.com


images.dominio.com

INTERNET

<?xml v

<ref:

<gr

<?xml v

<ref:

<gr

<?xml v

<ref:

<gr

cssjsxml

jpg gif

flash


<?xml v

<ref:

<gr

HTML

www1.dominio.com


images.dominio.com

INTERNET

<?xml v

<ref:

<gr

<?xml v

<ref:

<gr

<?xml v

<ref:

<gr

cssjsxml

jpg gif

flash


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.)


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.



20%



80%



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%



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



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%



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



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 en el cliente:no todo es reducir tiempos...



Lo que importa es la

percepción de velocidad del usuario.



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.


‣ 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?


‣ 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?


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

+

+


Hay un antes y un después de Firebug en el mundo del desarrollo web...

20081994 2000


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.




Ahora ya sí... ¡a optimizar!


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


<?xml v

<ref:

<gr

HTML

www1.dominio.com


images.dominio.com

INTERNET

<?xml v

<ref:

<gr

<?xml v

<ref:

<gr

<?xml v

<ref:

<gr

cssjsxml

jpg gif

flash


En Apache:


ExpiresByType image/gif A2592000

ExpiresByType image/png A2592000

ExpiresByType image/jpg A2592000

ExpiresByType image/jpeg A2592000

En Apache:


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.


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





Yahoo! YUI



280kb

200kb

+400kb

148kb

105kb

320kb





Yahoo! YUI



280kb

200kb

+400kb

148kb

105kb

320kb

52kb

36kb

83kb


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: 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


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: 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/)

http://javascript.crockford.com/jsmin.html

http://javascript.crockford.com/jsmin.html

http://dean.edwards.name/packer/

http://dean.edwards.name/packer/






-28%


javascript sin minimizar


javascript minimizado


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).


256 kb


256 kb


256 kb

148 kb


256 kb

148 kb


256 kb

148 kb

(gzip)52kb


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: 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: 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.


html:

js:


html:

js:


html:

js:


html:

js:


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.



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






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.


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://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

http://getfirebug.com

http://getfirebug.com

http://developer.yahoo.com/performance/rules.html

http://developer.yahoo.com/performance/rules.html

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/








http://www.julienlecomte.net/blog/2007/08/13/


http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

http://jeremy.zawodny.com/blog/archives/009272.html

http://jeremy.zawodny.com/blog/archives/009272.html

http://www.vladville.com/using-apache-mod_expires-for-faster-ajax-sites

http://www.vladville.com/using-apache-mod_expires-for-faster-ajax-sites



http://alistapart.com/articles/sprites

http://alistapart.com/articles/sprites


¡Gracias!Esta presentación y más cosas las tienes en:

http://www.phpbarcelona.org


[email protected]

Patrocinadores






¡Gracias!Esta presentación y más cosas las tienes en:



[email protected]

Patrocinadores





Technology

PHPBarcelona Conference - Optimización aplicaciones PHP - Client side