Contenido

Baja tus scripts al final del fichero

30 Jun

+ 23

Una de las técnicas más usadas para reducir el tiempo de carga de una página web es la de bajar el Javascript al final del fichero HTML, concretamente justo encima de </body>.

Esto hace que la carga de la página, no se quede en stand-by mientras termina de cargar el javascript. El resultado es realmente sorprendente:

Antes:

beforenet
(Ver Imagen)

Despues:

afternet
(Ver Imagen)

Conclusión

Como podemos ver hemos reducido un 47% el tiempo de carga de la página (la del ejemplo) o hemos mejorado el tiempo de carga un 210%, haciendo que esta cargue en casi la mitad de tiempo.

Esto además, nos evita problemas con el evento onload ya que los elementos HTML ya están añadidos al árbol DOM.

  • Buen «truco» Andrés, tendré que ponerlo a prueba en mi blog.

    Ese programa/add-on para monitorizar el tiempo es el bugzilla, no?
    Es que vi que Google había sacado algo parecido para «enseñarnos» a optimizar los tiempos de carga y demás cosas.

  • Voy a probarlo, pero la verdad no todo se podra poner al final, pues muchos scripts utilizados por decirte en .NET y paginas JSP con RichFaces colocan automaticamente llamadas en la cabecera…

    La unica forma de tener el total control es modificar las implementaciónes de los frameworks que inyectan JavaScript en las paginas… o la otra seria tener control total en un proyecto PHP.

    Gracias por el TIP voy a probarlo, pues vi que tambien es mencionada esta tecnica en varios sitios de habla ingles…

  • Tal y como dices en el post, no solo mejoramos la carga de la pagina, sino que ademas evitamos problemas con determinados eventos, ya que cuando se ejecuten los scripts, todo el html se habra afectado.

    Por otro lado una pregunta, afecta el hecho de mover el javascript a una mejora en los SEO? es decir, con esta tecnica mejoramos el reconocimiento por parte de los Search Engine?

  • Yo lo use en mi proyecto de final de carrera para una aplicacion web orientada al iPhone y similares. Y la verdad que la diferencia se noto. Entre esto, minimizar y el gzip logre reducir tanto el tamaño de la pagina como la carga de la misma en un 50% mas o menos.

    La verdad que es un tema curioso.

    Respecto a lo de los SEO lo unico que te puedo decir es que en su dia mire que contra mas arriba este la informacion relevante de la web mejor, luego que bajar el script al final, mejore este tema… ya no lo se…

  • A los que les interesen los temas de optimizacción recomiendo los libros: High Performance Web Sites (imprescindible lectura) y Even faster Web sites(lo tengo encima de la mesa todavía sin leer) de Steve Soulders. y sobre todo la extensión de firebug YSlow (a quien no la conozca todavía), creada por el mismo Steve Soluders cuando trabajaba para Yahoo (antes de pasarse a Google). Y para probar las diferencias de poner js en un sitio o en otro o los css, la aplicacion cuzillion, creada tambien por la misma persona (este tio es un crack).

  • @Gonzalo: Con el proyecto de final de carrera la verdad que intente seguir los pasos que marcaba YSlow y la verdad, es un plugin que en su momento es muy util.

    Y por cierto, gracias por esas referencias 😉

  • este metodo es muy bueno, el tema es que te rompe el xhtml valido nocierto?

  • Entonces el script de Google Analytics que hay que ponerlo antes del es conveniente ponerlo antes de ?

    Y otra cosa, dicen que se debe poner los scripts en un archivo externo, por ejemplo; javascript.js y que con esto recudes el tiempo de carga al igual que si usas CSS en archivos externos. Bueno, pues esto no se puede hacer con el código de Google Analytics no? Parece que debe ir en el archivo HTML si o si.

    Bueno tengo algunas dudas sobre esto, ¿alguien puede explicarmelo un poco?

  • @Ahriman: Supongo que te refieres a </body>.

    Los ficheros pueden ser externos y siguiendo un orden lógico pueden ir todos justo encima de </body>.
    @Joni2Back: Si que valida el XHTML 😀

  • Perdona pero veo que no se como se ponen las etiquetas aquí jej

    Bueno pues Google Analitycs creo que hay que ponerlo antes del head, ¿puedo meter el script de GA en un archivo JS y en el HTML poner la ruta del archivo?

    Por último, ¿el archivo JS no necesita ninguna ninguna estructura previa no? Pongo el script dentro y ya.

  • @ind3x: tener el contenido relevante en la parte superior de la página ayuda al SEO. Pero los robots de búsqueda no interpretan javascript o no lo tienen en cuenta como contenido de la página, por lo que no. ¿Ayuda entonces al SEO? Sí, pero porque reduce el tiempo de carga de la página, no porque el contenido relevante esté más arriba.

    @Joni2Back: no, no rompe la validación del xhtml. Yo he realizado este cambio en mi blog y valida perfectamente.

    @Ahriman: lo de poner los javascript en archivos externos lo que hace es reducir el tamaño del documento HTML, pero sigues descargando la misma cantidad de Kb (suponiendo que no comprimas el .js). La ventaja de hacerlo es que la 2ª página y siguientes que visites de ese site no descargarán el archivo .js ya que estará almacenado en la caché del navegador. Así que sólo descargar´ñas el documento HTML que en este caso será más ligero al no tener javascript embebido. Ahí es donde está la mejora de rendimiento.

    Si a alguien le interesa algo más sobre rendimiento, tengo algunos consejos de este estilo en mi blog.

  • @Nacho Plaza: Eso mismo era, lo del caché, se me había olvidado pero sabía que valía para algo jeje pero lo intenté usar con Woopra (no se si es conocido) y no me funcionó. Voy a probar ahora a ver.

    Gracias

  • Poniendo el JavaScript al final del documento lo que haces es aligerar la carga de la estructura de la página, ya que en vez de cargar [JavaScript -> Estructura], cargaría [Estructura -> JavaScript], ¿no?

    Pero si es así… el JavaScript no estaría operativo tras cargarse la estructura de la página ¿no?… ¿o cargaría igualmente todo (estructura y JavaScript) sólo que reduciendo el tiempo de carga?

    Es una duda así rara que me acaba de asaltar xDD

    Salu2!!!

  • @SirGalbraith: El problema reside en que mientras carga el JS el navegador espera a que este esté cargado, la carga no la hace asincronamente y el usuario no puede ver el contenido hasta que este no haya terminado.

    Si lo colocamos en la parte inferior, mostramos el contenido y posteriormente lanzamos el JS, esto hace que el aparentemente el usuario pueda ver el contenido, dando sensación de carga más rápida.

    Una vez terminado el HTML, (que el navegador carga simultáneamente) únicamente le quedará cargar el Javascript, mientras que despues en el primer caso (el javascript arriba) una vez cargado el JS, le queda todo el HTML por procesar, haciendo esta tarea más lenta.

    Existen otros sistemas para no añadir el Javascript a la parte inferior de la página, pero se basan en los mismo.

  • @aNieto2k: Interesante… a priori prefiero ponerlo arriba y hacer un pre-loader con AJAX y ya que se muestre todo cargado cuando esté listo (así uno también se ahorra problemas con los frameworks).

    No obstante, es bueno saber este método, ya que para determinadas páginas puede resultar útil.

    Salu2!! ^^

  • Hola de nuevo, tengo una pregunta más sobre el rendieminto.

    ¿Es bueno usar includes en HTML?

    Me gustaría saber si es lo mismo poner directamente un script que poner un include y el script en el archivo del include, espero que se entienda.

    Este tema es muy interesante!

    Gracias.

  • @Ahriman: Buenas!!

    Los includes no tienen nada que ver con este tema xD

    Si no me equivoco, hablas de PHP, en ese caso te diré que da lo mismo poner el código PHP directamente en tu archivo HTML que hacerlo mediante un include de un archivo PHP externo.

    Lo normal es hacerlo con un include, para separar las partes de la aplicación (así es como se hace en los proyectos serios desde luego), pero a efectos de funcionamiento es igual.

    Esta regla es aplicable a cualquier lenguaje, pero ten en cuenta que dependiendo del archivo que quieras implementar en tu archivo HTML se hará de una manera u otra.

    Salu2!! 😉

  • @SirGalbraith: Perdonad jeje pensé que podía mejorar el rendimiento hacerlo de una manera u otra. Ahora mismo lo que uso es un foro phpBB3, osea usa PHP pero yo el include lo pongo en los archivos HTML que «direccionan» a otro archivo HTML, esa era mi duda.

    Gracias y perdonad por cambiar de tema!!

  • Una de las cosas que no me gustan de los frameworks PHP que incorporan Javascript es que meten el código js junto al html.

    Yo intento usar el método de cargar todo al final.

    Incluso en mi CMS «casero» uno de los campos del contenido es para cargar el javascript de la página, asi eso lo muestro al final.

  • Sabia de esto, pero la verdad no le habia prestado atencion hasta ver esas tablas comparativas… es impresionante !!!

    Lo acabo de aplicar a un site en proceso y realmente se nota la diferencia. Muchisimas gracias por la sugerencia.

  • Que curioso, yo pasé de 5.88s a 6.55s, como que no siempre sirve 😛

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.