Google Pagespeed için Google Fonts Sorununun Çözümü

Yakın zamanda yaptığım siteyi hızlandırma ve optimizasyon çalışmalarının faydasını görmeye başladım. Yaptığım çalışmalar neticesinde – sunucu süresi dışında – olabilecek maksimum hıza ulaştığımı söyleyebilirim. Bir kaç yazıda bana sıkıntı çıkartan hız problemlerinin önüne nasıl geçtiğimi anlatacağım. Bu yazımızın konusu ise Pagespeed değerimizi oldukça olumsuz etkileyen <link> olarak çağırdığımız Google Fonts sorununu nasıl çözebiliriz?

Google Fonts‘a girerek bir font seçtiğiniz zaman onu sizden <link> şeklinde eklemenizi tavsiye ediyor, aynen şu şekilde:

<link href=”https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900&amp;subset=latin-ext” rel=”stylesheet”>

Ama siz bu şekilde bir ekleme yaptığınız zaman Pagespeed size aşağıdaki uyarıyı veriyor ve hızınızı %10 civarında etkileyen bir azalış gösteriyor.

Google Pagespeed Google Fonts Sorunu

Peki bu sorunu nasıl çözebiliriz?

Bazı linklerimizi alıp footer’a taşısak bile Google Fonts sorunu o şekilde çözülemiyor malesef. Bunun için küçük bir javascript kodu yazmamız lazım. Bu yazacağımız javascript kodu alt tarafta çalışacağı için sizin siteniz yüklenirken bariz bir olumsuzluk oluşturmadan açılış hızınızın artmasına yardım edecektir. İşte kodumuz:

Kullanacağınız fonta bağlı olarak Webconfig kısmı içerisini değiştirmeniz yeterli olacaktır.

Hız sizinle olsun 🙂

herenkeskin.com Pagespeed
herenkeskin.com Pagespeed

“Google Pagespeed için Google Fonts Sorununun Çözümü” üzerine 6 yorum

  1. Merhaba, Vermiş oldugunuz kodları tam olarak nereye yazıyoruz? hangi dosya icerisine kurulumu birazdaha ayrıntılı şekilde anlatırsanız memnun olucam, sıfırdan başlayan biri olarak, hic birşey anlamadım 🙂

  2. Google Pagespeed test yaptıgımda şu şekilde bir hata veriyor, Oluşturmayı engelleyen kaynakları ortadan kaldırın
    URL
    /css?family=Source+Sans+Pro&display=swap(fonts.googleapis.com)

    Header.php dosyamda ise

    Bu şekilde bi kodlamam mevcut vermiş oldugunuz kodları nasıl bicimlendirip header.php dosyama kodlarım acaba? şimdiden göstermiş oldugunuz ilgi ve alakadan ötürü teşekkürlerimi sunarım.

  3. Google Pagespeed test yaptıgımda şu şekilde bir hata veriyor, Oluşturmayı engelleyen kaynakları ortadan kaldırın
    URL
    /css?family=Source+Sans+Pro&display=swap(fonts.googleapis.com)

    Header.php dosyamda ise

    ……….link href=”https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap” rel=”stylesheet”>
    Başına nokta koymak zorunda kaldım. normalde <

    Bu şekilde bi kodlamam mevcut vermiş oldugunuz kodları nasıl bicimlendirip header.php dosyama kodlarım acaba? şimdiden göstermiş oldugunuz ilgi ve alakadan ötürü teşekkürlerimi sunarım.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.