WordPress Sitenizdeki İlk Giriş Gecikmesini (FID) Nasıl İyileştirirsiniz?

Yakın zamanda, Google'ın Önemli Web Verileri metrikleriyle ilgili yeni bir seriyi, En Büyük İçerikli Boya ile ilgili bir gönderiyle başlattık. Burada sıradaki adayla devam etmek istiyoruz: İlk Giriş Gecikmesi veya kısaca FID ve bunun WordPress'te nasıl geliştirileceği.

Aşağıda, FID'nin ne olduğunu ve WordPress web sitenizi bunun için nasıl optimize edeceğinizi derinlemesine inceleyeceğiz. İlk Giriş Gecikmesini anlamayı ve ölçmeyi, hangi değeri hedeflemeniz gerektiğini ve gerekirse bunu nasıl iyileştireceğinizi öğreneceksiniz.

Bu yayının, Google Önemli Web Verileri'ni ve bunların kullanıcı deneyimi ile arama motoru optimizasyonu üzerindeki etkilerini zaten bildiğinizi varsaydığını unutmayın. Bunların herhangi birinden emin değilseniz, bu dizideki ilk makaleye veya Önemli Web Verileri ile ilgili bağımsız yayınımıza bakın.

İlk Giriş Gecikmesi Nedir? Bir tanım

Bu nedenle, daha önce de belirtildiği gibi, FID, Google'ın bir web sitesinin ne kadar kullanıcı dostu olduğuna karar vermek için temel değerler olarak gördüğü web sitesi kullanıcı deneyimini ölçmek için kullanılan üç ölçümden biridir. Aynı zamanda arama algoritmalarının bir parçasıdır, bu nedenle bu konuda kötü puan alırsanız, arama sıralamanız zarar görür.

Ancak, İlk Giriş Gecikmesi tam olarak nedir?

Kısacası, FID, bir kullanıcının bir web sayfasıyla etkileşime girdiği zaman (bir düğmeyi tıklamak gibi) ile tarayıcının bu etkileşime yanıt verdiği zaman arasındaki gecikmeyi ölçer. Bu, bir web sayfasının yanıt verebilirliğini yansıtır.

En Büyük İçerikli Boya, bir web sayfasının bir ziyaretçi için yararlı hale gelmesinin ne kadar sürdüğünü hesaplarken, FID, yükleme sırasında bile ziyaretçinin istediği eylemi gerçekleştirerek sayfanın ne kadar yararlı kaldığını ölçer. Doğal olarak, siteniz daha duyarlı ise, daha iyi bir kullanıcı deneyimi sağlar.

Bunu muhtemelen kendi internet kullanımınızdan biliyorsunuzdur. Hiç girdilerinize tepki vermenin çok uzun sürdüğü bir sitede bulundunuz mu? Bundan hoşlanmadın, değil mi? Web sitenizin ziyaretçileri de öyle.

FID Nasıl Hesaplanır?

FID milisaniye (ms) cinsinden ölçülür. Bunu hesaplamak için tarayıcı, bir sayfada bir kullanıcı etkileşiminin gerçekleştiği anı ve tarayıcının ana iş parçacığının bu etkileşimi işlemesi için geçen süreyi izler. FID puanı, iki olay arasındaki gecikmeyi temsil eder. Sonuç olarak, düşük bir FID puanı, sayfanın oldukça etkileşimli olduğunu ve kullanıcı girdilerine hızlı yanıt verdiğini gösterir.

Bu noktada, muhtemelen şu soruları sormalısınız: “Ana konu” nedir? Ve bir etkileşim olarak sayılan nedir?

İşte cevap.

Ana iş parçacığı temel olarak tarayıcının çalışma hattıdır. Bir web sitesini oluşturmak ve çalıştırmak için gerekli olan tüm işlemler onun üzerinden çalışır. Sürekli meşgulse, yeni girdiye tepki vermesi daha uzun sürer.

Nelerin etkileşim olarak sayılacağına gelince, bu bir bağlantıya tıklama, bir düğmeye dokunma, açılır menüyü, metin alanını, onay kutularını veya radyo düğmelerini kullanma ve ayrıca klavyenizdeki bir tuşa basma (örn. Bir açılır pencereyi kapatmak için Esc ).

FID'e Ne Sebep Olur?

İlk Giriş Gecikmesi genellikle İlk İçerikli Boyama (ilk sayfa öğesi tarayıcı penceresinde göründüğünde) ve Etkileşim Süresi (sayfa ilk kez kullanılabilir ve kullanıcı girişine yanıt verir hale geldiğinde) arasında en yüksektir.

