First Input Delay (FID) Nedir?

Bugünkü yazımda PageSpeed Insights sonuçlarında önemli bir değere sahip olan First Speed Index (FID) konusunu inceleyeceğiz. FID aynı zamanda Core Web Vitals'in 3 unsurundan birisidir. (LCP ve CLS ile birlikte...) İyi bir kullanıcı deneyimi sağlamak için sayfaların FID değer ortalaması 100 milisaniye veya daha az olmalıdır.

First Input Delay

First Input Delay yani İlk Giriş Gecikmesi (FID), bir web kullanıcısının bir sayfayla ilk etkileşime girdiği zamandan (yani bir bağlantıya tıkladığında - bir düğmeye dokunduğunda) tarayıcının olay işleyicilerini gerçekten işlemeye başlayabildiği zamana kadar geçen süreyi ölçer. Yani ilk tıklama ile ilgili sitenin ilk tepki verdiği an arasındaki süreyi ölçer... Daha basit bir ifadeyle FID, bir bağlantı veya düğme gibi bir şeye tıkladığınızda veya dokunduğunuzda tarayıcının eyleminize yanıt vermesi ve onu işlemeye başlaması arasındaki gecikmedir. İyi bir kullanıcı deneyimi için bu süreyi 100 milisaniye ya da altında tutmamız gerektiğini belirteyim.

Web siteleri geliştirilirken genelikle yaptığımız uygulama ya da kodlamanın gerçek internet geziminde nasıl bir sonuç çıkaracağından çok o komutların bize görünen yüzü ile ilgilenir ve bu yüzden bazı ağır çalışan javascriptleri ya da diğer nesneleri web sitelerimizde kullanırız... Ancak gerçek ortamda baktığımızda bazı ufak detaylar için kullandığımız javascriptler web sitemiz için kullanıcı deneyimi adına olumsuz sonuçlar doğurabilirler. Bu yüzden web sitesi tasarlarken biraz evvel bahsettiğim konuyu kulak arkası yapmamanızı öneririm.

Elbette sadece javascript çağırmaları değil veritabanı sorgularının yanlış kullanılması da FID skoruna olumsuz etki yapabilir. Hangi yazılım dilini kullanırsanız kullanın veritabanı sorgularında maksimum tasarruf sağlamayı ön görmeniz bence oldukça önemlidir. Örneğin php dili için SELECT * şeklinde bir sorgu yapmak sayfanızın FID skorunu olumsuz etkileyebilir. Bunun yerine SELECT baslik, detay... gibi sadece işinize yarayacak alanları sorgulatmanız web sitenize katkı sağlayacaktır. Yazılım geliştirdiğiniz dilin son versiyonlarını kullanmak da bu konu için oldukça değerlidir. Eski tip sorgulamaların web sitenizin konumuza bağlı FDI skorlarını düşürebileceğini söyleyebilirim.

FID Kavramı için Çok Yaşadığınız Bir Anı Gözünüzün Önüne Getireyim

Bir web sitesini tıklarsınız ya da URL olarak giriş yaparsınız ve beyaz bir ekran belirir... Web sitesi bir türlü yüklenemez, hatta hiç bir öğesi dahi size görünmez. Belirli bir süre geçtikten sonra ilgili web sitesi yüklenmeye ve size görüntülenmeye başlar. Lakin ilk yaşadığımız olay - donma olarak da adlandırabiliriz çoğu ziyaretçinin web sitesini o an terk ettiğini gözlemleyebiliriz.

Bahsettiğimiz örnekteki web sayfası mutlaka bu yazı içeriğinde geçen hatalardan bir veya daha fazlasına sahiptir. Bu hatalar şunlar olabilir:

• Sayfa içerisinde çok fazla görsel kullanımı
• Görsellerin optimize edilmemiş olması
• Çok fazla ya da gereksiz javascript kullanımı
• Yazılımsal açıdan yanlış kullanılan sorgular
• Sorguların güncel versiyonlar ile sağlanmamış olması

Aşırı Görsel Kullanımı

Bir web sayfası içerisinde aşırı görsel kullanımı sayfanızın FID skorunu olumsuz etkileyebilir. Örneğin "galeri" olarak oluşturduğunuz bir sayfada 50 tane görseli gerçek boyutu ile sunmaya kalkışırsanız problem yaşamanız kesin olur. Peki bu örneğe cevap olarak nasıl bir yol izlemelisiniz? Bir sayfanız içerisinde 50 tane görseli daha küçük halleri ile yayınlayıp tıklandıklarında orjinal hallerini açtırmanız iyi bir fikir olabilir. Ya da bu görselleri 5'erli gruplar ile ayrı sayfalarda ziyaretçilerinize sunmanız size oldukça faydalı olabilir.

