İlk Giriş Gecikmesini Optimize Et

Kullanıcı etkileşimlerine daha hızlı yanıt verme

Addy Osmani

Houssein Djirdeh

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

First Contentful Paint (FCP) ve Largest Contentful Paint (LCP), içeriklerin tamamlanması için gereken süreyi ölçen metriktir. bir sayfada görsel olarak oluşturabilir (boyayabilir). Önemli olsa da boyama süreleri yüklenmeyi duyarlılık: veya bir sayfanın kullanıcı etkileşimine ne kadar hızlı yanıt verdiği.

First Giriş Gecikmesi (FID), kullanıcının bir sitenin etkileşim ve duyarlılığına ilişkin ilk izlenim. Bu, bir kullanıcının tarayıcının ona gerçekten yanıt verebildiği sırada bir sayfayla ilk kez etkileşime girdiğini bahsedeceğim. FID bir alan metriğidir ve simüle edilir. Kullanıcı etkileşiminin ölçülebilmesi için gerçek kullanıcı etkileşimi gecikme olabilir.

Laboratuvar'da FID'yi tahmin etmek için Toplam Engelleme Süresi (TBT) önerisinde bulunun. Farklı şeyleri ölçerler ama TBT'deki iyileşmeler genellikle FID'deki iyileştirmelere karşılık gelir.

FID'nin yetersiz olmasının ana nedeni yoğun JavaScript yürütmesidir. JavaScript'in ayrıştırma, derlemesi ve web sayfanızda yürütülmesi FID'yi doğrudan azaltır.

Ağır JavaScript yürütmesi

Tarayıcı, ana iş parçacığında JavaScript'i çalıştırırken çoğu kullanıcı girişine yanıt veremez. Başka bir deyişle, tarayıcı, ana ileti dizisi meşgulken kullanıcı etkileşimlerine yanıt veremez. Bunu iyileştirmek için:

• Uzun görevleri bölme
• Sayfanızı etkileşime hazır olma durumu için optimize edin
• Web çalışanı kullanma
• JavaScript yürütme süresini azaltın

Uzun Görevleri Ayırma

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

Uzun Görevler kullanıcıların belirli bir süre içinde kullanıcı arayüzünüzün yanıt vermediğini görebilirsiniz. Ana iş parçacığını 50 ms veya daha uzun süre engelleyen herhangi bir kod parçası ve Uzun Görev olarak nitelendirilir. Uzun görevler, (Şu anda bir kullanıcının ihtiyaç duyabileceğinden daha fazla yükleme ve yürütme işlemi) potansiyel JavaScript fazlalığının oluşmasına neden olabilir. Uzun görevleri ayırmak, sitenizdeki giriş gecikmesini azaltabilir.

Kod bölme ve verilerinizi ayırma gibi en iyi uygulamaları benimsedikçe FID belirgin şekilde iyileşmelidir. Uzun Görevler. TBT bir alan metriği olmasa da, nihai hedefinize doğru ilerlemeyi hem de etkileşim süresini (TTI) ve İGG'yi iyileştiriyor.

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

FID ve TBT puanlarının düşük olmasının birçok yaygın nedeni vardır. JavaScript:

Birinci taraf komut dosyası yürütme, etkileşimin hazır olma durumunu geciktirebilir.

