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

G

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

About the author

Hasan Eren Keskin

Biraz

8 comments

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

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

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

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

  • kullandıgım google fontu >> https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap

    scripte bu fonta göre düzenliyorum fakat basarılı olamadım. nasıl düzenlemem gerekli?

    Yapmış oldugum

    WebFontConfig = {
    google: { families: [ ‘Source+Sans+Pro&display=swap ] }
    };
    (function() {
    var wf = document.createElement(‘script’);
    wf.src = ‘https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap’;
    wf.type = ‘text/javascript’;
    wf.async = ‘true’;
    var s = document.getElementsByTagName(‘script’)[0];
    s.parentNode.insertBefore(wf, s);
    })();

Son Yorumlar

Son Yazılar