Web Vitals tarafından desteklenen Google sayfa deneyimi güncellemesi
Bu sayfa deneyimi güncellemesinden daha önce bahsettik , ancak bu yayında, bu Core Web Vitals’e bir kez daha bakmak istiyoruz. Genel olarak, site hızı metriklerini anlamak zor ve karmaşıktır. Ayrıca, sitenizi her test ettiğinizde biraz değişme eğilimindedirler. Her zaman aynı puanları alamazsınız. Bu nedenle, yeşile dönme ümidiyle bazı metriklere bakmanız gerektiğini söylemek kolaydır.
Olası tüm metrikler arasında Google artık Çekirdek Web Hayatı olarak adlandırılan üç tanesini tanımlamaktadır. Bunlar, önümüzdeki yıl için Google’ın odak noktası olacak. Google, her yıl bunları daha uzun bir süre değerlendirdikçe bu metrikleri ekleyebilir veya değiştirebilir.
Temel Web Yaşamsalları, tüm web sayfaları için geçerli olan Web Yaşamsallarının alt kümesidir, tüm site sahipleri tarafından ölçülmelidir ve tüm Google araçlarında görünecektir. Core Web Vitals’in her biri, kullanıcı deneyiminin ayrı bir yönünü temsil eder, sahada ölçülebilir ve kritik kullanıcı merkezli bir sonucun gerçek dünyadaki deneyimini yansıtır.
Sayfa deneyiminin üç temel direği
Şimdilik, sayfa deneyiminin üç temel direği:
- Yükleme performansı (öğeler ekranda ne kadar hızlı görünüyor?)
- Duyarlılık (sayfa kullanıcı girişine ne kadar hızlı tepki veriyor?)
- Görsel kararlılık (yükleme sırasında işler ekranda dolaşıyor mu?)
Kullanıcı deneyiminin bu önemli yönlerini ölçmek için Google, karşılık gelen üç metriği seçti – Core Web Vitals:
- LCP, En Büyük İçerikli Boya: Bu, en büyük içeriğin ekranda görünmesinin ne kadar sürdüğünü ölçer. Bu bir görüntü veya bir metin bloğu olabilir. İyi bir not, kullanıcılara sitenin hızlı yüklendiği hissini verir. Yavaş bir site hayal kırıklığına neden olabilir.
- FIS veya İlk Giriş Gecikmesi: Bu, sitenin bir kullanıcı tarafından ilk etkileşime tepki vermesinin ne kadar sürdüğünü ölçer. Bu, örneğin bir düğmeye dokunmak olabilir. Burada iyi bir not, kullanıcıya bir sitenin girdiye hızlı tepki vermesi ve bu nedenle de duyarlı olması hissi verir. Yavaş, yine, hayal kırıklığına yol açar.
- CLS veya Kümülatif Düzen Kaydırma: Bu, sitenizin görsel kararlılığını ölçer. Başka bir deyişle, şeyler yüklenirken ekranda dolaşıyor mu ve bu ne sıklıkta oluyor? Yerinde yavaş yüklenen bir reklam göründüğünde bir düğmeyi tıklamaya çalışmaktan daha sinir bozucu bir şey yoktur.
Farklı araçlar farklı metrikler kullanır
Her sayfa deneyimi aracı, çeşitli kaynaklardan toplanan bir dizi Web Hayatı kullanır. Her aracın farklı bir amacı olduğundan, kullanılan metrikler araç başına farklılık gösterir. Bununla birlikte, ortak payda, Google’ın sahip olduğu her sayfa deneyimi aracında bunları kullandığı için Temel Web Hayatıdır.
Peki tüm bu rakamlar ne anlama geliyor? Sitenizde nelere dikkat etmelisiniz? Peki siteniz ne kadar hızlı? Ne zaman iyi not alabilirim? Bu metrikler hakkında sorabileceğiniz bir milyon soru var. Google, anlama ve geliştirme arasındaki boşluğu kapatmaya çalışırken, bu karmaşık bir konu olmaya devam ediyor. Site hızını ve kullanıcı deneyimini ölçmek zordur – dikkate alınması gereken çok şey vardır.
Bu Temel Web Yaşamsalları nelerdir?
Diğer birçok metrik olduğu için Core Web Vitals tek başına çalışmaz. Bazıları kontrollü laboratuvar testlerine dayanırken, diğerleri yalnızca alan verileriyle çalışan metriklerdir. Çok fazla araştırma yaptıktan sonra Google, Web Vitals adlı yeni bir set belirledi. Bunlar zaten bildiğimiz metriklerin ve bir dizi yeni metrenin birleşimidir. Üç Temel Web Hayatı en önemlisidir ve Google özellikle site sahiplerinden bu puanları izlemelerini ve mümkün olan yerlerde iyileştirmelerini istemektedir.
LCP: En Büyük İçerikli Boya
En Büyük İçerikli Boya, en büyük içerik öğesinin ekranda göründüğü noktayı ölçer. Sayfanızın tam olarak yüklenmesi için geçen süreyi ölçmediğini, ancak en önemli parçanın ne zaman yüklendiğine baktığınızı unutmayın.
Yalnızca bir metin parçası ve büyük bir resim içeren basit bir web sayfanız varsa, bu büyük resim LCP olarak kabul edilir. Bu, tarayıcıya yüklenecek en büyük içerik olduğundan, bir izlenim bırakmak için tasarlanmıştır. Daha hızlı yüklenmesini sağlayarak siteniz çok daha hızlı görünebilir. Yani, bazen, bu görüntünün kendisini optimize etmek kadar basit olabilir.
Geçmişte, İlk İçeriğin ekranda göründüğü zaman kullanıcı için bir şey ifade eden zamanı ölçen İlk Anlamlı İçerik gibi metrikler vardı. Ancak, adından farklı olarak, FMC metriği genellikle ekranda görünen en anlamlı şeyin ne olduğunu bulamadı. Karmaşık metrikler işe yaramaz verilere yol açar.
En Büyük İçerikli Boya’nın anlaşılması kolaydır: En büyük öğenin ekranda görünmesi için gereken zamandır. Bu öğeler resim, video veya diğer içerik türlerini içerebilir.
Ne bilmek istiyorsun
Artık LCP’nin ne olduğunu biliyorsunuz, bunun için optimizasyona başlayabilirsiniz. Google’a göre, LCP’nin sayfa yüklenmesinin ilk 2,5 saniyesinde gerçekleşmesini hedeflemelisiniz. 4 saniyenin altındaki her şeyin iyileştirilmesi gerekiyor ve bunun üzerindeki her şeyin kötü performans gösterdiğini düşünebilirsiniz.
LCP de dinamiktir, çünkü yüklenen ilk şey hemen o büyük görüntü olmayabilir. Ekranda göründüğünde LCP bu büyük görüntüye geçer.
İşte Google’ın nasıl çalıştığını açıklayan bir resim:
Solda, önce logoyu görürsünüz ve ‘Görsel öyküler’ satırı görünür. İkinci ekranda, büyük başlık LCP için bir aday olarak görünür. Ancak son ekranda büyük görüntünün başlığı LCP olarak geçtiğini görürsünüz. Sadece büyük bir içeriğiniz varsa, bu her zaman LCP olabilir.
Resimdeki yükleme işlemine bakarsanız, bunun neden bu kadar kullanışlı bir metrik olduğunu kolayca görebilirsiniz. LCP’nin ne olduğunu kolayca belirleyebilir ve o öğenin yüklenmesini optimize edebilirsiniz.
Google, tüm bu öğeleri bulmanıza yardımcı olacak çeşitli araçlar sunar. Örneğin PageSpeed Insights, Web Vitals hakkında zengin veriler ve sayfanızı iyileştirmek için çok sayıda öneri sunar. PageSpeed Insights’ta yoast.com’u çalıştırırsak, bir takım puanlar ve bu puanın altında, tavsiye alırız. Bizim durumumuzda LCP ortalama idi ve bunun nedeni büyük bir görüntü olmasıydı. Aşağıdaki ekran görüntüsünde, PageSpeed Insights öğesinin bu öğeyi doğru şekilde tanımladığını görebilirsiniz. Şimdi ne geliştirmelisiniz!
Google’a göre, LCP bir dizi faktörden etkileniyor:
- yavaş sunucu yanıt süreleri: sunucunuzu optimize edin, bir CDN kullanın, önbellek varlıkları vb.
- oluşturmayı engelleyen JavaScript ve CSS: CSS’nizi küçültün, kritik olmayan CSS’yi ve satır içi kritik CSS’yi erteleyin.
- yavaş yükleme kaynakları: böylece görüntülerinizi optimize edin, kaynakları önceden yükleyin, metin dosyalarını sıkıştırın, vb.
- tarafı oluşturma ile ilgili sorunlar: kritik JavaScript’i en aza indirin, sunucu tarafı oluşturma ve ön oluşturma kullanın.
Google, LCP’nin arka planı ve nasıl optimize edileceği hakkında daha fazla dokümantasyona sahiptir .
FID: İlk Giriş Gecikmesi
İlk Giriş Gecikmesi, tarayıcının kullanıcı tarafından ilk etkileşime yanıt vermesi için geçen süreyi ölçer. Tarayıcı ne kadar hızlı tepki verirse, sayfa o kadar duyarlı olur. Kullanıcılarınıza olumlu bir deneyim sunmak istiyorsanız – kim değil? -, o zaman sayfalarınızın duyarlılığı üzerinde çalışmalısınız.
Gecikmeler, tarayıcı hala arka planda başka işler yaparken gerçekleşir. Yani, sayfayı yükledi ve her şey züppe görünüyor. Ancak bu düğmeye dokunduğunuzda hiçbir şey olmuyor! Bu kötü bir deneyim ve hayal kırıklığına yol açıyor. Sadece küçük bir gecikme olsa bile, sitenizin halsiz ve tepkisiz hissetmesine neden olabilir.
Bir tarayıcının çok fazla iş yapması gerekir ve bazen sadece daha sonra geri gelmek için belirli istekleri yerine getirmesi gerekir. Her şeyi aynı anda yapamaz. Her zamankinden daha karmaşık siteler (genellikle JavaScript ile desteklenmektedir) oluştururken, tarayıcılardan çok şey istiyoruz. Ekranda içerik alma ve etkileşimli yapma arasındaki işlemi hızlandırmak için FID’ye odaklanmamız gerekiyor.
FID, sayfanın yüklenmesi sırasında gerçekleşen tüm etkileşimleri ölçer. Bunlar, dokunma, tıklama ve tuş basışı gibi giriş eylemleridir, ancak yakınlaştırma ve kaydırma gibi etkileşimler değildir. Google’ın yeni metrikleri, duyarlı görünmesi için 100ms’den az bir FID çağrısında bulunuyor. 100ms ve 300ms arasındaki her şeyin iyileştirilmesi gerekir ve bunun üzerindeki her şeyi kötü performans olarak görebilirsiniz.
Ne bilmek istiyorsun
Hatırlamanız gereken şeylerden biri, kullanıcı etkileşimi yoksa FID’yi ölçemeyeceğinizdir. Bu, Google’ın laboratuvardan aldıkları verilere dayanarak FID’yi basitçe tahmin edemeyeceği anlamına gelir – gerçek kullanıcılardan veya alan verilerinden gelen verilere ihtiyaç duyarlar. Bu aynı zamanda bu verilerin laboratuvar verileri olarak daha az kontrol edilebilir olduğu için, her türlü cihazdan ve farklı şekil ve ortamlarda kullanan kullanıcılardan veri topladığı için. Bazen veri değişikliğini görmenizin nedenlerinden biri de budur.
Eğer puanlarınızı artırmak istiyorsanız, genellikle kötü notların suçlu olduğunu JavaScript bulacaksınız. JavaScript harika etkileşimler geliştirmemize yardımcı olur, ancak karmaşık kod içeren yavaş web sitelerine de yol açabilir. Genellikle, tarayıcı JavaScript yürütürken girişe yanıt veremez. JavaScript kodunuzu ve işlenmesini iyileştirmeye çalışıyorsanız, otomatik olarak sayfa deneyimi puanlarınızı artırmaya çalışıyorsunuzdur.
Yine de bu en zor kısmı. Çoğu site, JavaScript’i yürütme süresini azaltarak, karmaşık görevleri parçalayarak veya kullanılmayan JavaScript’i kaldırarak çok şey kazanabilir.
Örneğin, yoast.com’un oldukça iyi bir puanı var, ancak mükemmel değil. Mükemmel puanlar almamızı engelleyen süreçler var. Bunlardan bazılarının düzeltilmesi karmaşıktır veya sitemizin düzgün çalışması için bu koda ihtiyacımız vardır. Puanlarınıza bakmalı ve ne yapabileceğinizi belirlemelisiniz. En kolay yapılan veya en büyük performans sıçramalarına yol açan iyileştirmeleri bulmaya çalışın.
CLS: Kümülatif Düzen Kayması
Üçüncü Core Web Vital yepyeni bir model: Kümülatif Düzen Kaydırma. Bu metrik, ‘kararlı’ öğelerin ekranınıza nasıl yüklendiğini belirlemeye çalışır. Yükleme sırasında malzemelerin ne sıklıkta atladığına ve ne kadar olduğuna bakar. Bazen bir düğmenin ekranda yüklendiğini ve kullanıcıları tıklamaya davet ettiğini hayal edebilirsiniz. Ancak arka planda hala geniş bir içerik alanı yükleniyor. Sonuç? İçerik sonunda tamamen yüklendiğinde, düğme o düğmeye basmak istediğiniz gibi biraz aşağı iter. Yine, hayal kırıklığı artar!
Bu düzen kaymaları reklamlarda çok olur. Şimdi, reklamlar birçok site için bir yaşam çizgisidir, ancak bunlar genellikle kullanıcıları hayal kırıklığına uğratacak kadar zayıf yüklenir. Buna ek olarak, birçok karmaşık site o kadar çok şey yapıyor ki, bunların yüklenmesi ağır ve hazır olduğunda içerik yükleniyor. Bu aynı zamanda ekranda yavaşça dolaşan içeriklere veya CTA’lara neden olabilir ve bu da daha yavaş içerik yüklemek için yer açar.
Örneğin CNN.com’u ele alalım. Haber web siteleri genellikle çok karmaşık ve yavaş yüklenir ve CNN bir istisna değildir. PageSpeed Insights testinde gerçekten kötü puan alıyor. Sayfadaki sorunlara ve ilgili ipuçlarına bakarsanız, yazma sırasında en az beş hareketli öğenin bulunmadığını fark edeceksiniz. Bu sayfayı yüklerken, etrafında birçok öğenin atlanmasına yol açar ve stabilize olması ve faydalı olması biraz zaman alır. Kullanıcılar her zaman bu hasta olmadığından, ekranda göründüğü anda bir düğmeyi tıklamaya çalışırlar – yalnızca kaçırmak için o noktada büyük bir reklam görünür.
Ne bilmek istiyorsun
Birikimli Düzen Kayması, öğelerin hareketini belirlemek için çerçeveleri karşılaştırır. Düzen kaymalarının gerçekleştiği tüm noktaları alır ve bu hareketlerin şiddetini hesaplar. Google, 0.1’in altında herhangi bir şeyin iyi olduğunu düşünürken, 0.1’den 0.25’e kadar her şeyin çalışması gerekir. 0.25’in üzerindeki her şeyi zayıf olarak düşünebilirsiniz.
Tabii ki, puan sadece beklenmedik vardiyalara bakar. Bir kullanıcı menü düğmesini tıklarsa ve bir katlama menüsü görünürse, bu bir düzen kaydırma olarak sayılmaz. Ancak bu düğme tasarımda büyük bir değişiklik çağırıyorsa, kullanıcı için bunu açık tuttuğunuzdan emin olmalısınız.
I’ve already mentioned that ads are one of the main culprits of this. They are often in JavaScript and not well-optimized, plus they are served from an external server. Slowness is added in every step and you have to work hard to get your ads to appear in the right spot at a moments notice. But there’s another element that’s responsible for large layout shifts: images.
Geliştiriciler her zaman koddaki bir görüntünün genişliğini ve yüksekliğini belirtmez ve görüntünün ekranda nasıl görünmesi gerektiğini anlamak için tarayıcıya bırakır. Bazı görüntü ve metinlerin bulunduğu bir sayfada, önce metin, ardından görüntüler görüntülenir. Geliştirici bu görüntüler için yer ayırmadıysa, yükleme sayfasının üst kısmı metinle doldurulur ve kullanıcıdan okumaya başlaması istenir. Ancak görüntüler daha sonra yüklenir ve metnin ilk olduğu yerde görünür. Bu, metni aşağı iterek kullanıcıyı tedirgin eder. Bu nedenle, görüntülerin yükleneceği bir yer ayırmak için her zaman CSS’deki görüntülerin genişliğini ve yüksekliğini belirtin.
Web Vitals’i ölçme araçları
Web Vital’leri izlemenize ve sitenizin performansını artırmanıza yardımcı olacak birçok araç vardır. Bir süre önce yazdığım ilk Sayfa deneyimi yazısında bunlardan çok bahsetmiştim . Burada listelenenleri görebilirsiniz. Burada en önemlilerini vurgulamak istiyorum:
- PageSpeed Insights: PageSpeed Insights, hem alan hem de laboratuvar verileriyle tam hizmetli bir ölçüm aracına dönüştü. Buna ek olarak, neyin iyileştirileceği konusunda tavsiye alırsınız.
- Deniz Feneri: Google, Deniz Fenerini PWA’ları denetlemek için bir araç olarak oluşturdu, ancak şimdi performansı izlemek için harika bir araç. PageSpeed Insights’ın sahip olmadığı birkaç denetime sahiptir ve hatta bazı SEO kontrolleri vardır.
- Search Console Temel Web Yaşamsalları raporu : Artık sitenizden doğrudan Search Console’dan bilgi alabilirsiniz! Sitenizin nasıl performans gösterdiğiyle ilgili fikir edinmek harika.
Bunlar Temel Web Yaşamsalları
2021’de Google, algoritmalarını yeni bir sıralama faktörü dahil edecek şekilde güncelleyecek: sayfa deneyimi. Sayfa deneyimini ölçmek için Google, Web Vitals adlı yeni bir metrik kümesi geliştirdi. Bu Web Vital’lerinde üç temel metrik bulabilirsiniz: En Büyük İçerikli Boya, İlk Giriş Gecikmesi ve Kümülatif Mizanpaj Kayması. Bunlar performans, duyarlılık ve görsel istikrar anlamına gelir – Google’ın sayfa deneyimi güncellemesinin üç temel direği.
Kullanıcılarınıza odaklanmaya devam edin ve harika bir site oluşturun!
Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook’ta da bulabilirsiniz.
