Cara Mengurangi Waktu Muat FontAwesome & meningkatkan Kecepatan Situs Web

Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat Mengurangi Waktu Muat FontAwesome dengan menunda pemuatan stylesheet.

Font Awesome adalah pustaka ikon populer yang menyediakan berbagai ikon vektor yang dapat diskalakan yang dapat disesuaikan dengan mudah dan digunakan dalam proyek pengembangan web. Ketika sebuah situs web menggunakan stylesheet font yang mengagumkan untuk ikon, umumnya memperlambat kecepatan secara signifikan karena browser perlu mengunduh font dari server pihak ketiga. Dalam proses itu, ini memblokir Aset penting agar tidak dimuat terlebih dahulu dan mengurangi skor wawasan kecepatan halaman.

Anda mungkin pernah melihat kesalahan seperti Kurangi CSS yang tidak digunakan , Kurangi sumber daya pemblokiran Render , atau Hindari rantai permintaan penting karena kode font yang mengagumkan.

Jadi, solusinya adalah Anda mengganti ikon font-mengagumkan dengan ikon SVG atau menunda pemuatannya. Tidak selalu mungkin untuk sepenuhnya menukar ikon dengan ikon SVG tetapi kami dapat dengan mudah menunda pemuatan lembar gaya font yang mengagumkan dan meningkatkan kecepatan pemuatan situs web.

Bagaimana Cara Menunda Ikon Font-mengagumkan di Blogger?

Untuk menunda ikon font mengagumkan, Anda harus terlebih dahulu mengidentifikasi versi yang digunakan di situs web Anda.

Anda cukup mencari ( CTRL + F ) untuk font-awesome dalam kode tema dan menghapusnya dari tema Anda.

Sekarang gunakan skrip di bawah ini dan ganti dengan kode sumber font-awesome dengan versi yang tepat.

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

Jika Anda memiliki beberapa kode font-mengagumkan yang menggunakan impor dan stylesheet, maka Anda perlu menggunakan skrip di bawah ini dengan kedua tautan sumber.

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

Sekarang, gunakan salah satu skrip ini tepat di atas penutup body tag dan simpan kodenya. Sekarang ikon font-mengagumkan sedang dimuat lambat atau Anda dapat mengatakan tertunda selama 3 detik. Anda dapat menyesuaikan nilai ini pada skrip di atas.

Muat perpustakaan Font Awesome secara asinkron menggunakan JavaScript

Dan jika Anda tidak ingin menunda ikon font-awesome maka Anda dapat Memuat pustaka Font Awesome secara asinkron menggunakan JavaScript. Dengan cara ini, ikon akan diambil dan dirender setelah konten penting halaman dimuat. Ini tidak akan seefektif metode penundaan tetapi pasti meningkat dari metode default.

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

Dalam contoh ini, file Font Awesome CSS dimuat secara asinkron menggunakan JavaScript. Sesuaikan URL di dalam atribut link.href untuk menunjuk ke file Font Awesome CSS yang ingin Anda gunakan.

Dengan menerapkan pendekatan ini, konten penting halaman web Anda akan dimuat terlebih dahulu, tanpa menunggu ikon Font Awesome. Kemudian, ikon akan dimuat secara asinkron, mengurangi waktu muat awal dan meningkatkan kecepatan situs web secara keseluruhan.

Metode Lanjutan

Tentu! Metode lain untuk menunda pemuatan ikon Font Awesome adalah dengan menggunakan Intersection Observer API . Pendekatan ini memungkinkan Anda untuk memuat ikon hanya ketika terlihat di viewport, mengurangi waktu pemuatan halaman awal. Inilah cara Anda dapat menerapkannya:

Hapus stylesheet Font Awesome default seperti yang disebutkan dalam metode sebelumnya.

Tambahkan elemen placeholder untuk setiap ikon Font Awesome. Ini bisa berupa elemen <span> atau <div> sederhana.

Gunakan Intersection Observer API untuk mendeteksi kapan elemen placeholder terlihat di viewport. Saat elemen terlihat, muat Font Awesome CSS dan ganti placeholder dengan ikon yang sebenarnya.

Berikut ini contoh implementasi menggunakan 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>

Dalam contoh ini, kami menggunakan Intersection Observer API untuk mendeteksi ketika elemen placeholder dengan class font-awesome-placeholder terlihat di viewport. Saat elemen terlihat, kami memuat Font Awesome CSS secara dinamis, mengganti placeholder dengan elemen ikon yang sebenarnya, dan berhenti mengamati elemen tersebut.

Sesuaikan URL di dalam atribut link.href untuk menunjuk ke file Font Awesome CSS yang ingin Anda gunakan. Ubah juga atribut data-icon dari setiap elemen placeholder untuk menentukan kelas ikon Font Awesome yang diinginkan.

Dengan menggunakan API ' Intersection Observer ', ikon Font Awesome akan dimuat hanya ketika akan terlihat, mengurangi waktu muat awal halaman dan meningkatkan kecepatan situs web.

Saya harap artikel ini akan membantu Anda Mengurangi Waktu Muat FontAwesome dan meningkatkan kecepatan pemuatan situs web. Dengan cara ini, Anda dapat membuat inti web vital situs web Anda ramah.