Toplam Engelleme Süresi Tam Olarak Nedir?

Mayıs 2020'de gerçekleşen Google PageSpeed'in en son güncellemesinde, kullanıcılara Kümülatif Düzen Kayması, En Büyük İçerikli Boyama ve Toplam Engelleme Süresi gibi birkaç yeni metrik tanıtıldı. Bu yeni metrikler, Google kullanıcı deneyimi (UX) odaklı bir duruşa geçmeye başladığında tanıtıldı.

Bu blog yazısında toplam engelleme süresinin ne olduğunu, nasıl puanlandığını, web siteniz için neden anlaşılması gereken önemli bir ölçü olduğunu ve nasıl iyileştirileceğini tanıtacağız.

Toplam engelleme süresi nedir?

Toplam engelleme süresi, Google Pagespeed içgörülerinde tanımlanan altı ana ölçümden biridir. Sayfadaki tüm kullanıcı tarafından manipüle edilebilir öğelerin girilmesinin engellendiği toplam süreyi ölçer. TBT, First Contentful Paint ve Time to Interactive arasındaki tüm uzun görevlerin engelleme kısmı eklenerek hesaplanır.

Toplam engelleme süresini daha iyi anlamak için Uzun Görevler tanımlamamız gerekiyor.

Uzun Görevler nelerdir?

Uzun görevler, yükleme sırasında sunucunuzun işlemcisinin ana iş parçacığını kullanan JavaScript Kodundan kaynaklanır. Bu kod, kullanıcının erişmesi için görsel olarak hazır görünse bile kullanıcı arayüzünün donmasına neden olur. Bir örnek, yüklenen ancak tıklanamayan bir düğme olabilir.

Kullanıcı arayüzünüz donduğunda, tıklamalar, dokunmalar, sürüklemeler veya diğer herhangi bir kullanıcı girişi genellikle engellenir çünkü olay/tıklama işleyicileri henüz öğeye eklenmemiştir (bu, uzun bir görevin engelleme kısmı olarak bilinir). Basit bir açıklamaya ihtiyacınız varsa: Yüklediğiniz öğenin görsel yönü görünüyor, ancak onu çalıştıran kod henüz yüklenmedi.

Uzun görevlerin "uzun" kısmı, tamamlanması 50 milisaniyeden uzun süren herhangi bir görev olarak tanımlanır. 50 milisaniyenin temel işaret olmasının nedeni, RAIL modeliyle uyumlu olmasıdır. RAIL modeli hakkında daha fazla bilgiyi burada bulabilirsiniz, ancak esasen iyi bir kullanıcı deneyimi sağlamak için bir dizi performans yönergesidir.

Demiryolu modelinin ana çıkarımı, web sitenizin daha hızlı yüklenmesi veya Google'ın sizi cezalandıracağı ve ziyaretçilerinizin mutsuz olacağı (veya siteyi tamamen terk edeceği) olmasıdır.

Bu, Google'ın kullanıcı deneyimine yönelik son dönüşüyle ​​uyumludur.

TLDR; Toplam engelleme süresi, uzun görevlerin tüm bireysel engelleme sürelerinin toplamıdır.

Toplam Engelleme Süresi Nasıl Puanlanır?

Toplam engelleme süresi için yönergeler oldukça basittir. Toplam engelleme süreniz 300 milisaniyenin altına düşerse, gitmeye hazırsınız. 300 ila 600 milisaniye arasındaysa, iyileştirmeniz gerekir, 600 milisaniyenin üzerindeyse hemen ele almanız gerekir.

Toplam engelleme süresi, Sayfa Hızı Performansı puanınızın %25'ini oluşturur, bu nedenle iyi bir puan için bunu doğru yapmak çok önemlidir.

Toplam engelleme süresi için gerçek puanı hesaplamak için Google, TBT'nin milisaniye rakamını alacak ve dizine eklediği ilk 10000 web sitesiyle karşılaştıracaktır. İlginç bulduğumuz bir şey, en iyi 10.000 web sitesinin bu dizininde 404 sayfanın yer alması ve muhtemelen medyan rakamı etkilemesiydi. 404 sayfanın yüklenmesi için çok sınırlı JavaScript olduğundan, tam özellikli bir ana sayfaya kıyasla 404 sayfanın toplam engelleme süresi çok daha düşük olacaktır.

