Google'ın INP Puanı Nedir ve WordPress'te Nasıl İyileştirilir

Google, INP (Interaction to Next Paint) gibi yeni bir sıralama faktörü tanıttığında, bunalmış hissetmek kolaydır. Muhtemelen bu teknik terimin WordPress siteniz için ne anlama geldiğini ve şimdi ne yapmanız gerektiğini merak ediyorsunuzdur.

Tamamen anlıyoruz. On yılı aşkın WordPress sitesi optimizasyon deneyimiyle ekibimiz, bu yeni puanı iyileştirmenin en etkili yollarını bulmak için hemen testlere başladı.

Konuyu araştırdıktan sonra, tüm karmaşık jargonu basit, uygulanabilir adımlara çevirdik. Kendi web sitesi portföyümüzde kullandığımız kanıtlanmış yöntemleri paylaşmaktan heyecan duyuyoruz.

Bu kılavuzda, INP'nin tam olarak ne olduğunu ve geliştirici olmasanız bile puanlarınızı nasıl artırabileceğinizi adım adım açıklayacağız.

Bu kılavuzda ele alacağımız konuların hızlı bir genel bakışı:

1. Google Temel Web Gelişmişlik Ölçütleri Nedir?
2. Google INP Nedir?
3. Google Neden FID Metriğini INP'ye Değiştirdi?
4. WordPress'te Google INP Puanı Nasıl Ölçülür
5. WordPress'te Google INP Puanı Nasıl İyileştirilir
6. Web Sitesi Sahipleri Sitelerini INP İçin Nasıl Optimize Edebilir
7. Geliştiriciler Kodlarını INP İçin Nasıl Optimize Edebilir
8. Geliştiriciler İçin İyi JavaScript Kodlama Uygulamaları Örnekleri
9. Google INP Hakkında Sıkça Sorulan Sorular
10. WordPress Performansını İyileştirme Üzerine Uzman Rehberleri

Google Temel Web Gelişmişlik Ölçütleri Nedir?

Google Core Web Vitals, Google'ın genel kullanıcı deneyimi için önemli kabul ettiği web sitesi performans metrikleridir. Bu web hayati puanları, SEO sıralamalarınızı etkileyecek olan Google'ın genel sayfa deneyimi puanının bir parçasıdır.

Bu metrikler yararlıdır çünkü, WordPress web siteniz hızlı yükleniyor olsa bile, kullanıcılar için tam olarak işlevsel olmayabilir. Bir sayfa yüklenmiş olsa bile, bir ziyaretçi istediği şeyi yapamayabilir veya ihtiyaç duyduğu bilgilere erişemeyebilir.

Core Web Vitals bununla yardımcı olmak için tasarlanmıştır. Web sitenizin ne kadar hızlı yüklendiğini, görünür hale geldiğini ve ziyaretçilerinizin kullanıma hazır olduğunu ölçmenize olanak tanır.

Geçmişte Google üç kalite testi kullanıyordu:

• En Büyük İçerik Boyama (LCP)
• İlk Giriş Gecikmesi (FID)
• Kümülatif Düzen Kayması (CLS)

Bu testler hakkında daha fazla bilgiyi, WordPress için Core Web Vitals'ı nasıl optimize edeceğinize dair nihai rehberimizde bulabilirsiniz.

Ancak Google, Mart 2024'te FID'yi INP (Interaction to Next Paint) adlı yeni bir testle değiştirdi. Diğer iki test kullanılmaya devam ediyor.

INP'nin ne olduğuna ve Google'ın neden buna geçtiğine bir göz atalım.

Google INP Nedir?

INP, 'Interaction to Next Paint' (Son Boyamaya Etkileşim) anlamına gelir. Web sitenizdeki gecikmelere neden olan kullanıcı etkileşimlerini ölçen yeni bir Google Core Web Vital metriğidir.

INP testi, bir kullanıcının web sitenizle etkileşim kurması (bir şeye tıklamak gibi) ile içeriğinizin yanıt olarak görsel olarak güncellenmesi arasında ne kadar sürdüğünü ölçer. Bu görsel güncellemeye 'sonraki boyama' denir.

