Çoğu zaman bu performans canavarını pek dikkate almıyordum.
Nedir bu yavaşlık faktörü diye soracak olursanız; özel fontlar.
Gerekli özeni gösterdiğimde en az 2 kat hız artışı oldu.
Özel fontlar ikiye ayrılır:
• Google fonts
• Harici yazı tipleri
Gecikme oluşturan iki neden var.
1- Harici istek
2- Render, dönüşüm
Üçüncü Taraf HTTP İstekleri:
Her ne kadar Google'nin uzay teknoloji sunucularından çağrılıyor olsa da,
istek istektir. Gecikme yaratır. Siteyi yorar. Yavaşlatır.
Çözüm:
Eşzamansız yükleme, önden istek gönderme ve bağlanma...
Ve daha gelişmiş bazı teknikler için sizin için mükemmel bir araç var.
• https://googlefonts.3perf.com/
Bu snippet neler yapıyor siteden detaylı inceleyebilirsiniz.
Sadece istediğiniz google yazı tipini girin ve size vereceği kodu sitenizdeki head tagları arasına yazın.
Harici Yazı Tipleri için Çözüm:
Bu yöntem daha etkilidir. Fontları localde barındırırsınız. Ekstra bir bağlantıya gerek kalmaz.
Google fonts üzerinden indireceğiniz, yada tamamen başka özel bir font. Sadece render süresi vardır.
font-display:swap; özelliğini kullanın. Render olana kadar sistem fontu gözüksün.
Eşzamansız yükleme sayesinde açılış gecikmesi de azalacaktır.
Burada dikkat edilmesi gereken, font dosyasının boyutudur.
Sitenize yüklemeden önce indirdiğiniz özel fontun dosya boyutuna bakın.
Bazı fontlar 125kb iken bazıları 475kb olabiliyor. Yerelden çağrılıyor olsa da, dosya boyutu düşük olmalı.
Bu, sistem fontundan özel fonta dönüşüm süresini kısaltacaktır.
ve BONUS ÇÖZÜM:
Sitenizdeki font çeşitliliğini arttırmayın. En iyi performans özel fontun olmamasıdır.
Ama görsellik için mutlaka gerekiyor diyorsanız bir, maksimum iki özel font kullanın.
Hatta seçtiğiniz fontların maksimum iki varyasyonu olsun. Regular ve bold.Normal ve kalın yazı.
Başka bir deyişle font-weight:400 ve font-weight:700
Bunları söylememin bir sebebi var. Bazı arkadaşların sitesinde şunu gördüm.
Bilinçsiz olarak çok fazla font ve varyasyon kullanmışlar.
Genellikle elementor gibi editörlerde seçiyorlar bu fontları.
Yada tema ayarları içinde her blok için ayrı font tanımlıyorlar.
Bu kesinlikle kaçınılması gereken bir durum.
Sonuç:
Eğer gözden kaçırdıysanız yada yeterli özeni göstermediyseniz fontlarınızı tekrar optimize edin.
En az 2x hız artışını garanti ediyorum. Bu bazen 5x bile olabiliyor. Deneyin. Farkı görün.
17 kişi bunu beğendi.
