SlideShare uma empresa Scribd logo
1 de 77
Baixar para ler offline
Optimización de aplicaciones PHP: Client side




Optimización de aplicaciones PHP
            Client side



                                       Manuel Aguilar
                                    Desarrollo web & sistemas
                                      maguilar@harecoded.com
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
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.
Optimización de aplicaciones PHP: Client side

                         http://www.dominio.com




www1.dominio.com




images.dominio.com




  INTERNET
Optimización de aplicaciones PHP: Client side

                           http://www.dominio.com




                        <?xml v
                          <ref:
                            <gr



                       HTML


www1.dominio.com




images.dominio.com




  INTERNET
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
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
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!            10%                              90%
 MySpace            9%                              91%
  MSN               5%                              95%
   ebay             5%                              95%
 Amazon            38%                              62%
 YouTube            9%                              91%
  ElPais           15%                              85%
 Atrápalo          10%                              90%
Barrapunto         18%                              82%
  Terra             4%                              96%
Optimización de aplicaciones PHP: Client side

                 = servidor
             Tiempo bajar HTML                 Tiempo restante
 Yahoo!            10%                               90%
 MySpace            9%                               91%
  MSN               5%                               95%
   ebay             5%                               95%
 Amazon            38%                               62%
 YouTube            9%                               91%
  ElPais           15%                               85%
 Atrápalo          10%                               90%
Barrapunto         18%                               82%
  Terra             4%                               96%
Optimización de aplicaciones PHP: Client side



             Tiempo bajar HTML                Tiempo restante
 Yahoo!            10%                              90%
 MySpace            9%                              91%
  MSN               5%                              95%
   ebay             5%                              95%
 Amazon            38%                              62%
 YouTube            9%                              91%
  ElPais           15%                              85%
 Atrápalo          10%                              90%
Barrapunto         18%                              82%
  Terra             4%                              96%
Optimización de aplicaciones PHP: Client side

                                                  = cliente
             Tiempo bajar HTML                Tiempo restante
 Yahoo!            10%                              90%
 MySpace            9%                              91%
  MSN               5%                              95%
   ebay             5%                              95%
 Amazon            38%                              62%
 YouTube            9%                              91%
  ElPais           15%                              85%
 Atrápalo          10%                              90%
Barrapunto         18%                              82%
  Terra             4%                              96%
Optimización de aplicaciones PHP: Client side



             Tiempo bajar HTML                Tiempo restante
 Yahoo!            10%                              90%
 MySpace            9%                              91%
  MSN               5%                              95%
   ebay             5%                              95%
 Amazon            38%                              62%
 YouTube            9%                              91%
  ElPais           15%                              85%
 Atrápalo          10%                              90%
Barrapunto         18%                              82%
  Terra             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


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

                                        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
Optimización de aplicaciones PHP: Client side




En Apache:
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
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í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.
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.
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.
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
                                               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.
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
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:                     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.
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 Aguilar
                                        Desarrollo 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 Aguilar
                                        Desarrollo web & sistemas
                                       maguilar@harecoded.com




                   Patrocinadores

Mais conteúdo relacionado

Destaque

Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra
Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundraJoomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra
Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundraJordi Catà
 
Gearman and asynchronous processing in PHP applications
Gearman and asynchronous processing in PHP applicationsGearman and asynchronous processing in PHP applications
Gearman and asynchronous processing in PHP applicationsDinh Pham
 
การใช้งาน phpMyadmin
การใช้งาน phpMyadminการใช้งาน phpMyadmin
การใช้งาน phpMyadminskiats
 
Ecosistema de desarrollo en PHP con Docker y Ansible
Ecosistema de desarrollo en PHP con Docker y AnsibleEcosistema de desarrollo en PHP con Docker y Ansible
Ecosistema de desarrollo en PHP con Docker y AnsibleVicent Soria Durá
 
Steganography: Hiding your secrets with PHP
Steganography: Hiding your secrets with PHPSteganography: Hiding your secrets with PHP
Steganography: Hiding your secrets with PHPRaul Fraile
 
From Legacy to DDD in PHP | Tech Talks | Privalia
From Legacy to DDD in PHP | Tech Talks | PrivaliaFrom Legacy to DDD in PHP | Tech Talks | Privalia
From Legacy to DDD in PHP | Tech Talks | PrivaliaJordi Vila Gallardo
 