Temel olarak, giriş gecikmesi, kullanıcı bir şey yapmaya çalışırken tarayıcı başka bir şeyle meşgul olduğunda ortaya çıkar. Bu durumda, girişe zamanında yanıt veremez ve bu da site ziyaretçisinin bekleme süresine neden olur.

Teknik açıdan, bunun ortak suçluları şunlardır:

• Tarayıcının ayrıştırması ve yürütmesi gereken büyük JavaScript dosyaları
• Beklemesi gereken oluşturmayı engelleyen kaynaklar
• Ağır hesaplamalar, DOM manipülasyonu veya yoğun kaynak kullanan süreçler
• Web sitesi dosyalarının ve diğer kaynakların getirilmesinde gecikmelere yol açabilecek yavaş ağ bağlantıları veya yüksek gecikme süresi
• Ağır animasyonlar, uzun süren CSS geçişleri veya büyük görüntü işleme gibi ana ileti dizisini engelleyen etkinlikler

İlk Giriş Gecikmesi ile ilgili not edilmesi gereken son bir şey de, Mart 2024'te Etkileşim - Sonraki Boya (INP) adlı başka bir metrikle değiştirileceğidir. aşina olursun.

İlk Giriş Gecikmesi Nasıl Ölçülür?

Web sitenizin FID'sini, diğer Önemli Web Verileri ile hemen hemen aynı araçlarla test edebilirsiniz:

• PageSpeed ​​Insights — Yalnızca sayfa URL'nizi girin ve FID değerinizi içeren bir rapor alın.
• Chrome Kullanıcı Deneyimi Raporu — Google, tarayıcısı aracılığıyla birçok web sitesinden gerçek kullanıcı deneyimi verilerini toplar ve derler. Bu verilere, burada belirtilenler de dahil olmak üzere farklı araçlar aracılığıyla erişebilirsiniz.
• Search Console — Google Search Console'daki Web Vitals raporu, kötü FID okumaları olan sayfalar hakkında bilgi sahibi olmanızı sağlar.
• web-vitals JavaScript kitaplığı — Teknik olarak daha yatkınsanız, bu JavaScript kitaplığını web sitenize ekleyebilir ve oradan Önemli Web Verileri hakkında bilgi alabilirsiniz.

Bu araçların çoğu, sonuçlarında FID değerini gösterir, böylece neyle uğraştığınızı bilirsiniz.

Unutulmaması gereken önemli nokta, bu metrik için gerçek kullanıcı etkileşimine ihtiyacınız olduğudur. Laboratuvar tipi bir ortamda simüle edebileceğiniz bir şey değil. Bu nedenle, bunun için en iyi kaynaklarınız, CrUX raporu gibi gerçek kullanıcı verileridir.

Sitenizi önceden bir laboratuvar ortamında test etmek istiyorsanız, en iyi proxy ölçünüz Toplam Engelleme Süresidir. Bunu örneğin PageSpeed ​​Insights'ta da bulabilirsiniz.

Ek olarak, sitenizdeki gerçekten en kötü FID vakalarına odaklanın, size neyin yanlış olduğu hakkında en çok o bilgi verecektir.

İyi Bir İlk Giriş Gecikmesi Nedir?

Bu sadece şu soruyu bırakıyor, hangi sayı için çekim yapmalısınız? İyi bir FID puanı tipik olarak 100 milisaniyenin altındadır. 100 ile 300 milisaniye arasındaki puanların iyileştirilmesi gerektiği kabul edilir. 300 milisaniyenin üzerindeki her şey, kötü bir kullanıcı deneyimine işaret eder.

Bu karşılaştırmaları göz önünde bulundurarak, sitenizdeki İlk Giriş Gecikmesini nasıl daha iyi hale getireceğinizi öğrenelim.

WordPress Web Sitenizdeki İlk Giriş Gecikmesini Nasıl İyileştirirsiniz?

FID'yi iyileştirmek çoğunlukla web sayfasının performansını optimize etmeyi ve tarayıcının kullanıcı girişine yanıtını geciktirebilecek engelleme görevlerini azaltmayı içerir. İkincisi için en yaygın suçlu, JavaScript'in ağır veya yanlış kullanımıdır. Bu nedenle, aşağıdaki önlemlerin çoğu buna odaklanacaktır. Ancak yapabileceğiniz başka şeyler de var.

Genel Performans İyileştirme Önlemleri

Largest Contentful Paint'in nasıl iyileştirileceğine ilişkin halihazırda ele aldığımız birçok teknik, FID'nizi daha iyi hale getirmek istediğinizde de geçerlidir, örneğin:

