İlk Giriş Gecikmesini Optimize Et

Kullanıcı etkileşimlerine nasıl daha hızlı yanıt verilir?

Addy Osmani
Addy Osmani
X GitHub
Houssein Djirdeh

Tıkladım ama hiçbir şey olmadı! Neden bu sayfayla etkileşimde bulunamıyorum? 😢

First Contentful Paint (FCP) ve Largest ContentfulPaint (LCP) metrikleri, içeriğin bir sayfada görsel olarak oluşturulması (boyaması) için geçen süreyi ölçen metriklerdir. Önemli olsa da, boyama süreleri yükleme duyarlılığını veya bir sayfanın kullanıcı etkileşimine ne kadar hızlı yanıt verdiğini yakalamaz.

First Input Delay (FID), bir sitenin etkileşimi ve yanıt verme düzeyiyle ilgili kullanıcının ilk izlenimini belirleyen bir Core Web Vitals metriğidir. Bu metrik, bir kullanıcının bir sayfayla ilk kez etkileşimde bulunduğu andan tarayıcının bu etkileşime gerçekten yanıt verebildiği ana kadar geçen süreyi ölçer. FID bir alan metriğidir ve laboratuvar ortamında simüle edilemez. Yanıt gecikmesini ölçmek için gerçek bir kullanıcı etkileşimi gereklidir.

İyi fid değerleri 2,5 saniye, düşük değerler 4,0 saniyeden uzun ve iyileştirme gerektirenler arasındaki tüm değerler

Laboratuvarda FID'nin tahmin edilmesine yardımcı olmak için Toplam Engelleme Süresi (TBT) seçeneğini öneriyoruz. Bunlar farklı şeyleri ölçer, ancak TBT'deki iyileştirmeler genellikle FID'deki iyileştirmelere karşılık gelir.

Kötü bir FID metriğinin ana nedeni ağır JavaScript yürütme işlemidir. JavaScript'in web sayfanızda ayrıştırma, derleme ve yürütme şeklini optimize etmek FID'yi doğrudan azaltır.

Yoğun JavaScript yürütme

Tarayıcı, ana iş parçacığında JavaScript yürütürken çoğu kullanıcı girişine yanıt veremez. Diğer bir deyişle, tarayıcı ana iş parçacığı meşgulken kullanıcı etkileşimlerine yanıt veremez. Bunu iyileştirmek için:

Uzun Görevleri Bölün

Tek bir sayfada yüklenen JavaScript miktarını azaltmayı zaten denediyseniz uzun süreli kodu daha küçük, eşzamansız görevlere ayırmak yararlı olabilir.

Uzun Görevler, kullanıcıların kullanıcı arayüzünüzü yanıt vermediği JavaScript yürütme süreleridir. Ana iş parçacığını 50 ms veya daha uzun süre engelleyen herhangi bir kod parçası Uzun Görev olarak tanımlanabilir. Uzun Görevler, olası JavaScript şişmesi (kullanıcının şu anda ihtiyaç duyabileceğinden daha fazlasını yükleme ve yürütme) göstergesidir. Uzun görevleri bölmek sitenizdeki giriş gecikmesini azaltabilir.

Chrome Geliştirici Araçları'ndaki Uzun Görevler
Chrome Geliştirici Araçları, Performans Panelindeki Uzun Görevleri görselleştirir

Kod ve Uzun Görevleri bölme gibi en iyi uygulamaları benimsedikçe FID'nin belirgin bir şekilde iyileşmesi gerekir. TBT bir alan metriği olmasa da hem Etkileşime Hazır Olma Süresi'ni (TTI) hem de İGG'yi iyileştirmeye yönelik ilerlemeyi kontrol etmek açısından yararlıdır.

Etkileşime hazırlık için sayfanızı optimize edin

Büyük ölçüde JavaScript'e dayanan web uygulamalarında düşük FID ve TBT puanlarının sık karşılaşılan birkaç nedeni vardır:

Birinci taraf komut dosyası yürütme işlemi, etkileşimin hazırlık durumunu geciktirebilir

  • JavaScript boyutunun şişmesi, ağır yürütme süreleri ve verimsiz parçalama, bir sayfanın kullanıcı girişine yanıt verme zamanını yavaşlatarak FID, TBT ve TTI'yı etkileyebilir. Kod ve özelliklerin aşamalı olarak yüklenmesi bu sürecin yayılmasına ve etkileşimin hazırlıklı olmasına yardımcı olabilir.
  • Sunucu tarafında oluşturulan uygulamalar ekranda piksellere hızlı bir şekilde boyanıyor gibi görünebilir, ancak büyük komut dosyası yürütmeleri tarafından engellenen kullanıcı etkileşimlerine (ör. etkinlik işleyicileri bağlamak için yeniden hidrasyon) dikkat edin. Rota tabanlı kod bölme kullanılıyorsa bu işlem birkaç yüz milisaniye, hatta bazen saniyeler sürebilir. Derleme süresi boyunca daha fazla mantıksal sunucu tarafı kaydırmayı veya statik olarak daha fazla içerik oluşturmayı düşünün.

Aşağıda, bir uygulama için birinci taraf komut dosyası yüklemesi optimize edilmeden önceki ve sonraki TBT puanları verilmiştir. Gerekli olmayan bir bileşen için maliyetli komut dosyası yüklemeyi (ve yürütmeyi) kritik yolun dışına çıkararak kullanıcılar sayfayla çok daha kısa sürede etkileşime girebildi.

Birinci taraf komut dosyası optimize edildikten sonra Lighthouse'da TBT puanında iyileştirme yapıldı.

Veri getirme, etkileşimin hazırlık durumunun birçok yönünü etkileyebilir

  • Bir dizi basamaklı getirme (ör. bileşenler için JavaScript ve veri getirmeler) beklemek etkileşim gecikmesini etkileyebilir. Geçişli veri getirme işlemlerine bağımlılığı en aza indirmeyi hedefleyin.
  • Büyük satır içi veri depoları, HTML ayrıştırma süresini gönderebilir ve hem boyama hem de etkileşim metriklerini etkileyebilir. İstemci tarafında sonradan işlenecek veri miktarını en aza indirmeyi hedefleyin.

Üçüncü taraf komut dosyası yürütme işlemi, etkileşim gecikmesini de geciktirebilir

  • Birçok site, ağı meşgul edecek ve ana iş parçacığını düzenli aralıklarla yanıt vermemesine neden olarak etkileşim gecikmesini etkileyen üçüncü taraf etiketleri ve analizler içerir. Üçüncü taraf kodların isteğe bağlı olarak nasıl yüklendiğini keşfedin (ör. ekranın alt kısmındaki bu reklamları görüntü alanına yaklaştırılana kadar yüklemeyin).
  • Bazı durumlarda, üçüncü taraf komut dosyaları ana iş parçacığında öncelik ve bant genişliği açısından birinci taraf komut dosyalarını önceden ayırabilir ve ayrıca bir sayfanın etkileşime hazır olma süresini geciktirebilir. Önce kullanıcılara en yüksek değeri sunduğunu düşündüğünüz içeriği yüklemeye öncelik verin.

Web çalışanı kullanın

Ana iş parçacığının engellenmesi, giriş gecikmesinin ana nedenlerinden biridir. Web çalışanları, JavaScript'in bir arka plan iş parçacığı üzerinde çalıştırılmasını mümkün kılar. Kullanıcı arayüzü olmayan işlemleri ayrı bir çalışan iş parçacığına taşımak, ana iş parçacığı engelleme süresini kısaltabilir ve sonuç olarak FID'yi iyileştirebilir.

Sitenizde web çalışanlarını kullanmayı kolaylaştırmak için aşağıdaki kitaplıkları kullanabilirsiniz:

  • Comlink: postMessage soyutlayan ve kullanımını kolaylaştıran yardımcı bir kitaplık
  • Workway: Genel amaçlı web çalışanı dışa aktarıcısı
  • Çalışma durumuna getir: Bir modülü web çalışanına taşıyın

JavaScript yürütme süresini azaltın

Sayfanızdaki JavaScript miktarını sınırlandırmak, tarayıcının JavaScript kodunu yürütmek için harcaması gereken süreyi kısaltır. Bu, tarayıcının tüm kullanıcı etkileşimlerine yanıt verme hızını hızlandırır.

Sayfanızda yürütülen JavaScript miktarını azaltmak için:

  • Kullanılmayan JavaScript'i erteleyin
  • Kullanılmayan polyfill'leri en aza indirin

Kullanılmayan JavaScript'i erteleyin

