Toplam engelleme süresi tam olarak nedir?
Mayıs 2020’de gerçekleşen en son Google PagesPeed güncellemesinde, kullanıcılar kümülatif düzen kaymaları, en büyük içerik boyası ve toplam engelleme süresi gibi birkaç yeni metrikle tanıtıldı. Bu yeni metrik, Google kullanıcı deneyimi odaklı tutumuna (UX) geçmeye başladığında tanıtıldı. Bu blog yazısında, toplam engelleme süresinin ne olduğunu, puanın nasıl olduğunu, bu metriğin web siteniz için neden önemli olduğunu ve nasıl geliştirileceğini tanıtacağız. Toplam engelleme süresi nedir? Toplam engelleme süresi, Google PagePeed’in içgörüsünde tanımlanan altı ana metrikten biridir. Bu, sayfadaki kullanıcılar tarafından manipüle edilebilecek tüm öğelerin girişten bloke edildiği toplam süreyi ölçer. TBT, ilk içerikli boya ile etkileşime geçen süre arasındaki tüm uzun görevlerin bir engelleme bölümü eklenerek hesaplanır.
Toplam engelleme süresini daha iyi anlamak için uzun bir görev tanımlamamız gerekir. Uzun görev nedir? Eski görev, yüklenirken sunucu işlemcinizin ana UTA’larını kullanan bir JavaScript kodu neden olur. Bu kod, kullanıcı erişimi için görsel olarak hazır görünse de, kullanıcı arayüzünün dondurulmasına neden olur. Bir örnek yüklenen ancak tıklanamayan düğme. Kullanıcı arayüzünüz dondurulduğunda, etkinliğin/tıklamanın denetleyicisi öğeye eklenmediğinden (bu, eski görevin engelleme parçası olarak bilinir) çünkü genellikle tıklayın, dokunun, sürükle veya diğer kullanıcı girişleri engellenir. Basit bir açıklamaya ihtiyacınız varsa: yüklediğiniz öğelerin görsel yönleri görüntülenir, ancak işlevi sağlayan kod yüklenmemiştir.
Uzun görevin “uzun” bölümü, 50 milisaniyeden fazla süren herhangi bir görev olarak tanımlanır. 50 milisaniyenin nedeni temel bir işarettir, çünkü ray modeliyle eşleşir. Demiryolu modeli hakkında daha fazla bilgi edinebilirsiniz, ancak temel olarak bu, iyi kullanıcı deneyimi sağlamak için bir dizi performans yönergedir. Demiryolu modelinin ana alımı, web sitenizin daha hızlı yüklenmesi veya Google’ın sizi cezalandıracağı ve ziyaretçilerinizin mutlu olmayacak (hatta siteyi tamamen terk etmeyeceği) bu, kullanıcının deneyiminin son Google ekseniyle uyumludur. Toplam engelleme süresi, uzun görevler için tüm bireysel engelleme sürelerinin miktarıdır. Toplam engelleme süresi nasıl değerlendirilir? Toplam engelleme süresi için yönergeler oldukça basittir. Toplam engelleme süreniz 300 milisaniyeden azsa, bunu yapmaya hazırsınız. 300 ila 600 milisaniye düşerse, düzeltmeniz gerekir ve 600 milisaniyeden fazla ise hemen üstesinden gelmelisiniz.
Toplam engelleme süresi, sayfa hız performans puanınızın% 25’ine katkıda bulunur, bu nedenle bunu doğru bir şekilde yapmak iyi bir puan elde etmek için çok önemlidir. Toplam engelleme süresi için gerçek puanı hesaplamak için Google, TBT milisaniye numarasını alacak ve endekslenen 10.000 en iyi web sitesine kıyasla alacaktır. İlginç olduğunu düşündüğümüz bir şey, 404 sayfanın ilk 10.000 web sitesi endeksine dahil edilmesi ve medyan sayı üzerinde bir etkisi olabileceğidir. 404 sayfa, tüm özelliklere kıyasla çok daha düşük bir toplam engelleme süresine sahip olacaktır, çünkü 404 sayfanın yüklenmesi çok sınırlı bir JavaScript bulunduğundan, en iyi 10.000 web sitesiyle karşılaştırıldığınız için, oyununuzu artırmanız ve emin olmanız gerekir. 300 milisaniyenin altında puanlar alın. Neden umursayayım? Tanımımızı hatırlarsanız, engelleme süresi yalnızca yüklenmesi 50 milisaniye veya daha fazla sürerse bir rol oynar. Web sitesinin yüklenme şekli çünkü engelleme süresi herhangi bir web sitesinde yönlerdir. Sadece erişim süresi tüketmeye ve kullanıcıların web sitesindeki içeriğe erişmesini kilitlemeye başlarsanız bir sorundur. Bir web sitesine eriştiğinizi düşünün ve düğmeyi gerçekten tıklamanız veya sayfayı aşağı kaydırabilmeniz için birkaç saniye beklemeniz gerektiğini düşünün. Bunun gerçekleştiği bireysel bir web sitesinde birkaç sayfa izlemem gerekirse, kullanıcının deneyimine kızacağım. Bu yeni metrik, Google’ın web sitesindeki kullanıcı deneyiminin yönlerini geliştirme çabasıdır.
Bu, size tek tek sayfalarda çağrılan tüm CSS ve JavaScript dosyalarını gösterir. Örneğin, ana sayfanızda eklentiler, temalar ve diğerleri için birkaç CSS ve JavaScript dosyası yükleyebilirsiniz. Bu sayfada JavaScript dosyalarını kullanmadığınızı biliyorsanız, sadece “boşalma” adlı düğmeyi çevirerek bunları kolayca kaldırabilirsiniz. Komut dosyasının açılması, kullanılmayan bir sayfaya yüklenmemesini sağlar. Bunu tek tek sayfalardaki tüm CSS için de yapabilirsiniz. Ayrıca kullanılmayan sayfalarda eklentileri açar ve devre dışı bırakırız. Asit temizliği ile genellikle site boyunca eklentileri devre dışı bırakır ve daha sonra kullanıldıkları her sayfa için etkinleştiririz. Örneğin, yerçekimi formunu yalnızca iletişim sayfamızda kullanırız, bu nedenle yalnızca oluşturulan kişi sayfasında yerçekimi formlarını içereceğiz. Ana sayfamızdaki yerçekimi formuna dahil olan CSS ve ilgili JavaScript’i yüklemenin bir anlamı yoktur, çünkü orada bir form yoktur. PagePeed’in içgörü. Üçüncü bir -Party JavaScript ile sadece önemli bir komut dosyası yüklemek istersiniz. Komut dosyasını web sitenizden silmeyi veya yerel olarak göstermeyi seçebilirseniz, bu en iyi seçimdir. Web siteniz, çeşitli kaynaklardan üçüncü taraflı JavaScript içerebilir. Google analitik kullanırsanız, üçüncü bir tarafı JavaScript yüklersiniz, şerit veya PayPal ödeme işlemini kullanırsanız, üçüncü bir taraflı JavaScript yüklersiniz ve liste büyümeye devam eder.
Bu komut dosyasının kaldırılması genellikle pratik veya imkansız değildir, bu nedenle üçüncü taraf JavaScript yüklenmesi en iyi çözümdür. Komut dosyanız, avlu oluşturulmadan önce çalıştırılması gerekmezse, her zaman eşzamansız yüklemeniz gerekir (ayrıca erteleyebilirsiniz). Bunu yapma şekliniz async eklemek veya etiketi komut dosyası öğesine geciktirmektir. Ancak, sıradan bir WordPress kullanıcısıysanız, bu zor olabilir, çünkü temanıza veya eklentinize kodlanabilir. Bu, kod seviyesinde değiştirmek anlamlı değildir, çünkü eklenti veya temadaki her güncelleme bunun başlayacaktır. En sevdiğimiz performans optimizasyon aracımızın bir rol oynadığı yerdir. Bireysel JavaScript dosyaları için, varlıkların Pro sürümünü temizleyerek, eşzamansız yüklemeyi veya bir onay kutusuyla ertelemeyi seçebilirsiniz.
Üçüncü Party JavaScript içeren Hız optimizasyonu kategorisine etkili bir şekilde dahildir “Render engelleme kaynağını ortadan kaldırır”. Daha fazla bilgi edinmek istiyorsanız, burada bloke edici kaynaklardan nasıl kurtulacağımızla ilgili eksiksiz bir blog yayınımız var: https://isotropic.co/how-to-wordpress-rending blocking-wesources-for-wordpress-websits/ .
JavaScript’i bir bütün olarak optimize etmek, toplam engelleme sürenizin metrik süresini doğrudan etkiler. JavaScript optimizasyonu, tüm JavaScript dosyalarını birleştirmek ve azaltmak, ardından eşzamansız yüklemek veya askıya almak sayfanızda nasıl kullanılacağına bağlıdır. WordPress ile bunu yapmanıza izin veren birçok otomatik araç var. Favorimiz bir önbellek eklentisi ve performansı olan WordPress Rocket olarak adlandırılır. Render Engelleme Kaynakları: WP Rocket, bugün en sevdiğimiz WordPress hız eklentisidir. Ödüyor, ancak çok güçlü – değere olan fiyat oranı grafiğe uymuyor. Bu, birçok şey yapmanıza izin verecektir, ancak özellikle bu yazı için askıya alınmış bir JavaScript yükleyebilir, bu optimizasyondan bazı dosyaları hariç tutabilir (hemen gerekli olan önemli) ve “güvenli modda” süspansiyon yapabilirsiniz.
süspansiyonun önemli komut dosyasını otomatik olarak dışlamaya çalışır. CSS tarafında, hangi CSS’nin sitenizde eşzamansız yüklenmesi gerektiğini otomatik olarak belirleyebilir ve yükleme kuvvetini (hepsi bir arka plan işlemi olarak) uygulayabilirsiniz. Bu eklentiyi seviyoruz çünkü daha az teknik olan geliştiriciler ve web sitesi sahipleri için çok güçlü (ve kolay). Bu üç optimizasyon noktasını ele aldığınızı ve toplam engelleme sürenizde hala kötü bir puan alacağınızı varsayalım. Toplam engelleme süresi oluşturan tek tek öğelere geri dönersek, bu metrikle yalnızca uzun bir görev ilişkilidir. Can sıkıcı olan uzun görev/komut dosyasının üstesinden gelmenin yolu, onu tanımlamak ve onu kırmak veya tamamen silmektir. Web siteniz standart optimizasyonu toplam engelleme süreniz için hiçbir şey yapmazsa, bu metrikte zayıf puanlara neden olan bazı bireysel komut dosyaları olabilir. Bunu düzeltmek için önce soruna neden olan komut dosyasını tanımlamanız, ardından tek tek silmek/optimize etmelisiniz. Uzun görevleri bireysel olarak optimize etmek için uzun görevleri ayrı ayrı optimize ederek, önce bunu tanımlamanız gerekir. Standart tanımlarımızı yeniden düşünürsek, uzun bir görev 50 milisaniyeden fazla alan her şeydir. Chrome Web tarayıcısında sunulan geliştirme araçları için en son güncellemelerde, Google eski görevleri kolayca tanımlamanızı sağlayan işlevsellik ekledi.
Bu grafik uzun görevleri görsel olarak tanımlar. Uzun görevlerin tam olarak böyle olduğunu görebilirsiniz, uzun görevler. Yüklemek için 50 milisaniyeden fazla ihtiyaç duyarlar ve grafiğin üst kısmındaki milisaniye ekseninde görebilirsiniz. Bu grafiğe Chrome Dev. Performans panelinin altında, kayıt düğmesini tıklayın ve web sitenizi yeniden yükleyin. Bu, sayfanızı oluşturma işlemi sırasında yüklenen ve meydana gelen her şeyi kaydedecektir. Sayfa tamamen şarj edildikten sonra kaydı durdurun ve yukarıda görüntülenene benzer bir grafik oluşturur. Web sitesi yüklemesinin yükleme olayını pencerenin üst kısmındaki kullanıcı arayüzünü kullanarak araziye alırsanız, uzun süreli görevi görmek için büyütebilir ve büyütebilirsiniz. Kayıt ölçeğini yalnızca web’i yeniden yüklediğimizi göstermek için ayarladık sayfalar. Kayıtta, uzun bir görev kırmızı köşe üçgeni ile gri bıçaklarla tanımlanır.
Örneğin, kırmızı köşe üçgenine sahip gri bıçaklar ve bıçakların yarısını karşılayan çizgiler uzun görevlerdir. İmleci üste yönlendirerek, yüklenmenin ne kadar sürdüğünü görebiliriz. Bu durumda, eski görevleri yönlendirmek için 50 milisaniye sınırı aşan 83 milisaniye sürer. Tek tek bıçaklara tıklayarak, pencerenin altında daha fazla bilgi görüntülenecektir.
//www.satingmagazine.com/2018/02/code-splitting-wordpress-pop/ Smashing dergisi makalesini görürseniz, kelimeyi WordPress’te paylaşacak kadar karmaşık olduğunu kesinlikle göreceksiniz. Medyan engelleme döneminde yer alan görevleri ele almak mantıklı değildir, ancak birbirlerinin görevinden iki kez, dört kez, altı kat daha uzun görevler bulursanız, düzeltmek için zaman ayırmanız gereken bir şeydir. . Bunu yapmak yerine, optimize edilmesi gereken süper uzun bir görev belirlediyseniz, onu silmek ve aynı şeyi yapan bir şeyle değiştirmek daha iyi olabilir. Örneğin, üçüncü taraf bir senaryodan geliyorsa, üçüncü taraf senaryolarını başkalarıyla değiştirmek iyi bir fikir olabilir. Bir eklentiden geliyorsa, kullanılmayan bir sayfadaki eklentiyi devre dışı bırakın veya eklentiyi değiştirmek JavaScript’i ayırmaya çalışmaktan daha iyi bir fikir olabilir. Ve, zamanınızın çoğunun kod çözmeyi dikkate alması gerekmez, çünkü JavaScript genel optimizasyonu, WordPress web sitesinde zayıf bir toplam engelleme süresinin metrik süresinin üstesinden gelmek için fazlasıyla yeterli olmalıdır. Sonuç Bu makale, “toplamı engellemek için ne kadar zaman” ile ilgili önemli soruları cevaplamalıdır.