• Web sitesi ortamınızı optimize edin — Web siteniz genel olarak ne kadar hızlıysa, kaynaklar o kadar hızlı teslim edilebilir ve etkileşim süresini kısaltır. Bu nedenle, kaliteli barındırma, temalar ve eklentilere yatırım yapın. Ayrıca sitenizdeki eklenti sayısını azaltın ve güncel tutun. Ek olarak, önbelleğe alma ve sıkıştırma uygulayın.
• Bir CDN uygulayın — İçerik dağıtım ağları, sunucu ile kullanıcı arasındaki mesafeyi kısaltmanıza olanak tanıyarak daha hızlı dosya teslimi sağlar.
• Oluşturmayı engelleyen kaynakları ortadan kaldırın — Bir web sitesinin yükleme sürecini durduran herhangi bir bölümü, kullanıcı deneyiminin ve Önemli Web Verilerinin tüm bölümlerini olumsuz etkiler. Bunları sitenizden kaldırmak, bu sorunu düzeltmeye yardımcı olur. Oluşturmayı engelleyen JavaScript hakkında daha fazla ayrıntı aşağıdadır.

Daha fazla ipucu için, WordPress'in nasıl hızlandırılacağı, sunucu isteklerinin nasıl azaltılacağı ve web sitenizin hız testi hakkındaki makalemize göz atın.

JavaScript'inizi Azaltın, Erteleyin, Async ve Küçültün

Belirtildiği gibi, JavaScript genellikle kötü FID sonuçlarının ana faktörüdür. Sorun haline gelmemesi için sitenizdeki işaretlemeyi nasıl optimize edebileceğiniz aşağıda açıklanmıştır.

Genel İşaretlemeyi Azaltın

Elbette yapabileceğiniz en iyi şey, sayfadaki genel JavaScript'i azaltmaktır. Bir web sayfasında kullanılmayan JavaScript'i bulmak için tarayıcı geliştirici araçlarınızdaki Kapsam sekmesine bakın.

Sitenizin tamamı için gerekli olup olmadığına veya kullanılmayan JavaScript'i tamamen kaldırıp kaldıramayacağınıza bakın.

WordPress'te aşırı JavaScript, genellikle İlk Giriş Gecikmesine neden olan pek çok zil ve ıslıkla gelen çok fazla eklenti veya temanın sonucudur. Bu nedenle, ondan kurtulmak istiyorsanız, bazılarını ortadan kaldırmanın veya daha yalın bir sürüme geçmenin bir yolu olup olmadığını kontrol edin.

Eşzamansız ve Erteleme Komut Dosyaları

Bundan sonraki adım, tarayıcıya JavaScript dağıtımını optimize etmektir. Buradaki ana sorun, aksi belirtilmedikçe, tarayıcı web sitenizin biçimlendirmesinde bir JavaScript komut dosyasıyla karşılaştığında, komut dosyası indirilip çalıştırılana kadar HTML oluşturmayı durdurmasıdır. Bu, yukarıda bahsedilen "işlemeyi engelleyen kaynaklar" olarak da anılır.

Ancak, bunun etrafından dolaşan yollar vardır ve bunlar iki anahtar kelimeye dayanır:

• async - Bunu komut dosyası çağrınıza eklemek, tarayıcının sayfanın işlenmesini duraklatmadan arka planda indirmesine olanak tanır. Sayfanın geri kalanından bağımsız olarak yalnızca indirildikten sonra yürütülür.
• defer – async çok benzer. Tarayıcıya komut dosyasını beklememesini ve bunun yerine sayfayı oluşturmaya devam etmesini söyler. Ancak bu durumda, sayfanın geri kalanı tam olarak oluşturulduğunda komut dosyasını en son yükleyecektir.

async ve defer kullanmanın pratikte nasıl göründüğü:

 <script async src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script> <script defer src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script>

Tahmin edebileceğiniz gibi, bu yöntemlerin her ikisi de sayfa yükleme sırasında önemli ölçüde zaman tasarrufu sağlayabilir. Temel farkları: defer betiklerin göreli sırasını belgede göründükleri gibi tutarken, async betiklerin indirilme sırasını kullanır.

Daha sonra kullanılmayan ve kritik olmayan JavaScript yüklemesi yapmak için her ikisini de kullanabilirsiniz. Bu, analitik gibi üçüncü taraf komut dosyalarını içerir.

Daha Hızlı İndirmek için JavaScript'i Küçültün

