PageSpeed Flash of Invisible Text (FOIT) Sorunu Nedir? Nasıl Çözülür?

FOIT (Flash of Invisible Text) Nedir?

FOIT (Flash of Invisible Text), bir web sayfası yüklenirken o web sayfasında kullanılan özel bir yazı tipi (font) yüklenene kadar sayfadaki metnin görünmez olduğu durumu tanımlamak için kullanılan terimdir. Bu durum genellikle bir web sayfası yüklenirken ve belirli bir özel yazı tipi yüklenmeye çalışılırken meydana gelir.

FOIT durumunda kullanıcının istek attığı tarayıcı, tersi belirtilmediği sürece yazılar için kullanılan font yada fontlar yüklenene kadar web sayfasında yazıları görünmez kılar. Yazılarda kullanılan ilgili font yüklendiği anda sayfadaki yazılar kullanıcı tarafından görüntülenebilir olur. Bu durum özellikle fontların çok geç yüklendiği durumda negatif kullanıcı deneyimine yol açabilir.

FOIT, kullanıcı deneyimini olumsuz etkileyebilir, çünkü kullanıcılar sayfanın yüklenmesini beklerken metni göremezler. Bu da kullanıcıların sayfadan hemen ayrılmalarına veya sayfada daha fazla vakit geçirmek istememelerine yol açabilir.

FOIT (Flash of Invisible Text) Örneği

Youtube’da Gijo Varghese tarafından paylaşılan bu videoda wordpress.org’a atılan bir istek sonrası çok somut bir FOIT sorununu görülmektedir. Web sayfasındaki yazılarda kullanılan font yüklenene kadar tarayıcı sayfadaki yazıları görünmez bir şekilde tutmakta devamında font yüklemesi tamamlanınca sayfadaki metinleri görünür hale getirmektedir.

Font yüklenene kadar metinlerin görünmemesi durumu sayfanın yavaş açıldığı izlenimini vermekte ve kullanıcının sayfa ile alakalı algısal açılış hızını negatif algılamasına sebebiyet vermektedir.

FOIT (Flash of Invisible Text) Sorunu Neden Önemlidir?

FOIT (Flash of Invisible Text), kullanıcı deneyimi ve algısal sayfa açılış hızları noktasında oluşturduğu doğrudan etki sebebiyle SEO projelerinin tümünde dikkat edilmesi gereken ve düzeltilmesi gereken bir sorundur. FOIT sorunu ile karşılaşılan web sayfalarında kullanıcı istek attığı web sayfasının ilgili yazılı içeriğini font yüklenene göremeyeceğinden ilgili sayfanın tam yüklenmediğini düşünerek sayfayı terkedebilir.

FOIT sorunu ile karşılaşılan web sitelerinde bounce rate (hemen çıkma oranı) artışı sık karşılabilen bir durumdur.

Kullanıcı deneyimini optimize etmek, algısal açılış hızlarını pozitif yönde geliştirmek için FOIT sorununun SEO projelerinde çözülmesi önemlidir.

Tarayıcıların Font Yükleme Davranışları

Yaygın olarak kullanılan popüler tarayıcıların herhangi bir metod, direktif kullanılmadığında uyguladığı varsayılan font yükleme davranışlarını aşağıdaki tabloda görüntüleyebilirisiniz:

Tablo verilerinin kaynağı: https://web.dev/avoid-invisible-text/

FOIT Sorununu Çözmek İçin Uygulanabilecek Metodlar

FOIT sorununu  çözmek için uygulayabileceğiniz farklı metodlar ve yaklaşımlar mevcuttur. İşte bazı popüler çözüm yolları:

1. Font Gösterimi (Font Display)

FOIT sorununu çözmede kullanabileceğiniz en basit ve en etkili yollardan biri CSS font-display özelliğidir. CSS font-display özelliği kullanılarak bir font’un sayfada görüntülenme, işlenme süreci kontrol edilebilir.

Bir CSS font-face’de kullanılabilecek Font-display özellikleri şunlardır:

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

Font Display direktiflerinin anlamları:

• Auto: Web sayfasında kullanılan font ile alakalı işlemlerin kontrolünün tarayıcıya (user-agent) bırakıldığı direktiftir.
• Block: Yazı tipi yüklenene kadar metni gizler ve ardından özel yazı tipini gösterir.
• Swap: Hemen bir yedek yazı tipi kullanır ve özel yazı tipi yüklendiğinde onunla değiştirir.
• Fallback: Kısa bir süre için metni gizler, yedek yazı tipini gösterir ve sonra özel yazı tipini gösterir.
• Optional: Tarayıcıya, yazı tipini yüklemeyi tamamen atlamasını veya yüklemesini seçme izni verir. Sistem fontunun mu yoksa özel yazı tipinin mi gösterileceğine tarayıcı karar verir. Eğer font hızlı yükleniyor ise sistem fontu yerine özel yazı tipi (font) gösterilir.