Introducción a PHP - Programador PHP - UGR
Introducción a PHP - Programador PHP - UGRIntroducción a PHP - Programador PHP - UGR
Introducción a PHP - Programador PHP - UGRJuan Belón Pérez
 
Implementing DDD Concepts in PHP
Implementing DDD Concepts in PHPImplementing DDD Concepts in PHP
Implementing DDD Concepts in PHPSteve Rhoades
 
Servidor Web Apache, PHP, MySQL.
Servidor Web Apache, PHP, MySQL.Servidor Web Apache, PHP, MySQL.
Servidor Web Apache, PHP, MySQL.Ángel Acaymo M. G.
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel
 

Destaque (12)

Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra
Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundraJoomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra
Joomla!day2013 Albacete Spain, Responsive, Adaptive y la tundra
 
Gearman and asynchronous processing in PHP applications
Gearman and asynchronous processing in PHP applicationsGearman and asynchronous processing in PHP applications
Gearman and asynchronous processing in PHP applications
 
การใช้งาน phpMyadmin
การใช้งาน phpMyadminการใช้งาน phpMyadmin
การใช้งาน phpMyadmin
 
Ecosistema de desarrollo en PHP con Docker y Ansible
Ecosistema de desarrollo en PHP con Docker y AnsibleEcosistema de desarrollo en PHP con Docker y Ansible
Ecosistema de desarrollo en PHP con Docker y Ansible
 
Steganography: Hiding your secrets with PHP
Steganography: Hiding your secrets with PHPSteganography: Hiding your secrets with PHP
Steganography: Hiding your secrets with PHP
 
From Legacy to DDD in PHP | Tech Talks | Privalia
From Legacy to DDD in PHP | Tech Talks | PrivaliaFrom Legacy to DDD in PHP | Tech Talks | Privalia
From Legacy to DDD in PHP | Tech Talks | Privalia
 
RabbitMQ y Symfony
RabbitMQ y SymfonyRabbitMQ y Symfony
RabbitMQ y Symfony
 
Introducción a PHP - Programador PHP - UGR
Introducción a PHP - Programador PHP - UGRIntroducción a PHP - Programador PHP - UGR
Introducción a PHP - Programador PHP - UGR
 
Implementing DDD Concepts in PHP
Implementing DDD Concepts in PHPImplementing DDD Concepts in PHP
Implementing DDD Concepts in PHP
 
Curso Php
Curso PhpCurso Php
Curso Php
 
Servidor Web Apache, PHP, MySQL.
Servidor Web Apache, PHP, MySQL.Servidor Web Apache, PHP, MySQL.
Servidor Web Apache, PHP, MySQL.
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 

Semelhante a PHPBarcelona Conference - Optimización aplicaciones PHP - Client side

Optimiza tu WordPress para móviles en media hora con AMP
Optimiza tu WordPress para móviles en media hora con AMPOptimiza tu WordPress para móviles en media hora con AMP
Optimiza tu WordPress para móviles en media hora con AMPFernando Serer
 
Aplicaciones Php Para Empresas
Aplicaciones Php Para EmpresasAplicaciones Php Para Empresas
Aplicaciones Php Para EmpresasCarlos Buenosvinos
 
Aplicaciones PHP para empresas (PHPBarcelona en Lancelona)
Aplicaciones PHP para empresas (PHPBarcelona en Lancelona)Aplicaciones PHP para empresas (PHPBarcelona en Lancelona)
Aplicaciones PHP para empresas (PHPBarcelona en Lancelona)Oriol Jiménez
 
Mejorar WPO en WordPress
Mejorar WPO en WordPressMejorar WPO en WordPress
Mejorar WPO en WordPressAntonio Torres
 
Antonio Torres - WPO Wordpress - EN@E Digital Meeting
Antonio Torres - WPO Wordpress - EN@E Digital MeetingAntonio Torres - WPO Wordpress - EN@E Digital Meeting
Antonio Torres - WPO Wordpress - EN@E Digital MeetingENAE Business School
 
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)SiteGround España
 
Hosting Y Alojamiento Web
Hosting Y Alojamiento Web
Hosting Y Alojamiento Web
Hosting Y Alojamiento Web dillonbyaalcqzsi
 
Barometro de tecnologia web 2020
Barometro de tecnologia web  2020Barometro de tecnologia web  2020
Barometro de tecnologia web 2020La Fabrique du Net
 
Caso de estudio - Optimizacion en magento
Caso de estudio - Optimizacion en magentoCaso de estudio - Optimizacion en magento
Caso de estudio - Optimizacion en magentoSugerendo
 