Örneğin, bir kullanıcı sitenizde bir iletişim formu gönderebilir, bir düğmeye tıklayabilir veya bir lightbox'ta açılan bir resmi seçebilir. INP testi, kullanıcının bu etkileşimleri gerçekleştirmesi ile web sitenizde güncellenmiş içeriği görmesi arasında geçen süreyi ölçecektir.

Google testi daha sonra web sitenizdeki çoğu kullanıcı etkileşiminin süresine göre tek bir INP puanı belirler. Puan, web sitenizin görsel olarak güncellenmesinin ne kadar sürdüğüne bağlı olarak 'İyi', 'İyileştirme Gerekli' veya 'Kötü' olacaktır.

Google Neden FID Metriğini INP'ye Değiştirdi?

Eski FID testi, sayfa yüklendikten sonra kullanıcının ilk girişine (fare tıklaması veya klavye tuşuna basma gibi) web sitenizin ne kadar hızlı yanıt verdiğini ölçüyordu. Bunu, kullanıcının ilk girdisi ile web sitenizin bu girdiye tepki vermeye başladığı zaman arasındaki süreyi ölçerek yapar.

Başka bir deyişle, web sitenizin yüklendiğinde ne kadar duyarlı olduğunu ve gerçek kullanıcılara verdiği ilk izlenimi ölçtü.

Ancak, bu metrik olabileceği kadar yardımcı olmadı. FID testinin iki sınırlaması vardı:

1. Yalnızca ilk kullanıcı etkileşimini ölçtü, hepsini değil.
2. Bu, kullanıcının ekranda görsel geri bildirim görebileceği zamanı değil, yalnızca web sitesi etkileşimi işlemeye başladığı ana kadar ölçtü.

Yani Google, bir web sayfasının genel yanıt verme yeteneğinin daha eksiksiz bir resmini sunmak için testi değiştirdi. INP, kullanıcının sayfada kaldığı süreden ayrılana kadar ölçer.

WordPress'te Google INP Puanı Nasıl Ölçülür

Google Core Web Vitals puanınızı test etmenin en kolay yolu, PageSpeed Insights aracını kullanmaktır. Test etmek istediğiniz URL'yi girip 'Analiz Et' düğmesine tıklamanız yeterlidir.

Araç, web sayfasını birkaç saniye analiz edecek ve ardından test sonuçlarını gösterecektir.

Artık, diğer Google Core Web Vitals'ın yanı sıra sayfanın Etkileşimden Sonraki Boyama (INP) puanını da göreceksiniz.

Mobil ve masaüstü kullanıcılar için farklı puanlar olacaktır.

Yukarıdaki ekran görüntüsünde, bu web sayfasını WPBeginner'da görüntüleyen masaüstü kullanıcıları için INP puanının 47 ms olduğunu görebilirsiniz. Yeşil nokta, bunun iyi bir puan olduğu anlamına gelir.

Kendi sitenizin puanını görebildiğinizde, muhtemelen diğer web siteleriyle nasıl karşılaştırıldığını ve iyileştirilmesi gerekip gerekmediğini merak edeceksiniz.

Google, INP puanınızı yorumlamak için bazı yönergeler sağlamıştır:

• 200 milisaniyeden daha hızlı – iyi yanıt verme
• 200-500 milisaniye – iyileştirme gerekiyor
• 500 milisaniyeden yavaş – zayıf yanıt verme

Hem mobil hem de masaüstü kullanıcılar için puanınızı kontrol ettiğinizden ve iyi bir yanıt verme hedeflediğinizden emin olun.

Ardından, aşağıdaki bölümlerdeki yönergeleri izleyerek INP puanınızı iyileştirebilirsiniz.

Vaka Çalışması: Awesome Motive Web Sitelerinde Yavaş Etkileşimleri Bulma

Ancak önce bir vaka çalışmasına bakmak faydalı olabilir. INP puanlarını, All in One SEO, MonsterInsights ve WPForms dahil olmak üzere kendi marka sitelerimizde ölçmeye başladık.

Ekibimiz web sitemizin INP puanlarını kontrol ettiğinde, ilk sonuçlar en popüler sayfalarımızın iyileştirme gerektirdiğini gösterdi.

Chrome Kullanıcı Deneyimi (CrUX) kontrol panelini kullanarak şunu görebildik:

• Oturumlarımızın %80'i 'iyi' olarak derecelendirildi
• Oturumlarımızın %12'si 'iyileştirme gerekli' olarak derecelendirildi
• Oturumlarımızın %8'i 'kötü' olarak derecelendirildi

Bir PageSpeed Insights raporu bize genel bir INP puanı verir, ancak gerçek kullanıcılar için gecikmeye neden olan belirli düğmelerin veya form alanlarının hangileri olduğunu söylemez. Bunu bulmak için, gerçek ziyaretçi oturumlarından gelen verileri analiz eden diğer araçları kullanarak biraz daha derine inmemiz gerekiyor.

Bu, bir sonraki adımda, daha düşük INP puanlarına sahip sayfalarda yavaş etkileşimleri bulmak için kendi testlerimizi çalıştırmamız gerekeceği anlamına gelir. Bu, bir geliştirici tarafından gerçekleştirilmesi en iyi olan ayrıntılı ve gelişmiş bir görevdir.

Bu, iyileştirme gerektiren her sayfaya gidilerek ve ardından gerçek tıklamalar, dokunuşlar ve tuş basışlarıyla her etkileşimin test edilmesiyle yapılır. Bunların zamanlanması ve araçlar kullanılarak değerlendirilmesi gerekir.

Chrome Developers Blog, Chrome Web Vitals uzantısı ve DevTools'daki Lighthouse Panelindeki yeni zaman aralığı modu gibi test için kullanılabilecek bir dizi araç listeler. Ayrıca Google'ın Web Vitals uzantısını kullanarak Core Web Vitals sorunlarını nasıl gidereceğinize dair makalesini de görebilirsiniz.

Daha düşük puanlara sahip oturumların büyük olasılıkla daha yavaş cihazlarda veya bağlantılarda gerçekleştiğini belirtmek önemlidir. Bu, test sırasında tarayıcınızın hızını yavaşlatmanızın önerildiği, aksi takdirde yavaş etkileşimleri fark edemeyebileceğiniz anlamına gelir.

Bunu, Görünüm » Geliştirici » Öğeleri İncele'ye giderek Chrome'un Öğeleri İncele özelliğini kullanarak yapabilirsiniz. 'Ağ' sekmesine geçebilir ve açılır menüden bir sınırlama seçeneği seçebilirsiniz.

Yavaş bir bağlantıda test yapmak önemlidir çünkü kullanıcılarınızın çoğu mobil cihazlarda olabilir veya mükemmel olmayan internete sahip olabilir. Hızlı ofis bilgisayarınızda görünmez olan bir sorun, onlar için büyük bir hayal kırıklığı kaynağı olabilir.

Sayfalarınız için INP puanlarını bulduktan sonra, bunları iyileştirmek için bu öğreticinin sonraki bölümündeki ipuçlarını kullanabilirsiniz.

WordPress'te Google INP Puanı Nasıl İyileştirilir

INP puanı optimizasyon çalışmalarının çoğu geliştiriciler tarafından yapılacaktır. Buna, web sitenizde kullandığınız temanın ve eklentilerin yazarları ile çalıştırdığınız herhangi bir özel JavaScript'in geliştiricileri dahildir.

Bunun nedeni, INP puanının büyük ölçüde web sitenizdeki JavaScript etkileşimlerini gerçekleştirmek için gereken süreyle ilgili olmasıdır.

Örneğin, bir kullanıcı bir düğmeye tıkladığında, düğmeye tıklanarak beklenen işlevi yerine getirmek için bazı JavaScript kodları çalıştırılır. Bu kod, kullanıcının bilgisayarına indirilir ve web tarayıcısında çalışır.

INP puanınızı optimize etmek için, JavaScript kullanıcı etkileşimleri sırasındaki gecikmeler azaltılmalıdır. Bu gecikmenin üç bileşeni vardır:

1. Girdi gecikmesi, web sitenizin o sayfadaki arka plan görevlerini beklemesi nedeniyle olay işleyicisinin çalışmasını engelleyen durumdur.
2. İşlem süresi, JavaScript'te olay işleyicilerini çalıştırmak için gereken süredir.
3. Sayfanın yeniden hesaplanması ve sayfa içeriğinin ekrana boyanması için gereken süre olan sunum gecikmesi.

