Bizimle iletişime geçin

BAHUSUS.COM

Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın

web yazı tipi

SEO

Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın

Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın

Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın çözümü. Google Fonts ekledikten sonra sitenizin yükleme süresinin yaklaşık 500ms arttığını fark etmiş olabilirsiniz.

Bu makaleyi okuyorsanız, sitenizi Google PageSpeed Insights ile analiz ettiniz. “Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın” hatasını aldınız.

teşhis

İlk yüklendikten sonra, tarayıcı sayfadaki metni düzgün şekilde oluşturabilmesi için Google Font’un indirilmesini beklemelidir. Bu dönemde, her yerde genellikle beyaz alanlar vardır. Performansı etkilemese de, boş tuval ziyaretçinizin gezinme deneyimini olumsuz yönde etkileyebilir. Esasen, web sitenizin sonsuza dek görünmesi gerektiği izlenimini veriyor.

 

Google Fonts Neden Yavaş?

Google’ın tüm dünyada birkaç veri merkezi vardır ve bu fontlar bulunduğunuz yere yakın olan süper hızlı CDN’lerinden yüklenir. Ancak Google Font’un iki büyük sorunu var. Aşağıdaki video’da görüldüğü gibi fontu yükleme ve CSS’e dönüştürme çok zaman alıyor.

 

Sorun 1: Her yazı tipi için, tarayıcınız 2 HTTP isteği yapar

Tek bir font eklemek şöyle görünebilir:

Robots.txt Dosyası Nedir Nasıl Oluşturulur

<link href=”https://fonts.googleapis.com/css?family=Muli:400″
rel=”stylesheet”>

Tarayıcıya söylediği şey, bunun gibi görünen bir css dosyası indirmektir.

@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 400;
src: local(‘Open Sans Regular’), local(‘OpenSans-Regular’), url
(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-
UFVZ0bf8pkAg.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U
+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Şimdi tarayıcı yeni font dosyasını indirmeye başlar (woff2 dosyası).

URL’leri yakından izlerseniz, biri fonts.googleapis.com, diğeri fonts.gstatic.com’dur. Her ikisi de tarayıcının iki DNS araması yapması gerektiği anlamına gelen ayrı alanlardır.

Sitenizde 2 farklı font varsa, tarayıcınızın 4 HTTP’nin 2 alan adına istek almasını sağlaması gerekir! Ayrıca, bu isteklerin paralel olmadığını unutmayın.

Sorun 2: Google Font yükleninceye kadar metin gizli kalıyor

Yukarıda gördüğümüz gibi, doğrudan font dosyalarını indirmek yerine, Google CSS dosyalarını indirir. Bu nedenle görünmez metin flaşı (FOIT) ve stilsiz metin flaşı (FOUT) üzerinde hiçbir kontrolümüz yoktur.

Google PageSpeed Insights’daki hataların nedeni budur. “Web yazı tipi yüklenirken metnin görünür kaldığından emin olun. Web yazı tipi yüklenirken metnin kullanıcı tarafından görülebilir olmasını sağlamak için font görüntüleme CSS özelliğini kullanın “.

Etkili seo teknikleri ile daha iyi sonuçlar

Sadece bir kod satırı. Ancak, varsayılan olarak Google fontu düzenlememize izin vermiyor.

 

Google Fonts’u WordPress’e Daha Hızlı Yükleyin

Çözüm, Google Fonts’u senkronize olmayan şekilde enjekte eden özelleştirilmiş bir komut dosyası kullanmaktır.

  • Sitenizi açarak mevcut Google fontlarınızı bulun sağ tıklayın -> “Sayfa kaynağını görüntüle” ve “fonts.googleapis.com” kelimesini aratın. URL’nin tamamını kopyalayın. https://fonts.googleapis.com/css?family=Patua+One Gibi bir şey görünecek.
  • Yukarıdaki URL’yi https://googlefonts.3perf.com/’a yapıştırın ve oluşturulan kodu kopyalayın.
  • Oluşturulan kodu header.php dosyasını düzenleyerek veya Simple Custom CSS and JS gibi herhangi bir eklenti kullanarak WordPress <head> ‘e ekleyin.
  • Mevcut Google Fonts’u kaldırın. Aksi takdirde, hiçbir etkisi olmayacak! Autoptimize eklentisini ayarlarına göre kullanıyorsanız, “Ekstra” seçeneğini seçin. Daha sonra “Google Yazıtipleri’ni kaldır” ı seçin.

autoptimize

Veya Disable Google Fonts gibi eklentiler kullanabilirsiniz. Şimdi Google PageSpeed Insights‘ınızı tekrar kontrol edin.

Web yazı tipi diğer Yöntem

Bu sorunu çözmek için, style sayfanızdaki font-family veya font-face bildirimini bulun ve ardından stilin sonundan hemen önce font-display CSS özelliğini ekleyin.

Hemen Çıkma Oranı (Bounce Rate) Nasıl Düşürülür

Örneğin:

body {font-family:’Piccolo’;
font-weight:bold;
font-size:8999px;
font-color:green;
}

Kapama sınırlayıcısından önce ekleyin.

body {font-family:’Piccolo’;
font-weight:bold;
font-size:8999px;
font-color:green;
font-display:fallback;
}

Diğer değerler arasında fallback, swap, optional ve auto sayılabilir. Açıklamayı buradan okuyun. Webfont yükleme görünürlüğü sorununu çözmenin bir başka yolu da bu kodu doğrudan stil sayfasına uygulamaktır.

Bu size yardımcı olduysa veya herhangi bir sorunla karşılaştıysanız aşağıdaki yorumu yapın.

 

İlginizi çekebilir:

Okumaya devam et
Şunlar da ilginizi çekebilir...
Admin

İçerikleri oluşturur, BAHUSUS ekibini yönetir ve bu blogda gördüğünüz her içeriğin güzel görünmesini sağlar.

Yorum yapmak için tıklayın

Cevap bırakın

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

Diğer SEO

En üste