Come inserire dinamicamente i file CSS con JavaScript: effetti sulla performance

In questo articolo vedremo come inserire dinamicamente i file CSS con JavaScript. Si tratta di una tecnica utile per la performance.

Dobbiamo prevedere lo scenario di una pagina inizialmente priva di stili CSS. In tal senso possiamo aggiungere questo blocco style all'elemento head.

<style>
        body {
            opacity: 0;
            transition: opacity 400ms linear;
        }

        .css-loaded {
            opacity: 1;
        }
</style>

Una volta che gli stili principali verranno caricati da JavaScript, la classe CSS .css-loaded mostrerà i contenuti della pagina con gli stili applicati.

Il nostro codice JavaScript farà uso delle Promise per intercettare gli eventi load ed error dell'elemento HTML link aggiunto ad head.

const insertCSSStyles = (url = '') => {
    const link = document.createElement('link');
    link.href = url;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.media = 'screen';
    document.querySelector('head').appendChild(link);

    return new Promise((resolve, reject) => {
      link.onload = () => { resolve(true); }
      link.onerror = () => { reject(false); }
    });
};

Possiamo utilizzare il nostro codice in questo modo:

insertCSSStyles('styles.css')
        .then(() => {
          document.body.classList.add('css-loaded');
          // Resto del codice dell'applicazione
        })
        .catch((err) => {
          document.body.classList.add('css-loaded');
});

Così facendo, gli stili CSS verranno caricati in modo asincrono senza andare direttamente ad inserire nel sorgente HTML l'elemento link velocizzando così il caricamento della pagina.

Demo

JavaScript Dynamic CSS

Conclusione

Il caricamento dei file CSS tramite JavaScript si rivela essere una tecnica molto utile per migliorare le prestazioni nel caricamento delle pagine, evitando di collegare tali risorse nel sorgente HTML.

Torna su