Web sitenizi etkili şekilde denetlemek, iyileştirmek ve izlemek için Google araçlarını bir arada kullanın.
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. Görevin sona ereceği yer, kullanıcı deneyimi sorunlarının teşhis edilmesi ve düzeltilmesinde Google'ın hangi araçlarını yararlı bulabileceğinize bağlı olarak değişebilir.
Core Web Vitals en iyi alanda ölçülür
Core Web Vitals, kullanıcıların web sitenizdeki deneyimini ö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ı öne çıkaran teşhis araçlarıdır. Laboratuvar tabanlı araçlar, önceden tanımlanmış belirli koşullar altında çalışır ve kullanıcılarınızın deneyimindeki gerçek Core Web Vitals ölçümlerini yansıtmayabilir.
Örneğin Lighthouse, simüle edilmiş bir masaüstü veya mobil ortamda kısıtlama simülasyonu ile testler yürüten, laboratuvar tabanlı bir araçtır. Yavaş ağ ve cihaz koşullarına yönelik bu tür simülasyonlar, performans sorunlarını teşhis etmeye çalışırken faydalı olsa da, ağ koşulları ve cihaz özellikleri bakımından çeşitlilik barındıran tek bir bölümdür ve bu nedenle sitelerinizdeki kullanıcıların yaşadığı deneyimi yansıtmayabilir.
Lighthouse gibi laboratuvar tabanlı araçlar da genellikle bir web sitesini tamamen yeni bir ziyaretçi olarak görebilir. Bu genellikle en yavaş yüklemedir, ancak gerçek hayatta ziyaretçiler daha önce ziyaret etmişlerse veya sitede gezindikleri sırada bazı öğeler önbelleğe alınmış olabilir. Yeni ziyaretçiler ve araçlar da, siteye sunulan çerez banner'ları veya diğer içeriklerle ilgili sitede farklı bir deneyim yaşayabilir.
Kısacası, laboratuvar tabanlı araçlar olası performans sorunları için bir gösterge sunabilir ve hata ayıklamanıza ve yineleme yapmanıza yardımcı olabilse de, ziyaretçilerinizin kaçının web sitenizle karşılaştığını yansıtmayabilir. 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'in bazı kısıtlamaları vardır. Genellikle bir ne zaman sorun olduğunu söyleyebilir ancak çoğu zaman nedeni anlamak için yeterli veriye sahip değildir.
Mümkünse kendi alan verilerinizi toplayın.
Alandaki web sitesi performansını iyileştirmek için en iyi veri kümesi, sizin oluşturduğunuz veri kümesidir. Bu süreç, web sitenizin ziyaretçilerinden alan verilerinin 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ü oluşturmak mı istediğinize bağlıdır.
Ücretli çözümler, neredeyse kesinlikle Core Web Vitals'ı (ve diğer performans metriklerini) ölçer ve genellikle bu verilerin ayrıntılarına inmeniz için çeşitli araçlar sağlar. Önemli kaynaklara sahip büyük kuruluşlarda bu, tercih edilen yöntem olabilir.
Ancak, büyük bir kuruluşun, hatta üçüncü taraf bir çözüm için finansman imkanı olan 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 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ıza bakılmaksızın, Core Web Vitals'ı analiz etmede faydalı olabilecek çeşitli Google araçları mevcuttur. Bir iş akışı oluşturmadan önce, her bir araca genel bakış, hangi araçların sizin için uygun olup olmayacağını 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ı segmentinden toplanan alan verilerinden oluşan herkese açık bir veri kümesidir. Yeterli trafiğe sahip web siteleriyle ilgili Core Web Vitals metriklerini ve diğer metrikleri içerir.
CrUX, kaynak düzeyinde aylık BigQuery veri kümesi olarak veya bir URL'nin ya da kaynağın CrUX veri kümesinde yeterli sayıda örneğe sahip olması koşuluyla URL veya kaynak düzeyinde günlük API olarak sunulur. BigQuery verileri CrUX Kontrol Paneli'nde de görüntülenebilir ve sitelerin, kendilerine ait geçmiş trendleri incelemesine olanak tanır.
CrUX ne zaman kullanılır?
Kendi saha verilerinizi toplasanız bile CrUX'ten yine de yararlanabilirsiniz. CrUX, Chrome kullanıcılarının bir alt kümesini temsil etse de web sitenizin alan verilerini karşılaştırarak bu verilerin CrUX verileriyle nasıl uyumlu olduğunu görmenizi sağlar. Farklılıklara neden olabilecek avantajlar ve dezavantajlar vardır. Web siteniz için hiçbir alan verisi toplamazsanız, web siteniz veri kümesinde temsil edildiği sürece CrUX'in özellikle değerli bir genel bakış sunması oldukça değerlidir.
CrUX'i doğrudan veya aşağıda belirtilenler de dahil olmak üzere başka bir araç kullanarak kullanabilirsiniz. BigQuery veya API ile doğrudan CrUX veri kümesinin kullanılması, diğer araçlarda gösterilmeyen verileri açığa çıkarmak açısından faydalıdır. Örneğin, diğer araçlarda çoğu zaman ülke düzeyindeki veriler sunulmaz veya başka araçlarda gösterilmeyen ek metrikleri CrUX'te görüntüleyebilirsiniz.
CrUX'in kullanılmayacağı durumlar
CrUX'te yalnızca Chrome kullanıcılarını, hatta Chrome kullanıcılarının yalnızca bir kısmını temsil eder. Tam RUM çözümü, Chrome'da ve Web Vitals metriklerini desteklediği diğer tarayıcılarda daha fazla deneyim içerebilir.
Yeterli trafik almayan web siteleri, CrUX veri kümesinde temsil edilmez. Bu durumda, CrUX'i kullanmak mümkün olmadığından web sitenizin alandaki performansını anlamak için kendi alan verilerinizi toplamanız gerekir. Alternatif olarak, laboratuvar verilerini kullanmanız gerekir. Ancak, daha önce açıklandığı gibi bu verilerin temsili olmamasına ilişkin bazı sınırlamalar vardır.
CrUX'in sağladığı veriler önceki 28 güne ait hareketli ortalamalar olduğundan, iyileştirmelerin CrUX veri kümesine yansıtılması biraz zaman alacağından geliştirme sırasında ideal bir araç değildir.
Son olarak, herkese açık bir veri kümesi olarak CrUX'in sunduğu bilginin miktarı ve bu verilerin nasıl sorgulanabileceğiyle sınırlıdır. Kendi RUM verilerinizi yakalamak, daha fazla ayrıntı toplamanıza (örneğin, LCP öğesi) ve sorunları tanımlamak için verileri daha fazla segmentlere ayırmanıza olanak tanır. Core Web Vitals'a giriş yapan kullanıcılar, çıkış yapmış kullanıcılara göre daha mı iyi yoksa daha kötü mü? Yavaş LCP'ye sahip 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 fazla 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 sitenin Core Web Vitals'a 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 ayrıca Lighthouse verileri sağlar. Bu veriler, metrikler uyumluysa Core Web Vitals'ı iyileştirmek için faydalı öneriler sunar. Bunların uyumlu olmadığı durumlarda Lighthouse önerileri daha az alakalı olabilir.
Lighthouse sunucudan çalıştırıldığı için Geliştirici Araçları'ndan Lighthouse'u çalıştırmaya kıyasla daha tutarlı bir referans oluşturabilir.
PSI ne zaman kullanılmaz?
PSI yalnızca herkese açık URL'lerde kullanılabilir. Herkesin erişimine açık olmayan geliştirme sitelerinde kullanılamaz.
CrUX verileri, yalnızca siteler, site popülerlik eşikleri gibi belirli uygunluk ölçütlerini karşıladığında kullanılabilir. PSI, bir sayfa veya kaynak için CrUX verileri bulunmadığında yalnızca Lighthouse laboratuvar verilerini gösterebildiğinden daha az faydalı olur.
Benzer şekilde, test edilen belirli URL yerine yalnızca kaynak düzeyinde CrUX verileriniz varsa bu durum, kaynak düzeyindeki alan verilerinin sayfa düzeyindeki laboratuvar teşhisleriyle ilişkilendirilmesi açısından kullanışlılığı da sınırlar. 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, sayfa düzeyindeki verilerin CrUX'te sunulduğu ancak Lighthouse laboratuvar verilerinden farklı olduğu durumlarda, Lighthouse'un önerileri sınırlı değerde olabilir. Bu durum özellikle yükleme sonrası CLS sorunları ve laboratuvar tabanlı denetimlerin daha az yararlı olduğu etkileşim amaçlı Core Web Vitals (FID ve INP) için yaşanabilir.
Search Console
Search Console, Core Web Vitals dahil sitenizin arama trafiğini ve performansını ölçer. Yalnızca sitenin sahibi olduğunu onaylayan 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, CrUX'ten alınan 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 sunması ve sayfaları benzerliğe göre gruplandırması, performans iyileştirmelerinin tüm sayfa kategorilerini nasıl etkilediğiyle ilgili yeni bilgiler sunuyor.
Search Console ne zaman kullanılmaz?
Search Console, sayfaları benzerliğe göre gruplandıran farklı üçüncü taraf araçlarının kullanıldığı projeler için uygun olmayabilir.
Bir gruptaki örnek sayfalar grubun geri kalanından farklı özelliklere sahipse sayfa gruplandırması biraz kafa karıştırıcı olabilir. Örneğin, grup belirli Core Web Vitals metriklerini genel olarak geçemediği halde örnek sayfaların tümü aynı Core Web Vitals verilerini geçiyor gibi görünüyorsa bu durum biraz kafa karıştırıcı olabilir. Bu durum, bir grupta önbelleğe alınma olasılığı daha düşük olduğu için yüklenmesi daha yavaş olabilen uzun kuyruk veya nadiren ziyaret edilen sayfalar olduğunda meydana gelebilir. Bu sayfaların hacmi yeterli olduğunda grubun genel geçme oranını etkileyebilir.
Deniz Feneri
Lighthouse, sayfa performansını iyileştirmek için belirli fırsatlar sağlayan 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, proje derlemeleri sırasında Lighthouse'u çalıştıran ve performans regresyon testine yardımcı olmak için dağıtım yapan ilgili bir araçtır. Bu araç, çekme istekleriyle birlikte bir Lighthouse raporu sunar ve zaman içindeki performans metriklerini izler.
Lighthouse ne zaman kullanılır?
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 regresyon testinin gerekli olduğu hazırlık ve üretim ortamlarına yönelik derleme ve dağıtma aşamalarında da benzer şekilde kullanışlıdır.
Lighthouse ne zaman kullanılmaz?
Lighthouse (veya Lighthouse CI), alan verilerinin yerine gelmez. Lighthouse, temel olarak önceden tanımlanmış bir sayfa yüklemesindeki olası 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 Lighthouse ideal olarak, performans sorunlarını üretime ulaşmadan önce çözmek için geliştirme ve sürekli entegrasyon ortamlarında kullanılmalıdır.
Web Vitals uzantısı
Web Verileri Chrome uzantısı, siz web'de gezinirken Core Web Vitals metriklerini ortaya çıkaran bir teşhis aracıdır. Ayrıca, CrUX veri kümesinde temsil ediliyorsa geçerli sayfanın CrUX verilerini ve Core Web Vitals performans sorunlarını tanımlamanıza yardımcı olmak için hata ayıklama bilgileri de sağlar.
Web Vitals uzantısı ne zaman kullanılır?
Web Verileri uzantısı, herhangi bir roldeki herkes tarafından sayfa yaşam döngüsünün tüm noktalarında sayfanın Core Web Vitals metriklerini değerlendirmek amacıyla kullanılabilir. Bu, "canlı" ve özellikle de CLS ve INP metriklerinde görebileceğiniz yükleme sonrası sorunlar söz konusu olduğunda, performans sorunlarını ortaya çıkarmak için sayfayla etkileşimde bulunduğunuzda performansın bir görünümünü elde edersiniz.
Web Verileri uzantısı ne zaman kullanılmaz?
Web Verileri uzantısı, sayfa performansının bütünsel bir değerlendirmesi değildir. Ayrıca, raporladığı metrikler çalıştırıldığı ortama büyük ölçüde bağlıdır ve geliştiricilerin genellikle daha güçlü makineleri vardır veya daha hızlı ağlara erişirler.
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, sayfa yükleme veya kayıtlı bir dönem sırasında tüm sayfa etkinliğini profilleyen bir laboratuvar aracıdır. Ağ, oluşturma, boyama ve komut dosyası oluşturma etkinliği gibi boyutlarda gözlemlediği her şey ve bir sayfanın Core Web Vitals ile ilgili ayrıntılı analizler sunar.
Performans paneli ne zaman kullanılır?
Performans paneli, sayfa performansı hakkında derinlemesine bilgi edinmek için geliştirme sırasında geliştiriciler tarafından kullanılmalıdır. Bu, özellikle FID veya INP'yi etkileyen yanıt verme sorunlarında hata ayıklamak için yararlıdır. Kötü yanıt veren bir etkileşim belirlendikten ve tekrarlanabilirse Performans paneli, sorunun anlaşılmasına yardımcı olmak için tarayıcıda neler olduğuyla ilgili çok miktarda veri sağlayabilir. Böylece ana iş parçacığı engellemesinden JavaScript çağrı yığınlarına ve oluşturma işlemine kadar sorunun anlaşılmasına yardımcı olur.
Performans paneli ne zaman kullanılmaz?
Performans paneli, yalnızca laboratuvar verileri sağlayan bir geliştirici aracıdır. Alan verilerinin yerine geçmez. Ç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.
Web sitenizin Core Web Vitals'ın sağlıklı kalmasını sağlamak için üç adımlı bir 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şımlardan biri şöyle olabilir:
- Web sitesinin sağlığını değerlendirin ve sorun noktalarını belirleyin.
- Hataları ayıklayın ve optimize edin.
- 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şlamanız önerilir.
- Kaynakla ilgili genel Core Web Vitals deneyimi metriklerini ve tek bir URL'deki 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ı belirlemede yararlı olabilir.
- RUM verileriniz varsa, sorunlu belirli sayfaları veya trafik segmentlerini tespit edebilmek için genellikle en iyi seçenek budur.
İster kendi topladığınız saha verilerini ister CrUX verilerini analiz edin, bu ilk adım çok önemlidir. Alan verilerini toplamıyorsanız web sitenizin veri kümesinde temsil edilmesi koşuluyla CrUX verileri size yine yol göstermek için yeterli olabilir.
PageSpeed Insights ile site performansını analiz edin
PageSpeed Insights, son 28 günün kullanıcı deneyimi verilerini kapsayan CrUX verilerini 75. yüzde birlik dilimde gösterir. Yani kullanıcı deneyimlerinin% 75'i belirli bir metrik için belirlenen eşiği karşılıyorsa kullanıcı deneyimi "iyi" olarak kabul edilir.
Performansını incelemek istediğiniz belirli bir sayfa varsa o sayfayı kullanın. Optimizasyona ilk başladığınızda bir siteye ilişkin genel görünüm için, genellikle birçok sitedeki en popüler sayfalardan biri olduğundan ana sayfadan başlamak isteyebilirsiniz.
Başlangıçta PSI'nın gerçek kullanıcılarınızın neler yaşadığına odaklanın. Veriler dört adede kadar görüntülenmiş olarak gösterilir: Girilen URL ve kaynağın tamamı için mobil ve masaüstü. Bunları karşılaştırarak aralarındaki farkları görün. Mobil, daha az kararlı ağ koşulları altında çalışan ve daha fazla kaynak kısıtlaması olan bir cihaz olduğundan, genellikle masaüstünden 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 bir açılış sayfasıdır). Bu nedenle, kaynak kullanıcıların birincil tarayıcı önbelleğinin tüm yükünü almasından daha yavaş olabilir. Paylaşılan tüm öğeler önbelleğe alındığından, sonraki sayfalar büyük olasılıkla daha hızlı yüklenir ve kaynak düzeyindeki toplu veriler aşağı çeker.
PSI ayrıca üç Core Web Vitals (LCP, CLS ve FID) ve bekleyen INP metriği ile birlikte TTFB ve FCP teşhis metriklerini gösterir. Core Web Vitals değerlerinden herhangi biri ne kadar başarısız oluyor? Bu, çalışmalarınızı yoğunlaştırmanız gereken noktaları gösterir.
Bu sayılar arasındaki ilişkileri anlayın (özellikle de LCP için). LCP bu örnekte olduğu gibi yavaşsa her ikisi de söz konusu metriğin ara hedefleri olan TTFB ve FCP'ye bakın. Bu örnekte 1,8 saniyelik bir TTFB var. Bu da iyi LCP için önerilen 2,5 saniyelik eşiğe ulaşmayı oldukça zorlaştıracaktır. Bu durum, yavaş bir arka uç (sunucu sorunları veya CDN eksikliği), daha yavaş ağlar veya ilk HTML baytlarını geciktiren yönlendirmelere işaret eder. Daha fazla bilgi için Optimize TTFB kılavuzuna bakın. FCP bunun üzerine bir saniye daha sürer ve bu da 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 mu (Lighthouse'un yakalayıp tavsiyede bulunacağı) yoksa Lighthouse'un yakalayamayacağı yükleme sonrası bir CLS sorunu mu olduğunu anlamak için CrUX CLS ve Lighthouse CLS puanlarına bakın. Daha fazla bilgi için Optimize CLS kılavuzuna bakın.
Yanıt hızı için FID ve INP puanlarına bakın. İlk sayfa yükleme sırasında çok fazla JavaScript işleme gerçekleşip gerçekleşmediğini görmek için Lighthouse'taki TBT denetimlerine bakın. Bu durumun INP'yi etkilemesi olasıdır. INP, iyileştirmesi zor bir metrik olabilir. Bu nedenle, daha fazla bilgi için Optimize INP kılavuzuna başvurun.
Search Console'da düşük performans gösteren sayfaları belirleyin
PSI, test etmek istediğiniz belirli bir URL'niz veya bir bütün olarak siteniz olduğunda kullanışlı olsa da Search Console, çalışmalarınızı belirli sayfa türlerine hedeflemenize 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ştirilmesi gereken ve iyi bir kullanıcı deneyimi sunan sayfa gruplarını tek tek belirleyin.
- Performansla ilgili ayrıntılı verileri durum, metrik ve benzer web sayfası gruplarına (ör. bir e-ticaret web sitesindeki ürün ayrıntıları sayfaları) göre gruplanmış şekilde URL'ye göre alın.
- Hem mobil hem de masaüstü için her kullanıcı deneyimi kalite kategorisindeki URL'leri 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ıklayın ve optimize edin
1. adımda, performans iyileştirmeleri gerektiren sayfaları ve ayrıca hangi Core Web Vitals metriklerini iyileştirmek istediğinizi 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 Lighthouse denetimi çalıştırın
- Core Web Vitals'ı gerçek zamanlı olarak analiz etmek için Web Vitals uzantısını kullanın.
- Performans sorunlarında hata ayıklamak ve kod değişikliklerini test etmek için Chrome Geliştirici Araçları'ndaki Performans panelini kullanın.
Daha ayrıntılı talimatlar için şu kılavuzlara bakın:
Lighthouse ile fırsatları keşfedin
PageSpeed Insights, Lighthouse'u sizin için çalıştırır ancak yerel geliştirme için, düzeltmeleri yerel olarak doğrulamak amacıyla Chrome Geliştirici Araçları'ndan Lighthouse'u da çalıştırabilirsiniz.
Önemli noktalardan biri, Lighthouse denetiminin çözmeye çalıştığınız sorunları (örneğin, yavaş LCP veya CLS sorunları) tekrarladığını doğrulamaktır. Lighthouse, kullanıma hazır olarak sunulan kullanıcı deneyimini yalnızca sayfa yükleme sırasında değerlendirir. Bir laboratuvar aracı olduğundan, TBT'yi destekleyen FID ve INP özelliklerini de hariç tutar.
Lighthouse metrikleri, çözmeye çalıştığınız soruna benzer bir sorun önerdiğinde, denetimlerindeki bol miktarda bilgi, sorunları tanımlamanıza ve çözüm önerilerinde bulunmanıza 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:
FID ve INP için TBT denetimlerini kullanarak bu metrikleri etkileyebilecek sorunları belirleyebilirsiniz. Ancak, etkileşim olmadan Lighthouse'un teşhis etme konusunda sınırlı olduğunu unutmayın.
Web Verileri uzantısıyla gerçek zamanlı olarak analiz edin
Web Verileri Chrome uzantısı, sayfa yüklenirken ve bir sayfaya göz atarken Core Web Vitals'ı gerçek zamanlı olarak gösterir. Bu nedenle, yükleme sonrası meydana gelen düzen kaymalarının yanı sıra FID ve INP değerlerini de yakalayabilir. Hata ayıklama seçenekleri, her metrikle ilgili daha ayrıntılı bilgi gösterir:
Web Verileri uzantısını kapsamlı bir hata ayıklama aracı olarak değil, performans sorunlarını tespit etmeye yarayan bir nokta kontrol aracı olarak düşünebilirsiniz. Bu, Chrome Geliştirici Araçları'ndaki Performans paneline ait bir görevdir.
Performans paneli ile ayrıntılı inceleme
Chrome Geliştirici Araçları'ndaki performans panelinde, kayıtlı bir zaman aralığındaki tüm sayfa davranışları gösterilir.
Örneğin LCP gibi önemli zamanlamalar, Zamanlamalar kanalında gösterilir. Daha fazla ayrıntı için bunları tıklayın.
Düzen Kaymaları kanalı, düzen kaymalarını vurgular. Bunları tıkladığınızda ise CLS'de hata ayıklamak üzere kayan öğelerle ilgili daha fazla ayrıntı elde edilir.
Uzun Görevler de (FID ve INP sorunlarına neden olabilir) kırmızı üçgenlerle vurgulanır.
Bu özellikler ve Performans panelinin diğer bölümlerindeki bilgiler, düzeltmelerin sayfanın Core Web Vitals üzerinde herhangi bir etkisi olup olmadığını 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 nedenle, laboratuvar verilerinde bulunmayan faktörleri de göz önünde bulundurursak kendi alan verilerinizi toplamanız bu kadar önemlidir.
Daha fazla bilgi için alandaki hata ayıklama performansı bölümüne bakın.
3. Adım: Değişiklikleri izleyin
Sorunları düzelttikten sonra, bunların gereken etkiye sahip olduğundan ve yeni sorunların Core Web Vitals verilerinizi bozmadığından emin olmak istersiniz. Bu, performans sorunlarının üretim kanalına yayınlanmasını önlemek için geliştirici iş akışının bir parçası olarak performans sorunlarının izlenmesini, durumun böyle olması için de alan verilerinin düzenli olarak izlenmesini gerektirir.
Sürekli Entegrasyon (CI) ortamlarında performans koşullarını izleyin
Lighthouse-CI, kod giren performans regresyonlarını önlemek için kod kaydetmelerde otomatik olarak Lighthouse denetimleri çalıştırmanızı sağlar. Bu, koddaki kötü uygulamaları önlemek için bir hata analizi aracı olarak performans zamanlamalarını (değişkenliğe tabidir) veya yalnızca performans denetimlerini kontrol edebilir.
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 hedeflemelisiniz. Ancak başarısız olanları bulmak için alan verilerinizi RUM kullanarak izlemek çok önemlidir. Bu konuda yardımcı olabilecek birçok ticari RUM ürünü vardır. 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ş trendi, CrUX rapor verilerinin mevcut her aylık sürümü için metriklerin zaman içindeki dağılımıdır.
- Kullanıcı demografisi, cihaz ve etkili bağlantı türleri de dahil olmak üzere her demografik gruptaki kullanıcılar için sayfa görüntülemelerinin bir kaynağın tamamındaki dağılımını gösterir.
CrUX Kontrol Paneli, ayda bir güncellenen CrUX BigQuery veri kümesini temel alır. Bu, Core Web Vitals verilerinizi düzenli olarak kontrol etmeniz için iyi bir hatırlatma olabilir.
Sonuç
Hızlı ve keyifli kullanıcı deneyimleri sunmak için performansa öncelik veren bir yaklaşım ve ilerleme sağlamak üzere bir iş akışının benimsenmesi gerekir. Denetleme, hata ayıklama ve izleme işlemleri için doğru araçlar ve süreçlerle mükemmel kullanıcı deneyimleri oluşturabilir ve iyi Core Web Vitals için belirlenen eşik değerlerini koruyabilirsiniz.