Web sitenizi hızlı tutmak, kullanıcı deneyimi ve SEO açısından önemlidir.
Önemli Web Verileri Google’ın girişimi, web sitenizin performansını anlamanıza yardımcı olacak bir dizi ölçüm sağlar.
Üç Önemli Web Verisi metriği şunlardır:
Bu yazı, yakın zamanda tanıtılan INP metriğine ve bunu geliştirmek için neler yapabileceğinize odaklanıyor.
Sonraki Boyayla Etkileşim Nasıl Ölçülür?
INP, web sitenizin kullanıcı etkileşimlerine (örneğin bir düğmeye tıklama) ne kadar hızlı yanıt verdiğini ölçer. Daha spesifik olarak INP, kullanıcı girişi ile tarayıcının etkileşimi işlemeyi tamamlayıp sayfada herhangi bir görsel güncellemeyi görüntülemeye hazır olması arasındaki süreyi milisaniye cinsinden ölçer.
Web sitenizin “İyi” puanı alması için bu süreci 200 milisaniyenin altında tamamlaması gerekiyor. Yarım saniyenin üzerindeki değerler “Kötü” olarak kabul edilir. Önemli Web Verileri metriğindeki zayıf bir puan, olumsuz sonuçlar doğurabilir.
Google, web sitenizdeki gerçek ziyaretçilerden INP verilerini aşağıdakilerin bir parçası olarak toplar: Chrome Kullanıcı Deneyimi Raporu (CrUX). Bu CrUX verileri sonuçta sıralamayı etkileyen şeydir.
Yavaş INP Süreleri Nasıl Belirlenir ve Düzeltilir
Next Paint ile zayıf Etkileşime neden olan faktörler genellikle karmaşık olabilir ve anlaşılması zor olabilir. Web sitenizdeki yavaş etkileşimleri anlamak ve potansiyel optimizasyonları bulmak için bu adım adım kılavuzu izleyin.
1. Yavaş INP Sürelerine Sahip Bir Sayfa Nasıl Belirlenir?
Web sitenizdeki farklı sayfaların Önemli Web Verileri puanları farklı olacaktır. Bu nedenle, yavaş bir sayfayı tanımlamanız ve ardından bu sayfanın yavaş olmasına neyin sebep olduğunu araştırmanız gerekir.
Google Arama Konsolunu Kullanma
INP puanlarınızı kontrol etmenin kolay bir yolu, Önemli Web Verileri bölümü içinde Google Arama Konsolu ve verileri daha önce tartıştığımız Google CrUX verilerine dayanarak raporlayan.
Varsayılan olarak sayfa URL’leri birçok farklı sayfayı kapsayan URL grupları halinde gruplanır. Burada dikkatli olun; Google’ın bildirdiği sorun tüm sayfalarda olmayabilir. Bunun yerine, bazı sayfalar için URL’ye özgü verilerin mevcut olup olmadığını görmek için her bir URL grubunu tıklayın ve ardından bunlara odaklanın.
Google Search Console’un ekran görüntüsü, Mayıs 2024
Gerçek Kullanıcı İzleme (RUM) Hizmetini Kullanma
Google, web sitenizdeki her sayfa için Önemli Web Verileri verilerini raporlamaz ve sorunları anlamanıza ve düzeltmenize yardımcı olmak için herhangi bir ayrıntı olmadan yalnızca ham ölçümleri sağlar.
Gerçek kullanıcı izleme, web sitenize, web sitenizin ziyaretçileriniz için ne kadar hızlı olduğunu ölçen bir analiz pasajı yükleyerek çalışır. Bu ayar yapıldıktan sonra aşağıdaki gibi bir Next Paint ile Etkileşim kontrol paneline erişebileceksiniz:
Interaction to Next Paint kontrol panelinin ekran görüntüsü, Mayıs 2024
Listede optimize etmek istediğiniz sayfaları belirleyebilir, URL’nin üzerine gelebilir ve yalnızca söz konusu sayfaya ait verilere bakmak için huni simgesini tıklayabilirsiniz.
2. Hangi Öğe Etkileşimlerinin Yavaş Olduğunu Anlayın
Aynı sayfadaki farklı ziyaretçiler farklı deneyimlere sahip olacaktır. Bunların çoğu sayfayla nasıl etkileşimde bulunduklarına bağlıdır: Bir arka plan resmine tıklarlarsa sayfanın aniden donması riski yoktur, ancak ağır işlem başlatan bir düğmeyi tıklarlarsa bu daha olasıdır. Ve bu ikinci senaryodaki kullanıcılar çok daha yüksek INP yaşayacaktır.
Buna yardımcı olmak için RUM verileri, kullanıcıların hangi sayfa öğeleriyle etkileşime girdiğine ve etkileşim gecikmelerinin ne kadar büyük olduğuna ilişkin bir döküm sağlar.
INP Elements görünümünün ekran görüntüsü, Mayıs 2024
Yukarıdaki ekran görüntüsü, bu kullanıcı etkileşimlerinin sıklığına göre sıralanmış farklı INP etkileşimlerini göstermektedir. Optimizasyonları olabildiğince kolaylaştırmak için birçok kullanıcıyı etkileyen yavaş bir etkileşime odaklanmak isteyeceksiniz.
DebugBear’da sayfa öğesine tıklayarak onu filtrelerinize ekleyebilir ve araştırmanıza devam edebilirsiniz.
3. Etkileşimlerin Yavaşlamasına En Çok Hangi INP Bileşeninin Katkıda Bulunduğunu Belirleyin
INP gecikmeleri şu şekilde ayrılabilir: üç farklı bileşen:
- Giriş Gecikmesi: Etkileşimin işlenmesini engelleyen arka plan kodu.
- İşlem Süresi: Etkileşimi doğrudan yürütmek için harcanan süre.
- Sunum Gecikmesi: Görsel güncellemelerin ekrana yansıtılması.
Yavaş INP süresine en çok hangi INP bileşeninin katkıda bulunduğuna odaklanmalı ve araştırmanız sırasında bunu aklınızda bulundurduğunuzdan emin olmalısınız.
INP Bileşenlerinin ekran görüntüsü, Mayıs 2024
Bu senaryoda, baktığınız sayfa grubu için yavaş INP süresine en büyük katkıyı İşlem Süresi sağlar, ancak bunun nedenini anlamak için daha derine inmeniz gerekir.
Yüksek işlem süresi, kullanıcı etkileşimini engelleyen ve yavaş performans gösteren kod çalıştıran bir kod olduğunu gösterir. Bunun yerine yüksek bir giriş gecikmesi gördüyseniz bu, örneğin üçüncü taraf komut dosyaları nedeniyle etkileşimin işlenmesini engelleyen arka planda görevlerin olduğu anlamına gelir.
4. Hangi Komut Dosyalarının Yavaş INP’ye Katkıda Bulunduğunu Kontrol Edin
Bazen tarayıcılar yavaş etkileşime katkıda bulunan belirli komut dosyalarını rapor eder. Web siteniz muhtemelen hem birinci taraf hem de üçüncü taraf komut dosyaları içeriyor ve bunların her ikisi de yavaş INP sürelerine katkıda bulunabilir.
DebugBear gibi bir RUM aracı bu verileri toplayabilir ve ortaya çıkarabilir. Bakmak istediğiniz asıl şey, çoğunlukla kendi web sitesi kodunuzu mu yoksa üçüncü taraf kodlarını mı gördüğünüzdür.
INP Birincil Komut Dosyası Etki Alanı Gruplamasının ekran görüntüsü, Mayıs 2024
İpucu: “Yok” olarak işaretlenmiş bir komut dosyası veya kaynak kodu işlevi gördüğünüzde, bu, komut dosyasının farklı bir kaynaktan geldiğini ve RUM araçlarının daha ayrıntılı bilgi yakalamasını engelleyen ek güvenlik kısıtlamalarına sahip olduğunu gösterebilir.
Bu artık bir hikaye anlatmaya başlıyor: Görünen o ki analizler/üçüncü taraf komut dosyaları, yavaş INP sürelerine en büyük katkıyı sağlıyor.
5. Bu Komut Dosyalarının Neden Çalıştığını Belirleyin
Bu noktada, en azından baktığınız sayfalar ve öğelerdeki INP gecikmesinin çoğunun üçüncü taraf komut dosyaları nedeniyle olduğuna dair artık güçlü bir şüpheniz var. Ancak bunların genel izleme komut dosyaları olup olmadığını veya etkileşimi yönetmede gerçekten bir rolleri olup olmadığını nasıl anlarsınız?
DebugBear, kodun neden çalıştığını görmeye yardımcı olan, INP Birincil Komut Dosyası Çağırıcı dökümü adı verilen bir döküm sunar. Bu biraz ağız dolusu bir durum; bir etkileşimi yavaşlatmak için birden fazla farklı komut dosyası kullanılabilir ve burada en büyük katkıda bulunanı görüyorsunuz. “Invoker”, tarayıcının bu kodun çalışmasına neyin sebep olduğu hakkında rapor ettiği bir değerdir.
INP Birincil Komut Dosyası Çağırıcı Gruplandırmasının ekran görüntüsü, Mayıs 2024
Aşağıdaki çağırıcı adları sayfa çapındaki invoker adlarına örnektir: etkinlik sahipleri:
- tıklamada
- fare basılıyken
- işaretçi yukarı
Bunları yukarıdaki ekran görüntüsünde görebilirsiniz; bu, analiz komut dosyasının sayfanın herhangi bir yerindeki tıklamaları izlediğini gösterir.
Buna karşılık, sayfadaki belirli bir öğeye ilişkin olay işleyicilerini belirten buna benzer çağırıcı adları gördüyseniz:
- .load_more.onclick
- #logo.onclick
6. Belirli Sayfa Görünümlerini Gözden Geçirin
Şu ana kadar gördüğünüz verilerin çoğu bir araya getirildi. Bu örnekte yavaş INP’ye neyin sebep olduğu hakkında kesin bir sonuca varmak için artık tek tek INP olaylarına bakmanın zamanı geldi.
DebugBear gibi gerçek kullanıcı izleme araçları genellikle belirli kullanıcı deneyimlerini gözden geçirmenin bir yolunu sunar. Örneğin hangi tarayıcıyı kullandıklarını, ekranlarının ne kadar büyük olduğunu ve hangi öğenin en yavaş etkileşime yol açtığını görebilirsiniz.
DebugBear Gerçek Kullanıcı İzleme’deki Sayfa Görünümünün ekran görüntüsü, Mayıs 2024
Daha önce de belirtildiği gibi, birden fazla komut dosyası genel yavaş INP’ye katkıda bulunabilir. INP Komut Dosyaları bölümü, INP etkileşimi sırasında çalıştırılan komut dosyalarını gösterir:
DebugBear INP komut dosyası dökümünün ekran görüntüsü, Mayıs 2024
Neden çalıştıklarını ve tamamlanmalarının daha uzun sürmesine neyin sebep olduğunu anlamak için bu komut dosyalarının her birini daha ayrıntılı olarak inceleyebilirsiniz.
7. Daha Fazla Bilgi İçin DevTools Profiler’ı Kullanın
Gerçek kullanıcı izleme araçlarının çok sayıda veriye erişimi vardır, ancak performans ve güvenlik nedeniyle mevcut verilerin neredeyse tamamına erişemezler. Bu yüzden şunu kullanmak da iyi bir fikirdir: Chrome Geliştirme Araçları sayfa performansınızı ölçmek için.
DevTools’ta INP’de hata ayıklama tarayıcının daha önce tanımladığınız yavaş etkileşimlerden birini nasıl işlediğini ölçebilirsiniz. DevTools daha sonra tarayıcının etkileşimi yönetmek için zamanını tam olarak nasıl harcadığını gösterir.
Bu Sorunu Nasıl Çözebilirsiniz?
Bu örnekte siz veya geliştirme ekibiniz bu sorunu şu şekilde çözebilirsiniz:
- Komut dosyalarını optimize etmek için üçüncü taraf komut dosyası sağlayıcıyla birlikte çalışmak.
- Web sitesi için gerekli değilse betiğin kaldırılması veya alternatif bir sağlayıcı bulunması.
- Kendi kodunuzun komut dosyasıyla nasıl etkileşime gireceğini ayarlama
Yüksek Giriş Gecikmesi Nasıl Araştırılır
Önceki örnekte INP zamanının çoğu, etkileşime yanıt olarak kodu çalıştırarak harcanıyordu. Ancak çoğu zaman, bir kullanıcı etkileşimi gerçekleştiğinde tarayıcı zaten başka bir kodu çalıştırmakla meşgul olur. INP bileşenlerini araştırırken yüksek bir giriş gecikme değeri göreceksiniz.
Bu çeşitli nedenlerle gerçekleşebilir, örneğin:
- Kullanıcı, web sitesi hâlâ yüklenirken etkileşimde bulundu.
- Sayfada, örneğin devam eden bir animasyon gibi zamanlanmış bir görev çalışıyor.
- Sayfa yeni içerik yüklüyor ve oluşturuyor.
Neler olduğunu anlamak için bireysel kullanıcı deneyimlerinin çağırıcı adını ve INP komut dosyaları bölümünü inceleyebilirsiniz.
Bu ekran görüntüsünde, bir zamanlayıcının kullanıcı etkileşiminin başlangıcına denk gelen kodu çalıştırdığını görebilirsiniz.
Çalıştırılan kodu tam olarak ortaya çıkarmak için komut dosyası açılabilir:
Önceki ekran görüntüsünde gösterilen kaynak kodu, sayfada çalışan bir üçüncü taraf kullanıcı izleme komut dosyasından gelmektedir.
Bu aşamada siz ve geliştirme ekibiniz bu makalenin başlarında sunulan INP iş akışına devam edebilirsiniz. Örneğin, tarayıcı DevTools ile hata ayıklama veya destek için üçüncü taraf sağlayıcıyla iletişime geçme.
Yüksek Sunum Gecikmesi Nasıl Araştırılır
Sunum gecikmesinde hata ayıklamak, giriş gecikmesinden veya işlem süresinden daha zor olma eğilimindedir. Genellikle belirli bir komut dosyasından ziyade tarayıcı davranışından kaynaklanır. Ancak daha önce olduğu gibi, yine de belirli bir sayfayı ve belirli bir etkileşimi tanımlayarak başlıyorsunuz.
Yüksek sunum gecikmesine sahip örnek bir etkileşimi burada görebilirsiniz:
Yüksek sunum gecikmesine sahip etkileşimin ekran görüntüsü, Mayıs 2024
Kullanıcı bir form alanına metin girdiğinde bunun gerçekleştiğini görüyorsunuz. Bu örnekte, birçok ziyaretçi tarayıcının işlemesi gereken büyük miktarda metin yapıştırdı.
Burada çözüm, işlemeyi geciktirmek, kullanıcıya bir “Bekliyor…” mesajı göstermek ve ardından işlemi daha sonra tamamlamaktı. INP puanının 3 Mayıs’tan itibaren nasıl geliştiğini görebilirsiniz:
DebugBear’daki Sonraki Paint zaman çizelgesiyle Etkileşimin ekran görüntüsü, Mayıs 2024
Sonraki Paint’le Etkileşimi Geliştirmek İçin İhtiyacınız Olan Verileri Alın
Gerçek kullanıcı izlemeyi ayarlamak, kullanıcıların web sitenizi nasıl deneyimlediğini ve onu geliştirmek için neler yapabileceğinizi anlamanıza yardımcı olur.
Google’ın CrUX verileri 28 günlük bir süre boyunca toplanır; bu, bir gerileme fark etmenizin biraz zaman alacağı anlamına gelir. Gerçek kullanıcı izlemeyle web sitesindeki değişikliklerin etkisini anında görebilir ve büyük bir değişiklik olduğunda otomatik olarak uyarı alabilirsiniz.
DebugBear laboratuvar verilerini, CrUX verilerini ve gerçek kullanıcı verilerini izler. Bu şekilde, Önemli Web Verilerinizi optimize etmek için ihtiyacınız olan tüm verilere tek bir yerde sahip olursunuz.
Bu makalenin sponsoru DebugBear’dır ve burada sunulan görüşler sponsorun bakış açısını temsil etmektedir.
0 Yorumlar