Son olarak, yüklenen JavaScript için onu küçülttüğünüzden emin olun. Küçültme, yalnızca dosyaları insanlar için okunaklı hale getirmek için var olan tüm biçimlendirmeyi ve kod biçimlendirmesini kaldırmak anlamına gelir.

Dosya boyutunu daha da azaltır ve tarayıcının indirmesini hızlandırır. Aşağıdaki eklenti önerileri de dahil olmak üzere, bunu yapmak için birçok araç var.

Uzun Görevleri Parçalayın

Sitenizdeki genel JavaScript'i azaltmanın ve teslimatı iyileştirmenin yanı sıra, WordPress sitenizde kalanları daha küçük parçalara ayırarak İlk Giriş Gecikmesini optimize edebilirsiniz. Bu, özellikle sayfanızda çok sayıda "uzun görev" varsa uygundur.

Uzun görevler nelerdir, soruyorsunuz?

Ana iş parçacığını 50 ms'den fazla bloke eden herhangi bir şey. Bunları, kırmızı bayraklarla işaretlenmiş Chrome geliştirici araçlarında görebilirsiniz.

Bunları daha küçük parçalara ayırırsanız, bunları eşzamansız olarak yükleyebilirsiniz, bu da ana iş parçacığında daha az kesintisiz çalışma sağlar.

Bunu nasıl yaptın?

Kod bölmeyi kullanarak. JavaScript parçalarını koşullu olarak yüklemenize izin verir, böylece baştan yalnızca kritik öneme sahip kod yüklenir. Gerisi sadece gerektiğinde devreye giriyor. Ayrıca görevleri daha küçük ayrı işlevlere bölebilirsiniz. Her ikisi de sayfalarınızı duyarlı tutmanın yollarıdır.

Uzun görevlerin nasıl ele alınacağına dair daha çok teknik ipuçları için bu kaynağa bakın.

FID'yi Geliştirmek İçin Yararlı WordPress Eklentileri

Özellikle bir geliştirici değilseniz, JavaScript dosyalarını optimize etmenin herkesin harcı olmadığını anlıyoruz. Bu nedenle, İlk Giriş Gecikmesi değerlerinizi daha iyi hale getirmenize yardımcı olabilecek birkaç WordPress eklentisi ve aracı derledik.

• Varlık Temizleme - Bu eklenti, kullanılmayan CSS ve JavaScript'i devre dışı bırakmanıza, yazı tiplerini önceden yüklemenize, dosyalarınızı küçültmenize, JavaScript'i ertelemenize ve daha pek çok şeye olanak tanır.
• Uçan Komut Dosyaları — Kritik olmayan JavaScript'in yürütülmesini kullanıcı etkinliği kalmayana kadar geciktirmenizi sağlar.
• Eklenti Düzenleyici — Eklentilerin sitenize yüklenme sırasını değiştirin ve seçilen sayfalarda veya içerik türlerinde bunları seçerek kapatın.
• Autoptimize — CSS ve JS dosyalarını otomatik olarak birleştirip küçültebilir, ayrıca betiklere zaman async ve defer ekleyebilir. Ayrıca kullanımı çok kolaydır.
• WP Rocket — Yukarıda bahsettiklerimizin çoğunu yapabilen ücretli bir önbellek eklentisi. Genel olarak, önbelleğe alma eklentilerinin çoğu benzer işlevler sunar.

Son Düşünceler: WordPress'te İlk Giriş Gecikmesi

FID, Önemli Web Verileri üçlüsünü oluşturan metriklerden biridir ve web sayfalarının etkileşimini ölçer. Yavaşlayan web deneyimlerinden kimse hoşlanmadığı için bu, kullanıcı deneyiminin önemli bir parçasıdır. Web sitesi sahipleri ve geliştiriciler, İlk Giriş Gecikmesini iyileştirmeye odaklanarak daha duyarlı bir kullanıcı deneyimi sağlayabilir ve sonuç olarak kullanıcı memnuniyetini ve katılımını artırabilir.

Yukarıda, WordPress web sitenizde FID'yi nasıl ölçeceğinizi, test edeceğinizi ve geliştireceğinizi ele aldık. JavaScript'i optimize etmek, teknik bilgisi az olan kullanıcılar için biraz ulaşılmaz gibi görünse de, FID dahil olmak üzere sitenizin genel performansını iyileştirmek için yapabileceğiniz çok şey var. Umarım, şimdiye kadar bunu yapabilecek kapasitede hissediyorsunuzdur.

WordPress web sitelerinde İlk Giriş Gecikmesini iyileştirmek için başka ipuçlarınız var mı? Düşüncelerinizi ve önerilerinizi aşağıda paylaşın!