FontAwesome Yükleme Süresi Nasıl Azaltılır ve Web Sitesi Hızı Nasıl Artırılır?

Bu yazıda, size stil sayfalarının yüklenmesini geciktirerek FontAwesome Yükleme Süresini nasıl Azaltabileceğinizi göstereceğim.

Font Awesome, kolayca özelleştirilebilen ve web geliştirme projelerinde kullanılabilen çok çeşitli ölçeklenebilir vektör simgeleri sağlayan popüler bir simge kitaplığıdır. Bir web sitesi simgeler için harika yazı tipi stil sayfaları kullandığında, tarayıcının yazı tipini üçüncü taraf bir sunucudan indirmesi gerektiğinden genellikle hızı önemli ölçüde yavaşlatır. Bu süreçte, önce kritik Varlıkların yüklenmesini engeller ve sayfa hızı içgörü puanlarını düşürür.

Kullanılmayan CSS'yi Azaltın , Render'ı engelleyen kaynakları azaltın veya harika yazı tipi kodu nedeniyle kritik istekleri zincirlemekten kaçının gibi hatalar görmüş olabilirsiniz.

Yani çözüm, yazı tipi harika simgelerini SVG simgeleriyle değiştirirsiniz veya yüklenmesini geciktirirsiniz. Simgeleri SVG simgeleriyle tamamen değiştirmek her zaman mümkün değildir, ancak harika yazı tipi stil sayfasının yüklenmesini kolayca geciktirebilir ve web sitesinin yükleme hızını artırabiliriz.

Blogger'da Font-awesome Simgeleri Nasıl Geciktirilir?

Harika simgelerin yazı tipini geciktirmek için önce web sitenizde kullanılan sürümü belirlemeniz gerekir.

Tema kodunda font-awesome için ( CTRL + F ) arama yapabilir ve bunu temanızdan kaldırabilirsiniz.

Şimdi aşağıdaki betiği kullanın ve font-awesome kaynak kodunu doğru sürümle değiştirin.

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

Birden fazla font-awesome kodunuz varsa, hem içe aktarma hem de stil sayfalarını kullanır, o zaman aşağıdaki betiği her iki kaynak bağlantıyla birlikte kullanmanız gerekir.

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

Şimdi, bu betiklerden birini kapanış gövdesi etiketinin hemen üzerinde kullanın ve kodu kaydedin. Artık font-awesome ikonları yavaş yükleniyor veya 3 saniye gecikmeli diyebilirsiniz. Bu değeri yukarıdaki komut dosyasında ayarlayabilirsiniz.

Font Awesome kitaplığını JavaScript kullanarak eşzamansız olarak yükleyin

Font-awesome simgelerini geciktirmek istemiyorsanız JavaScript kullanarak Font Awesome kitaplığını eşzamansız olarak yükleyebilirsiniz. Bu şekilde, sayfanın kritik içeriği yüklendikten sonra simgeler getirilecek ve işlenecektir. Bu, gecikme yöntemi kadar etkili olmayacak, ancak kesinlikle varsayılan yöntemden daha iyi olacaktır.

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

Bu örnekte Font Awesome CSS dosyası, JavaScript kullanılarak eşzamansız olarak yüklenir. Link.href özniteliği içindeki URL'yi, kullanmak istediğiniz Font Awesome CSS dosyasını işaret edecek şekilde ayarlayın.

Bu yaklaşımı uyguladığınızda, Font Awesome simgelerini beklemeden önce web sayfanızın kritik içeriği yüklenir. Ardından, simgeler eşzamansız olarak yüklenecek, bu da ilk yükleme süresini azaltacak ve genel web sitesi hızını artıracaktır.

Gelişmiş Yöntem

Kesinlikle! Harika Yazı Tipi simgelerinin yüklenmesini geciktirmenin başka bir yöntemi de Kavşak Gözlemci API'sini kullanmaktır. Bu yaklaşım, simgeleri yalnızca görünüm alanında görünür hale geldiklerinde yüklemenize izin vererek ilk sayfa yükleme süresini azaltır. Bunu nasıl uygulayabileceğiniz aşağıda açıklanmıştır:

Önceki yöntemde belirtildiği gibi, varsayılan Yazı Tipi Harika stil sayfasını kaldırın.

Her Font Awesome simgesi için bir yer tutucu öğe ekleyin. Bu basit bir <span> veya <div> öğesi olabilir.

Yer tutucu öğelerin görüntü alanında göründüğünü algılamak için Kesişme Gözlemcisi API'sini kullanın. Bir öğe görünür hale geldiğinde Font Awesome CSS'sini yükleyin ve yer tutucuyu gerçek simgeyle değiştirin.

İşte JavaScript kullanan örnek bir uygulama:

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

Bu örnekte, font-awesome-placeholder sınıfına sahip yer tutucu öğelerinin görünüm alanında ne zaman görünür hale geldiğini algılamak için Intersection Observer API'sini kullanıyoruz. Bir öğe göründüğünde Font Awesome CSS'sini dinamik olarak yüklüyoruz, yer tutucuyu gerçek simge öğesiyle değiştiriyoruz ve o öğeyi gözlemlemeyi bırakıyoruz.

Link.href özniteliği içindeki URL'yi, kullanmak istediğiniz Font Awesome CSS dosyasını işaret edecek şekilde ayarlayın. Ayrıca, istenen Font Awesome simge sınıfını belirtmek için her bir yer tutucu öğenin data-icon özniteliğini değiştirin.

' Kesişme Gözlemcisi ' API'sini kullanarak, Harika Yazı Tipi simgeleri yalnızca görünür hale gelmek üzereyken yüklenecek, bu da sayfanın ilk yükleme süresini kısaltacak ve web sitesi hızını artıracaktır.

Umarım bu makale FontAwesome Yükleme Süresini Azaltmanıza ve web sitesi yükleme hızını artırmanıza yardımcı olur. Bu şekilde, web sitenizin temel web hayati unsurlarını dost canlısı hale getirebilirsiniz.