Web sitenizi etkili bir şekilde denetlemek, iyileştirmek ve izlemek için Google araçlarını bir arada kullanın.
Yayınlanma tarihi: 28 Mayıs 2020
Core Web Vitals; yükleme performansı, kullanıcı girişine yanıt verme süresi ve düzen kararlılığı gibi ölçütlere göre kullanıcı deneyimini değerlendiren bir metrik grubudur.
Bu kılavuzda, web siteniz için Core Web Vitals'ı iyileştirmeye yönelik bir iş akışı ele alınacaktır. Ancak bu iş akışının nerede başlayacağı, kendi alan verilerinizi toplayıp toplamadığınıza bağlıdır. Bu sürecin nerede sona ereceği, kullanıcı deneyimi sorunlarını teşhis edip düzeltmek için Google'ın hangi araçlarını yararlı bulduğunuza bağlı olabilir.
Core Web Vitals en iyi şekilde sahada ölçülür
Core Web Vitals, kullanıcıların web sitenizi nasıl deneyimlediğini ölçmek için özel olarak tasarlanmıştır. Bunlar kullanıcı odaklı metriklerdir. Lighthouse gibi laboratuvar tabanlı araçlar, olası performans sorunlarını ve en iyi uygulamaları vurgulayan teşhis araçlarıdır. Laboratuvar tabanlı araçlar, önceden tanımlanmış belirli koşullar altında çalıştırılır ve kullanıcılarınızın deneyimlediği gerçek hayattaki Core Web Vitals ölçümlerini yansıtmayabilir.
Örneğin, Lighthouse, simüle edilmiş bir masaüstü veya mobil ortamda simüle edilmiş kısıtlamayla testler çalıştıran laboratuvar tabanlı bir araçtır. Daha yavaş ağ ve cihaz koşullarının bu tür simülasyonları, performans sorunlarını teşhis etmeye çalışırken faydalı olsa da ağ koşulları ve cihaz özelliklerindeki büyük çeşitliliğin yalnızca tek bir dilimidir. Bu nedenle, sitelerinizdeki kullanıcıların deneyimlerini yansıtmayabilir.
Lighthouse gibi laboratuvar tabanlı araçlar da genellikle web sayfasını tamamen yeni bir ziyaretçi olarak "sıfırdan yükler". Bu genellikle en yavaş yüklemedir ancak gerçek hayatta, ziyaretçiler daha önce ziyaret etmişlerse veya sitede gezinirken bazı öğeleri önbelleğe almış olabilirler. Yeni ziyaretçiler ve araçlar da çerez banner'ları veya kendilerine sunulan diğer içeriklerle siteyi farklı şekilde deneyimleyebilir.
Kısacası, laboratuvar tabanlı araçlar olası performans sorunları hakkında fikir verebilir ve hata ayıklayıp yinelemenize yardımcı olabilir ancak ziyaretçilerinizin web sitenizi gerçekte nasıl deneyimlediğini yansıtmayabilir. Gerçek performansı ölçmek için alan verilerini, performansı nasıl iyileştireceğinizi teşhis etmek için ise Lighthouse gibi laboratuvar tabanlı araçları kullanın. Lighthouse ne zaman kullanılır? bölümüne de bakın.
Google, Core Web Vitals'ı Chrome Kullanıcı Deneyimi Raporu (CrUX) aracılığıyla ölçer. Bu, gerçek Chrome kullanıcılarından toplanan herkese açık bir veri kümesidir. Bir sitenin Core Web Vitals'ını raporlayan birçok Google ve üçüncü taraf aracının temelini oluşturur.
Ancak CrUX'un bazı sınırlamaları vardır. Genellikle bir sorun olduğunda size haber verebilir ancak nedenini söylemek için genellikle yeterli veriye sahip değildir.
Mümkünse kendi alan verilerinizi toplayın
Web sitesinin sahadaki performansını iyileştirmek için en iyi veri kümesi, sizin oluşturduğunuz veri kümesidir. Bu işlem, web sitenizin ziyaretçilerinden alan verileri toplanmasıyla başlar. Bunu nasıl yapacağınız, kuruluşunuzun büyüklüğüne ve üçüncü taraf bir çözüm için ödeme yapmak mı yoksa kendi çözümünüzü mü oluşturmak istediğinize bağlıdır.
Ücretli çözümler neredeyse kesin olarak Core Web Vitals'ı (ve diğer performans metriklerini) ölçer ve genellikle elde edilen verileri incelemek için çeşitli araçlar sağlar. Önemli kaynaklara sahip büyük kuruluşlarda bu yöntem tercih edilebilir.
Ancak büyük bir kuruluşun parçası olmayabilirsiniz veya üçüncü taraf bir çözümü karşılayacak imkanlara sahip olmayabilirsiniz. Bu gibi durumlarda Google'ın web-vitals kitaplığı, tüm Web Vitals verilerini toplamanıza yardımcı olur. Ancak bu verilerin nasıl raporlanacağı, depolanacağı ve analiz edileceğinden siz sorumlu olursunuz.
Google Analytics'i zaten kullanıyor ancak kendi alan verilerinizi toplamaya başlamadıysanız web-vitals kitaplığını kullanarak sahada toplanan Web Vitals'ı Google Analytics'e gönderebilir ve verileri raporlamak için GA4'ün BigQuery Export'larını kullanabilirsiniz.
Google'ın araçlarını anlama
Kendi alan verilerinizi topluyor olsanız da olmasanız da Core Web Vitals'ı analiz etmek için kullanabileceğiniz çeşitli Google araçları vardır. Bir iş akışı oluşturmadan önce her bir araca genel bir bakış, hangi araçların sizin için en iyisi olabileceğini veya olmayabileceğini anlamanıza yardımcı olabilir.
Chrome Kullanıcı Deneyimi Raporu (CrUX)
Daha önce de belirtildiği gibi CrUX, milyonlarca web sitesinden gerçek Google Chrome kullanıcılarının bir segmentinden toplanan alan verilerinin herkese açık bir veri kümesidir. Yeterli trafiğe sahip web siteleri için Core Web Vitals metriklerini ve diğer metrikleri içerir.
CrUX, kaynak düzeyinde aylık BigQuery veri kümesi olarak veya URL ya da kaynak düzeyinde günlük API olarak kullanılabilir. Bunun için URL veya kaynağın CrUX veri kümesinde yeterli örneğe sahip olması gerekir. CrUX verilerine, hem programatik erişim hem de kullanıcıların kullanabileceği görsel araçlar için çeşitli CrUX araçları aracılığıyla erişilebilir.
CrUX ne zaman kullanılır?
Kendi alan verilerinizi toplasanız bile CrUX yine de faydalıdır. CrUX, Chrome kullanıcılarının bir alt kümesini temsil etse de web sitenizin alan verilerini karşılaştırarak CrUX verileriyle nasıl uyumlu olduğunu görmek faydalı olacaktır. Her birinin avantajları ve dezavantajları vardır. Bu da farklılıklara yol açabilir. Web siteniz için hiç alan verisi toplamıyorsanız CrUX, web sitenizin veri kümesinde temsil edilmesi koşuluyla üst düzey bir genel bakış sağlamak için özellikle değerlidir.
CrUX'u doğrudan veya başka bir araçla (aşağıda belirtilenler dahil) kullanabilirsiniz. CrUX veri kümesini doğrudan BigQuery veya API kullanarak kullanmak, diğer araçlarda gösterilmeyen verileri (ör. ülke düzeyindeki veriler genellikle diğer araçlarda kullanılamaz) veya CrUX'teki ek metrikleri (genellikle diğer araçlarda gösterilmez) görüntülemek için kullanışlıdır.
CrUX'un kullanılmaması gereken durumlar
CrUX yalnızca Chrome kullanıcılarını ve hatta yalnızca Chrome kullanıcılarının bir alt kümesini temsil eder. Tam bir RUM çözümü, Chrome'da ve Web Vitals metriklerini destekleyen diğer tarayıcılarda daha fazla deneyim içerebilir.
Yeterli trafik almayan web siteleri CrUX veri kümesinde temsil edilmez. Bu durum sizin için geçerliyse CrUX bir seçenek olmayacağından web sitenizin sahada nasıl performans gösterdiğini anlamak için kendi saha verilerinizi toplamanız gerekir. Alternatif olarak, laboratuvar verilerine güvenmeniz gerekir ancak daha önce açıklandığı gibi bu verilerin temsil edici olmayabileceği sınırlamaları vardır.
CrUX'un sağladığı veriler önceki 28 günün hareketli ortalaması olduğundan, iyileştirmelerin CrUX veri kümesine yansıtılması oldukça zaman alır. Bu nedenle, geliştirme sırasında ideal bir araç değildir.
Son olarak, herkese açık bir veri kümesi olan CrUX, sunabileceği bilgi miktarı ve bu verilerin nasıl sorgulanabileceği konusunda sınırlıdır. Kendi RUM verilerinizi yakalamak, daha fazla ayrıntı (ör. LCP öğesi) toplamanıza ve sorunları belirlemek için verileri daha fazla segmentlere ayırmanıza olanak tanır. Giriş yapmış kullanıcılar, çıkış yapmış kullanıcılara göre daha iyi mi yoksa daha kötü mü Core Web Vitals deneyimi yaşıyor? LCP'si yavaş olan kullanıcıların belirli bir LCP öğesi var mı? Hangi etkileşimler yüksek FID ve INP değerlerine neden oluyor?
PageSpeed Insights (PSI)
PSI, belirli bir sayfa için CrUX'ten alan verilerini ve Lighthouse'tan laboratuvar verilerini raporlayan bir araçtır. Daha fazla bilgi için ilgili bölümleri inceleyin.
PSI ne zaman kullanılır?
PSI, hem mobil hem de masaüstü kullanıcıları için CrUX performansını sayfa düzeyinde veya kaynak düzeyinde değerlendirmek için idealdir. Bir sayfa veya sitenin Core Web Vitals'ına ilk genel bakış için iyi bir seçenektir. Ayrıca, rakipler gibi diğer sitelerin Core Web Vitals verilerini görüntülemenize de olanak tanır.
PSI, metrikler uyumluysa Core Web Vitals'ı iyileştirmek için faydalı öneriler sunan Lighthouse verilerini de sağlar. Bunların uyuşmadığı durumlarda Lighthouse önerileri daha az alakalı olabilir.
Lighthouse sunucudan çalıştırıldığı için Lighthouse'u Geliştirici Araçları'ndan çalıştırmaya kıyasla daha tutarlı bir referans oluşturabilir.
PSI'nın kullanılmaması gereken durumlar
PSI yalnızca herkese açık URL'ler için kullanılabilir. Herkese açık olmayan geliştirme sitelerinde kullanılamaz.
CrUX verileri yalnızca siteler, site popülerlik eşikleri de dahil olmak üzere belirli uygunluk ölçütlerini karşıladığında kullanılabilir. PSI, bir sayfa veya kaynak için CrUX verileri mevcut olmadığında daha az kullanışlıdır. Çünkü bu durumlarda yalnızca Lighthouse laboratuvar verilerini gösterebilir.
Benzer şekilde, test edilen belirli URL yerine yalnızca kaynak düzeyinde CrUX verileriniz varsa bu durum, kaynak düzeyindeki alan verilerini sayfa düzeyindeki laboratuvar teşhisleriyle ilişkilendirmenin kullanışlılığını da sınırlar. Kaynak düzeyinde alan verilerine sahip olmak, sitenin performansının bir özeti olarak hâlâ çok yararlı bir bilgidir ve Lighthouse denetimleri yardımcı olabilir ancak bu durumda daha dikkatli olunmalıdır.
Son olarak, CrUX'te sayfa düzeyinde veriler mevcutsa ancak Lighthouse laboratuvar verilerinden farklıysa Lighthouse'un önerileri sınırlı değere sahip olabilir. Bu durum özellikle yükleme sonrası CLS sorunlarında ve laboratuvar tabanlı denetimlerin daha az kullanışlı olduğu etkileşimle ilgili Core Web Vitals (FID ve INP) için geçerli olabilir.
Search Console
Search Console, Core Web Vitals dahil olmak üzere sitenizin arama trafiğini ve performansını ölçer. Yalnızca sitenin sahipliğini onaylamış site sahipleri tarafından kullanılabilir.
Search Console'un değerli bir özelliği, benzer sayfaları (örneğin, aynı şablonu kullanan sayfalar) tek bir grup değerlendirmesinde gruplandırmasıdır. Search Console'da, CrUX'ten alınan alan verilerine dayalı bir Core Web Vitals raporu da bulunur.
Search Console'u ne zaman kullanmalısınız?
Search Console, hem geliştiriciler hem de geliştirici olmayan rollerdeki kişiler için hem arama hem de sayfa performansını diğer Google araçlarının yapamadığı şekillerde değerlendirmek için uygundur. CrUX verilerini sunma şekli ve sayfaları benzerliğe göre gruplandırması, performans iyileştirmelerinin tüm sayfa kategorilerini nasıl etkilediği konusunda yeni bilgiler sunar.
Search Console'u kullanmamanız gereken durumlar
Search Console, sayfaları benzerliğe göre gruplandıran farklı üçüncü taraf araçları kullanan projeler veya bir web sitesi CrUX veri kümesinde temsil edilmiyorsa uygun olmayabilir.
Bir gruptaki örnek sayfalar, grubun geri kalanından farklı özelliklere sahipse sayfa gruplandırması kafa karıştırıcı olabilir. Örneğin, grup genel olarak belirli Core Web Vitals'ta başarısız olurken örnek sayfaların tümü aynı Core Web Vitals'ı geçiyor gibi görünebilir. Bu durum, bir grupta genişlemeli veya nadiren ziyaret edilen sayfalar olduğunda ortaya çıkabilir. Bu sayfalar, önbelleğe alınma olasılıkları daha düşük olduğundan daha yavaş yüklenebilir. Genişlemeli anahtar kelimelerde bu sayfalardan yeterli sayıda olduğunda grubun genel geçme oranını etkileyebilirler.
Deniz Feneri
Lighthouse, sayfa performansını iyileştirmek için özel fırsatlar sunan bir laboratuvar aracıdır. Lighthouse kullanıcı işlemleri akışları, geliştiricilerin sayfa yüklemenin ötesinde performans testi için etkileşim akışlarını komut dosyası haline getirmesine de olanak tanır.
Lighthouse-CI, proje derlemeleri ve dağıtımları sırasında Lighthouse'u çalıştırarak performans regresyon testine yardımcı olan ilgili bir araçtır. Pull istekleriyle birlikte bir Lighthouse raporu sunar ve performans metriklerini zaman içinde izler.
Lighthouse ne zaman kullanılır?
Lighthouse, hem yerel hem de hazırlık ortamlarında geliştirme sırasında performans iyileştirme fırsatlarını bulmak için mükemmel bir araçtır. Lighthouse CI, iyi kullanıcı deneyimlerini korumak için performans regresyon testinin gerekli olduğu hazırlık ve üretim ortamlarına derleme ve dağıtım aşamalarında da benzer şekilde faydalıdır.
Lighthouse'un kullanılmaması gereken durumlar
Lighthouse (veya Lighthouse CI), saha verilerinin yerine geçmez. Lighthouse, önceden tanımlanmış bir sayfa yüklemesindeki olası sorunları ve en iyi uygulamaları listeleyen bir teşhis aracıdır. Gösterdiği öneriler, kullanıcılarınızın deneyimlediği performansla her zaman eşleşmeyebilir.
Lighthouse, PageSpeed Insights gibi araçlar aracılığıyla üretim sitelerini teşhis etmek için kullanılabilir. Ancak Lighthouse'un, performans sorunlarını üretime ulaşmadan önce ele almak için geliştirme ve sürekli entegrasyon ortamlarında kullanılması idealdir.
Lighthouse'un sağladığı denetimler, Chrome Geliştirici Araçları'ndaki Performans panelinde bulunan "analizler" bölümünde de mevcuttur. Bu bölüm, sayfanın performansıyla ilgili daha ayrıntılı bir analiz sunar.
Chrome Geliştirici Araçları'ndaki Performans paneli
Chrome Geliştirici Araçları, Performans paneli dahil olmak üzere tarayıcı içi geliştirme araçlarından oluşan bir koleksiyondur. Performans paneli, iki "mod"dan oluşan bir laboratuvar aracıdır:
Performans paneli ilk açıldığında, Canlı Metrikler ekranında mevcut Core Web Vitals metriği gösterilir ve CrUX'ten alan verileri içe aktarılabilir. Performans sorunlarını (özellikle CLS ve INP metriklerinde görebileceğiniz yükleme sonrası sorunlar) ortaya çıkarmak için sayfayla etkileşim kurarken performansın "canlı" görünümü olarak kullanışlıdır.
İkinci olarak, Performans paneli, geliştiricilerin sayfa yükleme sırasında veya kaydedilen bir zaman diliminde tüm sayfa etkinliğinin profilini (veya izini) yakalamasına olanak tanır. Bu görünüm; ağ, oluşturma, boyama ve komut dosyası oluşturma etkinliği gibi boyutların yanı sıra bir sayfanın Core Web Vitals değerleri genelinde gözlemlediği her şey hakkında ayrıntılı bilgi sunar. Ayrıca Lighthouse tarafından sağlananlara benzer analizler de içerir.
Performans panelini ne zaman kullanmalısınız?
Performans paneli, geliştiriciler tarafından belirli bir sayfa performansıyla ilgili ayrıntılı bilgi edinmek için kullanılmalıdır.
Canlı metrikler görünümü, sayfanın mevcut performans özelliklerini hızlıca anlamak ve sayfayla etkileşim kurulurken olası sorunları tespit etmek için kullanılabilir.
İzleme görünümü, özellikle INP'yi etkileyen yanıt verme hızı sorunlarını ayıklamak için kullanışlıdır. Yavaş yanıt veren bir etkileşim tanımlanıp tekrarlanabilir hale geldikten sonra Performans paneli, sorunu anlamaya yardımcı olmak için tarayıcıda neler olup bittiğiyle ilgili çok sayıda veri sağlayabilir. Bu veriler arasında ana iş parçacığı engelleme, JavaScript çağrı yığınları ve oluşturma çalışmaları yer alır.
Performans panelinin kullanılmaması gereken durumlar
Performans paneli, öncelikle laboratuvar verileri sağlayan bir geliştirici aracıdır ancak CrUX'ten bazı alan bağlamları da içerir. Saha verilerinin yerini tutmaz.
İzleme görünümü çok sayıda hata ayıklama bilgisi içerir. Bu nedenle, acemi geliştiriciler veya geliştirici olmayan rollerdeki kişiler için anlaşılması zor olabilir. Ancak panelin açıldığı canlı metrikler görünümü, tüm ayrıntılara ihtiyaç duymayanlar için kullanımı daha kolay bir arayüz sunarak bu sorunu çözer.
Web sitenizin Core Web Vitals verilerinin sağlıklı kalmasını sağlayacak üç adımlı bir iş akışı
Kullanıcı deneyimini iyileştirmeye çalışırken bu süreci sürekli bir döngü olarak düşünmek en iyisidir. Core Web Vitals ve diğer performans metriklerini iyileştirmek için şu yaklaşımı kullanabilirsiniz:
- Web sitesinin durumunu değerlendirme ve sorunları belirleme
- Hata ayıklama ve optimizasyon yapma
- Gerilemeleri yakalamak ve önlemek için sürekli entegrasyon araçlarıyla izleme yapın.
1. adım: Web sitesinin durumunu değerlendirme ve iyileştirme fırsatlarını belirleme
Web sitesinin durumunu değerlendirmek için alan verileriyle başlamak en iyisidir.
- Kaynaktaki genel Core Web Vitals deneyim metriklerini ve tek bir URL ile ilgili belirli bilgileri görüntülemek için PageSpeed Insights'ı kullanın.
- Search Console, sayfa gruplandırma özelliğinin sitenizde iyi çalıştığı durumlarda iyileştirilmesi gereken sayfaları belirlemek için yararlı olabilir.
- RUM verileriniz varsa bu veriler genellikle sorunlu belirli sayfaları veya trafik segmentlerini belirlemek için en iyi seçenektir.
İster kendi topladığınız alan verilerini ister CrUX verilerini analiz edin, bu ilk adım çok önemlidir. Saha verileri toplamıyorsanız CrUX verileri size yol göstermek için yeterli olabilir. Ancak web sitenizin veri kümesinde temsil edilmesi gerekir.
PageSpeed Insights ile site performansını analiz etme
PageSpeed Insights, son 28 günlük kullanıcı deneyimi verilerini kapsayan CrUX verilerini 75. yüzdelik dilimde gösterir. Yani kullanıcı deneyimlerinin %75'i belirli bir metrik için belirlenen eşiği karşılıyorsa deneyim "iyi" olarak kabul edilir.
Performansını incelemek istediğiniz belirli bir sayfa varsa o sayfayı kullanın. Optimizasyona ilk başladığınızda sitenin genel görünümünü incelemek için ana sayfadan başlayabilirsiniz. Ana sayfa, genellikle birçok sitedeki en popüler sayfalardan biridir.
Başlangıçta PSI'nin Gerçek kullanıcılarınızın deneyimleri bölümüne odaklanın. Verilerin en fazla dört görünümünü görürsünüz: girilen URL ve tüm kaynak için mobil ve masaüstü. Bunları karşılaştırın ve aralarındaki farkları görün. Mobil cihazlar, daha az kararlı ağ koşullarında çalışan ve kaynakları daha kısıtlı cihazlar olduğundan genellikle masaüstü cihazlara göre daha düşük performans gösterir. URL ve kaynak verileri önemli ölçüde farklıysa nedenini anlamaya çalışın: Ana sayfalar genellikle ziyaret edilen ilk sayfalardır (yani açılış sayfası). Bu nedenle, kaynak kullanıcılar önceden hazırlanmamış bir tarayıcı önbelleğinin tüm yükünü üstlendiğinden kaynaktan daha yavaş olabilir. Paylaşılan öğeler önbelleğe alınacağından sonraki sayfalar muhtemelen daha hızlı yüklenir ve toplam kaynak düzeyindeki veriler azalır.
PSI ayrıca üç Core Web Vitals metriğinin (LCP, CLS ve INP) yanı sıra teşhis amaçlı TTFB ve FCP metriklerini de gösterir. Core Web Vitals'dan başarısız olan var mı ve ne kadar başarısız? Bu sayede, çalışmalarınızı nereye yoğunlaştırmanız gerektiğini görebilirsiniz.
Bu sayılar arasındaki ilişkileri, özellikle de LCP için anlayın. Bu örnekte olduğu gibi LCP yavaşsa bu metriğin her ikisi de ara hedefi olan TTFB ve FCP'ye bakın. Bu örnekte, 1,8 saniyelik bir TTFB'miz var. Bu da iyi LCP için önerilen 2,5 saniyelik eşiği karşılamayı çok zorlaştırır. Bu durum, yavaş bir arka uç (sunucu sorunları veya CDN eksikliği), daha yavaş ağlar ya da ilk HTML baytlarını geciktiren yönlendirmeler olduğunu gösterir. Daha fazla bilgi için TTFB'yi optimize etme kılavuzuna bakın. FCP'nin bir saniye daha sürmesi, ağların daha yavaş olduğunu gösterebilir. Bu örnekte LCP, FCP'den çok sonra gerçekleşmiyor. Bu da sayfa yüklendikten sonra LCP kaynağının iyi optimize edildiğini gösteriyor. CrUX artık kaynak türleri ve alt bölümlerde daha fazla teşhis bilgisi göstererek LCP sorunlarını teşhis etmenize de yardımcı oluyor.
CLS için CrUX CLS ve Lighthouse CLS puanlarına bakarak bunun bir yükleme CLS sorunu (Lighthouse'un yakalayıp tavsiyede bulunacağı) mı yoksa Lighthouse'un yakalayamayacağı bir yükleme sonrası CLS sorunu mu olduğunu anlayın. Daha fazla bilgi için CLS'yi optimize etme kılavuzuna bakın.
Duyarlılık için INP puanlarına bakın. İlk sayfa yüklemesi sırasında çok fazla JavaScript işleme işlemi yapılıp yapılmadığını görmek için Lighthouse'taki TBT denetimlerine bakın. Bu durum, INP'yi etkileyebilir. INP, iyileştirilmesi zor bir metrik olabilir. Bu nedenle, daha fazla bilgi için INP'yi optimize etme kılavuzuna bakın.
Search Console'da düşük performans gösteren sayfaları belirleme
PSI, test etmek istediğiniz belirli bir URL veya sitenin tamamı olduğunda kullanışlıdır. Search Console ise çalışmalarınızı belirli sayfa türlerine yönlendirmenize yardımcı olabilir. Bu, özellikle birçok sayfa ortak temaları veya teknolojileri paylaşıyorsa ve Search Console bunları başarıyla tanımlayabiliyorsa kullanışlıdır.
Search Console'daki Core Web Vitals raporu, web sitenizin performansının genel görünümünü gösterir ancak dikkatinizi gerektiren belirli sayfaları ayrıntılı olarak inceleyebilirsiniz. Search Console ile şunları da yapabilirsiniz:
- İyileştirilmesi gereken sayfa gruplarını ve iyi bir kullanıcı deneyimi sunan sayfa gruplarını ayrı ayrı belirleyin.
- Duruma, metriğe ve benzer web sayfalarından oluşan gruplara (ör. bir e-ticaret web sitesindeki ürün ayrıntıları sayfaları) göre gruplandırılmış URL'ye göre performans hakkında ayrıntılı veriler elde edin.
- Hem mobil hem de masaüstü için her kullanıcı deneyimi kalitesi kategorisindeki URL'leri gruplandıran ayrıntılı raporlar alın.
İnceleyeceğiniz belirli sayfaları belirledikten sonra, bu sayfalarla ilgili sorunları daha iyi anlamak için PSI'yı daha önce açıklandığı şekilde kullanabilirsiniz.
2. adım: Hata ayıklama ve optimizasyon
1. adımda, performans iyileştirmesi gerektiren sayfaları ve iyileştirmek istediğiniz Core Web Vitals metriklerini belirlemiş olmanız gerekir. Sorunu belirlemek için temel nedeni anlamak üzere daha fazla bilgi edinmek amacıyla Google araçlarını kullanabilirsiniz.
- Sayfayla ilgili üst düzey rehberlik için Lighthouse denetimlerine bakın.
- Önemli Web Verileri'ni gerçek zamanlı olarak analiz etmek için Performans paneli canlı metrikler görünümünü kullanın.
- Performans sorunlarını ayıklamak ve kod değişikliklerini test etmek için Performans paneli izlemeyi kullanın.
Daha ayrıntılı bilgi için aşağıdaki kılavuzları inceleyin:
Lighthouse ile fırsatları keşfetme
PageSpeed Insights, Lighthouse'u sizin için çalıştırır. Lighthouse'u Chrome Geliştirici Araçları'ndan da çalıştırabilirsiniz. Bu, düzeltmeleri yerel olarak doğrulamak için kullanışlıdır ancak Performans Paneli (bir sonraki bölümde ele alınacaktır) performans sorunlarını yerel olarak belirleyip düzeltmek için daha kapsamlı bir araçtır.
Lighthouse denetiminin, çözmeye çalıştığınız sorunları (ör. yavaş LCP veya CLS sorunları) tekrarladığını doğrulamak önemlidir. Lighthouse, varsayılan olarak yalnızca sayfa yükleme sırasında kullanıcı deneyimini değerlendirir. Laboratuvar aracı olduğu için INP'yi de hariç tutar ve TBT'yi tercih eder.
Lighthouse metrikleri, çözmeye çalıştığınız soruna benzer bir sorun olduğunu gösterdiğinde denetimlerindeki zengin bilgiler, sorunları belirlemenize ve çözümler önermenize yardımcı olabilir.
Belirli bir metrikle ilgili sorunların düzeltilmesine odaklanmak için denetimleri yalnızca ilgilendiğiniz Core Web Vitals'a göre filtreleyebilirsiniz:
INP için, bu metrikleri etkileyebilecek sorunları belirlemek üzere TBT denetimlerini kullanın ancak etkileşimler olmadan Lighthouse'un teşhis edebileceği sorunların sınırlı olduğunu unutmayın.
Chrome Geliştirici Araçları'nın canlı metrikler ekranıyla gerçek zamanlı analiz yapma
Performans panelindeki Chrome Geliştirici Araçları canlı metrikler ekranı, sayfa yükleme sırasında ve bir sayfaya göz atarken Core Web Vitals'ı gerçek zamanlı olarak gösterir. Bu nedenle, INP'nin yanı sıra yüklemeden sonra gerçekleşen düzen kaymalarını da yakalayabilir. Her metrikle ilgili daha ayrıntılı bilgi de görebilirsiniz:
Bu görünüm, performans sorunlarını belirlemeye yardımcı olacak birçok yararlı bilgi sağlar ve hatta CrUX'ten alan bilgilerini alabilir. Daha fazla bilgi için izleme ile ayrıntılara gidebilirsiniz.
Performans paneliyle ayrıntılı inceleme yapma
Chrome Geliştirici Araçları'ndaki Performans paneli, kaydedilen bir süre boyunca tüm sayfa davranışlarının profilini (veya izini) kaydetmenize olanak tanır.
Performans analizlerine Analizler yan panelinden erişebilirsiniz. Bu raporda, mevcut olduğunda alan değerleriyle birlikte Core Web Vitals metrikleri de gösterilir.
Düzen Kaymaları kanalı, düzen kaymalarını vurgular. Bu kanalı tıkladığınızda, CLS'de hata ayıklamak için kaydırılan öğeler hakkında daha fazla bilgi edinebilirsiniz.
LCP gibi önemli zamanlamalar, izin alt kısmındaki Zamanlamalar bölümünde gösterilir. Daha fazla bilgi için bunları tıklayın.
Uzun süren görevler (INP sorunlarına yol açabilir) de flame grafiğinde kırmızı üçgenlerle vurgulanır.
Bu özellikler ve Performans panelinin diğer bölümlerindeki bilgiler, düzeltmelerin bir sayfanın Core Web Vitals değerleri üzerinde herhangi bir etkisi olup olmadığını belirlemenize yardımcı olabilir.
Saha verilerinde Core Web Vitals ile ilgili hata ayıklama
Laboratuvar araçları, kullanıcılarınızı etkileyen tüm Core Web Vitals sorunlarının nedenini her zaman belirleyemez. Laboratuvar verilerinin dikkate alamadığı faktörleri hesaba kattığı için kendi alan verilerinizi toplamanız çok önemlidir.
Daha fazla bilgi için Saha performansında hata ayıklama başlıklı makaleyi inceleyin.
3. adım: Değişiklikleri izleyin
Sorunları düzelttikten sonra, düzeltmelerin gerekli etkiyi sağladığından ve yeni sorunların Core Web Vitals'ınızı etkilemediğinden emin olmanız gerekir. Bu, performans sorunlarının üretime geçmesini önlemek için geliştirici iş akışının bir parçası olarak performans sorunlarının izlenmesini ve bunun gerçekleştiğinden emin olmak için alan verilerinin düzenli olarak izlenmesini gerektirir.
Sürekli entegrasyon (CI) ortamlarında performans taleplerini izleme
Lighthouse-CI, kodda performans düşüşlerini önlemek için kod kaydetme işlemlerinde Lighthouse denetimlerini otomatik olarak çalıştırmanıza olanak tanır. Bu, performans zamanlamalarını (değişkenliğe tabidir) veya yalnızca performans denetimlerini kontrol ederek koddaki kötü uygulamaları önlemek için bir linting aracı olarak kullanılabilir.
Alan verileriyle web sitesi sağlık trendlerini görüntüleme
Tüm performans sorunlarını üretim aşamasına geçmeden önce tespit edip düzeltmeyi hedeflemeniz gerekir. Ancak gözden kaçan sorunları bulmak için RUM kullanarak alan verilerinizi izlemeniz de önemlidir. Bu konuda yardımcı olabilecek birçok ticari RUM ürünü vardır. web-vitals JavaScript kitaplığı, bir web sitesinin alan verisi toplama işlemini otomatikleştirebilir ve isteğe bağlı olarak bu verileri özel kontrol panellerini ve uyarı sistemlerini desteklemek için kullanabilir.
RUM çözümü olmayan sitelerde, alan verilerinin temel trend analizi için çeşitli CrUX araçlarını kullanabilirsiniz.
Sonuç
Hızlı ve keyifli kullanıcı deneyimleri sunmak için performansı önceliklendiren bir yaklaşım benimsemek ve ilerleme kaydedilmesini sağlayacak bir iş akışı uygulamak gerekir. Denetleme, hata ayıklama ve izleme için doğru araçlar ve süreçler sayesinde mükemmel kullanıcı deneyimleri oluşturabilir ve iyi Core Web Vitals için tanımlanan eşiklerin içinde kalabilirsiniz.