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:

https://gist.github.com/0ca8e3b25b812affee6b4fd8b37e8c45

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