Cómo optimizar tus aplicaciones Web

Optimizar aplicaciones PHPManuel Aguilar publicó una magnífica presentación sobre cómo optimizar aplicaciones Web dada en la PHP Barcelona Conference 2008 y he considerado interesante recopilar a modo de resumen las ideas más importantes de ese artículo, en cualquier caso, recomiendo la lectura del mismo para recoger toda su esencia y ampliar información.

Partiendo de un estudio de Yahoo! que dice que el 80% del tiempo de carga de una web corresponde al lado del cliente, podemos seguir una serie de reglas que aumentarán significativamente la percepción de velocidad del usuario.

1. Aumentar el tiempo de expiración de los elementos cacheados que no varían como CSS o JavaScript: Para forzar la carga de los mismos cuando haya cambios, podemos añadir el md5 del contenido del fichero como parámetro, así el navegador lo recargará cuando cambie el hash. Ej: style.css?hash=f9d35dcf65d8f67e288ae2f12fc069f7

2. No colocar código JavaScript o estilos inline: es mejor colocarlos como ficheros externos fácilmente cacheables, de este modo evitaremos descargar todo el html por un cambio de estilo.

3. Reducir el número de ficheros externos: Los navegadores sólo pueden aceptar dos descargas simultaneas de un mismo dominio, si unimos nuestras librerías JavaScript y nuestros CSS en un único archivo evitaremos dilatar innecesariamente el tiempo de descarga.

Firebug Net

4. Usar subdominios diferentes para las imágenes y para los elementos estáticos: Conseguiremos así descargar 8 elementos de manera simultánea y reducir la carga de la web. Si además podemos optimizar un apache aparte para servir las imágenes, conseguiremos un mejor rendimiento al servirlas.

5. Compactar los ficheros JavaScript: Existen programas gratuitos como YUI Compressor que comprimen los archivos JavaScript consiguiendo resultados de hasta el 50%.

6. Utilizar compresión en el servidor: Los servidores modernos como Apache son capaces de comprimir la información antes de servirla, posteriormente los navegadores actuales como Explorer o Firefox la descomprimen de manera transparente al usuario.

7. Fomentar el uso de imágenes con muchos sprites: Estas son imágenes grandes que contienen muchas imágenes pequeñas. Según lo comentado en el punto 3 tardaremos mucho menos en descargar una imágen con 50 sprites que 50 sprites de manera individual. Posteriormente utilizaremos CSS para definir la sección de imágen que se mostrará.

Sprites

8. Mover los CSS al <head>: Navegadores como Explorer no renderizan la web hasta que no tienen todos los CSS, si los colocas en la cabecera podrá empezar antes a mostrar la web.

9. Mover los JavaScript al final de la página: Hasta que un fichero JavaScript no se ha leido completamente el navegador no continua con la carga. Si los movemos al final de la página este se estará cargando cuando el usuario ya está navegando por la web.

10. Evitar llamadas duplicadas a JavaScript y CSS: Si el navegador encuentra un fichero JavaScript para la carga hasta que este se ha leido completamente, si posteriormente vuelve a encontrar una llamada al mismo JS, volverá a parar la carga hasta que se haya leido.

Vía | Optimización aplicaciones PHP

2 thoughts on “Cómo optimizar tus aplicaciones Web

  1. ¿Que significa “No colocar código JavaScript o estilos inline: es mejor colocarlos como ficheros externos fácilmente cacheables”? ¿Puedes poner un ejemplo?

    ¿Con que se obtiene mas rendimiento, referenciando un archivo JS mediante un link http, o descargandote el JS en local antes de utilizar la página y que al abrir la página se utilice el archivo local?

    ¿Siempre que se referencia un JS, se descarga físicamente en el pc local? ¿o solo se carga el contenido el memoria leyendo el archivo a “través” del HTML?

    Gracias

  2. No entiendo el primer punto:

    style.css?hash=f9d35dcf65d8f67e288ae2f12fc069f7

    Me gustaría entender un poco mejor de que va, muchas gracias!

Comments are closed.