Tıkladım ama hiçbir şey olmadı! Neden bu sayfayla etkileşim kuramıyorum? 😢
First Contentful Paint (FCP) ve En Büyük Contentful Paint (LCP), içeriğin bir sayfada görsel olarak oluşturulması (boyaması) için geçen süreyi ölçen metriklerdir. Önemli olmasına rağmen, boyama süreleri yakalanmaz yük duyarlılığı: veya bir sayfanın kullanıcı etkileşimine ne kadar hızlı yanıt verdiği.
İlk Giriş Gecikmesi (FID), bir kullanıcının bir sitenin etkileşimi ve yanıt verebilirliği hakkındaki ilk izlenimini yakalayan Önemli Web Verileri metriğidir. Bir kullanıcının bir sayfayla ilk 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. Gerçek bir kullanıcı etkileşimi Tepki gecikmesini ölçmek için gereklidir.
Laboratuvarda FID’yi tahmin etmeye yardımcı olması için Toplam Engelleme Süresini (TBT) öneririz. Farklı şeyleri ölçerler, ancak TBT’deki gelişmeler genellikle FID’deki gelişmelere karşılık gelir.
Zayıf bir FID’nin ana nedeni, ağır JavaScript yürütme. JavaScript’in web sayfanızda ayrıştırma, derleme ve çalıştırma şeklini optimize etmek doğrudan FID’yi azaltacaktır.
Ağır 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. Başka bir deyişle, ana ileti dizisi meşgulken tarayıcı kullanıcı etkileşimlerine yanıt veremez. Bunu geliştirmek için:
Uzun Görevleri Parçalayın #
Tek bir sayfada yüklenen JavaScript miktarını azaltmayı zaten denediyseniz, uzun süre çalışan kodu parçalara ayırmak yararlı olabilir. daha küçük, eşzamansız görevler.
Uzun Görevler Kullanıcıların kullanıcı arayüzünüzü yanıt vermiyor bulabilecekleri JavaScript yürütme dönemleridir. Ana iş parçacığını 50 ms veya daha uzun süre bloke eden herhangi bir kod parçası, Uzun Görev olarak nitelendirilebilir. Uzun Görevler, potansiyel JavaScript şişkinliğinin bir işaretidir (bir kullanıcının şu anda ihtiyaç duyabileceğinden fazlasını yüklemek ve yürütmek). Uzun görevleri bölmek, sitenizdeki giriş gecikmesini azaltabilir.
Kod bölme ve Uzun Görevlerinizi bölme gibi en iyi uygulamaları benimserken, FID gözle görülür şekilde gelişmelidir. TBT bir saha ölçüsü olmasa da, hem Etkileşim Süresini (TTI) hem de FID’yi nihai olarak iyileştirmeye yönelik ilerlemeyi kontrol etmek için kullanışlıdır.
Etkileşim hazırlığı 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 birkaç yaygın nedeni vardır:
Birinci taraf komut dosyası yürütme, etkileşim hazırlığını geciktirebilir #
- JavaScript boyutu şişkinliği, ağır yürütme süreleri ve verimsiz parçalama, bir sayfanın kullanıcı girişine ne kadar sürede yanıt verebileceğini yavaşlatabilir ve FID, TBT ve TTI’yi etkileyebilir. Kodun ve özelliklerin aşamalı olarak yüklenmesi, bu çalışmayı yaygınlaştırmaya ve etkileşime hazır olma durumunu iyileştirmeye yardımcı olabilir.
- Sunucu tarafında oluşturulan uygulamalar, ekranda pikselleri hızlı bir şekilde boyanıyor gibi görünebilir, ancak kullanıcı etkileşimlerinin büyük komut dosyası çalıştırmaları tarafından engellenmesine dikkat edin (ör. olay dinleyicilerini bağlamak için yeniden hidrasyon). Rota tabanlı kod bölme kullanılıyorsa, bu işlem birkaç yüz milisaniye, hatta bazen saniyeler alabilir. Oluşturma 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üklemeyi optimize etmeden önceki ve sonraki TBT puanları verilmiştir. Gerekli olmayan bir bileşen için maliyetli komut dosyası yüklemeyi (ve yürütmeyi) kritik yoldan çıkararak, kullanıcılar sayfayla çok daha erken etkileşim kurabildi.
Veri getirme, etkileşime hazır olmanın birçok yönünü etkileyebilir #
- Art arda gelen getirmelerin (ör. JavaScript ve bileşenler için veri getirme) şelalesini beklemek, etkileşim gecikmesini etkileyebilir. Basamaklı veri getirme işlemlerine olan güveni en aza indirmeyi hedefleyin.
- Büyük satır içi veri depoları, HTML ayrıştırma süresini uzatabilir ve hem boyama hem de etkileşim ölçümlerini etkileyebilir. İstemci tarafında sonradan işlenmesi gereken veri miktarını en aza indirmeyi hedefleyin.
Üçüncü taraf komut dosyası yürütme, etkileşim gecikmesini de geciktirebilir #
- Birçok site, ağı meşgul tutabilen ve ana ileti dizisini periyodik olarak yanıt vermemesine neden olarak etkileşim gecikmesini etkileyebilen üçüncü taraf etiketler ve analizler içerir. Üçüncü taraf kodunun isteğe bağlı olarak yüklenmesini keşfedin (örneğin, ekranın alt kısmındaki reklamları, kaydırılarak görüntü alanına yaklaşana kadar yüklemeyin).
- Bazı durumlarda, üçüncü taraf komut dosyaları, ana iş parçacığındaki öncelik ve bant genişliği açısından birinci taraf komut dosyalarını önceden kullanabilir ve ayrıca bir sayfanın etkileşime hazır olma süresini geciktirebilir. Öncelik olarak kullanıcılara en büyük değeri sunduğuna inandığınız şeyi yüklemeye çalışın.
Bir web çalışanı kullanın #
Engellenen bir ana iş parçacığı, giriş gecikmesinin ana nedenlerinden biridir. Web çalışanları JavaScript’i bir arka plan iş parçacığında çalıştırmayı mümkün kılar. UI 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.
Web çalışanlarını sitenizde kullanmayı kolaylaştırmak için aşağıdaki kitaplıkları kullanmayı düşünün:
- İletişim: Özetleyen bir yardımcı kitaplık
postMessageve kullanımı kolaylaştırır - çalışma yolu: Genel amaçlı bir web çalışanı ihracatçısı
- işçileştirmek: Bir modülü bir 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 JavaScript kodunu yürütmek için harcaması gereken süreyi azaltır. Bu, tarayıcının herhangi bir kullanıcı etkileşimine ne kadar hızlı yanıt vermeye başlayabileceğini hızlandırır.
Sayfanızda yürütülen JavaScript miktarını azaltmak için:
- Kullanılmayan JavaScript’i ertele
- Kullanılmayan çoklu dolguları en aza indirin
Kullanılmayan JavaScript’i ertele #
Varsayılan olarak, tüm JavaScript oluşturmayı engeller. Tarayıcı, harici bir JavaScript dosyasına bağlanan bir komut dosyası etiketiyle karşılaştığında, yaptığı şeyi duraklatmalı ve 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 yanıt veren kodu yüklemelisiniz.
bu kapsam Chrome DevTools sekmesi, web sayfanızda ne kadar JavaScript kullanılmadığını size söyleyebilir.
Kullanılmayan JavaScript’i azaltmak için:
- Paketinizi birden çok parçaya kodlayın
- Üçüncü taraf komut dosyaları da dahil olmak üzere kritik olmayan tüm JavaScript’leri şunu kullanarak erteleyin:
asyncveyadefer
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. Çoğu yeni tarayıcı, dinamik içe aktarma sözdizimini desteklertalep üzerine modül getirilmesine izin verir:
import('module.js').then((module) => {
// Do something with the module.
});
JavaScript’i belirli kullanıcı etkileşimlerinde (bir rotayı değiştirmek veya bir modeli görüntülemek gibi) dinamik olarak içe aktarmak, ilk sayfa yüklemesi için kullanılmayan kodun yalnızca gerektiğinde alınmasını sağlar.
Genel tarayıcı desteğinin yanı sıra, dinamik içe aktarma sözdizimi birçok farklı yapı sisteminde kullanılabilir.
- Eğer kullanırsan web paketi, Toplamaveya Parsel bir modül paketleyici olarak, dinamik içe aktarma desteğinden yararlanın.
- İstemci tarafı çerçeveler, örneğin Tepki, AçısalVe Vue bileşen düzeyinde tembel yüklemeyi kolaylaştırmak için soyutlamalar sağlar.
Kod bölme dışında, her zaman kullanın zaman uyumsuz veya erteleme kritik yol veya ekranın üst kısmındaki içerik için gerekli olmayan komut dosyaları için.
script defer src="…"></script>
script async src="…"></script>
Özel bir neden olmadıkça, tüm üçüncü taraf komut dosyaları şu ikisinden biri ile yüklenmelidir: defer veya async varsayılan olarak.
Kullanılmayan çoklu dolguları en aza indirin #
Kodunuzu modern JavaScript sözdizimini kullanarak yazarsanız ve modern tarayıcı API’lerine başvurursanız, eski tarayıcılarda çalışması için kodunuzu aktarmanız ve çoklu doldurmalar eklemeniz gerekir.
Sitenize polyfills ve aktarılmış kod eklemenin ana performans endişelerinden biri, yeni tarayıcıların ihtiyaç duymadıkları takdirde onu indirmek zorunda olmamasıdır. Uygulamanızın JavaScript boyutunu azaltmak için, kullanılmayan çoklu doldurmaları mümkün olduğunca en aza indirin ve kullanımlarını ihtiyaç duydukları ortamlarda kısıtlayın.
Sitenizdeki polyfill kullanımını optimize etmek için:
-
Eğer kullanırsan Babil aktarıcı olarak kullanın
@babel/preset-envyalnızca hedeflemeyi planladığınız tarayıcılar için gereken çoklu doldurmaları dahil etmek için. Babel 7.9 için etkinleştirinbugfixesgereksiz çoklu dolguları daha da azaltmak için seçenek -
İki ayrı paket göndermek için modül/nomodül modelini kullanın (
@babel/preset-envaracılığıyla da bunu desteklertarget.esmodules)script type="module" src="modern.js"></script>
script nomodule src="legacy.js" defer></script>Babel ile derlenen birçok yeni ECMAScript özelliği, JavaScript modüllerini destekleyen ortamlarda zaten desteklenmektedir. Dolayısıyla 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.
FID’yi ölçmek ve hata ayıklamak için bir dizi araç mevcuttur:
İncelemeleri için Philip Walton, Kayce Basques, Ilya Grigorik ve Annie Sullivan’a teşekkürler.