Jak skrócić czas ładowania FontAwesome i zwiększyć szybkość witryny

W tym artykule pokażę, jak skrócić czas ładowania FontAwesome, opóźniając ładowanie arkuszy stylów.

Font Awesome to popularna biblioteka ikon, która zapewnia szeroką gamę skalowalnych ikon wektorowych, które można łatwo dostosować i wykorzystać w projektach tworzenia stron internetowych. Gdy strona internetowa używa niesamowitych arkuszy stylów czcionek dla ikon, zazwyczaj znacznie spowalnia prędkość, ponieważ przeglądarka musi pobrać czcionkę z serwera innej firmy. W tym procesie blokuje ładowanie krytycznych zasobów w pierwszej kolejności i zmniejsza wyniki wglądu w szybkość strony.

Być może widziałeś błędy, takie jak Zmniejsz nieużywany CSS , Zmniejsz zasoby blokujące renderowanie lub Unikaj łączenia krytycznych żądań z powodu niesamowitego kodu czcionki.

Rozwiązaniem jest więc zamiana niesamowitych ikon czcionek na ikony SVG lub opóźnienie ich ładowania. Nie zawsze jest możliwe całkowite zastąpienie ikon ikonami SVG, ale możemy łatwo opóźnić ładowanie niesamowitego arkusza stylów czcionek i przyspieszyć ładowanie strony.

Jak opóźnić ikony z niesamowitymi czcionkami w Bloggerze?

Aby opóźnić niesamowite ikony czcionek, musisz najpierw zidentyfikować wersję używaną w Twojej witrynie.

Możesz po prostu wyszukać ( CTRL + F ) niesamowite czcionki w kodzie motywu i usunąć je ze swojego motywu.

Teraz użyj poniższego skryptu i zastąp go kodem źródłowym font-awesome odpowiednią wersją.

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

Jeśli masz wiele niesamowitych kodów czcionek, używa zarówno importu, jak i arkuszy stylów, musisz użyć poniższego skryptu z łączem źródłowym.

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

Teraz użyj jednego z tych skryptów tuż nad zamykającym tagiem body i zapisz kod. Teraz niesamowite ikony czcionek są ładowane z opóźnieniem lub można powiedzieć, że są opóźnione o 3 sekundy. Możesz dostosować tę wartość w powyższym skrypcie.

Załaduj bibliotekę Font Awesome asynchronicznie za pomocą JavaScript

A jeśli nie chcesz opóźniać ikon z niesamowitymi czcionkami, możesz asynchronicznie załadować bibliotekę Font Awesome za pomocą JavaScript. W ten sposób ikony zostaną pobrane i wyrenderowane po załadowaniu krytycznej zawartości strony. Nie będzie to tak skuteczne jak metoda opóźnienia, ale zdecydowanie poprawi się w porównaniu z domyślną.

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

W tym przykładzie plik CSS Font Awesome jest ładowany asynchronicznie przy użyciu JavaScript. Dostosuj adres URL w atrybucie link.href , aby wskazywał plik CSS Font Awesome, którego chcesz użyć.

Wdrażając to podejście, krytyczna zawartość Twojej strony zostanie załadowana jako pierwsza, bez czekania na ikony Font Awesome. Następnie ikony będą ładowane asynchronicznie, skracając początkowy czas ładowania i poprawiając ogólną szybkość witryny.

Metoda zaawansowana

Z pewnością! Inną metodą opóźnienia ładowania ikon Font Awesome jest użycie interfejsu API Intersection Observer . Takie podejście pozwala ładować ikony tylko wtedy, gdy stają się widoczne w widocznym obszarze, skracając początkowy czas ładowania strony. Oto jak możesz to zaimplementować:

Usuń domyślny arkusz stylów Font Awesome, jak wspomniano w poprzedniej metodzie.

Dodaj element zastępczy dla każdej ikony Font Awesome. Może to być prosty element <span> lub <div> .

Użyj interfejsu Intersection Observer API, aby wykryć, kiedy elementy zastępcze są widoczne w rzutni. Gdy element stanie się widoczny, załaduj kod CSS Font Awesome i zastąp symbol zastępczy rzeczywistą ikoną.

Oto przykładowa implementacja przy użyciu 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>

W tym przykładzie używamy interfejsu API Intersection Observer do wykrywania, kiedy elementy zastępcze z klasą font-awesome-placeholder stają się widoczne w rzutni. Kiedy element jest widoczny, dynamicznie ładujemy CSS Font Awesome, zastępujemy symbol zastępczy rzeczywistą ikoną i przestajemy obserwować ten element.

Dostosuj adres URL w atrybucie link.href , aby wskazywał plik CSS Font Awesome, którego chcesz użyć. Zmodyfikuj także atrybut data-icon każdego elementu zastępczego, aby określić żądaną klasę ikony Font Awesome.

Korzystając z interfejsu API „ Intersection Observer ”, ikony Font Awesome będą ładowane tylko wtedy, gdy staną się widoczne, co skraca początkowy czas ładowania strony i poprawia szybkość witryny.

Mam nadzieję, że ten artykuł pomoże Ci skrócić czas ładowania FontAwesome i przyspieszyć ładowanie strony. W ten sposób możesz sprawić, by Twoja witryna była przyjazna dla podstawowych wskaźników sieciowych.