Web sitenizi etkili bir şekilde denetlemek, iyileştirmek ve izlemek için Google araçlarını birlikte kullanın.
Yayınlanma tarihi: 28 Mayıs 2020
Core Web Vitals, kullanıcı deneyimini yükleme performansı, kullanıcı girişine yanıt verme ve düzen kararlılığı gibi ölçütlere göre 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 nerede başladığı, kendi saha verilerinizi toplayıp toplamadığınıza bağlıdır. Bu sürecin sonu, kullanıcı deneyimi sorunlarını teşhis edip düzeltmek için Google'ın hangi araçlarını yararlı bulacağınıza bağlıdır.
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ış 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 Core Web Vitals ölçümlerini yansıtmayabilir.
Örneğin Lighthouse, simüle edilmiş bir masaüstü veya mobil ortamda simüle edilmiş akış kısıtlaması ile testler çalıştıran laboratuvar tabanlı bir araçtır. Daha yavaş ağ ve cihaz koşullarını simüle eden bu tür simülasyonlar, performans sorunlarını teşhis etmeye çalışırken faydalı olsa da ağ koşullarındaki ve cihaz özelliklerindeki geniş ç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 "soğuk yükler". Bu genellikle en yavaş yüklemedir ancak gerçek hayatta ziyaretçiler daha önce ziyaret ettiyse veya siteye göz atarken bazı öğeleri önbelleğe almış olabilir. Yeni ziyaretçiler ve araçlar da çerez banner'ları veya kendilerine sunulan diğer içeriklerle siteyi farklı şekilde deneyimleyebilir.
Özetlemek gerekirse, laboratuvar tabanlı araçlar olası performans sorunlarını belirtebilir, hata ayıklamanıza ve iterasyon yapmanıza yardımcı olabilir ancak ziyaretçilerinizin kaçının web sitenizi gerçekten deneyimlediğini temsil etmeyebilir. Gerçek performansı ölçmek için alan verilerini, performansı nasıl iyileştireceğinize dair teşhisler için Lighthouse gibi laboratuvar tabanlı araçları kullanın. Lighthouse'u ne zaman kullanacağınız bölümüne de göz atı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 da sınırlamaları vardır. Genellikle sorun olduğunda ne zaman olduğunu size söyleyebilir ancak neden olduğunu söylemek için yeterli veriye sahip değildir.
Mümkünse kendi saha verilerinizi toplayın
Sahadaki web sitesi performansını iyileştirmek için en iyi veri kümesi, kendi oluşturduğunuz veri kümesidir. Bu, web sitenizin ziyaretçilerinden alan verileri toplayarak başlar. Bunu nasıl yapacağınız, kuruluşunuzun boyutuna ve üçüncü taraf çözümü için ödeme yapmak isteyip istemediğinize veya kendi çözümünüzü oluşturmak isteyip istemediğinize bağlıdır.
Ücretli çözümler, Core Web Vitals'ı (ve diğer performans metriklerini) neredeyse kesin olarak ö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 veya üçüncü taraf çözümü satın alabilecek bir kuruluşun parçası olmayabilirsiniz. Bu gibi durumlarda Google'ın web-vitals
kitaplığı, tüm Web Vitals metriklerini toplamanıza yardımcı olur. Ancak bu verilerin nasıl raporlandığı, depolandığı ve analiz edildiğinden siz sorumlu olursunuz.
Google Analytics'i zaten kullanıyorsanız ancak kendi saha verilerinizi toplamaya başlamadıysanız web-vitals
kitaplığını kullanarak sahada toplanan Web Verileri'ni Google Analytics'e gönderebilir ve veriler hakkında rapor oluşturmak için GA4'ün BigQuery dışa aktarma işlemlerini kullanabilirsiniz.
Google'ın araçlarını anlama
Kendi alan verilerinizi toplayıp toplamadığınızdan bağımsız olarak, Core Web Vitals'ı analiz etmede faydalı olabilecek çeşitli Google araçları vardır. Bir iş akışı oluşturmadan önce her araca genel bir bakış, sizin için en uygun araçların hangileri 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 verilerinden oluşan herkese açık bir veri kümesidir. Core Web Vitals metriklerini ve yeterli trafiğe sahip web siteleri için diğer metrikleri içerir.
CrUX, kaynak düzeyinde aylık bir BigQuery veri kümesi olarak veya URL ya da kaynak düzeyinde günlük API olarak kullanılabilir. Bunun için URL veya kaynakta CrUX veri kümesinde yeterli örnek bulunması gerekir. CrUX verileri, 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 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 bunların nasıl uyumlu olduğunu görebilirsiniz. Her birinin avantajları ve dezavantajları vardır ve bu da farklı sonuçlara yol açabilir. Web siteniz için hiçbir alan verisi toplamıyorsanız CrUX, web sitenizin veri kümesinde temsil edilmesi koşuluyla üst düzey bir genel bakış sunmak için özellikle değerlidir.
CrUX'i doğrudan veya başka bir araç (aşağıda belirtilenler dahil) kullanarak 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) göstermek veya genellikle diğer araçlarda gösterilmeyen CrUX'taki ek metrikleri 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 durumda bile Chrome kullanıcılarının yalnızca bir alt kümesini temsil eder. Tam bir RUM çözümü, Chrome ve Web Vitals metriklerini destekledikleri 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 olmadığı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 bu veriler, daha önce açıklandığı gibi temsili olmayabilir.
CrUX'un sağladığı veriler önceki 28 güne ait hareketli ortalama olduğundan, iyileştirmelerin CrUX veri kümesine yansıması oldukça uzun süreceği için geliştirme sırasında ideal bir araç değildir.
Son olarak, herkese açık bir veri kümesi olarak CrUX'un ne kadar bilgi sağlayabileceği ve bu verilerin nasıl sorgulanabildiği sınırlıdır. Kendi RUM verilerinizi yakalamak, daha fazla ayrıntı (ör. LCP öğesi) toplamanıza ve sorunları tespit etmek için verileri daha fazla segmentlere ayırmanıza olanak tanır. Oturum açmış kullanıcılar, oturumu kapalı kullanıcılara kıyasla 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'taki alan verilerini ve Lighthouse'taki lab verilerini raporlayan 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 mükemmel bir araçtır. Bir sayfa veya sitenin Core Web Vitals'ine ilk kez genel bakış için iyi bir seçimdir. Ayrıca rakipler gibi diğer sitelerin Core Web Vitals verilerini görüntülemenize olanak tanır.
PSI, metriklerin uyumlu olması durumunda Core Web Vitals'ı iyileştirmek için yararlı öneriler sunan Lighthouse verileri de sağlar. Bu ikisinin örtüşmediği durumlarda Lighthouse önerileri daha az alakalı olabilir.
Lighthouse sunucudan çalıştırıldığı için Lighthouse'u DevTools'dan çalıştırmaktan daha tutarlı bir temel oluşturabilir.
PSI'nin 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 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. Bu durumlarda yalnızca Lighthouse lab 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 yararlılığını da sınırlandırır. Kaynak düzeyindeki alan verilerine sahip olmak, sitenin performansının özeti olarak sahip olunması gereken çok yararlı bilgilerdir ve Lighthouse denetimleri yardımcı olabilir ancak bu durumda daha fazla 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 (FID ve INP) için ortaya çıkabilir.
Search Console
Search Console, Core Web Vitals dahil sitenizin arama trafiğini ve performansını ölçer. Yalnızca sitenin sahibi olduğunu doğrulayan site sahipleri tarafından kullanılabilir.
Search Console'un değerli özelliklerinden biri, benzer sayfaları (örneğin, aynı şablonu kullanan sayfalar) tek bir grup değerlendirmesinde gruplandırmasıdır. Search Console, CrUX'taki alan verilerine dayalı bir Core Web Vitals raporu da içerir.
Search Console'u ne zaman kullanmalısınız?
Search Console, hem geliştiricilerin hem de geliştirici olmayan rollerdeki kullanıcıların, arama ve sayfa performansını diğer Google araçlarının sunmadığı yöntemlerle değerlendirmesi için idealdir. CrUX verilerinin sunumu ve sayfaların benzerliğe göre gruplandırılması, performans iyileştirmelerinin sayfa kategorilerinin tamamını nasıl etkilediğine dair yeni bilgiler sunar.
Search Console'u ne zaman kullanmamalısınız?
Search Console, sayfaları benzerliğe göre gruplandıran farklı üçüncü taraf araçları kullanan projeler için uygun olmayabilir veya bir web sitesi CrUX veri kümesinde temsil edilmiyorsa Search Console'u kullanmanız uygun olmayabilir.
Sayfa gruplandırması, bir gruptaki örnek sayfalar grubun geri kalanından farklı özelliklere sahip olduğunda da kafa karıştırıcı olabilir. Örneğin, grup genel olarak belirli Core Web Vitals ölçümlerini geçemiyorsa ancak örnek sayfaların tümü aynı Core Web Vitals ölçümlerini geçiyorsa. Bu durum, bir grupta uzun kuyruk veya nadiren ziyaret edilen sayfalar olduğunda görülebilir. Bu sayfaların önbelleğe alınma olasılığı daha düşük olduğundan yüklemeleri daha yavaş olabilir. Uzun kuyrukta bu sayfaların yeterli hacmi olduğunda, grubun genel geçiş oranını etkileyebilirler.
Deniz Feneri
Lighthouse, sayfa performansını iyileştirmek için 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ı komut dosyası oluşturmasına da olanak tanır.
Lighthouse-CI, performans gerileme testine yardımcı olmak için proje derleme 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ırlık ortamlarında geliştirme sırasında performans iyileştirme fırsatları bulmak için mükemmel bir araçtır. Lighthouse CI, iyi kullanıcı deneyimlerini korumak için performans gerileme testinin gerekli olduğu hazırlık ve üretim ortamlarında derleme ve dağıtım aşamalarında da benzer şekilde faydalıdır.
Lighthouse'ın kullanılmaması gereken durumlar
Lighthouse (veya Lighthouse CI), alan verilerinin yerine geçmez. Lighthouse, öncelikli olarak önceden tanımlanmış bir sayfa yüklemedeki olası sorunları ve en iyi uygulamaları listeleyen bir teşhis aracıdır. Gösterdiği öneriler her zaman kullanıcılarınızın deneyimlediği performansla 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ını üretime ulaşmadan önce ele almak için geliştirme ve sürekli entegrasyon ortamlarında kullanılır.
Lighthouse'un sağladığı denetimler, Chrome Geliştirici Araçları'ndaki Performans panelindeki "Analizler" bölümünden de kullanılabilir. Bu bölümde, sayfanın performansıyla ilgili daha ayrıntılı bir analiz sunulur.
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ının bir koleksiyonudur. Performans paneli, iki "mod"dan oluşan bir laboratuvar aracıdır:
Performans paneli ilk açıldığında, mevcut Core Web Vitals metriğini gösteren bir Canlı Metrikler ekranı gösterilir. Bu ekranda, CrUX'tan alan verileri içe aktarma olanağı da sunulur. Sayfayla etkileşim kurarken performans sorunlarını tespit etmek için performansın "canlı" bir görünümü olarak kullanışlıdır. Özellikle CLS ve INP metriklerinde görebileceğiniz yükleme sonrası sorunlar için faydalıdır.
İkinci olarak, Performans paneli, geliştiricilerin sayfa yükleme sırasında veya kaydedilen bir dönemde tüm sayfa etkinliklerinin profilini (veya izini) yakalamasına olanak tanır. Bu görünüm, ağ, oluşturma, boyama ve komut dosyası etkinliği gibi boyutlar ve bir sayfanın Önemli Web Verileri gibi 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?
Geliştiriciler, belirli bir sayfanın performansı hakkında ayrıntılı bilgi edinmek için Performans panelini kullanmalıdır.
Canlı metrik 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ı gidermek için yararlıdır. Yanıt vermeyen bir etkileşim tanımlanıp tekrarlanabilir hale geldiğinde Performans paneli, ana iş parçacığı engelleme, JavaScript çağrı yığınları ve oluşturma çalışması gibi konularda tarayıcıda neler olup bittiğine dair çok sayıda veri sağlayarak sorunu anlamanıza yardımcı olabilir.
Performans panelinin kullanılmaması gereken durumlar
Performans paneli, temel olarak lab verilerini sağlayan bir geliştirici aracıdır (ancak CrUX'tan bazı alan bağlamları da içerir). Saha verilerinin yerine geçmez.
İzleme görünümü çok fazla hata ayıklama bilgisi içerir. Bu nedenle, yeni başlayan geliştiriciler veya geliştirici olmayan rollerde bulunan kullanıcılar için anlaşılması zor olabilir. Ancak panelin açıldığı canlı metrik görünümü, tüm ayrıntılara ihtiyaç duymayan kullanıcılar için daha kolay bir arayüz sunarak bu sorunu giderir.
Web sitenizin Core Web Vitals metriklerini iyi durumda tutmak için üç adımlı iş akışı
Kullanıcı deneyimini iyileştirmeye ç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 aşağıdaki yaklaşımı kullanabilirsiniz:
- Web sitesinin sağlığını değerlendirin ve sorun noktalarını belirleyin.
- Hata ayıklama ve optimizasyon
- Gerileme tespit edip önlemek için sürekli entegrasyon araçlarıyla izleme yapın.

1. adım: Web sitesinin sağlığını değerlendirin ve iyileştirme fırsatlarını belirleyin
Web sitesinin sağlığını değerlendirmek için en iyi yöntem, alan verilerinden başlamaktır.
- 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ği siteniz için iyi çalıştığında iyileştirme gerektiren sayfaları belirlemek için yararlı olabilir.
- RUM verileriniz varsa genellikle sorunlu belirli sayfaları veya trafik segmentlerini belirlemek için en iyi seçenek budur.
Kendi topladığınız alan verilerini veya CrUX verilerini analiz ediyorsanız bu ilk adım çok önemlidir. Saha verileri toplamıyorsanız web sitenizin veri kümesinde temsil edilmesi koşuluyla CrUX verileri size yol gösterebilir.
PageSpeed Insights ile site performansını analiz etme

PageSpeed Insights, son 28 güne ait kullanıcı deneyimi verilerini 75. yüzdelik dilimde kapsayan CrUX verilerini gösterir. Bu, kullanıcı deneyimlerinin% 75'i belirli bir metrik için belirlenen eşiği karşılıyorsa deneyimin "iyi" olarak değerlendirildiği anlamına gelir.
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ü görmek için ana sayfadan başlayabilirsiniz. Ana sayfa, genellikle birçok sitedeki en popüler sayfalardan biridir.
İlk olarak PSI'nin gerçek kullanıcılarınızın nelerle karşılaştığını bölümüne odaklanın. Verilerin dört görünümünü görürsünüz: Girdiğiniz URL için mobil ve masaüstü ve kaynağın tamamı. Bu iki yöntemi karşılaştırarak aralarındaki farkları görebilirsiniz. Mobil cihazlar, daha az kararlı ağ koşullarında çalışan, daha fazla kaynak kısıtlamasına sahip cihazlar olduğundan genellikle masaüstü cihazlara kıyasla 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ıdır) ve bu nedenle, kaynak kullanıcılar önlenmemiş bir tarayıcı önbelleğiyle ilgili tüm yükün altına girdiğinden daha yavaş olabilir. Paylaşılan öğeler önbelleğe alındığından ve kaynak düzeyindeki toplam veriler azaldığından sonraki sayfalar muhtemelen daha hızlı yüklenir.
PSI, üç 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'ın herhangi biri başarısız mı ve ne kadar? Bu sayede, çabalarınızı nereye yoğunlaştıracağınızı anlayabilirsiniz.
Özellikle LCP için bu sayılar arasındaki ilişkileri anlayın. LCP bu örnekte olduğu gibi yavaşsa bu metriğin aşamaları olan TTFB ve FCP'ye bakın. Bu örnekte 1,8 saniyelik bir TTFB'ye sahibiz. Bu, iyi bir LCP için önerilen 2,5 saniyelik eşiği karşılamayı çok zorlaştıracaktır. Bu durum, arka uçta yavaşlama (sunucu sorunları veya CDN eksikliği), daha yavaş ağlar veya ilk HTML baytlarını geciktiren yönlendirmeler olduğunu gösterir. Daha fazla bilgi için TTFB'yi optimize etme kılavuzunu inceleyin. FCP'nin bu süreye ek olarak bir saniye daha sürmesi, yine yavaş ağların göstergesi olabilir. Bu örnekte LCP, FCP'den kısa bir süre sonra gerçekleşiyor. Bu durum, sayfanın yüklenmesi sonrasında 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 de gösteriyor. Bu da LCP sorunlarını teşhis etmenize yardımcı olur.
CLS için, bunun bir yükleme CLS sorunu (Lighthouse'un yakalayıp tavsiyede bulunacağı) mu yoksa Lighthouse'un yakalayamayacağı bir yükleme sonrası CLS sorunu mu olduğunu görmek üzere CrUX CLS ve Lighthouse CLS puanlarına bakın. Daha fazla bilgi için CLS'yi optimize etme kılavuzunu inceleyin.
Duyarlılığı öğrenmek için INP puanlarına bakın. İlk sayfa yükleme sırasında çok fazla JavaScript işlemenin yapılıp yapılmadığını görmek için Lighthouse'taki TBT denetimlerine bakın. Bu durum, INP'yi etkileme olasılığı yüksektir. INP'yi iyileştirmek zor bir metrik olabilir. Daha fazla bilgi için INP'yi optimize etme kılavuzuna göz atın.
Search Console'da düşük performans gösteren sayfaları belirleme

PSI, test etmek istediğiniz belirli bir URL'niz veya sitenizin tamamı olduğunda yararlı olsa da Search Console, çabalarınızı belirli sayfa türlerine odaklamanıza yardımcı olabilir. Bu, özellikle birçok sayfanın ortak temaları veya teknolojileri paylaşması ve Search Console'un bunları başarılı bir şekilde tanımlayabilmesi durumunda yararlıdır.
Search Console'daki Core Web Vitals raporu, web sitenizin performansının genel görünümünü gösterir ancak dikkate alınması gereken belirli sayfalara da ayrıntılı olarak bakabilirsiniz. Search Console ile şunları da yapabilirsiniz:
- İyileştirme gerektiren ve iyi bir kullanıcı deneyimi sunan sayfa gruplarını tek tek belirleyin.
- Duruma, metriğe ve benzer web sayfalarından oluşan gruplara (ör. 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 kategorisinde gruplandıran ayrıntılı raporlar alın.
İnceleyeceğiniz belirli sayfalar belirledikten sonra, bu sayfalardaki sorunlar hakkında daha fazla bilgi edinmek için daha önce açıklandığı gibi PSI'yi 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 metriklerinden hangilerini belirlemiş olmanız gerekir. Sorunu tespit etmek için temel nedeni anlamak üzere daha fazla bilgi edinmek için Google araçlarını kullanabilirsiniz.
- Sayfayla ilgili üst düzey rehberlik almak için Lighthouse denetimlerine bakın
- Core Web Vitals'ı gerçek zamanlı olarak analiz etmek için Performans paneli canlı metrik görünümünü kullanın.
- Performans sorunlarını ayıklamak ve kod değişikliklerini test etmek için Performans paneli izleme özelliğini kullanın.
Daha ayrıntılı talimatlar için aşağıdaki kılavuzları inceleyin:
Lighthouse ile fırsatları keşfedin
PageSpeed Insights, Lighthouse'ı sizin için çalıştırır. Lighthouse'ı 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 sorunlarını yerel olarak tespit etmek ve düzeltmek için daha kapsamlı bir araç olan Performans Paneli'ni (sonraki bölümde ele alınacaktır) kullanabilirsiniz.
Lighthouse denetiminin, çözmeye çalıştığınız sorunları (ör. yavaş LCP veya CLS sorunları) yansıttığını doğrulamak önemlidir. Lighthouse, varsayılan olarak yalnızca sayfa yükleme sırasındaki kullanıcı deneyimini değerlendirir. Bir laboratuvar aracı olduğu için INP'yi hariç tutarak TBT'yi tercih eder.
Lighthouse metrikleri, çözmeye çalıştığınız soruna benzer bir sorun önerdiğinde, denetimlerindeki zengin bilgi dokümanı, sorunları tespit etmenize ve çözümler önermenize yardımcı olabilir.
Belirli bir metrikle ilgili sorunların düzeltmelerine 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şim olmadan Lighthouse'un teşhis edebilme kapasitesinin sınırlı olduğunu unutmayın.
Chrome Geliştirici Araçları 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'i gerçek zamanlı olarak gösterir. Bu nedenle, INP'nin yanı sıra yükleme sonrasında gerçekleşen düzen kaymalarını da yakalayabilir. Her metrik hakkında daha ayrıntılı bilgi de görebilirsiniz:

Bu görünüm, performans sorunlarını belirlemenize yardımcı olacak birçok yararlı bilgi sağlar ve hatta CrUX'tan alan bilgileri alabilir. Daha fazla bilgi için izleme özelliğini kullanarak ayrıntılı inceleme yapabilirsiniz.
Performans paneliyle ayrıntılı inceleme
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 analizleri, Analizler yan panelinde bulunur. Bu sayfada, Core Web Vitals metrikleri ve varsa bu metriklere ait alan değerleri de gösterilir.
Düzen Kaymaları izlemesi, düzen kaymalarını vurgular ve bu kaymaları tıkladığınızda CLS hata ayıklama için kaydırılan öğeler hakkında daha fazla bilgi edinebilirsiniz.
LCP gibi önemli zamanlamalar, izlemenin alt kısmındaki Zamanlamalar bölümünde gösterilir. Daha fazla bilgi için bunları tıklayın.
Uzun görevler (INP sorunlarına neden olabilir) de alev grafiğinde kırmızı üçgenlerle vurgulanır.
Bu özelliklerin yanı sıra Performans panelinin diğer bölümlerindeki bilgiler, düzeltmelerin bir sayfanın Core Web Vitals'ı üzerinde herhangi bir etkisi olup olmadığını belirlemenize yardımcı olabilir.
Sahada Core Web Vitals'ta hata ayıklama
Laboratuvar araçları, kullanıcılarınızı etkileyen tüm Core Web Vitals sorunlarının nedenini her zaman belirleyemez. Bu, kendi saha verilerinizi toplamanın çok önemli olmasının nedenlerinden biridir. Saha verileri, laboratuvar verilerinin dikkate alamadığı faktörleri hesaba katar.
Daha fazla bilgi için sahada performansla ilgili hata ayıklama bölümüne bakın.
3. Adım: Değişiklikleri izleyin

Düzelttiğiniz sorunların istenen etkiyi gösterdiğinden ve yeni sorunların Core Web Vitals'ınızı etkilemediğinden emin olmak istersiniz. Bu nedenle, performans sorunlarının üretime sunulmasını önlemek için geliştirici iş akışı kapsamında performans sorunlarının izlenmesi ve bu durumun sağlandığından emin olmak için alan verilerinin düzenli olarak izlenmesi gerekir.
Sürekli entegrasyon (CI) ortamlarında performans isteklerini izleme
Lighthouse-CI, koda performans gerilemelerinin girmesini önlemek için kod taahhütlerinde Lighthouse denetimlerini otomatik olarak çalıştırmanızı sağlar. Bu, performans zamanlamalarını (değişkenliğe tabidir) veya koddaki kötü uygulamaları önlemek için bir linting aracı olarak yalnızca performans denetimlerini kontrol edebilir.
Alan verileriyle web sitesi sağlık trendlerini görüntüleme
Tüm performans sorunlarını üretime geçmeden önce yakalayıp düzeltmeyi hedeflemeniz gerekir. Ancak, gözden kaçan sorunları bulmak için RUM'u kullanarak saha verilerinizi izlemeniz önemlidir. Bu konuda yardımcı olabilecek birçok ticari RUM ürünü mevcuttur. web-vitals
JavaScript kitaplığı, bir web sitesinin alan veri toplama işlemini otomatikleştirebilir ve isteğe bağlı olarak özel kontrol panellerini ve uyarı sistemlerini desteklemek için bu verileri kullanabilir.
RUM çözümü olmayan sitelerde, alan verilerinin temel trend analizi olarak çeşitli CrUX araçlarını kullanabilirsiniz.
Sonuç
Hızlı ve keyifli kullanıcı deneyimleri sunmak için performans odaklı bir yaklaşım ve ilerleme sağlamak amacıyla bir iş akışı benimsemeniz gerekir. Denetlemeniz, hata ayıklamanız ve izlemeniz için doğru araçlara ve süreçlere sahip olduğunuzda, mükemmel kullanıcı deneyimleri oluşturabilir ve iyi Core Web Vitals için tanımlanan eşik değerlerinin altında kalabilirsiniz.