fatih toprak Full stack developer & WordPress Master

Google Web Font’larını eşzamansız olarak yükleyin

WordPress Optimizasyonu ile alakalı yazılar serimize, kaldığımız yerden devam ediyoruz. Uzun bir aradan sonra, yeniden içerik oluşturmuş olmak beni de takip eden herkesi de mutlu edecek diye umuyorum… Bu makalenin içeriği ” Google Web Font‘larını eşzamansız yükleyerek nasıl daha geçerli Pagespeed Insigts puanı alırsınız ?” sorusunun yanıtı olacak..

Google Pagespeed insights & Google Web Font

Örneğin web sayfanızı, pagespeed test aracında,  belirtilen yönergelere göre gayet optimize bir şekilde hazırladınız ancak, lokal kaynaklarınızdan değil de dışarıdan çektiğiniz / sayfanıza dahil ettiğiniz external (harici) kaynaklar nedeni ile sayfa skorunuzu daha üste çıkaramıyorsunuz.. Ancak bu durumuda aşmak için ya kaynaklarınızı lokal olarak kendi sunucunuzdan okutmalısınız ya da başka çözümler aramalısınız.

Aslında, özellikle en çok karşılaşılan hatalardan biri olan Google Web Font‘larınızın sayfanızdaki seo skorunu etkilemesinin önüne geçmek için Google Web Font’larınızı head tag’i içerisinde, stil dosyası gibi kullanmak yerine, Web Font Loader apisi ile sayfanıza dahil edebilirsiniz.

Web Font Loader

Bu servis aslında, sadece google web font için değil, bir çok font servisi desteğini de içinde barındırıyor. Bunlar;

  • Adobe edge fonts  (*)
  • Özelleştirdiğiniz kendi fontunuz (*)
  • Fontdeck (*)
  • Fonts.com (*)
  • Google (*)
  • Typekid (*)

Tüm bu servisler için yönergeleri izleyerek fontlarınızı sayfanıza eşzamansız olarak yüklemeniz oldukça kolay. Ancak bu kullanım her zaman başarılı sonuçlar vermeyebilir. Şayet son kullanıcının tarayıcısında javascript desteği bulunmuyor ise, ne yazık ki, kullanıcı sitenizde kullanacağınız web fontu, asla yükleyemeyecektir. Bu uyarıdan sonra, isterseniz bir kaç kullanım örneğini birlikte inceleyelim;

Google Web Font Loader Kullanımı

Örnek bir kullanım sağlayacak olursak, kullanmak istediğimiz, fontların Google Web Font kütüphanesinden, “Source Sans” ve “Roboto Condensed” olduklarını ve bold / normal gibi özelliklere sahip olduklarını varsayalım. Bunun için kullanmanız gereken parametreler şu şekilde ;

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Source Sans Pro:400,600,700,400italic,700italic', 'Roboto Condensed:400,700']
}
});
</script>

Bir başka ancak az yavaş sonuç alacağınız diğer kullanım ise, sayfanızın en altında, javascript ile element yaratıp bu kütüphaneyi sayfanıza dahil etmek , şöyleki ;

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Roboto+Condensed:400,700:latin', 'Source+Sans+Pro:400,600,400italic,700italic,700:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>

Bu kullanım örneklerinden sonra, belki hala süre sonu belirtiledi uyarısı veren “webfont.js” için hata alıyor olabilirsiniz. İşte bunun için de en güzel çözüm; bu dosyayı kendi sunucunuzdan servis edebilirsiniz. Şöyleki;

<script src="http://www.siteniz.com/webfont.js"></script>
<script>
(function( w ){
// if the class is already set, we're good.
if( w.document.documentElement.className.indexOf( "fonts-loaded" ) > -1 ){
return;
}
var fontA = new w.FontFaceObserver( "Source Sans Pro", {
weight: 400
});
var fontB = new w.FontFaceObserver( "Source Sans Pro", {
weight: 700
});
w.Promise
.all([fontA.check(), fontB.check()])
.then(function(){
w.document.documentElement.className += " fonts-loaded";
});
}( this ));
</script>

Bu örnek kullanımlar ile artık Google Web Font’larınızı sayfanızın oluşturmasını engelleyecek uyarılardan kurtararak sayfanıza dahil etmiş olacaksınız.

Bonus

En bilinen ve javascript kullanmak istemeyen herkes için en geçerli çözüm ise, alakalı fontları sunucunuza yükleyip tamamen oradan servis etmeniz.

@font-face {
font-family: 'source_sans_proregular';
src: url('http://websiteniz.com/fonts/sourcesanspro-regular-webfont.eot');
src: url('http://websiteniz.com/fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://websiteniz.com/fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
url('http://websiteniz.com/fonts/sourcesanspro-regular-webfont.woff') format('woff'),
url('http://websiteniz.com/fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
url('http://websiteniz.com/fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: Helvetica, Arial, sans-serif;
}
.fonts-loaded body {
font-family: 'Source Sans Pro', sans-serif;
}

Güle güle kullanın.

Kaynaklar : 

  1. https://www.lockedowndesign.com/load-google-fonts-asynchronously-for-page-speed/
  2. https://github.com/typekit/webfontloader
  3. https://developers.google.com/speed/pagespeed/insights/?url=fatihtoprak.com&tab=desktop

, , ,

“Google Web Font’larını eşzamansız olarak yükleyin” için 3 yorum

Hasan Arbay dedi ki:

Bu değerli içerik için teşekkürü bir borç bilirim.

baki hürüm dedi ki:

selam söylerim.

Berat dedi ki:

@Fatih bir sonraki WordPress Optimizasyonu yazısı için umarım bu kadar uzun ara vermezsin. Eline sağlık. Ben bu font konusunu sayende “CSS Yayını Optimizasyonu nasıl olmalı?” yazısında çözmüştüm. “fonts.googleapis” linkinde yer alan kodları sunucumda Fonts.css adında bir dosya oluşturup onun içine yapıştırdım. Böylece artık sunucumdan okutma yapıyorum. Fakatbu yazıda “Bonus” başlığı altındaki kodlar çok daha kısa geldi. Bunları deneyeceğim birde.

* Yorumunuza, kod eklemek için; [code lang="php"] kodunuz [/code] şeklinde tanımlama kullanabilirsiniz. , lang kısmına, php js css html gibi farklı syntax'ler kullanabilirsiniz.

Bir Cevap Yazın

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