Web sitenizi etkili bir şekilde denetlemek, iyileştirmek ve izlemek için Google araçlarını birleştirin.
Yayınlanma tarihi: 28 Mayıs 2020
Core Web Vitals, yükleme performansı, kullanıcı girişine yanıt verme ve düzen kararlılığı gibi ölçütlere göre kullanıcı deneyimini değerlendiren bir grup metriktir.
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 başlangıç noktası, kendi alan verilerinizi toplayıp toplamadığınıza bağlıdır. Bu süreç, kullanıcı deneyimi sorunlarını teşhis etme ve düzeltme konusunda Google'ın hangi araçlarını faydalı bulduğunuza bağlı olarak değişebilir.
Core Web Vitals en iyi şekilde sahada ölçülür
Önemli Web Verileri, kullanıcıların web sitenizdeki deneyimini ölçmek için özel olarak tasarlanmıştır. Bu veriler 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, belirli ve önceden tanımlanmış 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, masaüstü veya mobil ortamda simüle edilmiş sınırlama ile testler yürüten 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 bir bölümünü temsil eder. Bu nedenle, sitelerinizdeki kullanıcıların deneyimlerini yansıtmayabilir.
Lighthouse gibi laboratuvar tabanlı araçlar da genellikle bir web sayfasını tamamen yeni bir ziyaretçi olarak "soğuk yükleme" yapar. Bu genellikle en yavaş yüklemedir ancak gerçek hayatta ziyaretçiler daha önce siteyi ziyaret etmişlerse veya siteye göz atıyorlarsa bazı öğeler önbelleğe alınmış olabilir. Yeni ziyaretçiler ve araçlar da siteyi farklı şekilde deneyimleyebilir. Bu ziyaretçilere çerez banner'ları veya başka içerikler gösterilebilir.
Kısacası, laboratuvar tabanlı araçlar olası performans sorunları hakkında fikir verip hata ayıklama ve yineleme yapmanıza yardımcı olsa da ziyaretçilerinizin web sitenizi nasıl deneyimlediğini tam olarak yansıtmayabilir. Gerçek dünyadaki performansı ölçmek için alan verilerini, performansı iyileştirme konusunda teşhis yapmak için ise Lighthouse gibi laboratuvar tabanlı araçları kullanın. Lighthouse'u ne zaman kullanmalısınız? bölümüne de göz atın.
Google, Core Web Vitals metriklerini 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. Bu API, bir sitenin Core Web Vitals verilerini bildiren birçok Google ve üçüncü taraf aracının temelini oluşturur.
Ancak CrUX'ın sınırlamaları vardır. Genellikle sorun olduğunda sizi bilgilendirebilir ancak neden olduğunu söylemek için yeterli veriye sahip değildir.
Mümkünse kendi saha verilerinizi toplayın
Sitedeki web sitesi performansını iyileştirmek için en iyi veri kümesi, sizin oluşturduğunuz veri kümesidir. Bu, web sitenizin ziyaretçilerinden alan verileri toplamakla başlar. Bunu nasıl yapacağınız, kuruluşunuzun büyüklüğüne ve üçüncü taraf çözümü için ödeme yapmak mı yoksa kendi çözümünüzü oluşturmak mı istediğinize bağlıdır.
Ücretli çözümler neredeyse kesin olarak Core Web Vitals'ı (ve diğer performans metriklerini) ölçer ve genellikle sonuçlanan verileri incelemek için çeşitli araçlar sunar. Önemli kaynaklara sahip büyük kuruluşlar bu yöntemi tercih edebilir.
Ancak büyük bir kuruluşun veya üçüncü taraf çözümü satın alabilecek bir kuruluşun parçası olmayabilirsiniz. Bu gibi durumlarda Google'ın web-vitals kitaplığı, tüm Core Web Vitals metriklerini toplamanıza yardımcı olur. Ancak bu verilerin nasıl raporlanacağı, depolanacağı ve analiz edileceği sizin sorumluluğunuzdadır.
Google Analytics'i zaten kullanıyorsanız ancak kendi alan verilerinizi toplamaya başlamadıysanız web-vitals kitaplığını kullanarak alandaki Web Verileri'ni Google Analytics'e gönderme ve verilerle ilgili rapor oluşturmak için GA4'ün BigQuery dışa aktarma işlemlerini kullanma fırsatınız olabilir.
Google'ın araçlarını anlama
Kendi alan verilerinizi topluyor olmanızdan bağımsız olarak, Önemli Web Verileri'ni analiz etmede faydalı olabilecek çeşitli Google araçları vardır. İş akışı oluşturmadan önce her araca ilişkin üst düzey bir genel bakış, hangi araçların sizin için en iyi 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 bir grup gerçek Google Chrome kullanıcısından toplanan alan verilerinden oluşan herkese açık bir veri kümesidir. Bu raporda, yeterli trafiğe sahip web siteleri için Core Web Vitals metrikleri ve diğer metrikler yer alır.
CrUX, kaynak düzeyinde aylık BigQuery veri kümesi olarak veya bir URL ya da kaynak CrUX veri kümesinde yeterli sayıda örneğe sahipse URL ya da kaynak düzeyinde günlük API olarak kullanılabilir. CrUX verileri, hem programatik erişim hem de kullanıcılar tarafından kullanılacak görsel araçlar için çeşitli CrUX araçları aracılığıyla kullanılabilir.
CrUX ne zaman kullanılır?
Kendi alan verilerinizi toplasanız bile CrUX yine de yararlıdır. CrUX, Chrome kullanıcılarının bir alt kümesini temsil etse de web sitenizin alan verilerini CrUX verileriyle karşılaştırarak nasıl uyumlu olduğunu görmek faydalıdır. Her birinin avantajları ve dezavantajları vardır ve bu durum farklılıklara yol açabilir. Web siteniz için hiç alan verisi toplamıyorsanız CrUX, veri kümesinde web siteniz temsil ediliyorsa özellikle üst düzey bir genel bakış sunmak için değerlidir.
CrUX'u doğrudan veya aşağıda belirtilenler de dahil olmak üzere başka bir araç kullanarak kullanabilirsiniz. BigQuery veya API'yi kullanarak CrUX veri kümesini doğrudan kullanmak, diğer araçlarda gösterilmeyen verileri (ör. ülke düzeyindeki veriler genellikle diğer araçlarda kullanılamaz) göstermek veya CrUX'taki ek metrikleri (bunlar da genellikle diğer araçlarda gösterilmez) görüntülemek için yararlıdır.
CrUX'un kullanılmaması gereken durumlar
CrUX yalnızca Chrome kullanıcılarını temsil eder ve bu kullanıcılar da yalnızca Chrome kullanıcılarının bir alt kümesidir. Tam bir RUM çözümü, Chrome ve Web Vitals metriklerini destekleyen diğer tarayıcılarda daha fazla deneyim içerebilir.
Yeterli trafik almayan web siteleri CrUX veri kümesinde gösterilmez. 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 alan verilerinizi toplamanız gerekir. Alternatif olarak, laboratuvar verilerine güvenmeniz gerekir ancak bu veriler, daha önce açıklandığı gibi temsili olmayabilir.
CrUX'un sağladığı veriler, son 28 günün hareketli ortalaması olduğundan geliştirme sırasında ideal bir araç değildir. İyileştirmelerin CrUX veri kümesine yansıtılması için belirli bir süre geçmesi gerekir.
Son olarak, herkese açık bir veri kümesi olan CrUX'un kullanıma sunabileceği bilgi miktarı ve bu verilerin nasıl sorgulanabileceği sınırlıdır. Kendi RUM verilerinizi yakalayarak daha fazla ayrıntı (ör. en büyük içerik öğesi) toplayabilir ve sorunları belirlemek için verileri daha fazla segmentlere ayırabilirsiniz. Oturum açmış kullanıcılar, oturum açmamış kullanıcılara kıyasla daha iyi veya daha kötü Core Web Vitals deneyimi mi 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 Lighthouse'tan alınan laboratuvar verilerinin ve CrUX'tan alınan alan verilerinin raporunu veren bir araçtır. Daha ayrıntılı bilgi için ilgili bölümlere bakın.
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 site için Core Web Vitals'a dair ilk genel bakış için iyi bir seçenektir. Ayrıca rakipler gibi diğer sitelerin Core Web Vitals verilerini de görüntüleyebilirsiniz.
PSI, metrikler uyumluysa Core Web Vitals'ı iyileştirmek için faydalı öneriler sunan Lighthouse verilerini de sağlar. Bu durumlar eşleşmediğinde Lighthouse önerileri daha az alakalı olabilir.
Lighthouse sunucudan çalıştırıldığından, Lighthouse'u Geliştirici Araçları'ndan çalıştırmaya kıyasla daha tutarlı bir temel 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ülerliği eşikleri de dahil olmak üzere belirli uygunluk ölçütlerini karşıladığında kullanılabilir. PSI, bir sayfa veya kaynak için CrUX verileri kullanılamadığında daha az yararlıdır. 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şkilendirme açısından da faydasını sınırlar. Kaynak düzeyindeki alan verileri, sitenin performansı hakkında özet bilgi edinmek için hâlâ çok faydalıdır ve Lighthouse denetimleri yardımcı olabilir ancak bu durumda ekstra dikkatli olunmalıdır.
Son olarak, CrUX'ta 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ı ve laboratuvar tabanlı denetimlerin daha az yararlı olduğu etkileşim Core Web Vitals'leri (FID ve INP) için geçerli olabilir.
Search Console
Search Console, Önemli Web Verileri de dahil olmak üzere sitenizin arama trafiğini ve performansını ölçer. Bu özellik 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 toplamasıdır. Search Console'da, CrUX'taki 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 kullanıcılar için uygundur. Bu araç, diğer Google araçlarının yapamadığı şekilde hem arama hem de sayfa performansını değerlendirmenize olanak tanır. CrUX verilerini sunma ve sayfaları benzerliğe göre gruplandırma şekli, performans iyileştirmelerinin sayfa kategorilerinin tamamını nasıl etkilediğine dair yeni bir analiz sunar.
Search Console'un kullanılmaması gereken durumlar
Search Console, sayfaları benzerliğe göre gruplandıran farklı üçüncü taraf araçların kullanıldığı projeler için veya bir web sitesi CrUX veri kümesinde temsil edilmiyorsa uygun olmayabilir.
Bir gruptaki örnek sayfaların grubun geri kalanından farklı özelliklere sahip olması durumunda sayfa gruplandırma da kafa karıştırıcı olabilir. Örneğin, grup genel olarak belirli Core Web Vitals testlerini geçemezken örnek sayfaların tamamı aynı Core Web Vitals testlerini geçiyor gibi görünebilir. Bu durum, bir grup uzun kuyruk veya nadiren ziyaret edilen sayfalar içerdiğinde ortaya çıkabilir. Bu sayfalar, daha az önbelleğe alınma olasılığı nedeniyle daha yavaş yüklenebilir. Uzun kuyrukta bu sayfalardan yeterli miktarda olduğunda grubun genel geçme oranı etkilenebilir.
Deniz Feneri
Lighthouse, sayfa performansını artırmaya yönelik belirli fırsatlar sunan bir laboratuvar aracıdır. Lighthouse kullanıcı 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, performans regresyon testine yardımcı olmak için proje oluşturma ve dağıtma sırasında Lighthouse'u çalıştıran ilgili bir araçtır. Çekme istekleriyle birlikte bir Lighthouse raporu sunar ve zaman içindeki performans metriklerini izler.
Lighthouse'u ne zaman kullanmalısınız?
Lighthouse, hem yerel hem de hazırlama ortamlarında geliştirme sırasında performansı artırma fırsatlarını bulmak için mükemmel bir araçtır. Lighthouse CI, iyi bir kullanıcı deneyimi sağlamak için performans regresyon testinin gerekli olduğu hazırlama ve üretim ortamlarına yönelik derleme ve dağıtım aşamalarında da benzer şekilde faydalıdır.
Lighthouse'un kullanılmaması gereken durumlar
Lighthouse (veya Lighthouse CI) alan verilerinin yerine geçmez. Lighthouse, öncelikle önceden tanımlanmış bir sayfa yüklemesinden kaynaklanan olası sorunları ve en iyi uygulamaları listeleyen bir teşhis aracıdır. Bu araç tarafından sunulan ö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 ideal olarak, performans sorunları üretime ulaşmadan önce ele almak için geliştirme ve sürekli entegrasyon ortamlarında kullanılmalıdır.
Lighthouse'un sağladığı denetimler, Chrome Geliştirici Araçları'ndaki Performans panelinde "analizler" aracılığıyla da kullanılabilir. Bu panel, bir sayfanın performansıyla ilgili daha ayrıntılı bir analiz sağlar.
Chrome Geliştirici Araçları'ndaki Performans paneli
Chrome Geliştirici Araçları, Performans paneli de dahil olmak üzere tarayıcı içi geliştirme araçlarından oluşan bir koleksiyondur. Performans paneli, iki "moddan" oluşan bir laboratuvar aracıdır:
Performans paneli ilk açıldığında, CrUX'tan alan verilerini içe aktarma olanağıyla birlikte mevcut Core Web Vitals metriğini sağlayan bir Canlı Metrikler ekranı gösterilir. Sayfayla etkileşim kurarak performans sorunlarını (özellikle CLS ve INP metriklerinde görebileceğiniz yükleme sonrası sorunlar) ortaya çıkarmaya çalışırken 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 süre boyunca 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ı etkinliği gibi boyutlarda gözlemlediği her şeyin yanı sıra bir sayfanın Core Web Vitals metrikleri hakkında ayrıntılı bilgi sunar. Ayrıca, Lighthouse tarafından sağlananlara benzer analizler de içerir.
Performans paneli ne zaman kullanılır?
Performans paneli, geliştiriciler tarafından belirli bir sayfa performansı hakkında 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 sorunlarını ayıklamak için yararlıdır. Yetersiz yanıt veren bir etkileşim belirlenip tekrarlanabilir hale geldiğinde, Performans paneli, ana iş parçacığı engelleme, JavaScript çağrı yığınları ve oluşturma çalışması gibi tarayıcıda neler olup bittiğine dair zengin veriler sunarak sorunu anlamanıza yardımcı olabilir.
Performans paneli ne zaman kullanılmaz?
Performans paneli, öncelikle laboratuvar verileri sağlayan bir geliştirici aracıdır. Bununla birlikte, CrUX'tan alınan bazı alan bağlamlarını da içerir. Alan verilerinin yerine geçmez.
İzleme görünümü çok fazla hata ayıklama bilgisi içerir ancak bu nedenle, yeni başlayan 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ü, tam ayrıntıya ihtiyaç duymayan kullanıcılar için daha kolay kullanılan bir arayüz sağlayarak bu sorunu giderir.
Web sitenizin Core Web Vitals değerlerinin sağlıklı kalmasını sağlamak için üç adımlı iş akışı
Kullanıcı deneyimini iyileştirmek için çalışırken 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 kullanılabilir:
- Web sitesinin durumunu değerlendirin ve sorunları belirleyin.
- Hata ayıklama ve optimizasyon
- Regresyonları yakalamak ve önlemek için sürekli entegrasyon araçlarıyla izleyin.
1. adım: Web sitesinin durumunu değerlendirin ve iyileştirme fırsatlarını belirleyin
Web sitesinin durumunu değerlendirmek için alan verileriyle başlamak en iyisidir.
- Kaynak üzerindeki genel Önemli Web Verileri deneyim metriklerini ve tek bir URL ile ilgili ayrıntılı bilgileri görüntülemek için PageSpeed Insights'ı kullanın.
- Search Console, iyileştirilmesi gereken sayfaları belirlemek için yararlı olabilir. Sayfa gruplandırma özelliği, sitenizde iyi çalışır.
- RUM verileriniz varsa sorunlu belirli sayfaları veya trafik segmentlerini belirlemek için genellikle en iyi seçenek budur.
İster kendinizin topladığı alan verilerini ister CrUX verilerini analiz edin, bu ilk adım çok önemlidir. Alan verileri toplamıyorsanız web siteniz veri kümesinde temsil ediliyorsa CrUX verileri size yol göstermek için yeterli olabilir.
PageSpeed Insights ile site performansını analiz etme
PageSpeed Insights, kullanıcı deneyimi verilerinin son 28 gününü kapsayan CrUX verilerini 75. yüzdelik dilimde gösterir. Bu, kullanıcı deneyimlerinin% 75'i belirli bir metrik için belirlenen eşiği karşılıyorsa deneyimin "iyi" olarak kabul edildiği anlamına gelir.
Performansını incelemek istediğiniz belirli bir sayfa varsa onu kullanın. Optimizasyona ilk başladığınızda bir siteye genel olarak bakmak için ana sayfadan başlamak isteyebilirsiniz. Ana sayfa, genellikle birçok sitede en popüler sayfalardan biridir.
Başlangıçta PSI'nın gerçek kullanıcılarınızın nelerle karşılaştığı bölümüne odaklanın. Verilerin en fazla dört görünümünü görürsünüz: girilen URL ve kaynağın tamamı için mobil ve masaüstü. Bunları karşılaştırarak aralarındaki farkları görebilirsiniz. Mobil cihazlar, masaüstü cihazlara kıyasla genellikle daha az performanslıdır. Bunun nedeni, mobil cihazların daha az kaynakla çalışması ve potansiyel olarak daha az kararlı ağ koşullarında çalışmasıdır. URL ve kaynak verileri önemli ölçüde farklıysa bunun 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 etkisini yaşadığı için daha yavaş olabilir. Paylaşılan öğeler önbelleğe alınacağından sonraki sayfalar daha hızlı yüklenir ve bu durum, toplu kaynak düzeyindeki verileri azaltı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 metriklerinden herhangi biri başarısız oluyor mu ve ne kadar başarısız oluyor? Bu, çabalarınızı nereye yoğunlaştıracağınızı gösterir.
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 ara hedefleri olan TTFB ve FCP'ye bakın. Bu örnekte TTFB 1,8 saniye. Bu da iyi bir LCP için önerilen 2,5 saniyelik eşiği karşılamayı çok zorlaştırıyor. 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 için de bir saniye daha gerekir. Bu da yine ağların 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ürlerinde ve alt bölümlerde daha fazla teşhis bilgisi de gösteriyor. Bu da LCP sorunlarını teşhis etmenize yardımcı oluyor.
CLS için, bunun bir yükleme CLS sorunu (Lighthouse'un yakalayıp tavsiyede bulunacağı) mu yoksa Lighthouse'un yakalamayacağı bir yükleme sonrası CLS sorunu mu olduğunu görmek için CrUX CLS ve Lighthouse CLS puanlarına bakın. Daha fazla bilgi için CLS'yi optimize etme kılavuzuna bakın.
Yanıt verme hızı için INP puanlarına bakın. İlk sayfa yükleme sırasında çok fazla JavaScript işleme olup olmadığını görmek için Lighthouse'taki TBT denetimlerine bakın. Bu durum, INP'yi etkileyebilir. INP'yi iyileştirmek zor olabilir. Bu nedenle, daha fazla bilgi için INP'yi optimize etme kılavuzuna bakın.
Search Console'da düşük performanslı sayfaları belirleme
PSI, test etmek istediğiniz belirli bir URL veya site genelinde olduğunda yararlı olsa da Search Console, çalışmalarınızı belirli sayfa türlerine yönlendirmenize yardımcı olabilir. Bu özellik, özellikle birçok sayfa ortak temalar veya teknolojiler paylaşıyorsa ve Search Console bunları başarıyla tanımlayabiliyorsa yararlıdır.
Search Console'daki Core Web Vitals raporu, web sitenizin performansıyla ilgili genel bir görünüm sunar ancak yine de dikkat edilmesi gereken belirli sayfaları ayrıntılı olarak inceleyebilirsiniz. Search Console ile şunları da yapabilirsiniz:
- İyileştirilmesi gereken ve iyi bir kullanıcı deneyimi sunan tek tek sayfa gruplarını belirleyin.
- Duruma, metriğe ve benzer web sayfalarının gruplarına (ör. bir e-ticaret web sitesindeki ürün ayrıntıları sayfaları) göre gruplandırılmış URL'ye göre performansla ilgili ayrıntılı veriler alın.
- Hem mobil hem de masaüstü için URL'leri her kullanıcı deneyimi kalitesi kategorisine göre gruplandıran ayrıntılı raporlar alın.
İnceleyeceğiniz belirli sayfalar olduğunda, bu sayfalarla ilgili sorunlar hakkında daha fazla bilgi edinmek için daha önce açıklandığı şekilde PSI'yı kullanabilirsiniz.
2. adım: Hata ayıklama ve optimizasyon
1. adımda, performans iyileştirmesi gerektiren sayfaları ve hangi Core Web Vitals metriklerini iyileştirmek istediğinizi belirlemiş olmanız gerekir. Sorunu belirlemek için temel nedeni anlamanıza yardımcı olacak daha fazla bilgi edinmek üzere Google araçlarını kullanabilirsiniz.
- Lighthouse denetimlerine bakarak sayfa hakkında genel bilgiler edinin.
- Core Web Vitals'ı 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ı talimatlar için aşağıdaki kılavuzlara bakın:
Lighthouse ile fırsatları keşfedin
PageSpeed Insights, Lighthouse'u sizin için çalıştırır. Lighthouse'u Chrome Geliştirici Araçları'ndan da çalıştırmak mümkündür. Bu, düzeltmeleri yerel olarak doğrulamak için yararlı olsa da Performans Paneli (bir sonraki bölümde ele alınmıştır), performans sorunlarını yerel olarak belirlemek ve düzeltmek için daha kapsamlı bir araçtır.
Önemli bir nokta, Lighthouse denetiminin çözmeye çalıştığınız sorunları (örneğin, yavaş LCP veya CLS sorunları) tekrarladığını doğrulamaktır. Lighthouse, varsayılan olarak yalnızca sayfa yükleme sırasındaki kullanıcı deneyimini değerlendirir. Bu bir laboratuvar aracı olduğundan TBT lehine INP'yi de hariç tutar.
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 anlık olarak analiz yapma
Performans panelindeki Chrome Geliştirici Araçları canlı metrikler ekranı, sayfa yükleme ve sayfaya göz atma sırasında Core Web Vitals'ı gerçek zamanlı olarak gösterir. Bu nedenle, yükleme işleminden sonra gerçekleşen düzen kaymalarının yanı sıra INP'yi de yakalayabilir. Her metrik hakkında daha ayrıntılı bilgi de görebilirsiniz:
Bu görünüm, performans sorunlarını belirlemeye yardımcı olacak birçok faydalı bilgi sunar ve hatta CrUX'tan alan bilgilerini çekebilir. Daha fazla bilgi için izleme ile ayrıntılı inceleme yapabilirsiniz.
Performans paneliyle ayrıntılı analiz 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 bölümde, Core Web Vitals metrikleri ve varsa bu metriklerin alan değerleri de gösterilir.
Düzen Kaymaları izi, düzen kaymalarını vurgular. Bunları tıkladığınızda ise CLS'de hata ayıklama için kayan öğeler hakkında daha fazla ayrıntı gösterilir.
LCP gibi önemli zamanlamalar, izlemenin alt kısmında bulunan Zamanlamalar bölümünde gösterilir. Daha fazla bilgi için bunları tıklayın.
Uzun görevler (INP sorunlarına yol açabilir) de alev 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'i üzerinde herhangi bir etkisi olup olmadığını belirlemenize yardımcı olabilir.
Core Web Vitals'ta sahada hata ayıklama
Laboratuvar araçları, kullanıcılarınızı etkileyen tüm Core Web Vitals sorunlarının nedenini her zaman belirleyemez. Kendi saha verilerinizi toplamanın bu kadar önemli olmasının bir nedeni de laboratuvar verilerinin dikkate alamadığı faktörleri hesaba katmasıdır.
Daha fazla bilgi için Gerçek hayattaki performansı hata ayıklama başlıklı makaleyi inceleyin.
3. adım: Değişiklikleri izleyin
Sorunları düzelttikten sonra, gerekli etkinin elde edildiğinden ve yeni sorunların Core Web Vitals metriklerinizi etkilemediğinden emin olmanız gerekir. Bu, performans sorunlarının üretime sunulmasını önlemek için geliştirici iş akışının bir parçası olarak performans sorunlarının izlenmesini ve bu durumun geçerli olduğundan emin olmak için alan verilerinin düzenli olarak izlenmesini gerektirir.
Sürekli entegrasyon (CI) ortamlarında performans isteklerini izleme
Lighthouse-CI, kod commit'lerinde otomatik olarak Lighthouse denetimleri çalıştırmanızı sağlayarak kodda performans düşüşü olmasını önler. Bu araç, performans sürelerini (değişkenliğe tabidir) veya yalnızca performans denetimlerini kontrol edebilir. Ayrıca, kodda kötü uygulamaları önlemek için bir linting aracı olarak da kullanılabilir.
Alan verileriyle web sitesi sağlığı trendlerini görüntüleme
Üretime geçmeden önce tüm performans sorunlarını yakalayıp düzeltmeyi hedeflemeniz gerekse de, gözden kaçan sorunları bulmak için RUM kullanarak alan verilerinizi izlemeniz önemlidir. Bu konuda yardımcı olabilecek birçok ticari RUM ürünü mevcuttur. 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 siteler için çeşitli CrUX araçlarını alan verilerinin temel trend analizi olarak kullanabilirsiniz.
Sonuç
Hızlı ve keyifli kullanıcı deneyimleri sağlamak için öncelikle performansa odaklanmak ve ilerleme kaydetmek için bir iş akışı benimsemek gerekir. Denetleme, hata ayıklama ve izleme için doğru araçlar ve süreçlerle mükemmel kullanıcı deneyimleri oluşturabilir ve iyi Önemli Web Verileri için tanımlanan eşiklerin içinde kalabilirsiniz.