Come ridurre il tempo di caricamento di FontAwesome e aumentare la velocità del sito web
Pubblicato: 2023-05-16In questo articolo, ti mostrerò come ridurre il tempo di caricamento di FontAwesome ritardando il caricamento dei fogli di stile.
Font Awesome è una popolare libreria di icone che fornisce una vasta gamma di icone vettoriali scalabili che possono essere facilmente personalizzate e utilizzate nei progetti di sviluppo web. Quando un sito Web utilizza fogli di stile fantastici per i caratteri per le icone, in genere rallenta notevolmente la velocità poiché il browser deve scaricare il carattere da un server di terze parti. In questo processo, impedisce che le risorse critiche vengano caricate per prime e riduce i punteggi di analisi della velocità della pagina.
Potresti aver visto errori come Riduci i CSS inutilizzati , Riduci le risorse di blocco del rendering o Evita di concatenare le richieste critiche a causa di un codice fantastico per i caratteri.
Quindi, la soluzione è scambiare le fantastiche icone dei font con le icone SVG o ritardarne il caricamento. Non è sempre possibile scambiare completamente le icone con le icone SVG, ma possiamo facilmente ritardare il caricamento del fantastico foglio di stile dei font e aumentare la velocità di caricamento del sito web.
Come ritardare le icone fantastiche dei caratteri in Blogger?
Per ritardare le fantastiche icone dei caratteri devi prima identificare la versione utilizzata sul tuo sito web.
Puoi semplicemente cercare ( CTRL + F ) per font-awesome nel codice del tema e rimuoverlo dal tuo tema.
Ora usa lo script seguente e sostituiscilo con il codice sorgente di font-awesome con la versione corretta.
<script> setTimeout(function() { // Add the Font Awesome stylesheet dynamically var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'; document.head.appendChild(link); }, 3000); // Delay of 3 seconds </script>
Se disponi di più codici fantastici per i caratteri, utilizza sia l'importazione che i fogli di stile, quindi devi utilizzare lo script seguente con entrambi i collegamenti alla fonte.
<script> setTimeout(function() { // Add the Font Awesome stylesheet dynamically var link1 = document.createElement('link'); link1.rel = 'stylesheet'; link1.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'; document.head.appendChild(link1); var link2 = document.createElement('link'); link2.rel = 'stylesheet'; link2.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css'; document.head.appendChild(link2); }, 3000); // Delay of 3000 milliseconds (3 seconds) </script>
Ora, usa uno di questi script appena sopra il tag body di chiusura e salva il codice. Ora le fantastiche icone dei font vengono caricate in modo pigro o puoi dire ritardate di 3 secondi. Puoi regolare questo valore nello script sopra.
Carica la libreria Font Awesome in modo asincrono utilizzando JavaScript
E se non vuoi ritardare le icone fantastiche dei font, puoi caricare la libreria Font Awesome in modo asincrono usando JavaScript. In questo modo, le icone verranno recuperate e renderizzate dopo che il contenuto critico della pagina è stato caricato. Questo non sarà così efficace come il metodo di ritardo, ma sicuramente migliorerà rispetto a quello predefinito.
<!-- Place this script tag in the head section of your HTML --> <script> // Asynchronous loading of Font Awesome (function() { var link = document.createElement('link'); link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; // Replace with your Font Awesome CSS URL link.rel = 'stylesheet'; link.type = 'text/css'; var script = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(link, script); })(); </script>
In questo esempio, il file CSS Font Awesome viene caricato in modo asincrono utilizzando JavaScript. Regola l'URL all'interno dell'attributo link.href in modo che punti al file CSS Font Awesome che desideri utilizzare.
Implementando questo approccio, il contenuto critico della tua pagina web verrà caricato per primo, senza attendere le icone Font Awesome. Quindi, le icone verranno caricate in modo asincrono, riducendo il tempo di caricamento iniziale e migliorando la velocità complessiva del sito web.
Metodo avanzato
Certamente! Un altro metodo per ritardare il caricamento delle icone di Font Awesome consiste nell'utilizzare l' API Intersection Observer . Questo approccio consente di caricare le icone solo quando diventano visibili nel viewport, riducendo il tempo di caricamento iniziale della pagina. Ecco come puoi implementarlo:
Rimuovi il foglio di stile Font Awesome predefinito come indicato nel metodo precedente.
Aggiungi un elemento segnaposto per ogni icona Font Awesome. Questo può essere un semplice elemento <span> o <div> .
Utilizza l'API Intersection Observer per rilevare quando gli elementi segnaposto sono visibili nel viewport. Quando un elemento diventa visibile, carica il Font Awesome CSS e sostituisci il segnaposto con l'icona vera e propria.
Ecco un'implementazione di esempio utilizzando JavaScript:
<!-- Place this script tag in the head section of your HTML --> <script> // Intersection Observer callback function function loadFontAwesome(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { // Load Font Awesome CSS var link = document.createElement('link'); link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; // Replace with your Font Awesome CSS URL link.rel = 'stylesheet'; link.type = 'text/css'; document.head.appendChild(link); // Replace placeholder with Font Awesome icon var placeholder = entry.target; var iconClass = placeholder.getAttribute('data-icon'); var iconElement = document.createElement('i'); iconElement.className = iconClass; placeholder.parentNode.replaceChild(iconElement, placeholder); // Stop observing this element observer.unobserve(entry.target); } }); } // Set up Intersection Observer var options = { root: null, rootMargin: '0px', threshold: 0.1 }; var observer = new IntersectionObserver(loadFontAwesome, options); // Start observing the placeholder elements var placeholders = document.querySelectorAll('.font-awesome-placeholder'); placeholders.forEach(function(placeholder) { observer.observe(placeholder); }); </script> <!-- Place the placeholder elements wherever needed --> <p>Some content...</p> <span class="font-awesome-placeholder" data-icon="fas fa-heart"></span> <p>Some more content...</p>
In questo esempio, utilizziamo l' API Intersection Observer per rilevare quando gli elementi segnaposto con la classe font-awesome-placeholder diventano visibili nel viewport. Quando un elemento è visibile, carichiamo dinamicamente il Font Awesome CSS, sostituiamo il segnaposto con l'effettivo elemento icona e smettiamo di osservare quell'elemento.
Regola l'URL all'interno dell'attributo link.href in modo che punti al file CSS Font Awesome che desideri utilizzare. Inoltre, modifica l'attributo data-icon di ciascun elemento segnaposto per specificare la classe di icone Font Awesome desiderata.
Utilizzando l'API ' Intersection Observer ', le icone di Font Awesome verranno caricate solo quando stanno per diventare visibili, riducendo il tempo di caricamento iniziale della pagina e migliorando la velocità del sito web.
Spero che questo articolo ti aiuti a ridurre il tempo di caricamento di FontAwesome e ad aumentare la velocità di caricamento del sito web. In questo modo, puoi rendere il tuo sito web core web vitals friendly.