Web sitenizdeki görselleri optimize etmek sandığınız kadar da zor bir iş değil. Hadi diyelim hiç bir profesyonel program ya da yazılıma sahip değilsiniz, ücretsiz olarak web tabanlı olarak çalışan Photopea ve Tinypng uygulamaları web sitenizdeki görselleri optimize etmeye yeterli özelliklere sahiptir... Doğru ölçülendirmelere sahip olmayan görsellerinizi Photopea ile ölçeklendirebilir arkasından Tinypng uygulaması ile sıkıştırıp web sitenize yükleyebilirsiniz.

Web Sitesi İçeriğinde Doğru Görsel Kullanımı için Ölçüler Nedir?

Slider ya da banner gibi alanlarda kullandığınız görsellerin 2000px civarında olması yeterlidir. Daha yüksek olan değerlerde Photopea uygulaması ile bu resimleri ideal ölçüye getirmeniz mümkündür. Ya da ürün görselleriniz için 1000px en ideal bir ölçüdür... Daha yukarısı web sitenizi kendi elinizle yavaşlatmanıza sebep olabilir. Photopea üzerinde ideal ölçü ile kayıt ettiğiniz resimleri, Tinypng uygulaması ile sıkıştırmanız web sitenizin performansını oldukça fazla derecede arttıracaktır. Bu bahsettiğim uygulamalar haricinde yine ücretsiz kullanabileceğiniz bir sürü uygulamanın da var olduğunu belirteyim.

Gereksiz Görsellerinizi Kaldırın

Örneğin ana sayfanızda 5 adet resim bulunan bir slider ya da içerik sayfanızda içeriğinizi sunarken sunduğunuz 5 adet resim var... Bunlara iyice bakın, kullanıcı tarafından gözlemleyin ve gereksiz olan en azından 2 tanesini kaldırarak ilgili URL'nize çok büyük bir hız desteği verin... Fazla kullandığınız görseller web sitenizde başınıza bela olabilir. Çünkü bir web sitesinde ağırlık yapan en önemli öğeler görsellerdir...

Gereksiz Javascriptleri Ortadan Kaldırın

Web sitenizde kullanılmayan ya da kullanılması elzem olmayan tüm scriptleri tek kalemde web sitenizden kaldırın. Javacsript kaynakları bir web sitesini yavaşlatan en önemli unsurlardan birisidir. Burada basit bir form doğrulama için çok ciddi bir javascript kullanımı yapan bir siteye sahip olabilirsiniz... Oysaki amacınız doldurulmayan bir alan için uyarı göstermek. Bu tip javascriptler yerine daha optimize edilmiş doğrulamalar kullanmanızı öneririm. Web siteniz için hayati önem taşımayan bir alan için tüm web sitenizi kötü etkileyecek bir kodlamayı web sitenizde barındırmayın!

Javascript Kullanımını Optimize Edin

Öncelikle ziyaretçileriniz için fayda sağlamayan - yararı olmayan tüm scriptleri ve dosyalarını sitenizden kaldırın... Sonrasında ise kullanmanız elzem olan scriptler için kurgulama yapın. Bunları Google Tag Manager üzerinden yapmak web siteniz için harika bir işlem olacaktır. Konuyla ilgili Google Tag Manager Nedir? Ne İşe Yarar? yazıma göz atabilirsiniz.

Veritabanı Sorguları

Hangi yazılım dilini kullanırsanız kullanın tüm veritabanı sorgularını optimize ederek yapmanız web sitenizin hızına katkı sağlar. Aceleci davranmayıp sadece işinize yarayacak sorguları, doğru ve güncel kodlama ile yapmanız sizin yararınıza... Kolay olması bakımından örnek olarak "SELECT * FROM..." yerine "SELECT id, baslik FROM..." daha verimli ve işlevsel bir sorgu türüdür...

İçerik ve görselleri optimize edilmiş, son ve güncel yazılım dili kullanan ve kaliteli bir barındırma hizmeti alıp FID konusunda sorun yaşayacak bir site olabileceğini sanmıyorum... Web sitenizi incelerken ya da analiz ederken en ufak detayı dahi önemseyin. "Aman bu da o kadar önemli değil" cümlesini kurmadan size gelen ya da analizler sonucu aldığınız her öneriyi değerlendirin.

Hosting - Barındırma Önerim

Bu gerçekten bir reklam değil, işini iyi yapana - iyi bir servis sağlayana gereğini yapmamız gerekli diye düşünüyorum. Ek olarak kendi sitem de dahil olmak üzere oldukça hızlı bir barındırma hizmeti aldığım için Netinternet'i sizlerle de paylaşmak istedim. 7/24 destek alabileceğiniz, oldukça hızlı ve kesintisiz bir altyapıya sahip olduklarını da belirtebilirim. Hosting konusunda araştırma yapanlara - kararsız kalanlara Netinternet'i önerebilirim.

Web sitenizi optimize etmek, hızlandırmak için bir çok öneriyi web sitemde bulabilirsiniz... Ancak bu konularda profesyonel destek ihtiyacınız varsa bana ulaşabilirsiniz, birlikte kolayca tüm sorunlarınızı çözebiliriz: İletişim Bilgilerim