Bir web sitesi sahibi olarak, ilk ve üçüncü gecikmeleri iyileştirmek için atabileceğiniz adımlar vardır. Bunu bir sonraki bölümde nasıl yapacağınızı göstereceğiz.

Ancak, INP puanınızda gerçek iyileştirmeler yapmak için, yani kodun kendisinin işleme süresi olan ikinci gecikmeyi iyileştirmeniz gerekecektir. Bu, kendi başınıza yapabileceğiniz bir şey değildir.

WordPress temanızın, eklentilerinizin ve özel JavaScript'inizin geliştiricilerinin, kullanıcılarınıza hemen geri bildirimde bulunmak için kodlarını optimize etmeleri gerekebilir. İyi haber şu ki, Mart 2024 son tarihine yetişmek için muhtemelen bunun üzerinde çalışıyorlar.

Bu makalenin ilerleyen bölümlerinde geliştiriciler için örneklerle birlikte özel ipuçları sunuyoruz.

Web Sitesi Sahipleri Sitelerini INP İçin Nasıl Optimize Edebilir

Web sitenizin INP puanı üzerindeki en önemli etki geliştiricilerin kodlarını optimize etmesinden gelse de, web sitesi sahiplerinin yapabileceği birkaç şey vardır.

Özellikle, sitenizdeki arka plan işlemlerini optimize ederek kullanıcılarınızın fare tıklamalarının ve tuş vuruşlarının mümkün olan en kısa sürede tanındığından emin olabilirsiniz. Ayrıca, girdilerine verilen yanıtın ekranda mümkün olan en hızlı şekilde görüntülendiğinden emin olabilirsiniz.

Bu adımlar yavaş bir etkileşime neden olan kodu doğrudan yeniden yazmasa da, sitenizin genel sağlığını iyileştirir. Daha hızlı, daha hafif bir site, tarayıcıya kullanıcı etkileşimlerini hızlı bir şekilde işlemek için daha fazla kaynak sağlar, bu da INP puanınıza kesinlikle yardımcı olabilir.

Bunu başarmak için atabileceğiniz bazı adımlar şunlardır.

1. WordPress'in En Son Sürümünü Çalıştırdığınızdan Emin Olun

Yapmanız gereken ilk şey, WordPress'in en son sürümünü kullandığınızdan emin olmaktır.

Bunun nedeni, WordPress'in 6.2 ve 6.3 sürümlerinin önemli performans iyileştirmeleri getirmesidir. Bunlar, web sitenizin sunucu tarafı ve istemci tarafı performansını iyileştirecek ve bu da INP puanınızı yükseltecektir.

Ayrıntılı talimatlar için, WordPress'i güvenle nasıl güncelleyeceğiniz konusundaki rehberimize bakabilirsiniz.

2. WordPress'te Arka Plan İşlemlerini Optimize Edin

Arka plan işlemleri, WordPress'te arka planda çalışan zamanlanmış görevlerdir. WordPress güncellemelerini kontrol etme, zamanlanmış gönderileri yayınlama ve web sitenizin yedeğini alma gibi işlemler içerebilirler.

Web siteniz bu arka plan görevlerini çalıştırmakla çok meşgul olursa, kullanıcının fareye tıkladığını veya bir tuşa bastığını hemen fark edemeyebilir, bu da düşük bir INP puanına yol açar.

Arka plan betiklerinizin ve eklentilerinizin yaptığı iş miktarını azaltacak şekilde yapılandırarak web siteniz üzerindeki yükü hafifletebilirsiniz. Alternatif olarak, arka planda çalışır durumda bırakmak yerine yalnızca ihtiyaç duyulduğunda çalıştırabilirsiniz.

Ayrıntılı talimatlar için, WordPress hızını ve performansını artırma konusundaki nihai kılavuzumuzun Arka Plan Süreçlerini Optimize Edin bölümünü görebilirsiniz.

3. PageSpeed Insights Performans Önerilerini Kontrol Edin

Web sitenizde PageSpeed Insights testini çalıştırdıktan sonra, test sonuçlarının Performans bölümüne aşağı kaydırabilirsiniz.

