Bir CSS satırı, 3700 URL üzerinde kümülatif düzen gezinmesini nasıl iyileştirir?
Geçen yaz tipps+trick teknolojisini Haberler online'a dönüştürdük. Teklif birkaç yıl önce saf bir AMP sitesi olarak başladı ve bu nedenle diğer teknoloji yığınımızdan tamamen farklı bir teknolojiye dayanıyordu. AMP artık herhangi bir fayda sunmadığından ipuçlarını ve püf noktalarını standart teknoloji tabanımıza entegre etmek istedik. Bu aynı zamanda – görünüşe göre – büyük sorunlar olmadan da işe yaradı.
Duyuru
Hilko Holweg, Haberler Medien'de bir ön uç geliştiricisidir ve özellikle web performansı konusunda tutkuludur. Ön ucun yanı sıra teknolojiyle ilgili pek çok şeyle de ilgileniyor. Örneğin, C't için Raspberry Pi'yi temel alan çevrimdışı ses tanıma özelliğine sahip bir dijital asistan hakkında bir makale yazdı.
Arama konsolu
Ancak Google Arama Konsolu bizimle pek aynı fikirde değildi: neredeyse tüm ipucu+püf noktaları URL'leri aniden kendilerini çok daha kötü bir performansla listelenmiş halde buldu. Hepsinden önemlisi, Kümülatif Düzen Kayması (CLS) buradaki bir numaralı sorundu. Bu web performansı ölçümü, kullanıcılar etkileşimde bulunmadan bir sayfadaki kaç öğenin atlandığını gösterir. Bu, bir tıklama nedeniyle meydana gelen düzen değişikliğinin sorun olmadığı, ancak kaydırma sırasında meydana gelen düzen değişikliğinin uygun olmadığı ve yoğunluğa bağlı olarak CLS üzerinde olumsuz bir etkiye sahip olduğu anlamına gelir.
Fark
Search Console ölçüm verileriyle ilgili can sıkıcı olan şey, tipps+püf noktalarının Haberler çevrimiçindeki diğer tüm makalelerle aynı teknolojiyi kullanması, ancak diğer makalelerin CLS sorununu göstermemesiydi. Peki tüyolar+püf noktalarının farkı neydi? Daha sonraki kontrollerden sonra bile başlangıçta teknolojide hiçbir şey bulamadık, ancak sonunda belirleyici farkı keşfettik: Kullanıcı davranışı farklı. Elbette bu, kullanıcıların herhangi bir şekilde “suçlu” olduğu anlamına gelmiyor; yalnızca soruna yaklaşımımızın yanlış bir varsayıma dayandığı anlamına geliyor.
Kullanıcı davranışı
Çevrimiçi ortamda güncel olaylarla ilgili makaleler söz konusu olduğunda, kullanıcılar genellikle bir genel bakış sayfasından birkaç makale açıp okumak için siteye geri döner veya sitede daha uzun süre kalırlar. İzin bannerını bir kez görüyorsunuz, tıklayıp uzaklaşıyorsunuz ve ardından birkaç sayfa görüntüleme daha yapıyorsunuz. İzin banner'ının bulunduğu sayfayı görüntülemek, kullanıcı oturumu başına birçok işlemden yalnızca biridir.
İpuçları + püf noktaları ile işler farklıdır. tüyolar+püf noktaları makaleleri belirli sorulara doğrudan yanıtlar, kısa eğitimler ve adım adım talimatlar sunar. Kullanıcılar genellikle ipuçlarına ve püf noktalarına doğrudan sorularını girdikleri Google aramasından gelir. İlk çağrı izin banner'ının önüne gelir, tıklanır, sayfa yeniden yüklenir ve sonraki çağrı içeriği okumak için kullanılır. Kullanıcılar daha sonra tekrar ayrılırlar. Bu, bu tür içerikler için hiç de alışılmadık bir durum değil, ancak izin banner'ının bulunduğu davete çok daha fazla ağırlık veriyor. Peki izin banner'ının aslında CLS ile ne alakası var?
Web yazı tipleri
Onay banner'ımıza Haberler'da kullandığımız yazı tipinin aynısını yüklüyoruz. Mimari nedeniyle izin banner'ı bir alt alanın iFrame'idir. Katıştırılmış web yazı tipine önbellekten erişilemiyor Haber yararlanın ve karakteri tekrar yükleyin. Şu ana kadar yazı tipi yükleme stratejimiz olarak izin bannerını kullandık font-display: swap;. Bu, tarayıcının web yazı tipinin oluşturulması için kısa bir süre beklediği, ancak daha sonra yazı tipini bir yedek yazı tipiyle oluşturduğu anlamına gelir. Ancak yazı tipi, kullanılabilir hale gelir gelmez Web yazı tipi kullanılarak yeniden oluşturulacaktır.
Bu, özellikle yavaş bağlantılarda yazı tipi yüklenmesi nedeniyle izin banner'ında ortalamanın üzerinde düzen değişikliği yapıldığı anlamına gelir. Ancak bu durum şu ana kadar özellikle önemli değildi. Tipps+püf noktaları ile değişen kullanıcı davranışı nedeniyle işler çok farklı gitti.
İpuçları ve püf noktaları için Google Search Console'daki Önemli Web Verileri'nin iyileştirilmesi görünür hale geliyor.
Çözüm
Sorun daraltıldığında çözüm basitti: devre dışı bırakma font-display: swap; oldu font-display: optional;. Bu, tarayıcının web yazı tipini yalnızca kısa bir süre beklediği, ardından sonunda görüntülediği ve ardından tekrar değiştirmediği anlamına gelir. Search Console'da düzeltmeleri incelemeye başladık ve birkaç hafta sonra grafikler tamamen farklı görünmeye başladı (resme bakın). Haberler'nin diğer çevrimiçi sitelerinde bile, önceki durumda olduğu gibi, iyileştirme özellikle önemli değildi, ancak tabii ki burada da optimizasyon gerçekleştirdik.
(harita)
Haberin Sonu