Bargento 1.0 – Zend – Por qué Zend Technologies ?
Bargento 1.0 – Zend – Por qué Zend Technologies ?Bargento 1.0 – Zend – Por qué Zend Technologies ?
Bargento 1.0 – Zend – Por qué Zend Technologies ?Bargento ES
 
10 reglas de oro para mejorar tu página web
10 reglas de oro para mejorar tu página web10 reglas de oro para mejorar tu página web
10 reglas de oro para mejorar tu página webExtra Software
 
Mashups Aplicaciones hacia el Enterprise 2.0
Mashups Aplicaciones hacia el Enterprise 2.0Mashups Aplicaciones hacia el Enterprise 2.0
Mashups Aplicaciones hacia el Enterprise 2.0Esteban Saavedra
 
Detalles técnicos e impacto de negocio de varnish plus
Detalles técnicos e impacto de negocio de varnish plusDetalles técnicos e impacto de negocio de varnish plus
Detalles técnicos e impacto de negocio de varnish plusVarnish Software
 
T2 aplicaciones-web
T2   aplicaciones-webT2   aplicaciones-web
T2 aplicaciones-webloloky98
 

Semelhante a PHPBarcelona Conference - Optimización aplicaciones PHP - Client side (20)

Optimiza tu WordPress para móviles en media hora con AMP
Optimiza tu WordPress para móviles en media hora con AMPOptimiza tu WordPress para móviles en media hora con AMP
Optimiza tu WordPress para móviles en media hora con AMP
 
Aplicaciones Php Para Empresas
Aplicaciones Php Para EmpresasAplicaciones Php Para Empresas
Aplicaciones Php Para Empresas
 
Aplicaciones PHP para empresas (PHPBarcelona en Lancelona)
Aplicaciones PHP para empresas (PHPBarcelona en Lancelona)Aplicaciones PHP para empresas (PHPBarcelona en Lancelona)
Aplicaciones PHP para empresas (PHPBarcelona en Lancelona)
 
Mejorar WPO Joomla
Mejorar WPO JoomlaMejorar WPO Joomla
Mejorar WPO Joomla
 
Mejorar WPO en WordPress
Mejorar WPO en WordPressMejorar WPO en WordPress
Mejorar WPO en WordPress
 
Antonio Torres - WPO Wordpress - EN@E Digital Meeting
Antonio Torres - WPO Wordpress - EN@E Digital MeetingAntonio Torres - WPO Wordpress - EN@E Digital Meeting
Antonio Torres - WPO Wordpress - EN@E Digital Meeting
 
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
 
Hosting Y Alojamiento Web
Hosting Y Alojamiento Web
Hosting Y Alojamiento Web
Hosting Y Alojamiento Web
 
Herramientas web más utilizadas 2020
Herramientas web más utilizadas 2020Herramientas web más utilizadas 2020
Herramientas web más utilizadas 2020
 
Barometro de tecnologia web 2020
Barometro de tecnologia web  2020Barometro de tecnologia web  2020
Barometro de tecnologia web 2020
 
Caso de estudio - Optimizacion en magento
Caso de estudio - Optimizacion en magentoCaso de estudio - Optimizacion en magento
Caso de estudio - Optimizacion en magento
 
Bargento 1.0 – Zend – Por qué Zend Technologies ?
Bargento 1.0 – Zend – Por qué Zend Technologies ?Bargento 1.0 – Zend – Por qué Zend Technologies ?
Bargento 1.0 – Zend – Por qué Zend Technologies ?
 
10 reglas de oro para mejorar tu página web
10 reglas de oro para mejorar tu página web10 reglas de oro para mejorar tu página web
10 reglas de oro para mejorar tu página web
 
Mashups Aplicaciones hacia el Enterprise 2.0
Mashups Aplicaciones hacia el Enterprise 2.0Mashups Aplicaciones hacia el Enterprise 2.0
Mashups Aplicaciones hacia el Enterprise 2.0
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Acelera tu sitio WordPress WPO
Acelera tu sitio WordPress WPOAcelera tu sitio WordPress WPO
Acelera tu sitio WordPress WPO
 
Detalles técnicos e impacto de negocio de varnish plus
Detalles técnicos e impacto de negocio de varnish plusDetalles técnicos e impacto de negocio de varnish plus
Detalles técnicos e impacto de negocio de varnish plus
 
