Kurumsal Düzeyde Sayfa Deneyimi Güncellemesi için Nasıl Optimize Edilir (Uluslararası Vaka Çalışması)
Yayınlanan: 2021-06-23Bütünüyle SEO, teknik açıdan bahsetmiyorum bile, çok büyük bir konudur.
Son birkaç aydır, Google Sayfa Deneyimi Güncellemesi ve Temel Web Verileri hakkında dokunmadan veya duymadan teknik SEO alanında dolaşmak zor oldu.
Bunun ne olduğunu ve sizi nasıl etkileyeceğini merak ediyor olabilirsiniz ya da web sitenizi optimize etmek için onunla nasıl çalışacağınızdan şüphe duyuyor olabilirsiniz - ve bunun iyi sebepleri var!
Amaç, 'lansmandan' önceki bu son günlerde kendi web sitenizde (veya müşterinizde) kullanmanız için bir vaka çalışması formatında gerekli girdileri vermektir.
Ama yürümeden önce emeklemeliyiz, o yüzden temel bilgilerle başlayalım.
CWV nedir ve neden düzeltilir?
Önemli Web Verileri, Google'ın bir web sitesinin kullanıcı deneyimini değerlendirmek için kullandığı bir dizi belirli ölçümdür.
Amaç, bir web sitesinin içeriğine göre nasıl sıralandığını değerlendirmek ve tatmin edici bir kullanıcı deneyimi sağlamak için bu metrikleri kullanmaktır.
Bu, tıpkı gerçek bir kullanıcının, içerik ne kadar iyi olursa olsun, yavaş yüklenen veya zorlu bir arayüze sahip bir siteden ayrılmaya karar vermesi gibidir.
Önemli Web Verileri, üç belirli sayfa hızı tahmininden ve kullanıcı etkileşimi değerinden oluşur:
- En Büyük İçerikli Boya
- İlk Giriş Gecikmesi
- Kümülatif Düzen Kayması
Değerler, farklı görünüm alanları ve ağ bağdaştırıcılarındaki deneyimi hesaba katmak için masaüstü ve mobil cihazlarda ayrı ayrı değerlendirilir.
LCP (En Büyük İçerikli Boya) – Yükleme Deneyimi
LCP , bir web sitesi içeriğinin çoğunun kullanıcının ekranında kullanılabilir hale gelmesinin (işlenmesinin) ne kadar sürdüğünü ifade eder.
Önemli Web Verileri bu parametre için optimizasyonun mevcut olduğuna inandığında, genellikle ön uç dosyalarına (HTML, CSS, Görüntü dosyaları) dayanır.
Bunun nedeni, siteyi kullanıcının tarayıcısında oluşturmak için çok fazla dosyanın gerekli olmasıdır. Dosyaların çok büyük olması veya sunucunun bunları zamanında teslim etme kapasitesinin yetersiz olması da olabilir.
Önerilen bir çözüm, bu dosyaların daha küçük olmasını, daha az HTTP isteği aracılığıyla gönderilmesini ve sunucuyu web sitesinin trafiğine ve boyutuna uyacak şekilde ölçeklendirmesini sağlamak olabilir.
FID (İlk Giriş Gecikmesi) – Etkileşim
FID , bir kullanıcının site düğmelerine basma, dokunmatik ekrana dokunma, klavye girişleri vb. ile etkileşime girmesinin ne kadar sürdüğünü ifade eder.
Bu kategorideki sorunlara genellikle etkileşim miktarı ve dinamik veya Javascript tabanlı DOM oluşturma neden olur.
Tarayıcı, bu komut dosyalarının yüklenmesine öncelik verdi ve yüklemeden önce kullanıcı etkileşimini kabul etmedi. Bu komut dosyalarını yüklemek ve yürütmek ne kadar zorsa, web sitesiyle etkileşime girmeden önce o kadar uzun sürer.
FID, etkileşime izin verene kadar gösterilen sayfa arasındaki süreyi azaltarak teorik olarak iyileştirilir. Diğer bir deyişle, gerekirse JavaScript dosyalarınızı daha küçük parçalara bölmeniz mümkündür.
Bunu yaparak, web sitesini kullanmak için temel öğeleri (tıklamalar, dokunmalar, kaydırıcı etkileşimleri vb.) yüklemeye öncelik verebilirsiniz - animasyonları, efektleri ve diğer olağanüstü özellikleri ikincil olarak yüklenecek şekilde bırakabilirsiniz.
Pratik olarak FID, bireysel bir kullanıcı metriği olarak ölçülür - bir kullanıcının onunla etkileşime girmeden önceki süreyi değil, bir kullanıcının onunla etkileşime girmeden önceki süreyi ölçer. Kullanıcı, örneğin yükleme animasyonları veya büyük veri kümeleri için yer tutucular aracılığıyla sitenin kullanılamadığı bilgisini alırsa, bu ölçümde yüksek puan almak mümkündür.
CLS (Kümülatif Düzen Kaydırma)
CLS , web sitesinin bir sitedeki diğer içerik öğelerinden sonra yeni düğmeler, metinler veya resimler yerleştirip yerleştirmediğini belirtir - site öğeleri eşzamansız olarak yüklerse, orijinal düzenin yapısını değiştirebilir ve kullanıcı deneyimini önemli ölçüde bozabilir.
Optimize edilmemiş görüntü dosyaları genellikle bu veya olası web yazı tiplerinin önceden yüklenemez ve ilk işaretleme yapıldıktan sonra ortaya çıkmasına neden olur. Dahil edilen üçüncü taraf pencere öğeleri de düzende bir kaymaya neden olabilir.
Çözüm genellikle içeriği önceden yüklemektir. Bu şekilde, sayfa ilk kez gösterilmeden önce mizanpajı değiştirebilen öğeler yerinde olacaktır.
Alternatif olarak, içeriğiniz için kilitli kaplar kullanabilirsiniz. Bu şekilde, bazı öğeler ortaya çıkmaya başladığında ilk içeriğin yerleşimi değişmez.
[Örnek Olay] Stratejik sayfalarda tarama bütçesini artırın
Örnek olayı okuyunyürüme zamanı
Artık temelleri hallettiğimize göre, onu kullanma zamanı geldi ve biz de bir müşteri vakasıyla tam olarak bunu yaptık.
Bu özel durum, çeşitli hata türlerine sahip olduğundan ve bu nedenle farklı optimizasyon alanlarına odaklandığından eğlenceliydi.
Vaka boyunca dikkat edilmesi gereken birçok odak alanı ve eylem noktası var - bu yüzden kemerlerinizi bağlayın ve yolculuğun tadını çıkarın.
Size yol göstereceğim:
- Dosya
- davada ne yaptık
- Neden yaptığımız gibi yaptık
- Önemli çıkarımlar
Durum: Günlük Noktası; uluslararası Siber Güvenlik İşletmesi
Site, Logpoint.com, siber güvenlik işinde çalışıyor ve dünya çapında tanınmış bir marka.
Büyük bir uluslararası şirket olmak, web sitesi üzerinden oldukça fazla trafik aktığı anlamına gelir. Bu nedenle, ziyaretçilerin mümkün olan en iyi deneyimi ve dolayısıyla Temel Web Verileri için daha da gelişmiş bir durumu elde etmelerini sağlamak çok önemlidir.
Kullanıcı Deneyimi birçok farklı faktörden oluşur, ancak özellikle Temel Web Verileri, deneyimin bir bütün olarak oluşturulmasında ve ölçülmesinde öne çıkmaktadır.
Yukarıdaki resim, Önemli Web Verileri optimizasyonumuza başlamadan önceki durumu göstermektedir. Logpoint'in başlangıç noktası, diğer birçok önde gelen şirkete kıyasla o kadar da kötü değildi, ancak grafikte gösterildiği gibi, iyileştirme için alan var.
Bu aynı zamanda ilgili olabileceğiniz bir şey olabilir.
Mümkün olan her URL'nin "iyi bir URL" kategorisinde olduğundan emin olmak çok önemlidir, çünkü bu en iyi Kullanıcı Deneyimi ile sonuçlanır ve Google, güncellemeleriyle Haziran 2021'in ortalarında Önemli Web Verilerini bir sıralama faktörü haline getirir: Google Sayfası Deneyim.
davada ne yaptık
Optimizasyonumuz sırasında, Temel Web Verileri durumunun tamamı çok değişti. İlk başladığımızda, ana sorunlar hem mobil hem de masaüstü biçimindeki LCP ve CLS sorunları ve tabii ki sayfa hızıydı.
Dünya değişiyor ve web siteleri de değişiyor - bu nedenle, yarım yıl önce CWV için optimize ettiyseniz, şimdi farklı görünebilir.
Google Arama Konsolu (Önemli Web Verileri)
Yaptığımız ilk şey, farklı hata türlerine dalmak ve hangi URL'lerin etkilendiğini bulmaktı. Bildiğiniz gibi, Google Arama Konsolu ve Temel Web Verileri sekmesi, hem mobil hem de masaüstü biçimine ilişkin bir genel bakışa sahiptir.
Format raporlarına bir adım daha yaklaşırken, belirli bir hatada daha da ileri gitmenin mümkün olduğu hata türlerine ilişkin bir genel bakış görüntülenir.
Genel bakıştan, son bir adım daha ileri gitmek mümkündür ve çalışmalarımız buradan başlamıştır.
Hata türünden etkilenen her URL, bu belirli adımda görüntülenerek, analizimizi başlatmayı mümkün kılar.
Sayfa Hızı Analizleri
Hangi URL'lerin etkilendiğini bildiğimizden sonraki adımımız, hatalara neden olan öğeleri tam olarak belirlemek için onları analiz etmekti. İşte burada PageSpeed Insights devreye giriyor. URL'leri analiz ederek PageSpeed sağlık puanını anladık, ancak hatalara katkıda bulunan öğeleri de inceleyebildik.
Chrome DevTool – Performans analizi
Hata türleri ve bunlara neden olan öğeler konusunda net olmak için DevTool'da bulunan performans analizini kullandık. Bu aracı PageSpeed Insights ve Önemli Web Verileri raporlarıyla karşılaştırarak, farklı araçlar tarafından sağlanan içgörülere ve bunların birbirleriyle olan ilişkilerine ilişkin daha kapsamlı bir görünüm elde etmeyi başardık.
Her araç tek başına ayrıntılara benzersiz bir bakış açısı sağlar ve bu da daha büyük bütünü oluşturur.
Profil oluşturma işlemi tamamlandıktan sonra, Deneyim bölümünde bir grup kırmızı kutu belirdi. Bunlar, kendisini hareket ettirerek veya bitişik öğeleri iterek düzeni bir şekilde değiştiren bir öğe yüklemesini gösterdi.
Bir öğeye tıklamak, bir dizi yararlı bilgiyi ortaya çıkarır:
- Puan
Bu değer, bu belirli öğenin veya load olayının, birikmiş CLS puanını hesaplarken kaç puan aldığını gösterir. Gerçekler, yüklenmesinin ne kadar sürdüğüne, birincil iş parçacığı sürecinde ne kadar geç yüklediğine veya kendi kendine veya ne kadar hareket ettiğine bağlıdır. Etrafındaki bitişik elemanlar. - kümülatif puan
Bu değer, verilen sayfa için birikmiş durumun ne kadar kötü olduğunu belirlemek için tüm CLS olay noktalarının toplamını söyler. Google'ın standartlarını karşılamak için, birikmiş CLS puanı 0,1 puanı aşamaz. CLS ayrı ayrı hesaplanan bir değer olduğundan ve Google tarayıcısı tarafından, üzerinde puan hesaplanırken olduğundan daha kötü derecelendirilebileceğinden puanın daha da düşük olması önerilir. birinin bilgisayarı. - Son giriş vardı
Bu değer, düzen kayması gerçekleşene kadar öğenin etkileşime girip girmediğini söyler. Statik bir HTML sayfası için nadiren endişe edilecek bir değerdir. Çoğunlukla, bir kullanıcı girdisinin mizanpaj kaymasına neden olup olmadığını söyler. - Taşındı / Taşındı
Bu değer, elemanın başlangıçta nerede olduğunu ve hareketten sonra yeni konumunun nerede olduğunu gösterir. Bileşenin, birkaç kez kaydırılmışsa, değerlerden birkaç kez taşınması/değerlere taşınması nadir değildir. Değerlerin üzerine gelindiğinde, düzen değişikliği meydana gelmeden önce ve sonra öğenin nerede olduğunun bir ekran taslağı görüntülenir. - İlgili düğüm
Bu değer, taşınan belge akışındaki DOM düğümüne başvurur. Hatanın nerede bulunduğuna bağlı olarak, bu, hangi elemanın kaymaya neden olduğu veya daha sonra sırayla kaymaya neden olan bitişik bir eleman tarafından etkilendiği yönünde iyi bir işaret verecektir.
Hataların nedeni
LCP hatalarının ana nedeni, web sitesindeki her sayfada görünen bir kahraman resminden kaynaklanıyordu.
Elbette, böyle bir kahraman görüntüsünü sıkıştırarak ve yeniden boyutlandırarak optimize etmenin birçok yolu vardır; bu, Logpoint'in tasarım ve düzenini korumak isteseydi yapılması gerekenlerden biri olurdu. Yine de durum böyle değildi, bu yüzden LCP hatalarının çoğunu halleden kahraman görüntüsünü kaldırdık.
LCP hatalarının bir başka nedeni de kod yapısıydı. Logpoint, hem tasarımın hem de kodun nasıl yapılandırılacağına ilişkin sınırları oluşturan oluşturucuyla sonuçlanan bir sayfa oluşturucu kullanır.
Web sitesindeki bazı yerlerde, tüm düzende p etiketlerinin h1 içine yerleştirilmiş olması gibi metin öğelerinin En Büyük İçerikli Boya olmasına neden olan kusurlar vardı. Bunu düzeltmek için, kod yapısını düzene sokmak ve optimize etmek için web sitesini taradık.
Belirtildiği gibi, CLS de sorunun bir parçasıydı ve esas olarak birbirini etkileyen iki unsur tarafından tetiklendi.
iki unsur
Her şeyden önce, Logpoint'in web sitesinde Youtube yerleştirmeleri vardı ve yükleme süresine yardımcı olmak için bir küçük resim uyguladılar. Sorun, hem küçük resmin hem de videonun aynı anda yüklenmesi ve ardından videonun JavaScript koduyla kaldırılmasıydı. Bu, web sitesinde önemli düzen kaymalarına neden oldu.
CLS'yi etkileyen ikinci unsur, web sitesinde uygulanan CookieBot idi. Beklendiği gibi, CookieBot videolarla ilgili izinler verdi, bu nedenle izin verilene kadar görüntülenemediler.
Bu, iki unsurun birbiriyle etkileşime girdiği yerdir. Videoyu kaldıran JavaScript kodu, geliştirici tarafından özel olarak yapılmıştır ve CookieBot izniyle etkileşime girecek şekilde programlanmıştır.
Sorunu halletmek için, video öğesinin yüklenmesini ve komut dosyasının kendisinin yüklenmesini geciktiren komut dosyasını değiştirdik.
Logpoint'in birbiriyle farklı şekillerde etkileşime giren birçok bileşene sahip büyük bir web sitesi olduğunu belirtmek önemlidir. Bu, tema ve sayfa oluşturucu ile birleştiğinde web sitesini karmaşık hale getirir ve ayrıca optimizasyon için bazı seçenekleri sınırlar.
Sayfa Hızı etkilendi
Bu elbette Sayfa Hızını etkiledi, bu nedenle Önemli Web Verilerine odaklanırken bunu optimize etmeye de çalıştık. Bunu yapmak için eklentileri kurduk: Hızlı barındırma için WP Engine , HTML, CSS ve JS'nin harika önbelleğe alınması ve optimizasyonu için WP Rocket ve son olarak harika bir DNS sağlayıcısı elde etmek için CloudFlare .
Dil varyasyonları, yeni Önemli Web Verileri hataları oluşturdu…
Biz optimize ederken, Logpoint web sitelerinde önemli değişiklikler geçirdi, farklı dillerde çok sayıda yeni sayfa yayınladı, yeni öğeler ve düzen ile yeni Core Web Vital hatalarının ortaya çıkmasına neden oldu - artık yeni bir CLS hatası türünün düzeltilmesi gerekiyordu.
Bir kez daha analiz sürecimizi gerçekleştirdik. Bu özel durumda, düzen değişiklikleri bir üçüncü taraf sohbet eklentisinden kaynaklanmıştır. Çoğu zaman, bu hata CSS kuralları eklenip değiştirilerek düzeltilir, ancak üçüncü bir tarafça uygulanan sohbet robotu nedeniyle, ona etkin bir şekilde özel CSS ekleyemedik.
Bu nedenle, ekleme işlemi, aksi takdirde çok iyi performans gösteren bir sitede gözle görülür bir ücret aldığından, hem eklenti geliştiricilerine bir güncelleme isteği göndermek hem de alternatif olarak, daha iyi bir yükleme önceliğine sahip bir sohbet eklentisi bulmaktı.
Neyi neden yaptık
Önemli Web Verilerinin bir sıralama faktörü haline gelmesi, arama motorlarının sıralamalarının işleyişinde temel bir değişikliktir. Kullanıcı deneyimine odaklanmayan kötü tasarlanmış bir web sitesi artık onu kesmeyecek.
Google'ın amacı, web sitesi sahiplerinin kullanıcı deneyimine odaklanan siteler oluşturmasına yardımcı olmaktır ve Önemli Web Verilerini sıralama faktörleri olarak dahil ederek tam olarak bunu yaparlar.
Google, açık kartlarla oynaması veya güncellemeleri hakkında bize önceden bilgi vermesiyle tanınmaz, ancak Temel Web Verileri ve Sayfa Deneyimi Güncellemesi ile aslında sürecin başlarında bilgilendirildik.
Bu, elbette bize hem Önemli Web Verileri bilgisine hakim olmak için zaman verdi, hem de girişten bugüne kadar olan süreçte pek çok öğenin ve fikrin henüz nihai olarak kararlaştırılmadığı ve değiştirilmediği anlamına geliyordu.
Bu, mükemmel bir Core Web Vitals puanına sahip olmanın sonuçlarını içeriyordu - yalnızca iyi URL'ler.
Başlangıçta, Önemli Web Verileri sıralama faktörünün URL'leri nasıl etkileyeceği belirsizdi. Bu oldukça uzun bir süredir gündemde olan bir konu – ancak bu Haziran ayında, etki hakkında kesin olarak daha fazlasını öğreneceğiz.
"Önemli Önemli Web Bilgilerinde "iyi" puan alan sayfalar, arzu edilen bir kullanıcı deneyimi düzeyine ulaşıyor ve sıralamanın sayfa deneyimi bileşeninde bir artış elde edebilir."
– Google belgeleri
Aynı konuda, tüm hata türlerine hakim olmayan bir Önemli Web Verileri raporunun olumsuz etkilenip etkilenmeyeceği veya hala olumlu bir etkisinin olup olmayacağı da belirsizdir.
"Önemli Önemli Web metriklerinden en az birinde "iyi" ölçüm yapmayan veya diğer sayfa deneyimi kriterlerini geçmeyen sayfalarınız varsa, zaman içinde bu boyutlardaki iyileştirmelere odaklanmanızı öneririz. Sayfa deneyiminin tüm bileşenleri önemli olsa da, sayfa deneyiminin bazı yönleri ortalamanın altında olsa bile genel olarak en iyi bilgilere sahip sayfalara öncelik vereceğiz.”
– Google belgeleri
Ayrıca, Core Web Vitals rozeti fikri, tıpkı AMP rozetinden bildiğimiz gibi, çizim tahtasındadır. Bu da henüz nihai olarak kararlaştırılacak.
"Genel kural şu ki, bu kriterleri arama sonuçlarında bir rozet göstermek için de kullanmak istiyoruz, bu konuda bazı deneyler yapıldığını düşünüyorum. Ve bunun için, tüm faktörlerin uyumlu olduğunu gerçekten bilmemiz gerekiyor. Yani HTTPS'de değilse, gerisi tamam olsa bile, o zaman bu yeterli olmaz.”
– John Mueller, Web Yöneticisi Eğilimleri Analisti, Google
Yani birçok belirsizlik olmasına rağmen, kesin olan bir şey var! Önemli Web Verileri kalıcıdır ve organik trafik için verilen savaşın büyük bir parçası haline gelecektir - ve bu nedenle Logpoint'teki Önemli Web Verileri hatalarını düzeltmek için fazladan çaba sarf etmemizin nedeni budur.
Önemli çıkarımlar
Yolun sonunda, sadece başladığımız yere dönüp bakmak uygun olur ve umarım bu vaka size kendi başınıza yürümeye başlamanız için gerekli bilgi ve araçları vermiştir.
Core Web Vitals, SEO'nun geleceği olacağını tahmin ettiğim bir şey. Büyümeyi etkilemek için organik trafiğe güvenme konusunda daha da ilerledik ve Önemli Web Verileri, mükemmel kullanıcı deneyimi için bir rapordan başka bir şey değil.
Kullanıcıyı yetkilendirdiğimizde ve onlara zaman ayırmaya değer bir ürün verdiğimizde, elbette onunla etkileşim kurmak isteyeceklerdir.
Gösterinin yıldızı olan Logpoint, Core Web Vitals'in içgörüleri sayesinde bir dönüşüm geçirdi ve LCP ve CLS sorunlarının yanı sıra üçüncü taraf entegrasyonları ve genel dağınık kod yapısı ile ilgilenmemize olanak sağladı.
Core Web Vitals tarafından sağlanan içgörülere bakış açıları çizerken en iyi uygulamalara bağlı kalarak, sitenin teknik yönlerini, kalabalığın üzerinde duracak şekilde değiştirebildik - buna Google'ın karar vermesi gerekiyor .
son bir tavsiye
Bitirmeden önce benden dostça bir tavsiye, Önemli Web Verilerinizi optimize etmeye odaklanmak - yalnızca sıralama faktörü nedeniyle değil, aynı zamanda web sitenizin ziyaretçileri üzerinde büyük bir etkisi olduğu için - ve SEO'nun hepsi bu değil mi? hakkında?
Yalnızca sitede geçirilen süreyi artırmakla kalmayacak, aynı zamanda hemen çıkma oranını da azaltacak ve umarım hem sıralamalarda hem de dönüşümlerde daha yüksek miktarlarda sonuçlanacaktır.
Bonzer'de Teknik SEO Uzmanı Andre Vestergaard ile birlikte yazılmıştır.