Bit - loader

Optimización de sitios y aplicaciones Web – Quinta Parte


Netmind - Optimización de sitios y aplicaciones Web – Quinta Parte    Artículo | Optimización Web
Marino Posadas | 29/03/18

Finalmente, vamos a comentar algunas técnicas que nos permiten optimizar la carga de librerías JavaScript, para evitar “cuellos de botella”, y retrasos que pueden provocar que el usuario abandone la sesión por falta de una respuesta adecuada.

Hay varias técnicas disponibles para lograr que la carga de ficheros JS sea más rápida y también lo sea la percepción que el usuario tiene de la interacción con la página (muy especialmente, con la página inicial o “landing page“). Enumeramos aquí algunas de las más importantes:

 

1) Cuidar el orden en que se cargan los elementos. Es importante que todos los elementos en la sección <head> estén precargados, antes de que el visitante vea algo en el navegador. Cualquier JavaScript dentro de la sección <head> puede ralentizar el renderizado de una página.

 

Optimización de sitios y aplicaciones Web – Quinta Parte 0

 

2) Utiliza las técnicas de “Bundling and Minifying“. Con esto conseguimos que varios archivos JS y CSS se “empaqueten” en uno solo, comprimido (y opcionalmente con los comentarios y formatos eliminados), de forma que se reducen las peticiones HTTP y por tanto, el tiempo de carga. Esto generalmente, podemos hacerlo en el proceso de “Deployment” desde nuestro IDE.

Los proyectos ASP.NET desde Visual Studio disponen por defecto de esa posibilidad, optimizando muchísimo la carga de librerías.

 

Optimización de sitios y aplicaciones Web – Quinta Parte 1

 

3) Considera utilizar los atributos async y defer en la carga de los archivos JavaScript. El primero realiza la petición de forma asíncrona, mientras el segundo “difiere” la carga hasta que el DOM está disponible.

 

4) Dependiendo del sitio Web y su funcionalidad, podría ser de interés el uso del protocolo HTTP/2. La forma en que este protocolo utiliza el multiplexado puede tener un impacto notable en la carga de archivos:

 

Optimización de sitios y aplicaciones Web – Quinta Parte 2

 

5) Utiliza distribuidores de contenido (JavaScript Content Delivery Network) para las librerías populares (jQuery, Angular, Bootstrap, etc.).  Esto es especialmente útil y rápido en distribuidores bien conocidos y populares.

 

6) Es preferible utilizar efectos CSS3 en lugar de JavaScript para generarlos. El motor de “renderización” de CSS3 está muy optimizado para la ejecución de animaciones y efectos desde su diseño en esta nueva versión.

En el artículo anterior de esta serie (el IV), vimos cómo usar animaciones vinculadas a un glifo, sin necesidad de utilizar JavaScript. Esto puede extenderse a casi todo tipo de animaciones y efectos, actualmente con un soporte excelente de navegadores.

 

7) Finalmente, no olvides el uso de cachés para los contenidos repetitivos o que cambien con poca frecuencia, especialmente en JavaScript (el acceso local a caché es más rápido casi siempre).


Entradas relacionadas
Nuestro sitio utiliza cookies para análisis. Si no estás seguro de ello, echa un vistazo a nuestra política de privacidad.