Ene 112014
 
Artículo Javascript

Por varias razones, es importante minimizar el tiempo que tardan las páginas de un sitio web en cargarse en un navegador. Por una parte, la valoración subjetiva del sitio mejora si su tiempo de respuesta es pequeño. Pero, además, los buscadores (y en concreto Google), tienen en cuenta este factor a la hora de decidir el posicionamiento del sitio.

El administrador de un sitio web dispone de distintas herramientas para recabar una información precisa sobre el tiempo dedicado por el navegador a cargar y procesar los distintos elementos que componen la página: En Firefox, el plugin Firebug presenta un desglose del tiempo dedicado a la carga del codigo html, css, javascript, imágenes, etc. También, el propio Google ofrece la herramienta online Pagespeed Insights, que ofrece recomendaciones sobre cómo mejorar el tiempo de carga y otros aspectos de la página.

En concreto, el código javascript cargado desde ficheros externos supone una cantidad considerable del tiempo total de carga de la página. Pero por otra parte, gran parte de este código sólo es necesario para proporcionar interactividad a la página, y no es necesario para la carga inicial de la misma.

Por ejemplo, una página puede ofrecer al usuario la posibilidad de visualizar un mapa de Google Maps al pulsar en un botón. Normalmente, esto supone incluir en el header HTML de la página una línea para cargar el código javascript que contiene el api de google maps:

Para mejorar el tiempo de carga de la página podemos eliminar esta línea, y añadir, inmediatamente antes del tag </body>, el siguiente código:

Este código define la función “downloadJSAtOnload”, que añade dinámicamente al header del documento el elemento <script> que carga el api de google.

A continuación, añade al evento “onload” la ejecución de dicha función.

En la url de carga del api de google, se especifica el argumento “callback=loadMaps”, de manera que al finalizar la carga del api de google, se ejecuta esta función. loadMaps carga el api de googleMaps, mediante una llamada a “google.load”. En la llamada a “google.load” se especifica a su vez una función callback “mapLoaded”. En esta última función, implementaremos el código que crea el mapa, añade marcadores, etc…

 Publicado por en 10:09 am

 Deja un comentario

(requerido)

(requerido)