Burada, sitenizin performansını iyileştirmek için bazı fırsatlar ve tavsiyeleri izlerseniz tahmini zaman tasarruflarını bulacaksınız.

Örneğin, oluşturmayı engelleyen kaynakları ortadan kaldırma önerileri görebilirsiniz. Bunu, WordPress'te oluşturmayı engelleyen JavaScript ve CSS'nin nasıl düzeltileceği konusundaki kılavuzumuzu izleyerek yapabilirsiniz: WordPress'te oluşturmayı engelleyen JavaScript ve CSS'yi düzeltme.

Kullanılmayan JavaScript'i azaltma önerisi de görebilirsiniz. Bunu yapmaya yönelik bir ayarı, en iyi WordPress önbellekleme eklentilerinin çoğunda, örneğin WP Rocket'ta bulabilirsiniz.

4. WordPress'te JavaScript'i Küçültün

JavaScript, çalıştırılabilmesi için kullanıcının bilgisayarına indirilmelidir. JavaScript dosyalarınızı mümkün olduğunca küçük hale getirerek performansta küçük iyileştirmeler yapabilirsiniz.

JavaScript'inizi küçültmek, kaynak koddan boşlukları, satırları ve gereksiz karakterleri kaldırarak dosyaları küçültür.

Bu, performansınız üzerinde dramatik bir etkiye sahip olmayacaktır, ancak INP puanınızdan birkaç milisaniye daha kazanmak istiyorsanız, buna değeceğini düşünebilirsiniz.

Nasıl yapacağınızı öğrenmek için WordPress'te CSS ve JavaScript dosyalarını küçültme kılavuzumuza bakabilirsiniz.

Geliştiriciler Kodlarını INP İçin Nasıl Optimize Edebilir

Bir geliştiriciyseniz, en büyük INP puanı artışları kodunuzu optimize etmekten gelecektir. Yapabileceğiniz birkaç şey var.

1. Kullanıcı Girdisini Anında Görsel Olarak Onaylayın

Kodunuzun INP puanını optimize ederken en büyük farkı yaratacak tek şey şudur: Tüm kullanıcı girdilerine anında görsel geri bildirim vermeniz gerekir.

Kullanıcı, girdisinin tanındığını ve üzerinde işlem yapıldığını hemen görmelidir. Bu, kodunuzun kullanıcıya daha duyarlı görünmesini sağlayacak ve harika bir INP puanı elde etmenize yardımcı olacaktır.

İşte birkaç örnek:

• Bir kullanıcı bir öğeye tıklarsa, öğenin tıklandığını gösteren bir şey göstermelisiniz.
• Bir kullanıcı bir form gönderirse, o zaman bunu onaylamak için hemen bir mesaj veya yükleniyor simgesi gibi bir şey göstermeniz gerekir.
• Bir kullanıcı bir resmi lightbox'ta açmak için tıklarsa, sadece resmin yüklenmesini beklemeyin. Bunun yerine, hemen bir demo resim veya spinner göstermelisiniz. Ardından, resim yüklendiğinde, onu lightbox'ta görüntüleyebilirsiniz.

Her şeyden önce, bu, özellikle kullanıcı girdisine yanıt olarak yoğun JavaScript işlemesi yapmanız gerekiyorsa, INP puanınızı iyileştirecektir.

Göreve başlamadan önce kullanıcı arayüzünü güncellediğinizden emin olun.

Bundan sonra, setTimeout geri çağırmasını kullanarak yoğun çalışmayı biraz daha sonraya planlayabilirsiniz. Bu, tarayıcıya yoğun görevle meşgul olmadan önce ekranı güncellemesi için bir an verir.

Bunu doğru yaptıktan sonra, kodunuzu optimize etmek için yapabileceğiniz birkaç şey daha var.

2. Tarayıcının En Çok Zaman Harcadığı Yeri Optimize Edin

Yapmanız gereken bir sonraki şey, tarayıcının zamanının çoğunu nerede harcadığını araştırmak ve ardından bu kısımları optimize etmektir.

Google Chrome'da Görünüm » Geliştirici » Geliştirici Araçları » Performans'a gittiğinizde, bir sonraki boyamayı engelleyen JavaScript fonksiyonlarını ve olay işleyicilerini incelemek mümkündür.