Varsayılan olarak tüm JavaScript kodları oluşturmayı engeller. Tarayıcı, harici bir JavaScript dosyasına bağlantı veren bir komut dosyası etiketiyle karşılaştığında, yaptığı işlemi duraklatarak bu JavaScript'i indirmeli, ayrıştırmalı, derlemeli ve yürütmelidir. Bu nedenle, yalnızca sayfa için gerekli olan veya kullanıcı girişine karşılık gelen kodu yüklemeniz gerekir.

Chrome Geliştirici Araçları'ndaki Kapsam sekmesi, web sayfanızda ne kadar JavaScript'in kullanılmadığını gösterebilir.

Kapsam sekmesi.

Kullanılmayan JavaScript kodlarından tasarruf etmek için:

  • Kodu kullanarak paketi birden fazla parçaya bölebilirsiniz
  • Üçüncü taraf komut dosyaları da dahil olmak üzere kritik olmayan tüm JavaScript'leri, async veya defer kullanarak erteleyin.

Kod bölme, tek bir büyük JavaScript paketini koşullu olarak yüklenebilen (geç yükleme olarak da bilinir) daha küçük parçalara bölme kavramıdır. Yeni tarayıcıların çoğu, istek üzerine modül getirmeye olanak tanıyan dinamik içe aktarma söz dizimini destekler:

import('module.js').then((module) => {
  // Do something with the module.
});

Belirli kullanıcı etkileşimlerinde (rota değiştirme veya modal görüntüleme gibi) JavaScript'in dinamik olarak içe aktarılması, ilk sayfa yüklemesinde kullanılmayan kodun yalnızca gerektiğinde getirilmesini sağlar.

Genel tarayıcı desteği dışında, dinamik içe aktarma söz dizimi birçok farklı derleme sisteminde kullanılabilir.

  • Modül paketleyici olarak webpack, Rollup veya Parcel'i kullanıyorsanız dinamik içe aktarma desteğinden yararlanın.
  • React, Angular ve Vue gibi istemci tarafı çerçeveler, bileşen düzeyinde geç yüklemeyi kolaylaştıran soyutlamalar sağlar.

Kod bölmeden ayrı olarak, kritik yol veya ekranın üst kısmındaki içerikler için gerekli olmayan komut dosyaları için her zaman eşzamansız veya ertele kullanın.

<script defer src="…"></script>
<script async src="…"></script>

Uygulanmaması için belirli bir neden olmadığı sürece tüm üçüncü taraf komut dosyaları varsayılan olarak defer veya async ile yüklenmelidir.

Kullanılmayan polyfill'leri en aza indirin

Kodunuzu modern JavaScript söz dizimini kullanarak yazar ve modern tarayıcılar API'lerine referans verirseniz eski tarayıcılarda çalışması için kodu aktarmanız ve çoklu dolguları eklemeniz gerekir.

Çoklu dolguların ve aktarılan kodların sitenize eklenmesiyle ilgili temel performans sorunlarından biri, yeni tarayıcıların ihtiyaç duymadıkları halde bunları indirmek zorunda olmamalarıdır. Uygulamanızın JavaScript boyutunu küçültmek için kullanılmayan polyfill'leri mümkün olduğunca en aza indirin ve kullanımlarını ihtiyaç duyulan ortamlarla sınırlandırın.

Sitenizde çoklu dolgu kullanımını optimize etmek için:

  • Transpiler olarak Babel kullanıyorsanız yalnızca hedeflemeyi planladığınız tarayıcılar için gereken çoklu dolguları dahil etmek üzere @babel/preset-env kullanın. Babel 7.9'da, gereksiz çoklu dolguları daha da azaltmak için bugfixes seçeneğini etkinleştirin

  • İki ayrı paket sunmak için modül/modülsüz kalıbını kullanın (@babel/preset-env, bunu target.esmodules üzerinden de destekler)

    <script type="module" src="modern.js"></script>
<script nomodule src="legacy.js" defer></script>

    Babel ile derlenen yeni ECMAScript özelliklerinin çoğu, JavaScript modüllerini destekleyen ortamlarda zaten desteklenmektedir. Böylece bunu yaparak, gerçekten ihtiyaç duyan tarayıcılar için yalnızca aktarılan kodun kullanıldığından emin olma sürecini basitleştirirsiniz.

Geliştirici araçları

FID'yi ölçmek ve hata ayıklamak için çeşitli araçlar mevcuttur:

Yorumları için Philip Walton, Kayce Basques, Ilya Grigorik ve Annie Sullivan'a teşekkür ediyoruz.