Cum să reduceți timpul de încărcare FontAwesome și să creșteți viteza site-ului

În acest articol, vă voi arăta cum puteți reduce timpul de încărcare FontAwesome prin întârzierea încărcării foilor de stil.

Font Awesome este o bibliotecă de pictograme populară care oferă o gamă largă de pictograme vectoriale scalabile care pot fi personalizate și utilizate cu ușurință în proiecte de dezvoltare web. Când un site web folosește foi de stil minunate cu fonturi pentru pictograme, în general încetinește semnificativ viteza, deoarece browserul trebuie să descarce fontul de pe un server terță parte. În acest proces, blochează încărcarea mai întâi a activelor esențiale și reduce scorurile privind viteza paginii.

Este posibil să fi văzut erori precum Reduceți CSS neutilizat , Reduceți resursele de blocare a randării sau Evitați înlănțuirea solicitărilor critice din cauza codului extraordinar de fonturi.

Deci, soluția este fie să comutați pictogramele minunate cu fonturi cu pictograme SVG, fie să întârziați încărcarea acestora. Nu este întotdeauna posibilă schimbarea completă a pictogramelor cu pictogramele SVG, dar putem întârzia cu ușurință încărcarea foii de stil minunate cu fonturi și putem crește viteza de încărcare a site-ului web.

Cum să întârzieți pictogramele cu fonturi minunate în Blogger?

Pentru a întârzia pictogramele minunate cu font, trebuie să identificați mai întâi versiunea folosită pe site-ul dvs. web.

Puteți pur și simplu să căutați ( CTRL + F ) font-awesome în codul temei și să îl eliminați din tema dvs.

Acum utilizați scriptul de mai jos și înlocuiți-l cu codul sursă al font-awesome cu versiunea corectă.

 <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>

Dacă aveți mai multe coduri minunate cu fonturi, acesta utilizează atât import, cât și foi de stil, atunci trebuie să utilizați scriptul de mai jos cu ambele link-uri sursă.

 <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>

Acum, utilizați unul dintre aceste scripturi chiar deasupra etichetei body de închidere și salvați codul. Acum, pictogramele minunate cu fonturi sunt încărcate lene sau puteți spune că sunt întârziate cu 3 secunde. Puteți ajusta această valoare în scriptul de mai sus.

Încărcați biblioteca Font Awesome asincron folosind JavaScript

Și dacă nu doriți să întârziați pictogramele cu font minunat, atunci puteți încărca biblioteca Font Awesome asincron folosind JavaScript. În acest fel, pictogramele vor fi preluate și redate după ce conținutul critic al paginii s-a încărcat. Aceasta nu va fi atât de eficientă ca metoda de întârziere, dar cu siguranță se va îmbunătăți față de cea implicită.

 <!-- 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>

În acest exemplu, fișierul CSS Font Awesome este încărcat asincron folosind JavaScript. Ajustați adresa URL din atributul link.href pentru a indica fișierul CSS Font Awesome pe care doriți să îl utilizați.

Prin implementarea acestei abordări, conținutul critic al paginii dvs. web se va încărca mai întâi, fără a aștepta pictogramele Font Awesome. Apoi, pictogramele vor fi încărcate asincron, reducând timpul inițial de încărcare și îmbunătățind viteza generală a site-ului.

Metoda Avansată

Cu siguranță! O altă metodă de a întârzia încărcarea pictogramelor Font Awesome este utilizarea API-ului Intersection Observer . Această abordare vă permite să încărcați pictogramele numai atunci când acestea devin vizibile în fereastra de vizualizare, reducând timpul inițial de încărcare a paginii. Iată cum îl puteți implementa:

Eliminați foaia de stil Font Awesome implicită, așa cum s-a menționat în metoda anterioară.

Adăugați un element substituent pentru fiecare pictogramă Font Awesome. Acesta poate fi un simplu element <span> sau <div> .

Utilizați API-ul Intersection Observer pentru a detecta când elementele substituent sunt vizibile în fereastra de vizualizare. Când un element devine vizibil, încărcați CSS Font Awesome și înlocuiți substituentul cu pictograma actuală.

Iată un exemplu de implementare folosind 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>

În acest exemplu, folosim API-ul Intersection Observer pentru a detecta când elementele substituent cu clasa font-awesome-placeholder devin vizibile în fereastra de vizualizare. Când un element este vizibil, încărcăm CSS Font Awesome în mod dinamic, înlocuim substituentul cu elementul pictogramă real și nu mai observăm acel element.

Ajustați adresa URL din atributul link.href pentru a indica fișierul CSS Font Awesome pe care doriți să îl utilizați. De asemenea, modificați atributul pictogramă de date al fiecărui element substituent pentru a specifica clasa de pictogramă Font Awesome dorită.

Folosind API-ul „ Intersection Observer ”, pictogramele Font Awesome vor fi încărcate numai atunci când sunt pe cale să devină vizibile, reducând timpul inițial de încărcare a paginii și îmbunătățind viteza site-ului.

Sper că acest articol vă va ajuta să reduceți timpul de încărcare FontAwesome și să creșteți viteza de încărcare a site-ului web. În acest fel, puteți face site-ul dvs. web vitale de bază prietenoase.