T2 aplicaciones-web
T2   aplicaciones-webT2   aplicaciones-web
T2 aplicaciones-web
 
VENTA ONLINE EN HOTELES
VENTA ONLINE EN HOTELESVENTA ONLINE EN HOTELES
VENTA ONLINE EN HOTELES
 
Introduccion a la web 2.0
Introduccion a la web 2.0Introduccion a la web 2.0
Introduccion a la web 2.0
 

Último

De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...OLGAMILENAMONTAEZNIO
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....Aaron Betancourt
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 

Último (20)

De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 

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.
  • 10. Optimización de aplicaciones PHP: Client side
  • 11. Optimización de aplicaciones PHP: Client side 20%
  • 12. Optimización de aplicaciones PHP: Client side
  • 13. Optimización de aplicaciones PHP: Client side 80%
  • 14. Optimización de aplicaciones PHP: Client side
  • 15. Optimización de aplicaciones PHP: Client side Tiempo bajar HTML Tiempo restante Yahoo! 10% 90% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% ElPais 15% 85% Atrápalo 10% 90% Barrapunto 18% 82% Terra 4% 96%
  • 16. Optimización de aplicaciones PHP: Client side = servidor Tiempo bajar HTML Tiempo restante Yahoo! 10% 90% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% ElPais 15% 85% Atrápalo 10% 90% Barrapunto 18% 82% Terra 4% 96%
  • 17. Optimización de aplicaciones PHP: Client side Tiempo bajar HTML Tiempo restante Yahoo! 10% 90% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% ElPais 15% 85% Atrápalo 10% 90% Barrapunto 18% 82% Terra 4% 96%
  • 18. Optimización de aplicaciones PHP: Client side = cliente Tiempo bajar HTML Tiempo restante Yahoo! 10% 90% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% ElPais 15% 85% Atrápalo 10% 90% Barrapunto 18% 82% Terra 4% 96%
  • 19. Optimización de aplicaciones PHP: Client side Tiempo bajar HTML Tiempo restante Yahoo! 10% 90% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% ElPais 15% 85% Atrápalo 10% 90% Barrapunto 18% 82% Terra 4% 96%
  • 20. Optimización de aplicaciones PHP: Client side
  • 21. Optimización de aplicaciones PHP: Client side
  • 22. Optimización de aplicaciones PHP: Client side
  • 23. Optimización de aplicaciones PHP: Client side Optimización en el cliente: no todo es reducir tiempos...
  • 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.
  • 31. Optimización de aplicaciones PHP: Client side
  • 32. Optimización de aplicaciones PHP: Client side
  • 33. Optimización de aplicaciones PHP: Client side Ahora ya sí... ¡a optimizar!
  • 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
  • 36. Optimización de aplicaciones PHP: Client side En Apache:
  • 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/)
  • 46. Optimización de aplicaciones PHP: Client side
  • 47. Optimización de aplicaciones PHP: Client side
  • 48. Optimización de aplicaciones PHP: Client side
  • 49. Optimización de aplicaciones PHP: Client side
  • 50. Optimización de aplicaciones PHP: Client side -28%
  • 51. Optimización de aplicaciones PHP: Client side javascript sin minimizar
  • 52. Optimización de aplicaciones PHP: Client side javascript minimizado
  • 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).
  • 54. Optimización de aplicaciones PHP: Client side 256 kb
  • 55. Optimización de aplicaciones PHP: Client side 256 kb
  • 56. Optimización de aplicaciones PHP: Client side 256 kb 148 kb
  • 57. Optimización de aplicaciones PHP: Client side 256 kb 148 kb
  • 58. Optimización de aplicaciones PHP: Client side 256 kb 148 kb (gzip) 52kb
  • 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.
  • 60. Optimización de aplicaciones PHP: Client side
  • 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.
  • 63. Optimización de aplicaciones PHP: Client side html: js:
  • 64. Optimización de aplicaciones PHP: Client side html: js:
  • 65. Optimización de aplicaciones PHP: Client side html: js:
  • 66. Optimización de aplicaciones PHP: Client side html: 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.
  • 68. Optimización de aplicaciones PHP: Client side
  • 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.
  • 70. Optimización de aplicaciones PHP: Client side
  • 71. Optimización de aplicaciones PHP: Client side
  • 72. Optimización de aplicaciones PHP: Client side
  • 73. Optimización de aplicaciones PHP: Client side
  • 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