Web sitelerinin hızlı yüklenmesi ve kullanıcı deneyiminin iyileştirilmesi büyük önem taşır. Font kütüphaneleri, özellikle Font Awesome sitenize yük bindirerek performans kayıplarına yol açar. Sadece font kütüphaneleri de değil. Bunun yerine kullandığınız svg png gibi görsel boyutlu dosyalarda tüm speed test sonuçlarınızı etkilemektedir. Neyse ki, CSS ve modern web teknolojileri sayesinde, font dosyalarından tamamen kurtulmak ve hızlı, performans odaklı bir web deneyimi sunmak o kadarda zor değil. Css.gg ile sadece font kütüphanelerinden kurtulabilir dilerseniz sadece kullanacağınız iconların css kodlarını dahil ederek kullanmaya hemen başlayabilirsiniz.
Örneğin bir instagram logosu kullanmak istediğiniz de çoğu zaman koca bir kütüphaneyi yüklemeniz gerekiyor.
Veya bir svg png dosyasına ihtiyaç duyuyorsunuz. Ancak bunlar yükleme esnasında gecikmeler yaşattığı gibi, kullanmayacağınzı yüzlerce iconu da yanında getiriyor.
Bunun yerine: https://css.gg/instagram bu bağlantıya giderek.
Sadece sağ kısımdaki css kodu alıp, kendi stil dosyasınıza eklemeniz yeterli.
.gg-instagram {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs,1));
border: 2px solid transparent;
box-shadow: 0 0 0 2px;
border-radius: 4px;
width: 20px;
height: 20px
}
.gg-instagram::after,
.gg-instagram::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute
}
.gg-instagram::after {
border: 2px solid;
left: 3px;
width: 10px;
height: 10px;
border-radius: 100%;
top: 3px
}
.gg-instagram::before {
border-radius: 3px;
width: 2px;
height: 2px;
background: currentColor;
right: 1px;
top: 1px
}
Gözükmesini istediğiniz yere bu kodu koymanız yeterli:
Font Kütüphaneleri Olamdan Hızınıza Hız Katın
CSS.GG (https://css.gg/) web sitesi, 704 farklı ikonu sadece CSS kullanarak sunan bir kaynaktır. Bu ikonlar, .ttf, .woff, .woff2, svg, png gibi font dosyaları olmadan, yalnızca CSS ile şekillendirilerek oluşturulur. Bu sayede, web sitelerinin hızını artırmak için font dosyalarını yüklemek ve sunucu isteklerini azaltmak mümkün olur.
Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırma
Font kütüphanelerinin kullanımı, web sayfalarının yüklenme süresini uzatabilir. Bunun nedeni, her bir font dosyası için ayrı bir sunucu isteği yapılması ve dosyaların indirilmesi gerekliliğidir. CSS.GG ile sadece CSS kullanarak, bu ek sunucu istekleri ve indirmeleri ortadan kalkar. Bu da web sayfasının daha hızlı yüklenmesine ve kullanıcıların içeriği daha hızlı görmesine olanak sağlar.
Kullanılmayan CSS’yi Azaltma
Font kütüphanelerinin bazı dezavantajlarından biri, kullanılmayan CSS kodlarının da indirilmesidir. Bu gereksiz CSS kodları, web sayfasının boyutunu artırabilir ve yüklenme süresini uzatabilir. CSS.GG ile sadece ihtiyaç duyulan ikonlar kullanıldığı için, kullanılmayan CSS kodları ortadan kalkar ve sayfanın boyutu azalır. Bu da web sayfasının hızlı yüklenmesini sağlar.
Web Yazı Tipi Yüklemesi Sırasında Metnin Görünür Olmasını Sağlama
Web yazı tipleri yüklendiğinde, bazen metinlerin doğru şekilde görüntülenmesi biraz zaman alabilir. Bu gecikme, kullanıcıların boş bir sayfa ile karşılaşması ve içeriğin geç yüklenmesi sorununa yol açabilir. CSS.GG ile sadece CSS kullanarak şekillendirilen ikonlar, font dosyalarına gerek olmadığından, metinler hemen görünür hale gelir. Bu, kullanıcıların web sayfanızdaki metinlere daha hızlı erişebilmelerini sağlar ve kullanıcı deneyimini artırır.
Aşırı Büyük Bir DOM Boyutundan Kaçınma
DOM (Document Object Model) boyutu, bir web sayfasının içerdiği HTML ve CSS öğelerinin toplam boyutunu ifade eder. Font kütüphanelerinin kullanımı, sayfanın DOM boyutunu artırabilir ve dolayısıyla yüklenme süresini uzatabilir. CSS.GG ile sadece CSS kullanarak, ikonlar ve şekiller CSS kodlarıyla oluşturulduğu için DOM boyutu daha küçük olur. Bu, web sayfasının daha hızlı yüklenmesini ve performansın artmasını sağlar.
LCP, CLS, FCP ve INP Sorunlarını Azaltma
Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), First Contentful Paint (FCP) ve Interaction to Next Paint (INP), web performansını ölçmek için kullanılan metriklerdir. Bu metrikler, web sayfalarının hızlı yüklenmesi ve kullanıcı etkileşimlerine hızlı yanıt vermesi açısından önemlidir. CSS.GG ile sadece CSS kullanarak font dosyalarından kurtulmak, sayfa yüklenme süresini azaltır ve bu metriklerin iyileştirilmesine yardımcı olur. Daha hızlı LCP, daha az CLS, daha hızlı FCP ve daha iyi INP sonuçları elde edilebilir.
Font kütüphanelerinden kurtulmak ve sadece CSS kullanarak web sayfalarının hızını artırmak, kullanıcı deneyimini önemli ölçüde iyileştirir. CSS.GG gibi kaynaklar, web geliştiricilerin ihtiyaç duydukları ikonları sadece CSS kodlarıyla oluşturmalarına olanak sağlar. Bu, font dosyalarının yüklenmesine ve ek sunucu isteklerine gerek olmadığı anlamına gelir. Bu şekilde, sayfa yüklenme süresi azalır, kullanıcılar daha hızlı bir şekilde içeriğe erişebilir ve web performansı artar. CSS.GG’nin kullanımı, LCP, CLS, FCP ve INP gibi performans metriklerinin iyileştirilmesine de katkıda bulunur. Bu nedenle, font kütüphanelerinden kurtulmak ve sadece CSS kullanmak, web geliştiriciler için önemli bir adımdır.
