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 kriterlere göre değerlendiren bir dizi metriktir.
Bu kılavuzda, web siteniz için Core Web Vitals'ı iyileştirmeye yönelik bir iş akışı incelenecektir. Ancak bu iş akışının nerede başladığı, kendi alan 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 sitede gezinirken 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 gerçekten web sitenizi deneyimlediğini temsil etmeyebilir. Gerçek dünyadaki performansı ölçmek için saha verilerini, nasıl iyileştirileceğini teşhis etmesi için Lighthouse gibi laboratuvar tabanlı araçları kullanın. Ayrıca, Lighthouse ne zaman kullanılır? bölümüne de bakın.
Google, Core Web Vitals'ı Chrome User Experience Report (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 verilerini raporlayan birçok Google ve üçüncü taraf aracının bel kemiğidir.
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 büyüklüğüne ve üçüncü taraf bir çö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, 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 durumlarda Google'ın web-vitals kitaplığı tüm Web Verileri'ni toplamanıza yardımcı olur. Ancak bu verilerin raporlanma, saklanma ve analiz edilme şekli sizin sorumluluğunuzdadır.
Google Analytics'i zaten kullanıyorsanız ancak henüz kendi alan verilerinizi toplamaya başlamadıysanız alanda toplanan Web Verileri'ni Google Analytics'e göndermek ve GA4'ün BigQuery dışa aktarma işlemlerini kullanarak verilerle ilgili rapor oluşturmak için web-vitals kitaplığını kullanma fırsatı olabilir.
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 sayıda örnek bulunmalıdır. BigQuery verileri, sitelerin siteleriyle ilgili geçmiş trendleri incelemesine olanak tanıyan CrUX kontrol panelinde de görüntülenebilir.
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 neden olabilir. 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 RUM çözümü, Chrome ve diğer tarayıcılarda Web Vitals metriklerini destekleyen 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 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, ne kadar bilgi sağlayabileceği ve bu verilerin nasıl sorgulanabildiğiyle 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?
Sayfa Hızı Analizleri (PSI)
PSI, belirli bir sayfa için CrUX ve Lighthouse'taki laboratuvardan alınan alan 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 göz atmak için iyi bir seçimdir. Ayrıca rakipler gibi diğer sitelerin Core Web Vitals verilerini görüntülemenize de olanak tanır.
PSI, metriklerin uyumlu olması durumunda Core Web Vitals'ı iyileştirmek için yararlı öneriler sunan Lighthouse verileri de sağlar. Bunların uyumlu olmadığı yerlerde Lighthouse önerileri daha az alakalı olabilir.
Lighthouse sunucudan çalıştırıldığı için DevTools'dan çalıştırılan Lighthouse'a kıyasla daha tutarlı bir referans 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 ne zaman kullanılır?
Search Console, hem arama hem de sayfa performansını diğer Google araçlarının değerlendirmediği yöntemlerle değerlendirmek amacıyla hem geliştiriciler hem de geliştirici olmayan rollerde bulunanlar için çok uygundur. CrUX verilerini sunma ve sayfaları benzerliğe göre gruplandırma özelliği, 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çütlerini karşılamıyorsa ancak örnek sayfaların tümü aynı Core Web Vitals ölçütlerini karşılıyorsa. 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 miktarda olması, grubun genel geçiş oranını etkileyebilir.
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üklemesinin ötesinde performans testi yapmak için etkileşim akışlarını 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. Bu araç, ç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 ortamlarda hem de hazırlık ortamlarında geliştirme sırasında performans iyileştirme fırsatları bulmak için mükemmeldir. 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 potansiyel sorunları ve en iyi uygulamaları listeleyen bir teşhis aracıdır. Bu sekmede gösterilen öneriler, her zaman kullanıcılarınızın sunduğu performansla eşleşmeyebilir.
Lighthouse, PageSpeed Insights gibi araçlarla üretim sitelerini teşhis etmek için kullanılabilir. Ancak, ideal olarak Lighthouse, performans sorunlarını üretime ulaşmadan önce çözmek için geliştirme ve sürekli entegrasyon ortamlarında kullanılmalıdır.
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 ile bir sayfanın Önemli Web Verileri'nin yanı sıra gözlemlediği her şey hakkında ayrıntılı bilgi sunar.
Performans paneli ne zaman kullanılır?
Geliştiriciler, belirli bir sayfanın performansı hakkında ayrıntılı bilgi edinmek için Performans panelini kullanmalıdır.
Canlı metrikler görünümü, sayfanın mevcut performans özelliklerini hızlı bir şekilde anlamak ve sayfayla etkileşimde bulunurken olası sorunları tespit etmek için kullanılabilir.
İzleme görünümü, özellikle INP'yi etkileyen yanıt verme sorunlarında hata ayıklamak için kullanışlı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ışmalarından oluşan sorunu anlamak için tarayıcıda neler olduğuna dair zengin veriler sağlayabilir.
Performans panelinin kullanılmaması gereken durumlar
Performans paneli, CrUX'tan bazı bağlam bilgileriyle birlikte temel olarak lab verilerini sağlayan bir geliştirici aracıdır. Saha verilerinin yerine geçmez.
İzleme görünümü çok sayıda hata ayıklama bilgisi içerir ancak bu nedenle yeni geliştiriciler veya geliştirici olmayan rollerde yer alanlar açısından 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'ının iyi durumda kalması için üç adımlı iş akışı
Kullanıcı deneyimini iyileştirmeye çalışırken süreci sürekli bir döngü olarak düşünmek en doğrusudur. Core Web Vitals ve diğer performans metriklerini iyileştirmek için aşağıdaki yaklaşımı kullanabilirsiniz:
- Web sitesinin durumunu değerlendirin ve sorunlu noktaları 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 durumunu değerlendirmek için alan verileriyle başlamanız önerilir.
- Kaynaktaki genel Core Web Vitals deneyimi 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ünün kullanıcı deneyimi verilerini kapsayan CrUX verilerini 75. yüzde birlik dilimde 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şlamak isteyebilirsiniz. Ana sayfa, genellikle birçok sitedeki en popüler sayfalardan biridir.
Başlangıçta PSI'nın gerçek kullanıcılarınızın neler yaşadığına 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ı. Bunları karşılaştırarak aralarındaki farkları görün. 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), 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 ayrıca üç Core Web Vitals'ın (LCP, CLS ve INP) yanı sıra TTFB ve FCP teşhis metriklerini 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 Optimize TTFB kılavuzuna bakın. FCP'nin bu süreye ek olarak bir saniye daha sürmesi, yine yavaş ağların göstergesi olabilir. Bu örnekte, LCP kaynağının FCP'den çok daha uzun sürmesi beklenir. Bu örnekte, sayfanın kendisi yüklendikten sonra LCP kaynağının iyi bir şekilde optimize edildiği belirtilmektedir.
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 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ştığı ve Search Console bunları başarılı bir şekilde tanımlayabildiği durumlarda yararlıdır.
Search Console'daki Core Web Vitals raporu, web sitenizin performansıyla ilgili genel bir bakış sunar ancak ilgilenilmesi gereken belirli sayfaları ayrıntılı olarak inceleyebilirsiniz. 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.
Bakmanız gereken belirli sayfalar olduğunda, bu sayfalarla ilgili sorunları daha iyi anlamak için daha önce açıklandığı gibi PSI'yı 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. Sorunun temel nedenini anlamak için daha fazla bilgi edinmek amacıyla Google araçlarını kullanabilirsiniz.
- Sayfa düzeyinde rehberlik almak için bir Lighthouse denetimi çalıştırma
- 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'u sizin için çalıştırır ancak yerel geliştirme için Lighthouse'u Chrome Geliştirici Araçları'ndan çalıştırmak da mümkündür. Bu, düzeltmeleri yerel olarak doğrulamak için kullanışlıdır.
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ğundan TBT için INP'yi de hariç tutar.
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 Lighthouse'un etkileşim olmadan ne kadar teşhis edebileceğini 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. Daha da fazla bilgi için bir izlemeyle 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.
Örneğin LCP gibi önemli zamanlamalar, Zamanlamalar kanalında gösterilir. Daha fazla bilgi için bunları tıklayın.
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.
Uzun görevler (INP sorunlarına neden olabilir) de 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 metriklerini etkileyip etkilemediğini belirlemenize yardımcı olabilir.
Alanda Core Web Vitals hatalarını ayıkla
Laboratuvar araçları, kullanıcılarınızı etkileyen tüm Core Web Vitals sorunlarının nedenini her zaman tespit edemez. 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 başlıklı makaleyi inceleyin.
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 yayınlanması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 koşullarını izleyin
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ığı, web sitelerinin alan verilerini toplama işlemini otomatikleştirebilir ve isteğe bağlı olarak bu verileri özel kontrol panelleri ile uyarı sistemlerine güç vermek için kullanabilir.
RUM çözümü olmayan siteler için, alan verilerinin temel trend analizi olarak CrUX Kontrol Paneli'ni kullanabilirsiniz. CrUX'teki siteler için aşağıdakileri raporlar:
- Core Web Vitals'ı masaüstü ve mobil cihaz türlerine göre segmentlere ayıran Siteye genel bakış bölümü.
- Metrik türüne göre geçmiş trend: CrUX rapor verilerinin her bir aylık sürümünde metriklerin zaman içindeki dağılımıdır.
- Cihaz ve etkin bağlantı türleri dahil olmak üzere her demografideki kullanıcılar için bir kaynağın tamamında sayfa görüntülemelerinin dağılımını gösteren Kullanıcı demografisi.
CrUX kontrol paneli, ayda bir güncellenen CrUX BigQuery veri kümesini temel alır. Bu, Core Web Vitals'ınızı düzenli olarak kontrol etmeniz gerektiğini hatırlatmak için iyi bir fırsat olabilir.
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 izlemenizi sağlayacak doğru araçlar ve süreçlerle, mükemmel kullanıcı deneyimleri oluşturabilir ve iyi Core Web Vitals için tanımlanan eşik değerlerinin altında kalabilirsiniz.