PageSpeed'de “Web fontu yüklenirken metnin görünür kalmasını sağlayın” Hatası Nasıl Düzeltilir

Google'ın sayfa hızı analizini kontrol ederken “ Webfont yüklemesi sırasında metnin görünür kalmasını sağlayın ” hatası mı alıyorsunuz ve bu sorunu nasıl çözeceğinizi bilmiyor musunuz? Genel olarak, bu sorunu özel bir PHP veya HTML tabanlı web sitesinde nasıl çözeceğimi biliyorum, ancak WordPress söz konusu olduğunda ben de zorlandım.

İşte bu kılavuzda, bu sorunu WordPress'te nasıl çözebileceğimizden (ayrıca bu sorunu özel PHP ve HTML tabanlı sitelerde çözme adımlarını paylaşacağım) konuşacağız ve bu hatayı kaldırarak sayfa hızı puanınızı artıracağız.

Neden PageSpeed'de “Webfont yüklemesi sırasında metnin görünür kalmasını sağlayın” Hatasını Gösteriyor

Web sitenizi Google'ın PageSpeed ​​Insight'ında test ettiğinizde, “Webfont yüklemesi sırasında metnin görünür kalmasını sağlayın” hatasıyla ilgili bir sorun görmüş olabilirsiniz ve hatayı tıkladığınızda, yazı tipi dosyalarının tam URL'lerini gösterecektir.

Yukarıdaki resimde de görebileceğiniz gibi, bu web sitesinde “Webfont yüklemesi sırasında metnin görünür kalmasını sağlayın” hatası alıyorum ve üzerine tıkladığımda Google Font dosyalarının tam URL'lerini gösterecek.

Neden bir hata gösteriyor?

Bir web sitesi tarayıcıya yüklendiğinde ve bir metne uygulanan herhangi bir özel yazı tipi dosyasını algıladığında, yazı tipi indirilene kadar bekler ve o zamana kadar metin görünmez olur. Özel yazı tipi dosyaları indirildikten sonra, hemen web sitesine uygulanır ve bu, görünmez metnin flaşı olarak bilinir.

Görünmez Metin Flash Nasıl Onarılır?

Görünmez metnin flaşını düzeltmek, web sitenizdeki “Webfont yüklemesi sırasında metnin görünür kalmasını sağlayın” hatasını da düzeltebilir ve bu sorunu düzeltmek çok kolaydır.

ekleyerek bu sorunu kolayca çözebilirsiniz.

 yazı tipi ekranı: takas;

şu anki kodun

 @ yazı tipi-yüz {

}

CSS özelliği.

Ama @font-face nedir?

@font-face, bir metne özel bir yazı tipi uygulayabileceğiniz basit bir CSS kuralıdır. woff2, woff, ttf, vb. gibi uzantıları vardır. Örneğin, bir @font-face kodu şöyle görünür:

 @ yazı tipi-yüz {

yazı tipi ailesi: Roboto, sans-serif;

yazı tipi ekranı: takas; // ---> Bu sorunu çözecektir.

yazı tipi stili: normal;

yazı tipi ağırlığı: 400;

kaynak: url(Roboto.woff2);

}

Şimdi bu yazı tipini kullanarak bir paragrafta uyguluyoruz;

 p {

yazı tipi ailesi: Roboto, sans-serif;

yazı tipi boyutu: 18 piksel;

}

Bir web sitesi yüklendiğinde, paragraf etiketine “ Roboto ” yazı tipi uygulanmış olduğunu belirtir ve bir paragraf etiketinde kullanılan yazı tipini anında indirmeye başlar. Yazı tipini indirene kadar metin görünmez kalır.

Bu nedenle sayfa hızında ve yazı tipi gösterimi eklemede “ webfont yüklemesi sırasında metnin görünür kalmasını sağlayın ” hatası gösteriyor : takas; mevcut @font-face CSS'nizde bu sorunu çözebilir.

WordPress'te Bu Sorun Nasıl Düzeltilir

WordPress kullanıyorsanız ve sayfa hızı öngörülerinde bu hatayı gösteriyorsa, bu sorunu basit adımlarla kolayca çözebilirsiniz. Bu hatayı hem yerel yazı tiplerinde hem de Google yazı tiplerinde çözme adımlarını paylaştım.

Google Yazı Tipleri için Çözüm

Başlangıçta, Google Yazı Tipleri yazı tipi görüntüsünü eklemez: takas; yazı tipine hükmediyorlar, ancak şimdi yazı tipi gösterimini uygulamak için yeni bir sorgu parametresini destekliyorlar: takas; google yazı tipi dosyasının sonuna &display=swap parametresini ekleyerek.