Bu bilgiyle, kullanıcı etkileşiminden sonraki bir sonraki boyamaya kadar olan süreyi azaltmak için nelerin optimize edilebileceğini görebilirsiniz.

3. Düzenlerinizi Azaltın

Bazen CPU etkinliğinin çoğu düzen işlerinden oluşur.

Bu olduğunda, kodunuzun tarayıcıyı sayfa düzenini tekrar tekrar yeniden hesaplamaya zorlayıp zorlamadığını kontrol etmelisiniz. Bu genellikle 'layout thrashing' (düzen titremesi) olarak adlandırılır ve bu kılavuzun ilerleyen bölümlerinde bunu nasıl önleyeceğinize dair bir örnek sunuyoruz.

4. Ekranın Üst Kısmındaki İçeriği Önce Gösterin

Sayfa içeriğinin oluşturulması yavaşsa, INP puanınız etkilenebilir.

Bir sonraki kareyi daha hızlı sunmak için öncelikle önemli olan 'ekranın üst kısmındaki' içeriği göstermeyi düşünebilirsiniz.

Geliştiriciler İçin İyi JavaScript Kodlama Uygulamaları Örnekleri

Kötü kodun neden kötü bir INP puanına yol açabileceğine dair bazı örnekler göstermek faydalı olabilir.

Deneyebileceğiniz bir CodePen üzerinde örnek proje hazırladık. Örnek kodumuzu inceleyebilir, kısa açıklamalarımızı okuyabilir ve düğmelere tıklayarak ne kadar fark yarattığını görebilirsiniz.

İşte o CodePen projesinden bir animasyon. Optimize edilmemiş örnek kodun 965 milisaniye gibi kötü bir INP puanına yol açtığını görebilirsiniz. Düğmeye basmak kullanıcılara gecikmeli hissettirecektir.

Buna karşılık, optimize edilmiş kod, düğme metnini hemen güncelleyerek mümkün olan en iyi INP puanını elde eder.

INP puanını optimize etmek için kodunuzu nasıl iyileştirebileceğinize dair dört örneği görmek için okumaya devam edin.

Örnek 1: Ağır CPU Görevini Çalıştırmadan Önce Ekranı Güncelleyin

CPU yoğun görevler zaman alır ve iyi kod yazmadığınız sürece bu, kötü INP puanlarına yol açabilir. Bu durumda, o görevi çalıştırmadan önce ekranı güncellemek en iyisidir.

İşte ağır bir CPU görevinin ardından kullanıcı arayüzünün güncellendiği kötü bir örnek. Bu, yüksek bir INP ile sonuçlanır:

// Bad example
button.addEventListener('click', () => {
  // Heavy CPU task
  for (let i = 0; i < 10000000; i++) {
    console.log(i);
  }
  // UI update
  button.textContent = 'Clicked!';});

Bu geliştirilmiş örnekte, düğmeye tıklandığında kullanıcı arayüzü hemen güncellenir.

Bundan sonra, ağır CPU görevi bir setTimeout geri çağırmasına taşınır:

// Better example
button.addEventListener('click', () => {
  // UI update
  button.textContent = 'Processing...';

  // Heavy CPU task
  setTimeout(() => {
    for (let i = 0; i < 10000000; i++)
 {
      console.log(i);
    }
    // Final UI update
    button.textContent = 'Done!';
  }, 0);
});

Bu, tarayıcının yavaş görevi başlatmadan önce ekranı güncellemesine olanak tanır ve bu da iyi bir INP puanıyla sonuçlanır.

Örnek 2: Acil Olmayan İşlemleri Zamanlayın

Ayrıca, yanıtı geciktirebilecek acil olmayan veya gereksiz işleri bir betikte hemen çalıştırmadığınızdan emin olmalısınız.

Kullanıcının girdisini kabul etmek için sayfayı hemen güncelleerek başlamalısınız. Bundan sonra, bir karenin sonunda veya kullanıcı etkin olmadığında boş zaman olduğunda betiğin geri kalanını zamanlamak için requestIdleCallback kullanabilirsiniz.

İşte bir örnek:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Non-essential processing  window.requestIdleCallback(() => {
    // Perform non-essential processing here...    button.textContent = 'Done!';
  });
});

