Google Core Web Verileri için sitenizi nasıl optimize edersiniz
Google, Core Web canlıları ile web performansını geliştirme görevinde. Neden? Niye? Çünkü Google’ın işi çoğunlukla web tabanlıdır – Web siteleri ve kullanıcıları orijinal uygulamaya geri dönmeye teşvik etmek için yavaş olan uygulamalar.
Ücretsiz demoyu deneyin
Google arama sonuçlarındaki yerleşiminiz büyük ölçüde anahtar kelime arama terimi, bu anahtar kelimelerin sayfanızda kullanılması ve sayfalarınızın diğer yerlerden bağlantıların miktarına (ve kalitesi) göre popülaritesi ile belirlenir. Ağustos 2021’den itibaren Google, performansa göre sayfaları değerlendirmek için çaba gösterdi. Bu makale, sitenizi Google’ın temel web veri metriği için nasıl optimize edebileceğinizi gösterecektir.
Neden hayati web çekirdeği? İçerik önemlidir. Ancak iki siteyi benzer metin ve popülerlikle karşılaştırırsanız, en iyi web deneyimini sunan sitelere Google arama sonuçlarında daha yüksek öncelik verilecektir. Yükseltilmiş sayfaların sıralamasına ek olarak, yüksek performans gösteren siteler Güney Kore Güney Koreli’ye dahil edilecek gereksinimleri karşılamaktadır. Bu, daha önce içeriği Google tarafından yayınlanan ayrı bir siteye taşımanızı gerektiren Hızlandırılmış Mobil Sayfalar (AMP) için ayrılmıştı. AMP, özellikle sayfalar her zaman WordPress veya iyi optimize edilmiş statik sitelerden daha hızlı olmadığı için eleştiri çekmiştir. Ancak, bu artık bir gereklilik değil.
Ne seçerseniz seçin, siteniz daha hızlı ve duyarlı olursa, Google arama sonuçlarında daha yüksek bir sıralama elde etme şansı o kadar artar. Yaklaşık 2 MB’lık ortalama sayfayı düşünürseniz, 60 HTTP isteği yaparsanız ve mobil cihazlarda tam olarak işlenmesi 16 saniye sürerse, sitenizi geliştirmek için biraz yer olduğunu göreceksiniz. Bu artışa ulaşmanın en iyi yolunu göstereceğiz. Google’ın ana sıralama faktörü Performansı değerlendirmeye başlamadan önce kontrol edilmesi gereken dört ana sıralama faktörü vardır: https: https çok önemlidir. Siteniz kullanıcının tarayıcısı ile web sunucusu arasında güvenli bir bağlantı kuruyor mu?
Hücresel dostu: Siteniz mobil cihazlarda iyi çalışmalıdır. Siteniz küçük ekran cihazlarında kullanılabilir mi? İçeriği taşmadan render mi? Metin yeterince büyük mü? Dokunmatik kontrol için yeterince tıklanabilecek alan mı?
İnterstisyel olmadan: Doğal olmayan bir miktarda ekran alanı gerektiren interstisyelleri rahatsız etmekten kaçının. İçeriğiniz her zaman okunabilir mi? Kısmen interstisyel veya pop-up afişle kaplı mı? Reklamınız veya pazarlama tanıtımınız siteyi kullanmayı zorlaştırıyor mu?
Güvenli Keşif: Siteniz kötü amaçlı yazılım, virüs, kimlik avı, sahtekarlık ve diğer sahtekarlıktan muaf olmalıdır.
Bu gereksinimleri karşıladıktan sonra siteniz değerlendirilecektir.
Siteniz ne kadar hızlı ve duyarlı olursa, rakiplere karşı şans o kadar artar. Google Web performansını nasıl değerlendirir? Sitenizin hızlı bir şekilde yüklenmesini, hızlı bir şekilde yüklenmesini ve daha hızlı yanıt vermeyi çok önemlidir. Ancak bu kullanıcılar için hızlı hissediyor mu? Devtools tarayıcı raporu gibi performans ölçüm uygulamaları: Engelleme Süresi: İndirmeyi beklemek için harcanan zaman, genellikle stil sayfaları ve komut dosyaları gibi diğer varlıkların daha yüksek öncelikleri olduğu için başlar.
DNS çözünürlüğü: Varlığı almak için ana bilgisayar adını IP adresine tamamlama zamanı.
Bağlantı Süresi: TCP bağlantısını başlatma süresi.
İlk bayt (TTFB) zamanı: Talep ile ilk bayt yanıtı arasındaki toplam süre.
Zaman Alın: Tüm varlıkları alma zamanı.
DOM’un Yükleme Süresi: HTML belge nesne modellerini indirme ve oluşturma zamanı. Bu genellikle DOM’u analiz eden veya değiştiren komut dosyasının güvenilir bir şekilde çalışabileceği ilk noktadır.
Zaman Açık Sayfa: Sayfayı indirme zamanı ve resimler, stil sayfaları, komut dosyaları vb. Gibi tüm varlıklar.
Toplam Sayfa Ağırlığı: Tüm varlıkların toplam büyüklüğü. Bu genellikle sıkıştırılmış boyutta (indirme) rapor edilir ve boyut sıkıştırılmamıştır.
DOM öğelerinin sayısı: Sayfadaki toplam HTML öğelerinin sayısı. Ne kadar çok unsur olursa, sayfanın ihtiyaç duyduğu süre daha uzun süre işlenir.
İlk İçerik Boya (FCP): Tarayıcıdan önce gereken süre ilk içerik pikselini oluşturur.
İlk Maningful Boya (FMP): Ana sayfa içeriğinden önce gereken süre kullanıcı tarafından görülür.
Etkileşimli Zaman (TTI): Sayfadan önce gereken süre tamamen etkileşimlidir ve kullanıcı girişine antal.cpu ile yanıt verebilir: CPU sayfayı oluşturmak ve tüm başlatma komut dosyalarını çalıştırmak için zaman daha fazla girdi beklemek.
CPU kullanımı: Sayfaları oluştururken ve kullanıcı girişine yanıt verirken gerekli işleme faaliyetleri.
Saniyede Katman: Tarayıcı hızı, sayfanın stilini ve düzenini yeniden hesaplamalıdır.
Bu, sunucu yükleri, CMS önbellek, önbellek tarayıcısı, indirme hızı ve JavaScript verimliliği gibi spesifik direnci belirlemek için kullanılabilir. Ancak bir sayfanın iyi veya kötü bir kullanıcı deneyimi sağlayıp sağlamadığını belirleyemezler. Örnek olarak:
Uygulamalar hızlı bir şekilde indirilebilir ve görünebilir, ancak ilk etkileşimden sonra tepkisiz hale gelebilir, çünkü optimize edilmeyen çok sayıda JavaScript kodu çalıştırır.
Sohbet uygulaması, kullanıcı mesajlar gönderdiğinde veri indirmeye devam edebilir. Değerlendirme aracı, sayfa duyarlı hissetse bile, yüklemeyi asla tamamlamayı düşünebilir.
Çekirdek Web Vitals, Google’ın bu ikilemi tamamlama çabasıdır. Hayati web çekirdeği nedir? Google’ın Temel Web Vitals (CWV), gerçek dünyada kullanıcı deneyimini değerlendiren üç performans metriğidir:
En büyük içerikli kedi (LCP): Performans içerir
İlk girişte gecikme (FID): Etkileşimin performansı
Kümülatif Düzen Değişimi (CLS): Görsel stabilite performansı
Yeni Google algoritmasının yenilenmesi, Ağustos 2021’in sonunda küresel olarak piyasaya sürülmeye başladı. Çekirdek Web veri metrikleri esas olarak hücresel arama sonuçlarını etkiler, ancak deneyin başarılı olması durumunda masaüstünün eşdeğeri izlenecektir.
LCP, FID ve CLS skorları, Chrome tarayıcısı aracılığıyla anonim olarak toplanan son 28 gün boyunca gerçek kullanıcı metriklerine dayanmaktadır. Bu ölçüm, kullanıcı cihazı, bağlantı ve diğer etkinlikler nedeniyle değişebilir, böylece 75. persentil ortalama yerine hesaplanır. Başka bir deyişle, tüm kullanıcıların metrikleri en iyisinden en kötüsüne sıralanır ve üç çeyrek noktasındaki sayılar alınır. Bu nedenle, dört site ziyaretçisinden üçü bu performans seviyesini veya daha iyisini deneyimleyecektir. Üç temel web veri metriği için iyi (yeşil) bir puana ulaşan herhangi bir sayfa, arama sonuçlarında daha yüksek bir sıralama alacak ve Google News uygulamasında “En İyi Haberler” e dahil edilecektir. Aşağıdaki bölümde algoritmayı açıklayacağız. Metrikleri, sayfa puanlarını tanımlamak için kullanabileceğiniz araçları, düşük puanların genel nedenlerini ve performans sorunlarının üstesinden gelmek için atabileceğiniz adımları hesaplamak için kullanılır. En büyük içerik (LCP) CAT içerik içeriği, yükleme performansını ölçmektir. Özünde, kullanılabilecek içerik sayfada ne kadar hızlı görüntülenir? LCP, en büyük metin veya metin bloğunun ViewPort tarayıcısında (Top Paro) görülmesi için ne kadar sürdüğünü analiz eder. Çoğu durumda, en önemli öğeler kahramanların, afişlerin, başlıkların veya büyük metin bloklarının resimleridir.
Aşağıdaki öğelerden biri, en büyük içerik boya analizi için gereksinimleri karşılıyor:
görüntü (öğe )
Vektör grafiğindeki görüntü (a ‘e sabitlenmiştir)
Mini video görüntüsü (poster öznitelikleri içindeki url görüntüsüne ayarlanmıştır) öğesi
Arka plan görüntüleri olan öğeler (genellikle CSS ile yüklü
Yükleme sayfasının ilk 2,5 saniyesinde en büyük içerik boyasının tamamlandığı sayfa iyi kabul edilir (yeşil). 4.0 saniyeyi aşan sayfalar kötü kabul edilir (kırmızı):
En büyük içerik boyası.
En büyük LCP oruç boya analiz aracı, anlamak için en kolay hayati web çekirdek metriğidir, ancak analiz için hangi öğelerin seçileceği açık olmayabilir. Devtools Deniz Feneri Panelleri, Chrome, Edge, Cesur, Opera ve Vivaldi gibi krom tabanlı tarayıcılarda sağlanmaktadır. Tarayıcı menüsünden Devtools’u açın – genellikle diğer araçlarda> geliştirici veya CTRL klavye kısayolu | CMD + SHIFT + I veya F12 – Daha sonra Deniz Feneri sekmesine gidin (eski baskı denetimi adlandırabilir). Hücresel performans raporu yapın, ardından üretilen performans bölümünü kontrol edin. En büyük boya içeriği süresi, seçilen öğeleri tanımlayan genişletilmiş bir parça ile görüntülenir:
Devtools Deniz Feneri Hücresel Performans Raporu.
PagePeed Insights ve Web Ölçüm cihazlarında aynı bilgileri oluşturabilirsiniz.
En büyük sayfa içgörü analizi içerikli boya.
Devtools Performans LCP Panel Göstergesi.
Google Search Console, siteniz özellik olarak eklenirse artık bir temel web canlıları sunuyor.Rapor, CWV metriğinin zaman zaman nasıl değiştiğini göstermektedir.Bunun belirli LCP metriklerini tanımlamadığını ve yalnızca yeterince yüksek trafiğe sahip sitelerin mevcut olduğunu unutmayın:
Chrome kullanıcı deneyimi raporları, bazı ülkelerde LCP, bağlantılar ve cihazlar da dahil olmak üzere gerçek kullanım istatistikleri istemenizi sağlar. Bu, Google BigQuery’de halka açık bir projedir, bu nedenle Google Cloud Platform hesabına kaydolmanız ve faturalandırma ayrıntıları sağlamanız gerekir. Bir kez daha, rapor yalnızca URL’nin oldukça yüksek bir trafik seviyesine sahipse yararlı olacaktır. Son olarak, JavaScript Web-Vitals Kütüphanesi, doğrudan sitenizdeki gerçek kullanıcılar için LCP ve diğer hayati web çekirdek metriklerini hesaplayabilen küçük bir 1 kb komut dosyasıdır. CDN’den indirilebileceğinden, aşağıdaki komut dosyasını html: <meta karakterize ekleyebilirsiniz. sayfam
getLcp (), LCP değeri hesaplandığında tetiklenen dönüş çağrısını sürdüren eşzamansız bir işlevdir (sayfa arka plan sekmesinde yayınlanmadıysa asla tetiklenemeyebilir ). Nesnenin dönüş fonksiyonu şunları içeren nesneyi geçti: Ad: Metrik Adı (“LCP” Bu durumda)
Kimlik: Geçerli sayfa için bu metriği temsil eden benzersiz kimlik
Girişler: Değerlerin hesaplanmasında kullanılan dizi girişi
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Şimdi abone olun
Sunucu yanıtı yavaş olabilir, çünkü aşırı yüklenir veya sayfaları oluşturmak için çok fazla iş çıkarır. Bu, sitenizin hatası olmayabilir – paylaşılan bir barındırma hizmeti kullanırsanız sunucunun kısıtlamaları olabilir.
Nöbeti engelleyen CSS ve JavaScript, ana içeriğin üzerindeki HTML’ye atıfta bulunulması durumunda yükleme sayfalarını geciktirebilir.
Büyük görüntüler ve videolar gibi diğer kaynaklar mevcut bant genişliğini azaltabilir ve oluşturulması daha uzun sürebilir.
İstemcide sunucudan daha fazla üretilen sayfa içeriğinin de görünmesi daha uzun sürer.
En büyük içerikli kedi memnun puanının nasıl artırılması yükleme sorunlarını belirleyebilir, ancak genellikle tarayıcıya gönderilen veri miktarını azaltma problemi. Aşağıdaki ipuçları daha sağlıklı bir LCP puanına yardımcı olacaktır:
Sunucunuzu ve/veya barındırma hizmetinizi artırın. Kullanım yüksek olsa bile indirme hızının hızlı kaldığından emin olun.
Sunucu Sıkıştırma ve HTTP/2+’yı etkinleştirin. Yapmamak için hiçbir neden yok!
Sunucu çabalarını azaltın. Kullanılmayan kod ve CMS eklentisini silin, ardından etkili önbellekleme etkinleştirin.
Tarayıcının dosyaları etkili bir şekilde kaydedebileceğinden emin olun. HTTP üstbilgisinde uygun olan son modifiye ve/veya ETAG’yi ayarlama süresi doluyor, bu nedenle dosya artık talep edilmiyor. Coğrafi olarak daha yakın olan yükü ve ana bilgisayar varlıklarını bölmek için İçerik Dağıtım Ağını (CDN) kullanın. Kullanıcı.
Görüntünüzü optimize edin. En küçük boyuta indirin ve dosya boyutunu en aza indirmek için uygun biçimi kullanın. En büyük içerik bloğundaki herhangi bir resmin mümkün olduğunca erken sorulduğundan emin olun; Ön yük yardımcı olabilir.
Yükleme özelliği ekleyerek tembel yük görüntüsü = “lazy”. Görüntü bitmeden sayfada uygun alanın sağlandığından emin olmak için genişlik ve yükseklik özelliklerini ekleyin.
Üçüncü taraf taleplerini en aza indirin ve yabancı DN’leri aramaktan kaçınmak için varlıkları ana alanınıza taşımayı düşünün.
İstenen dosyanın sayısını ve boyutunu, özellikle HTML’nizin üstünde en aza indirin.
Gerekli web yazı tiplerini yüklediğinizden emin olun. Maksimum performans için web güvenli yazı tiplerine geçin.
Kullanılmayan JavaScript ve CSS dosyalarını silin.
JavaScript ve CSS dosyalarınızı birleştirin ve azaltın.
@Import CSS ifadesinden kaçının – ifade, seri olarak oluşturma ve stil içeriği engeller.
Base64 kodlamaktan kaçının – Bu, dosya boyutunu artırır ve ek işlem gerektirir.
Önemli CSS hattını düşünün. CSS “Paro Üst” i, sayfanın üst kısmındaki blokta önemlidir, ardından daha hızlı stil sayfasını asenkron yükler.
Komut dosyasını daha sonra çalıştırmak için javascript asenkron modül, askıya alınmış veya buz kullanın. Servis çalışanında uzun bir JavaScript işlemi çalıştırın.
İlk giriş gecikmesi (FID) İlk giriş gecikmesi sayfanızın yanıt verebilirliğini ölçer. Özünde, tıklama, dokunma ve yuvarlama gibi kullanıcı eylemlerine yanıt ne kadar hızlı? Metric FID, kullanıcı etkileşimi ile tarayıcı arasındaki zaman taleplerini işlerken hesaplanır. Genellikle girişi işleyecek ve DOM’u güncelleyecek işleyici işlevini gerçekleştirme süresini ölçmez. FID saati 100 milisaniye veya daha az iyi kabul edilen sayfalar (yeşil). 300 milisaniyeyi aşan sayfalar kötü kabul edilir (kırmızı): ilk girişte gecikme.
İlk giriş ertelemesi için ilk giriş gecikmesi analiz aracının simüle edilmesi imkansızdır, çünkü sayfa sayfa ile etkileşime giren gerçek kullanıcıya sunulduğunda ölçülebilir. Bu nedenle, sonuçlar her bir cihazın işlemcisinin hızına ve kapasitesine bağlıdır. FID, Devtools Deniz Feneri veya PagePeed Insights paneline güvenilmez. Ancak, toplam engelleme süresini (TBT) belirleyebilirler. Bu, ilk girişin gecikmesi için mantıklı bir tahmindir. Bu, şunlar arasındaki zaman farkını ölçer:
İlk İçerik Boya (FCP) veya sayfa içeriğinin oluşturulmaya başladığı süre ve
Etkileşimli zaman (TTI) veya sayfanın kullanıcı girişine yanıt verebileceği süre. TTI, aktif olan ve tamamlanmamış üç HTTP isteği olan uzun süreli görevler olmadığında dikkate alınır.
Toplam sayfa içgörüleri engelleme zamanı.
Google Chrome için Web Vitals uzantısı, kaydırma veya tıklayarak sayfalarla etkileşime girdikten sonra Metric FID’i görüntüleyebilir. Daha fazla bilgiyi ifade etmek için uzantı simgesini tıklayın:
Web Vitals FID uzantısı.
LCP gibi, Chrome kullanıcı deneyimi raporları, belirli URL’ler için çeşitli ülkelerde, bağlantılarda ve cihazlarda kaydedilen gerçek FID istatistiklerini istemenizi sağlar. Hayati Web JavaScript Kütüphanesi, doğrudan sitenizdeki gerçek kullanıcılar için FID metriklerini hesaplayabilir. Dönüş çağrısı işlevine FID metriğini görüntülemek için aşağıdaki komut dosyasını html’inize ekleyebilirsiniz: sayfam
Kötü ilk girdi gecikmelerinin genel nedenleri puan FID ve TBT puanları genellikle işlemciyi tekelleştiren müşterinin yan kodundan kaynaklanır, örneğin: Cevap? Birinci sınıf destek ekibimizi deneyin! Planımıza bakın
Kod indirildiğinde ve parçalandığında sayfaları yüklemeyi durduran önemli miktarda ihale engelleyen CSS ve JavaScript
Sayfa yüklendiğinde doğrudan çalışan büyük komut dosyası ve yoğun işlem
Varsayılan olarak, tarayıcı, her seferinde yalnızca bir görevi işleyebilen kapsamlı bir şekilde çalışır. JavaScript işlevinin yürütülmesi bir saniye sürerse, o saniye boyunca diğer tüm oluşturma işlemleri engellenir. Sayfalar kullanıcı girişine tepki veremez, DOM’u güncelleyin, animasyon görüntüleme vb. GIF animasyonu bile eski bir tarayıcıda engellenebilir. Girdi Gecikmelerin Puanı Nasıl Artırılır İlk JavaScript Denetimi Müşterinin tarafı sorunları belirleyebilir, ancak genellikle aşırı kodu kaldırma ve görevin hızlı bir şekilde çalıştırılması sorununu. Aşağıdaki ipuçları daha sağlıklı bir FID puanına yardımcı olacaktır: sunucuda olası statik HTML içeriği mümkün olduğunca çok önbellek üretin. Herkes için aynı HTML’yi oluşturmak için müşterinin tarafının JavaScript çerçevesine güvenmemeye çalışın.
Tarayıcının dosyaları etkili bir şekilde kaydedebileceğinden emin olun. Set karma sona erer, son modifiye edilmiş ve/veya http üstbilgisinde uygun olan ETAG, bu nedenle dosya artık talep edilmez.
Arayüzün JavaScript çalışmasından önce HTML ve CSS’de kullanılabilmesi için aşamalı artış tekniklerinin benimsenmesi.
JavaScript ve CSS dosyalarınızı birleştirin ve azaltın.
Komut dosyasını daha sonra çalıştırmak için javascript asenkron modül, askıya alınmış veya buz kullanın.
Analitik, Sosyal Medya Widget’ları, Tartışma Forumları vb. Bu, birkaç megabita javascript’e kadar hızlı bir şekilde kurulabilir.
Talep üzerine, örneğin sohbet widget’ları, video oynatıcılar vb.
Analitik, reklam ve sosyal medya araçları gibi daha az önemli komut dosyalarının yüklenmesini geciktirme. JavaScript’in uzun süren görevlerini ayırın, RequestDlecallback, Settimeout veya kısa istektenin gecikmesinden sonra gerçekleştirilen bir dizi daha küçük görev haline gelir.
Arka plan UTA’larını kullanan web çalışanlarında uzun bir JavaScript süreci çalıştırmayı düşünün.
CLS’deki kümülatif düzen (CLS) kayması, sayfanın görsel kararlılığını ölçer. Özünde, sayfa içeriği, özellikle ilk yükleme olduğunda beklenmedik bir şekilde hareket ediyor mu yoksa atlıyor mu? CLS, eleman uyarı veya kullanıcı etkileşimi olmadan hareket ettiğinde puanı hesaplar. Bunu mobil cihazlar-metin üzerindeki makaleleri aniden ekrandan okurken deneyimlemiş olabilirsiniz ve yerini kaybedersiniz. En kötü örnek, yanlış bağlantıya tıklamanıza neden olabilir. Büyük görüntü veya reklam mevcut kaydırma konumunun üzerine yüklendiğinde ve sıfır yüksekliğe sahip alan doğrudan birkaç yüz piksel artar. Kümülatif düzen kaydırma skoru, aşağıdaki metriğin çarpılmasıyla hesaplanır:
Etki Fraksiyonu: Bu, görünüm alanındaki tüm kararsız unsurların toplam alanı, yani “atlayacak” unsurlardır. Görünüm alanının% 60’ını kapsayan öğe sayfa yükleme sırasında hareket ettirilirse, darbe fraksiyonu 0.6’dır. Görüntüler veya reklamlar gibi kaymaya neden olan unsurların sabit kabul edildiğini, çünkü oluşturulduktan sonra hareket etmek zorunda olmadıklarını unutmayın.
Mesafe Fraksiyonu: Bu, görünüm alanındaki kararsız bir tek eleman tarafından aktarılan en büyük mesafedir. En büyük transfer 0.100’den 0.800’e hareket eden elemanlarda meydana gelirse, 700 piksel dikey olarak değişmiştir. Cihaz görünüm alanı 1.000 piksel yüksekse, fraksiyon 700 px / 1000 px = 0.7’dir. Bu nedenle, hesaplanan kümülatif düzen kayması skoru 0.6 x 0.7 = 0.42’dir. GOOGLE, aşağıdaki durumu karşılamak için CLS metriğinde değişiklikler yaptı:
Düzendeki değişim, beş saniye süren ancak meydana gelen düzende bir değişiklik yoksa bir saniye sonra kapalı olan “oturuma” gruplandırılmıştır. Bir saniyede iki veya daha fazla vardiya meydana gelirse, puanları eklenir.
Düzen kayması, kullanıcı etkileşiminden sonra tıklamalar gibi 500 MDTK için kaydedilmez. Bazı durumlarda, bu bir DOM güncellemesini tetikler (örneğin bir menü açar, bir hata mesajı görüntüleme, bir sermaye diyaloğu görüntüleme vb.).
Daha uzun süre açık kalan ve birçok DOM güncellemesini etkilenmeyen bir sayfa uygulaması.
0.1 veya daha az CLS puanı olan sayfalar iyi kabul edilir (yeşil). 0.25’i aşan sayfalar kötü kabul edilir (kırmızı):
Kümülatif Düzen Değişimi.
CLS Metrik Kümülatif Düzen Analiz Araçları Devtools Deniz Feneri Panelinde, PagePeed Insights ve Web Ölçüm aygıtlarında hesaplanmıştır.
CLS Insight sayfa.
Google Chrome için Web Vitals uzantısı da metrik CL’lere sahiptir:
Web Vitals CLS Uzantısı.
LCP ve FID gibi, Chrome kullanıcı deneyimi raporları, bazı ülkelerde, bağlantılarda ve belirli URL’ler için cihazlarda kaydedilen gerçek CLS istatistiklerini istemenizi sağlar. Hayati Web JavaScript Kütüphanesi, doğrudan sitenizdeki gerçek kullanıcılar ve LCP ve FID için CLS metriklerini de hesaplayabilir. Dönüş çağrısı işlevine CLS metriğini görüntülemek için html’inize aşağıdaki komut dosyaları eklenebilir: sayfam
Kötü Kümülatif Düzen Değişme Puanlarının Genel Nedenleri CLS puanları genellikle yüklü ve dinamik Dom öğeleri veya ölçülmemeden kaynaklanır: Sayfadaki alan görüntüler için sağlanmaz, iframe, reklam, vb.
DOM’a dinamik içerik, genellikle reklam, sosyal medya widget’ları vb. Ağ taleplerinden sonra enjekte edilir.
Web yazı tiplerinin yüklenmesi, çarpıcı görünmez bir metne (FOIT) veya gösterişli bir metin (Fout) neden olur.
Müşterinin kümülatif düzeninin kümülatif düzeninin puanının nasıl artırılacağı sorunu tanımlayabilir, ancak genellikle sorun, indirmeden önce alanın içerik için ayrılmasını sağlar. En büyük içerik boyası için önerilen sunucu optimizasyon ipuçlarının birkaç faydası olacaktır, ancak daha fazla onarım mümkündür:
Genişlik ve yükseklik özniteliklerini html ve adresine ekleyin veya varlık indirilmeden önce sayfada uygun alanın sağlandığından emin olmak için yeni CSS en boy oranı özelliğini kullanın. Rezervuar elemanları için uygun boyutları belirleyin. Bu, reklam ve widget gibi daha yavaş yüklenen üçüncü taraf içeriğini içerir.
Sayfanın üstünde görünen görüntülerin ve diğer varlıkların mümkün olduğunca erken talep edildiğinden emin olun – Pramuep yardımcı olabilir.
Web yazı tiplerinin kullanımını en aza indirin ve mümkünse genellikle mevcut olan yazı tiplerini kullanmayı düşünün.
Web yazı tipini yükleyin ve CSS yazı tipi ekranını isteğe bağlı veya Exchange olarak ayarlayın. Düzendeki kaymayı en aza indirmek için aynı boyutta yedek yazı tipini kullandığınızdan emin olun.
Eleman tıklamalar gibi kullanıcı eylemlerine yanıt vermedikçe, sayfanın üstüne öğeler eklemekten kaçının.
Yeniden ayar gerektirmeyen daha verimli animasyonlar için CSS’nin dönüşümünü ve opaklığını kullanın.
Gerekirse, izole sayfaları tanımlamanızı sağlayan yeni bir CSS özelliği olan Gözaltına alınmayı düşünün. Tarayıcı, belirli DOM içeriğinin bir bloğunu oluşturarak veya oluşturma işlemi yaparak işlemeyi optimize edebilir.