İşte nasıl göründüğü;

Bir tema geliştiricisiyseniz veya WordPress'te tema dosyalarını nasıl düzenleyeceğinizi biliyorsanız, Google yazı tipi dosyanıza &display=swap parametresini kolayca ekleyebilirsiniz.

Ancak WordPress tema dosyalarını düzenleme konusunda rahat değilseniz, bu parametreyi eklemek ve “Webfont yüklemesi sırasında metnin görünür kalmasını sağlama” sorununu çözmek için Asset CleanUp gibi çeşitli eklentileri kullanmaya devam edebilirsiniz.

“Varlık Temizleme” Eklentisini Kullanarak Bu Sorun Nasıl Çözülür

Google Fonts dosyanıza display=swap parametresini uygulamak için, ücretsiz olarak sunulan WordPress kitaplığından Asset CleanUp eklentisini indirip yüklemeniz gerekir.

Eklentiyi indirip etkinleştirdikten sonra, WordPress yönetici panelinizdeki “ Varlık Temizleme ” seçeneğine tıklayın > ve ardından optimizasyon sayfasını açmak için “Varlık Temizleme” altındaki “ ayarlar ” a tıklayın.

Ayarlar sayfasına girdikten sonra “ Google Yazı Tipleri ” seçeneğine tıklayın. Google Yazı Tipleri seçeneğine tıkladığınızda, google yazı tipi dosyalarını optimize etmek için çeşitli ayarları kolayca yönetebileceğiniz ayarları daha da açacaktır.

Bu ayarlardan bazıları şunları içerebilir;

Google yazı tipi dosyaları ayarlarına girdikten sonra, “ Font-ekranını uygula: CSS özellik değeri ” ayarlarında “Uygulama (varsayılan) ” yerine “ takas (en çok kullanılan) ” olarak değiştirin ve &display= ekleyecektir. parametreyi tüm google yazı tipi dosyalarınıza değiştirin.

Tema ve Eklenti Yazı Tipleri için Çözüm

WordPress temanız veya eklentiniz çoğu zaman font-awesome veya icon fontları gibi diğer fontları yükler ve aynı sorunu Google PageSpeed ​​Insight'ta da gösterir.

Bu aynı zamanda kolay bir düzeltmedir ancak biraz WordPress düzenleme bilgisi gerektirir. Kodları düzenleme konusunda rahat değilseniz, yazı tipi ekranını otomatik olarak eklemek için “ Asset CleanUp Pro ” eklentisinin premium sürümünü de kullanabilirsiniz : takas; WordPress Tema veya Eklentiler stil sayfalarınızda CSS özelliği.

Asset CleanUp Pro'yu kullanarak bu sorunu çözmek için, WordPress yönetici panelinizde "Varlık Temizleme " seçeneğine tıklayın > ve ardından optimizasyon sayfasını açmak için "Varlık Temizleme" altındaki " ayarlar "a tıklayın.

“ Varlık Temizleme ” > “ Ayarlar ” sayfasına girdikten sonra, Yerel Yazı Tipleri için özelleştirme ayarlarını açmak için “ Yerel Yazı Tipleri ” seçeneğine tıklayın.

Tarayıcınızda “ Yerel Yazı Tipleri ” özelleştirme ayarları açıldıktan sonra, yazı tipi görüntülemeyi otomatik olarak eklemek için “ Yazı tipi görüntüleme uygula: CSS özellik değeri ” altındaki verilen seçim seçeneğinden “ takas (en çok kullanılan) ” öğesini seçin: takas; tüm stil sayfalarınızda.

Toplama

Bu kılavuzda, sayfa hızı öngörüsünde “metnin web yazı tipi yüklemesi sırasında görünür kalmasını sağlama” veya “görünmez metin flaşı” sorununu nasıl çözebileceğinizi açıklamaya çalıştık.

Sayfa yükleme süresi ve sayfa hızı, iyi kullanıcı deneyimleri sunmak için önemli faktörlerdir ve bu sorunu düzeltmek çok daha iyi bir kullanıcı deneyimi sağlayabilir. Ve bir sayfa, üzerinde her şeyi göstermedikçe yüklenmiş sayılmaz.

Dolayısıyla sayfaların zaman aşımına uğramaması ve kullanıcıların istedikleri dengeyi, hızı ve kararlılığı elde edebilmeleri için sayfaya içerik yükleme süresini azaltmalısınız. Ayrıca yavaş web sitesi hızından muzdaripseniz, doğru şekilde optimize etmek için web sitesi hız optimizasyonu hakkındaki yazımıza göz atabilirsiniz.