Örneğin, FOIT sorunun çözümünde font-display: swap; kullanılarak sayfada özel olarak yüklenen font tarayıcı tarafından indirilip yüklenene kadar geçen sürede tarayıcı, ilk olarak ilgili fontun yerine bir sistem fontunu kullanır ve ardından özel font yüklendiğinde sayfanın font’unu yeni yüklenen özel font ile değiştirir.

Web de kullandığınız pek çok sitede karşılabileceğiniz bu metod font dosyasının geç yüklenip işlendiği durumlarda sıklıkla kullanılır.

font-display:swap; metodunun kullanıldığı durumda CLS sorunları ile karşılaşabilir çünkü özel bir font yerine kullanıcının sisteminde barındırılan rastgele bir font tarayıcı tarafından kullanıldığında ilgili font ile sayfanın özel font’u arasında geçiş yapıldığında ekranda görüntü değişiklikleri olacağından sayfanın element pozisyonlaması değişebilir. Bu durum özellikle görüntü farklarının çok yüksek olduğu font değişimlerinde öğelerin kayma yaşamasına ve CLS metriğinin negatif olarak tetiklenmesine sebep olabilir.

Font-display:swap; kullanıldığı durumda sayfada CLS metriğinin negatif yönde tetiklenmesi durumu FOUT (Flash of Unstyled Text) olarak adlandırılır ve FOIT’e nazaran çözülmesi biraz daha komplike olan bir sorundur.

FOIT sorunun çözümünde font-display:swap kullandığınızda FOUT sorunu ile karşılaşıyorsanız fontlarda daha teknik bir düzenlemeye girişmek yerine swap yerine font-display:optional; özelliğinin kullanımını düşünebilirsiniz.

Swap yerine Font-display:optional; tercihi yapıldığında tarayıcı sayfada kullanılan özel font’u hızlıca yükleyemeceğine karar verdiği durumda ilgili font’un yerine bir sistem font’u seçer ve siteyi bu sistem font’u ile kullanıcıya sunar. Buradaki fark swap kullanıldığında sistem fontuyla, sitenin tercih ettiği fontun değiştirilmesi yerine sitenin fontunun yavaş açıldığı durumda tercih edilen fontun hiç kullanılmaması ve onun yerine sistem fontunun sitede değiştirilmemek üzere kullanılmasıdır.

Sitenizde özel bir font kullanıyorsanız ve bu fontun yüklenemediği durumda sistemsel bir fontun yüklenmesi tasarımsal açıdan sitenizde ciddi bir sorun oluşturmuyorsa font-display:optional; metodu hem FOIT hemde potansiyel FOUT sorunlarını çözmede oldukça başarılı bir tercih olacaktır.

Örnek bir font-display kullanım syntax’ı (söz dizimi) şöyledir:

@font-face {
font-family: ExampleFont;
src:
url(/path/to/fonts/examplefont.woff) format("woff"),
url(/path/to/fonts/examplefont.eot) format("eot");
font-weight: 400;
font-style: normal;
font-display: fallback;
}

Font-Display Nasıl Eklenir?

CSS font-display: özelliğinin eklenebilmesi için bir web sayfasında kullanılan fontun CSS direktiflerinin çağrıldığı stylesheet’in linki bulunmalı ve ilgili stylesheet içerisinde @font-face{} bölümü içerisine font-display:<direktif>; eklemesi yapılmalıdır.

Fontun still kodlarını içeren stylesheet dosyası bulunduktan sonra aşağıdaki yada üstteki örnekteki gibi font-display:<direktif> eklemesi yapmanız yeterli olacaktır.

stylesheet dosyaları bir web sayfasının <head> </head> satırları arasında <link rel=”stylesheet” etiketlemesi ile yüklenir (çağrılır).

Örnek font-face bölümü ve font-display kullanımı:

@font-face {
font-family: 'ÖrnekFont';
src: url('/yol/örnek-font.woff2') format('woff2'),
url('/yol/örnek-font.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* Burada font-display özelliği ekleniyor */
}

2. Fontun (Yazı Tipinin) Preload ile Yüklenmesi

Web sayfasında yaşadığınız FOIT sorununu çözmek için geç yüklenen fontun sayafada daha hızlı yüklenmesini sağlamak amacıyla preload etiketlemesini kullanabilirsiniz. Aşağıda örnek bir kullanımı yer alan preload etiketlemesini kullanarak bir font dosyasını web sayfasının açılış sürecinde önceliklendirerek yükleyebilir bu sayede hızlı bir şekilde metnin kullanıcıya görünür olmasını sağlayabilirsiniz.

Preload uygulaması ile font-display:swap; yada font-display:optional; kullanıldığında sayfada görüntülenen sistem fontunu beğenmediğiniz durumda da hiç sistem font’u kullanımına gerek kalmamasını sağlayabilirsiniz. Preload ile yüklenen font hızlıca yükleneceği için swap yapılmasına yada optional da swap olmaksızın bir sistem fontu kullanılmasına gerek olmayacaktır.

Örnek bir preload uygulaması syntax’ı (söz dizimi):

<link rel="preload" href="/fontunuzunadi" as="font" type="font/format" crossorigin>

• href=”/fontunuzunadı”  bölümü yüklediğiniz web fontunun adının (adresinin) yazıldığı bölümdür.
• format, belirli web yazı tipi (font) formatını ifade eder (örn. ttf, woff, woff2, vb.).
  • Örneğin fontunuzun uzantısı (tipi) .woff2 ise type= bölümüne onu girmelisiniz.

3. Google Fontlarında URL Üstünden Font-Display Uygulaması

Sayfanızda Google web yazı tiplerini (fontları) kullanıyorsanız, CSS’deki font-display özelliğini Google’dan seçtiğiniz fontu yüklemek için aldığınız URL’nizin sonuna &display= parametresini ekleyerek ekleyebilirsiniz.

Örn:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">

Bu örnekte Google’ın roboto fontunun CSS dosyasının çağrıldığı linkin sonuna &display=swap eklemesi yaparak ilgili CSS’in font-display:swap; olarak çağrılmasını sağlıyoruz.

Google fontlardan herhangi bir font seçtiğinizde Google, ilgili font’un CSS kodlarını içeren çağırma linkini size otomatik olarak oluşturmaktadır.

Önerilen Yaklaşım ve Karşılaşılabilecek Olası Sorunlar

Bir web sitesinde FOIT sorunun çözümü için uygulanabilecek en ideal yaklaşım, olası web sayfasının yavaş açıldığı tüm senaryolar için fontun still kodlarını içeren stylesheet’in preload ile çağrılması ve font-display: özelliğinin optional olarak ayarlanmasıdır.

Çünkü font-display:swap kullanıldığında font dosyasının yükleme hızı değişmeyeceğinden font yüklenene kadar geçici bir süreyle sistem fontu kullanılarak FOIT sorunu çözülebilir ancak sistem fontu ile özel font arasında görüntü uyuşmazlıkları olması durumunda (ki bu sorunla çok karşılaşılır) FOIT den farklı olarak çözülmesi çok daha teknik bir sorun olan FOUT (Flash of Unstyled Text) sorunu ortaya çıkacaktır.

Yalnızca preload uygulandığı durumda sunucu hızlı yanıt verip, sayfanın render (oluşturulma) sürecinde herhangi bir aksama olmaz, herhangi başka bir teknik sorun bulunmaz ise font, preload ile hızlı ve öncelikli olarak getirilip font-display uygulamasına gerek kalmadan fontun (metnin) hızlıca sayfada oluşturulup kullanıcıya sunulması sağlanabilir. Ancak pek çok web sayfasında fontlardan önce yüklenen ve sayfanın temelini oluşturan çok sayıda CSS, JS ve hatta görsel elementler olduğu için fontların preload ile yüklense dahi sayfada çok hızlı şekilde indirilmesinin gecikmesi oldukça olasıdır.

Böyle bir durumda ;

Preload kullanılsa dahi sunucu geç yanıt verirse, çok sayıda element preload yada eager olarak sayfada çağrılıyorsa yada direkt sunucunun yanıt verme süresi (TTFB) beklenenden uzunsa preload kullanılsa dahi kaynakların yüklenme süreleri sıkışmadan ötürü uzayacak ve sayfadaki metinler yine FOIT sorununu yaratacaktır.

Bütün bu senaryoların önüne geçmek için font-display:optional; kullanımı akıllara gelebilir ancak bu kullanımda da özel font yerine kullanılacak sistem fontu web sitenizin görüntüsünde isteyenmeyen durumlar ortaya çıkarıyorsa yada direkt basitçe sistem fontu kullanımı yapmak istemiyorsanız olası riskleride önlemek açısından font-display:optional + fontun preload ile çağrılması metodunu aynı anda kullanmayı düşünebilirsiniz.

font-display:optional + fontun CSS kodlarını içeren stylesheet’in preload ile çağrıldığı durumda font, preload ile hızlıca getirilirse optional direktifini gördüğünde tarayıcı, fontun hızlıca getirilip getirilmediğine bakarak fontun işlenme süreci hızlıysa hiç sistem fontuna geçmeden direkt özel fontu bekleyip sitede direkt özel fontu kullanabilir. Yada preload kullanıldığında dahi yanıt ve fontun işlenmesi (indirilmesi) süreci uzun sürdüğünde tarayıcı, direkt özel font yerine siteyi kullanıcıya sistem fontunu kullanarak sunabilir ve böylece olası FOIT ve swap kaynaklı FOUT sorununun önüne geçebilir.

Sitenizin genel sayfa hızı performansını ve ihtiyaçlarınızı dikkate alarak ve bu durumları göz önünde bulunarak bir kullanım tercihinde bulunabilirsiniz.