• JavaScript boyutu şişmesi, yoğun yürütme süreleri ve verimsiz parçalama, uygulamanızın sayfası kullanıcı girişine yanıt verebilir ve FID, TBT ve TTI'yı etkileyebilir. Sürekli kod yükleme ve özellikler, bu antrenmanın yaygınlaştırılmasına ve etkileşime hazır olma durumunun iyileştirilmesine yardımcı olabilir.
• Sunucu tarafında oluşturulan uygulamalar, ekranda pikseller boyamış gibi görünebilir ancak büyük komut dosyası yürütmeleri (ör. yeniden kullanılabilirlik sağlar. Bu işlem birkaç yüz milisaniye sürebilir. hatta saniyeler bile bulabilir. Daha fazla mantık değiştirmeyi düşünün veya derleme sırasında statik olarak daha fazla içerik oluşturma.

Aşağıda, bir bir uygulamadır. Gerekli olmayan bir bileşenin maliyetli komut dosyası yüklemesini (ve yürütmesini) kritik yolunu kullanarak, kullanıcılar sayfayla çok daha erken etkileşimde bulunabildi.

Veri getirme, etkileşime hazır olma durumunun birçok yönünü etkileyebilir

• Basamaklı getirmelerden oluşan bir şelale (ör. JavaScript ve bileşenler için veri getirmeler) beklemek, etkileşim gecikmesini etkiler. 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 uzatarak hem boyama hem de etkileşimi etkileyebilir. kullanabilirsiniz. İstemci tarafında sonradan işlenmesi gereken veri miktarını en aza indirmeyi hedefleyin.

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

• Birçok site, ağı meşgul tutabilecek üçüncü taraf etiketleri ve analizler içerir. ana iş parçacığının düzenli aralıklarla yanıt vermemesine neden olarak etkileşim gecikmesini etkileyebilir. Keşfedin üçüncü taraf kodunun isteğe bağlı yüklenmesi (ör. ekranın alt kısmındaki bu reklamları görüntü alanına daha yakın kaydırılırlar).
• Bazı durumlarda, üçüncü taraf komut dosyaları öncelik ve başarı bakımından birinci tarafları önceden ana iş parçacığındaki bant genişliğini azaltır. Bu da sayfanın etkileşime hazır hale gelmesini geciktirir. Şunları dene: Önce kullanıcılara en yüksek değeri sunduğuna inandığınız şeyi yüklemeye öncelik verin.

Web çalışanı kullanma

Ana iş parçacığının engellenmesi, giriş gecikmesinin ana nedenlerinden biridir. Web çalışan JavaScript'in çalıştırılmasını ve bir mesaj dizisinde yer alır. Kullanıcı arayüzü olmayan işlemleri ayrı bir çalışan iş parçacığına taşımak ana iş parçacıklarını azaltabilir iş parçacığı engelleme süresini iyileştirir ve sonuç olarak FID'i iyileştirir.

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

• Comlink: Soyutlayan bir yardımcı kitaplık postMessage ve kullanımı kolaylaştırır
• İş yolu: Genel amaçlı web çalışanı dışa aktarıcısı
• Workerize: 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ırlamak, tarayıcının tarayıcınız için gereken süreyi kısaltır harcaması. Bu, tarayıcının herhangi bir iletiye yanıt vermeye kullanıcı etkileşimleri.

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şturma işlemini engeller. Tarayıcı, harici bir JavaScript dosyasıysa, yaptığı işi duraklatması, indirmesi, ayrıştırması, derlemesi ve yürütülmesi gerekir görebilirsiniz. Bu nedenle, yalnızca sayfa veya kampanya için gerekli olan kodu yanıt veriyor.

Chrome'daki Kapsam sekmesi Geliştirici Araçları, web sayfanızda ne kadar JavaScript kullanılmadığını söyleyebilir.

Kullanılmayan JavaScript kodları azaltmak için:

• Paketinizi birden fazla parçaya bölünerek kodlayın
• async veya defer kullanarak üçüncü taraf komut dosyaları da dahil olmak üzere kritik olmayan tüm JavaScript'leri erteleyin

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

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

Belirli kullanıcı etkileşimlerinde JavaScript'i dinamik olarak içe aktarma (ör. bir yolu değiştirme veya bir kalıcı öğeyi görürsünüz), ilk sayfa yüklemesinde kullanılmayan kodun yalnızca gerekir.

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

• Webpack kullanıyorsanız Birleştirme paket paketleyici olarak Parcel'i kullanıyorsanız dinamik içe aktarma destekleri vardır.
• İstemci tarafı çerçeveler (ör. Tepki, Angular ve Vue sağlayın soyutlamaları kullanarak bileşen düzeyinde geç yüklemeyi kolaylaştırır.

Kod bölmenin dışında, daima eş zamansız veya gerekli olmayan komut dosyaları için ekranın üst kısmındaki içerikleri ele alacağız.

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

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

Kullanılmayan polyfill'leri en aza indirin

Kodunuzu modern JavaScript söz dizimi kullanarak yazar ve modern tarayıcı API'lerine başvurursanız eski tarayıcılarda çalışması için dönüştürmesi ve çoklu dolguları içermesi gerekir.

Polyfill'leri ve transkriptli kodları sitenize eklemeyle ilgili temel performans endişelerinden biri, yeni tarayıcıların ihtiyacı yoksa indirmesi gerekmez. JavaScript'i kısaltmak için boyutunu değiştirmek gibi, kullanılmayan polyfill'leri mümkün olduğunca en aza indirin ve kullanımlarını ortamlarda yürütülür.

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

• Babel'i aktarıcı olarak kullanıyorsanız Yalnızca çoklu dolguları dahil etmek için @babel/preset-env hedeflemeyi planladığınız tarayıcılar için gereklidir. Babel 7.9 için Daha fazla kısaltmak için bugfixes seçeneği gereksiz polyfill'lerde

• İki ayrı paket yayınlamak için modül/modülsüz kalıbını kullanın (@babel/preset-env ayrıca bunu target.esmodules aracılığıyla destekler)

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

  Babel ile derlenen birçok yeni ECMAScript özelliği, ortamlarda zaten desteklenmektedir JavaScript modüllerini destekleyen bir kodla çalışır. Bu sayede, ekip arkadaşlarınızın ve uzmanların gerçekten ihtiyaç duyan tarayıcılar için yalnızca aktarılan kod kullanılır.

Geliştirici araçları

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

• Lighthouse 6.0 şunları içermez: bir alan metriği olduğundan FID için destek sunar. Ancak, Total Engelleme Süre (TBT), proxy olarak kullanılabilir. TBT'yi iyileştiren optimizasyonlar alandaki FID'yi de iyileştiriyor.

  

• Chrome Kullanıcı Deneyimi Raporu kaynak düzeyinde toplanan gerçek dünya FID değerleri sağlar

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