En iyi 10.000 web sitesiyle karşılaştırıldığınız için oyununuzu hızlandırmanız ve 300 milisaniyenin altında puan aldığınızdan emin olmanız gerekir.

Neden umursayayım?

Tanımlarımıza geri dönerseniz, engelleme süresi yalnızca yüklenmesi 50 milisaniye veya daha fazla sürerse devreye girer. Web sitelerinin yüklenme şekli nedeniyle, engelleme süresi herhangi bir web sitesinde bir özelliktir. Yalnızca erişim zamanını almaya ve kullanıcıların web sitesindeki içeriğe erişmesini engellemeye başlarsa sorun haline gelir.

Bir web sitesine girdiğinizi ve düğmelere tıklamadan önce birkaç saniye beklemeniz gerektiğini veya sayfayı aşağı kaydırdığınızı hayal edin. Böyle bir durumda tek bir web sitesinde birden fazla sayfaya göz atmam gerekirse, kullanıcı deneyiminden çıldırırdım. Bu yeni metrik, Google'ın web sitelerinde kullanıcı deneyiminin bu yönünü iyileştirme girişimidir.

Bu metriği ele almak, kullanıcılarınızın web sitenizde daha iyi bir deneyim yaşamasına neden olmakla kalmaz, aynı zamanda arama motoru sıralamanızı da muhtemelen etkiler. Google, Mayıs ayında, önümüzdeki altı ay içinde, Google arama motoru algoritmalarında (İyi içerik ve hızlı SEO'nun mevcut sütunlarının yanı sıra) web vitals'ı (toplam engelleme süresi web vitals'ın bir yönüdür) kullanmaya geçeceklerini duyurdu. web siteleri). Bunun anlamı, bu bireysel metriğin yakın gelecekte algoritmanın bazı yönlerini doğrudan etkilemesi için iyi bir şans olmasıdır.

Yavaş Bir Toplam Engelleme Süresini Nasıl Ele Alabilirim?

Toplam engelleme süresi doğrudan JavaScript'ten kaynaklanır, bu nedenle JavaScript'inizi site genelinde mümkün olan her şekilde optimize etmelisiniz.

Web sitemizde JavaScript ve kod için birkaç optimizasyon kılavuzumuz var, ancak bunu çözmek için yapabileceğiniz başlıca şeyler aşağıdaki gibidir.

Genel Optimizasyon (Önce Bunu Yapın)

Kullanılmayan JavaScript'i kaldırın.

Kullanılmayan JavaScript'i kaldırmak hiç akıllıca değil. Kullanılmayan komut dosyalarını yüklüyorsanız, anlamsızca veri yüklüyorsunuz ve sayfa yükleme hızınızı şişiriyorsunuz. Bunun bir anlamı yok ve JavaScript'i kaldırmak web sitenizin hızını ciddi şekilde etkileyecektir. WordPress'te bunu yapmanıza yardımcı olabilecek birkaç araç vardır. Favori aracımız, tek tek sayfalarda tek tek komut dosyalarını etkinleştirmenizi ve devre dışı bırakmanızı sağlayan varlık temizleme olarak adlandırılır.

Size tek bir sayfada çağrılan tüm CSS ve JavaScript dosyalarını gösterir. Örneğin, ana sayfanıza eklentiler, temalar ve daha fazlası için birden fazla CSS ve JavaScript dosyası yüklüyor olabilirsiniz. Bu sayfada bir JavaScript dosyası kullanmadığınızı biliyorsanız, basitçe “unload” adlı bir anahtarı çevirerek onu kolayca kaldırabilirsiniz. komut dosyanızın kaldırılması, kullanılmadığı bir sayfaya yüklenmemesini sağlar. Bunu, tüm CSS'ler için tek tek sayfalarda da yapabilirsiniz.

Ayrıca, kullanılmadıkları sayfalardaki eklentileri de devre dışı bırakıyoruz. Asit temizleme ile, genellikle site genelinde eklentileri devre dışı bırakır ve ardından kullanıldıkları tek tek sayfalar için etkinleştiririz. Örneğin, iletişim sayfamızda yalnızca yerçekimi formları kullanıyoruz, bu nedenle yalnızca yerçekimi formlarını oluşturulan iletişim sayfasına yükleyeceğiz, ana sayfamızda yerçekimi formlarıyla birlikte gelen ilişkili CSS ve JavaScript'i yüklemenin bir anlamı yok, çünkü form yok orada.

Üçüncü taraf JavaScript de, Google PageSpeed ​​analizlerindeki toplam engelleme süresi metriğindeki düşük puanın bir başka önemli nedeni olabilir. Üçüncü taraf JavaScript ile yalnızca temel komut dosyalarını yüklemek istersiniz. Komut dosyasını web sitenizden kaldırmayı veya yerel olarak sunmayı seçebilirseniz, bu en iyi bahistir.

Web siteniz muhtemelen birden çok kaynaktan üçüncü taraf JavaScript yüklüyor. Google analytics kullanıyorsanız, üçüncü taraf JavaScript'i yüklüyorsunuz, şerit veya PayPal ödeme işleme kullanıyorsanız, üçüncü taraf JavaScript'i yüklüyorsunuz ve liste uzayıp gidiyor.

Bu komut dosyalarını kaldırmak genellikle pratik değildir veya yapılması imkansızdır, bu nedenle üçüncü taraf JavaScript'i verimli bir şekilde yüklemek en iyi çözümdür.

Komut dosyanızın sayfa oluşturulmadan önce çalışması gerekmedikçe, onu her zaman zaman uyumsuz olarak yüklemelisiniz (ayrıca erteleyebilirsiniz). Bunu yapmanın yolu, komut dosyası öğesine zaman uyumsuz veya erteleme etiketleri eklemektir. Ancak, sıradan bir WordPress kullanıcısıysanız, temalarınıza veya eklentilerinize sabit kodlanmış olabileceğinden bu zor olabilir. Bu, bir eklenti veya temadaki her güncellemenin üzerine yazacağından, kod düzeyinde değiştirmenin bir anlamı olmadığı anlamına gelir.

En sevdiğimiz performans optimizasyon aracımız olan Varlık Temizleme tam da bu noktada devreye giriyor. Bağımsız JavaScript dosyaları için, varlık temizlemenin pro sürümüyle, eşzamansız olarak yüklemeyi veya tek bir onay kutusuyla ertelemeyi seçebilirsiniz.

Üçüncü taraf JavaScript'i verimli bir şekilde yüklemek, hız optimizasyonunun "oluşturmayı engelleyen kaynakları ortadan kaldır" kategorisine girer. Daha fazla bilgi edinmek isterseniz, burada oluşturma engelleme kaynaklarının nasıl ortadan kaldırılacağına dair eksiksiz bir blog yazımız var: https://isotropik.co/how-to-eliminate-render-blocking-resources-for-wordpress-websites/ .

JavaScript'i bir bütün olarak optimize etmek, toplam engelleme süresi metriğinizi de doğrudan etkiler. JavaScript optimizasyonu, tüm JavaScript dosyalarının birleştirilmesinden ve küçültülmesinden ve ardından bunları eşzamansız olarak yüklemekten veya sayfanızda nasıl kullanıldıklarına bağlı olarak ertelemekten oluşur. WordPress ile bunu yapmanıza izin verecek bir dizi otomatik araç vardır. En sevdiğimiz, önbelleğe alma ve performans eklentisi olan WordPress roketi.

Render Engelleme Kaynaklarını Nasıl Ortadan Kaldırırız makalemizden alıntılanan eklenti hakkında söyleyeceklerimiz:

WP Rocket, mevcut favori WordPress hız eklentimizdir. Ücretlidir, ancak son derece güçlüdür – fiyat-değer oranı listelerin dışındadır. Çok şey yapmanıza izin verecek, ancak bu gönderiye özel olarak, Javascript'i ertelenmiş olarak yükleyebilir, bazı dosyaları bu optimizasyondan hariç tutabilir (hemen gerekli olanlar) ve ertelemeyi otomatik olarak deneyen “güvenli modda” çalıştırabilirsiniz. önemli komut dosyalarını ertelemeden hariç tutun. CSS tarafında, sitenize hangi CSS'nin eşzamansız olarak yüklenmesi gerektiğini otomatik olarak belirleyebilir ve bu yükleme stilini (tümü bir arka plan işlemi olarak) uygulayabilirsiniz. Bu eklentiyi seviyoruz çünkü hem geliştiriciler hem de daha az teknik web sitesi sahipleri için süper güçlü (ve kolay ).

Diyelim ki bu optimizasyon noktalarının üçünü de ele aldınız ve toplam engelleme sürenizde hala düşük puanlar alıyorsunuz.

Toplam engelleme süresini oluşturan bireysel öğelere geri dönersek, bu ölçümle yalnızca uzun görevler ilişkilendirilir. Sinir bozucu uzun görevleri/komut dosyalarını ele almanın yolu, onları tanımlamak ve parçalamak veya tamamen kaldırmaktır.

Web sitenizin standart bir optimizasyonu, toplam engelleme süreniz için hiçbir şey yapmıyorsa, muhtemelen bu ölçümde düşük puana neden olan birkaç ayrı komut dosyası vardır. Bunu düzeltmek için önce soruna neden olan komut dosyalarını tanımlamanız ve ardından bunları tek tek kaldırmanız/optimize etmeniz gerekir.

Uzun Görevleri Bireysel Olarak Optimize Etme

Uzun bir görevi bireysel olarak optimize etmek için önce onu tanımlamanız gerekir. Standart tanımımıza geri dönersek, uzun bir görev, 50 milisaniyeyi aşan herhangi bir şeydir. Chrome web tarayıcısında sunulan geliştirme araçlarına yapılan son güncellemede Google, uzun görevleri kolayca tanımlamanıza olanak sağlayacak bir işlev ekledi.

Bu grafik, uzun görevleri görsel olarak tanımlar. uzun görevlerin tam olarak bu, uzun görevler olduğunu görebilirsiniz. Yüklemeleri 50 milisaniyeden fazla sürüyor ve bunu grafiğin üst kısmındaki milisaniye ekseninde görebilirsiniz.

Bu tabloya Chrome Geliştirme araçlarının performans panelinden ulaşabilirsiniz. Performans panelinin altında, kayıt düğmesine tıklayın ve web sitenizi yeniden yükleyin. Bu, sayfanızın oluşturma işlemi sırasında yüklenen ve meydana gelen her şeyi kaydeder. Sayfa tamamen yüklendikten sonra kaydı durdurun ve yukarıda görüntülenene benzer bir tablo oluşturacaktır.

Yükleme olayını, pencerenin üst kısmındaki kullanıcı arayüzünü kullanarak web sitesinin yükleme olayını ayırırsanız, işaretli uzun görevleri görmek için yakınlaştırabilir ve büyütebilirsiniz.

Kaydın ölçeğini yalnızca web sayfasını nereye yüklediğimizi gösterecek şekilde ayarladık. Kayıtta, uzun görevler, kırmızı bir köşe üçgeni olan Gri çubukla tanımlanır.

Örneğin, kırmızı köşe üçgenli Gri çubuk ve çubuğun yarısını kaplayan tarama uzun bir iştir. Üzerine gelindiğinde yüklenmesinin ne kadar sürdüğünü görebiliriz. Bu durumda, uzun görev arasında geçiş yapmak için 50 milisaniye sınırının üzerinde olan 83 milisaniye sürdü. Bireysel çubuğa tıklayarak, pencerenin altında daha fazla bilgi gösterilecektir.

Bu kendi başına kötü değil, ancak 50 milisaniyenin üzerinde çok fazla uzun göreviniz varsa, bunların tümü toplam engelleme süresine eklenir.

Bu aracı, aşırı derecede ortalamanın dışında olan uzun görevleri belirlemek için kullanabilirsiniz. Ortalama uzun görevinizin 50-150 milisaniye arasında sürdüğünü varsayalım. Ortalama görevinizden çok daha uzun süren bir görevi görsel olarak tanımlarsanız, onu ele almak istersiniz. Diyelim ki baştan sona 600 milisaniye süren bir görevi görsel olarak belirlediniz. Bu, toplam engelleme süresi puanınızı ciddi şekilde etkiler, bu nedenle bunu ele almak kesinlikle bu metriği artıracaktır.

Optimize edilmesi gereken bir görev belirlediyseniz, bunu yapmanın en iyi yolu onu daha küçük parçalara bölmektir. Tercihen, kodunuzu 50 milisaniyelik yükleme parçalarına bölmek istersiniz. Bu, toplam engelleme süresi eşiğinin altına düştüğü ve toplu metrik için geçerli olmayacağı anlamına gelir.

Kod bölmenin ardındaki teoriyi okumak isterseniz, Google bunun nasıl yapılacağına dair harika bir kılavuz yayınladı.

https://web.dev/reduce-javascript-payloads-with-code-splitting/

Ancak bu kılavuz daha çok sıfırdan dijital mülkler oluşturan geliştiricilere yöneliktir. WordPress platformundaysanız, zaten bir içerik yönetim sistemi ve önceden paketlenmiş bir platform kullanıyorsunuz.

https://www.smashingmagazine.com/2018/02/code-splitting-wordpress-pop/

Smashing Magazine makalesine bir göz attıysanız, WordPress'te kodu bölmenin oldukça karmaşık olduğunu kesinlikle göreceksiniz.

Ortalama engelleme süresine giren görevleri ele almak pek mantıklı değil, ancak diğer tüm görevlerden iki kat, dört kat, altı kat daha uzun bir görev bulursanız, bu, düzeltmek için zaman ayırmanız gereken bir şeydir. .

Bunu yapmak yerine, optimize edilmesi gereken çok uzun bir görev belirlediyseniz, onu basitçe kaldırıp aynı şeyi yapan bir şeyle değiştirmek daha iyi olabilir. Bu nedenle, örneğin bir üçüncü taraf komut dosyasından geliyorsa, üçüncü taraf komut dosyasını başka bir şeyle değiştirmek iyi bir fikir olabilir. Bir eklentiden geliyorsa, eklentinin kullanılmadığı sayfalarda devre dışı bırakılması veya eklentinin değiştirilmesi JavaScript'i bölmeye çalışmaktan daha iyi bir fikir olabilir.

Ve çoğu zaman kodu bölmeyi düşünmeniz bile gerekmeyecek, çünkü JavaScript'in genel bir optimizasyonu, bir WordPress web sitesindeki zayıf bir toplam engelleme süresi metriğini ele almak için fazlasıyla yeterli olmalıdır.

Çözüm

Bu makale, metriğe neyin girdiğine, nasıl hesaplandığına, neden ilgilenmeniz gerektiğine ve TBT'yi nasıl iyileştireceğinize dair size iyi bir genel bakış sunarak "toplam engelleme süresi nedir" temel sorusunu ele almalıydı.

Özetle, toplam engelleme süresi, uzun görevlerin etkileşimli hale gelmesi için geçen toplam süredir. İngilizce'ye çevrildiğinde, bu, tek bir öğenin yüklenmesi ile tek bir öğenin etkileşimliliği arasındaki süreyi ifade eder. Toplam engelleme süresi, tüm bireysel engelleme sürelerini toplar ve toplam rakamı ortaya çıkarır.

300 milisaniyelik bir kesintinin altında puan almak istiyorsunuz. Gönderilen toplam engelleme süresini 300 milisaniyeden fazla puanlıyorsanız, bu, bu ölçümü ayrı ayrı ele almanız gerektiği anlamına gelir.

Toplam engelleme süresini iyileştirmek, genel JavaScript optimizasyonuna odaklanarak yapılabilir. Bu, dosyaları birleştirmek ve küçültmek, üçüncü taraf komut dosyalarını optimize etmek veya ortadan kaldırmak ve eşzamansız olarak yüklemek veya ertelemek anlamına gelir. Bu yöntemlerden hiçbiri işe yaramazsa, tek tek uzun görevi manuel olarak girip optimize ederek ele almanız gerekir.

Toplam engelleme süresi ve WordPress web sitenizi nasıl optimize edeceğiniz hakkında herhangi bir sorunuz varsa, yorumlarda bize ulaşmaktan çekinmeyin – size yardımcı olabilecek bazı kaynaklara yönlendirmek isteriz.