Bu, web sayfasının kullanıcıya daha duyarlı hissetmesini sağlayacak ve daha iyi bir INP puanı almanıza yardımcı olacaktır.

Örnek 3: Bir Sonraki Boyamadan Önce Çalışacak Bir Fonksiyon Planlayın

Bir sonraki yeniden çizimden önce çalışacak bir işlevi zamanlamak içinrequestAnimationFrame kullanabilirsiniz:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Visual update
  window.requestAnimationFrame(() => {
    // Perform visual update here...    button.style.backgroundColor = 'green';    button.textContent = 'Done!';
  });
});

Bu, kullanıcı etkileşimlerine yanıt olarak animasyonlar veya görsel güncellemeler için faydalı olabilir.

Yine de, girdilerini hemen onaylayarak kullanıcıya geri bildirimde bulunmalısınız.

Örnek 4: Düzen Çökmesini Önleyin

Düzen takılması, DOM'a (Belge Nesne Modeli) tekrar tekrar okuyup yazdığınızda, tarayıcının düzeni birden çok kez yeniden hesaplamasına neden olduğunda meydana gelir.

İşte bir düzen yerleştirme çalkantısı örneği:

// Bad example
elements.forEach(element => {
  const height = element.offsetHeight; // read  element.style.height = height + 'px'; // write});

Bu, okuma ve yazma işlemlerinizi gruplandırarak önlenebilir.

Bu daha iyi bir örnek:

// Good example
const heights = elements.map(element => element.offsetHeight); // batched read
elements.forEach((element, index) => {
  element.style.height = heights[index] + 'px'; // batched write
});

Google INP Hakkında Sıkça Sorulan Sorular

INP gibi teknik bir konunun birçok soruya yol açabileceğini anlıyoruz. Yardımcı olmak için okuyucularımızdan aldığımız en yaygın sorgulardan bazılarını yanıtladık.

Google'ın Sonraki Boyamaya Etkileşimi (INP) Nedir?

Interaction to Next Paint (INP), bir web sitesinin kullanıcı etkileşimlerine genel yanıt verme hızını ölçen bir Google Core Web Vital metriğidir. Bir kullanıcının bir sayfaya tıklama, dokunma veya yazma zamanı ile ekranda bir sonraki görsel güncellemenin görünmesi arasındaki süreyi hesaplar.

Bu, önceki FID metriğinden daha geniş bir kullanıcı deneyimi görünümü sunar.

Google İlk Girdi Gecikmesini (FID) Neden INP ile Değiştirdi?

Google, INP'nin bir sayfanın yanıt verme yeteneğinin daha kapsamlı bir ölçüsünü sağladığı için FID'yi INP ile değiştirdi. FID yalnızca ilk etkileşimin gecikmesini ölçüyordu.

Buna karşılık, INP, bir ziyaret sırasındaki tüm kullanıcı etkileşimlerinin gecikmesini değerlendirerek kullanıcının deneyimi hakkında daha eksiksiz bir resim sunar.

İyi Bir INP Puanı Nedir?

Google'ın yönergelerine göre, iyi bir INP puanı 200 milisaniye veya daha azdır. 200 ila 500 milisaniye arasındaki bir puan 'iyileştirme gerektirir' ve 500 milisaniyenin üzerindeki her şey 'zayıf yanıt verme' olarak kabul edilir.

WordPress'te INP Puanımı Nasıl İyileştirebilirim?

WordPress'te INP puanınızı iyileştirmek birkaç adımı içerir. Web sitesi sahipleri arka plan işlemlerini optimize edebilir, JavaScript'i küçültebilir ve sitelerinin güncel olduğundan emin olabilir.

Geliştiriciler, bir yükleme animasyonu göstermek gibi kullanıcı eylemleri için anında görsel geri bildirim sağlamak üzere kodu optimize ederek ve ağır görevleri erteleyerek önemli bir etki yaratabilirler.

WordPress Performansını İyileştirme Üzerine Uzman Rehberleri

Bu öğreticinin WordPress'te Google INP puanınızı nasıl iyileştireceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca WordPress performansını iyileştirmeyle ilgili diğer bazı makaleleri de görmek isteyebilirsiniz:

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.