İçindekiler
İskelet ekran (skeleton loading), kullanıcı tecrübesi açısından incelediğimizde LinkedIn, Instagram, Youtube üzere sıkça kulandığımız platformlarda karşılaştığımız bir uygulama tipi diyebiliriz. İskelet ekranlar tam olarak nasıl çalışıyor, SEO tarafında bizlere nasıl katkı sağlar? Gelin bunları inceleyelim!
Skeleton Loading Nedir?
Günümüzde genelde Javascript tabanlı çalışan web siteleri, iskelet ekranlar sayesinde ziyaretçilerine sitelerinin daha süratli açıldığını düşünmelerine katkı sağlıyor. İskelet ekranlar, yani dalda ismi çokça kullanılan Skeleton loading, sayfa içeriği büsbütün taranmadan evvel ilgili bileşenlerin (component) yerine görünen görsellerdir. Component’lerin, widget’ların yahut eser kartlarının yüklenmesinden evvel aslına uygun bir önizleme sunduğu için daha hızlı yükleme müddeti izlenimi vermektedir. Bu kavram, eser dizayncısı olan Luke Wroblewski tarafından 2013 yılında bekleme sürelerinini uygunlaştırılması ile ilgili oluşturulan blog içeriği ile tanıtıldı.
Luke’un yapmış olduğu araştırmaya nazaran, insanların sayfaya girdiğinde bir şeylerin yüklendiğini görmeleri bekleme müddetini artırdığını için hemen çıkma oranını düşürüyor. Skeleton loading, bu noktada bilgilerin kademeli olarak yüklenmesine yardımcı olduğundan ötürü işlerin süratlice gerçekleştiği hissini yaratacaktır. Preloader görselleri, kullanıcılara sayfanın yüklenmeyeceği hissiyatını yarattığı için kullanıcılar tarafından da pek sevilmez. Sayfanın temel yapısını ön izleyen bir iskelet ekranla yükleme sürecinin nasıl başladığını görüyoruz. Evvel iskelet ekranı görünür, akabinde tam sayfa oluşturulana kadar ekran kademeli olarak içerikle doldurulur.
Skeleton Loading Cinsleri Nelerdir?
İki cins iskelet ekran olarak nitelendirdiğimiz yapı vardır:
- İçerik yer tutucuları
- Renk yer tutucuları
İçerik yer tutucuları üstteki görselde de yer alan ve Youtube, LinkedIn üzere uygulamaların kullandığı yapı diyebiliriz. İçeriklerin bulunduğu alanları açık gri kutu ve dairelerle ön izleme yaptığı alanlardır. Renk tutucular ise, içeriklerin olduğu kısımlardan çok ekseriyetle görsellerin birinci yükleme müddetinde görselin bulunduğu rengin ön izlemesini yapar.
İskelet Ekranlar SEO ve Pagespeed Tarafına Nasıl Tesir Eder?
İskelet ekranlar, direkt olarak SEO çalışmalarınızda uygulayabileceğiniz ve durum uygunlaşması sağlayabileceğiniz bir uygulama değildir. Altyapı ve süreç maliyeti olarak uygun olan projelerinizde uyguladığınız takdirde aslında kullanıcı tecrübesi açısından yararlı bir çalışma yapmış olursunuz. SEO’yu direkt olarak tesir etmese de kullanıcı odaklı çalışma yaptığımız için dolaylı olarak kesinlikle yararlarını göreceksiniz. İçeriğin başlarında belirttiğimiz üzere iskelet ekranlar sayfanın yüklenme suratını optimize etmek yerine siteye gelen kullanıcılara sitenin daha süratli yüklendiğini hissettirmek için tasarlanmıştır. İskelet ekranlar, spinner’lar ve başka yükleme animasyonlarıyla benzeri bir fonksiyon görür ancak burada spinner’lar kullanıcılara sayfanın yüklenmeyeceği, daha geç yükleneceği hissiyatı verirken iskelet ekranların ise tam karşıtı sayfanın daha süratli açılabileceği hissiyatını koruduğunu ve hatta bounce rate tarafında da güzelleşmeler yaratabileceğini söyleyebiliriz. Bunun sebebi, bir ilerleme yanılsaması yaratmasıdır. Spinner’lar içerikle ilgisizdir, içeriğin yüklenmesi için ne kadar beklememiz gerektiğini bize belirtmez. Bekleme mühleti birebir olsa da tasarım tarafında yapılan güzelleştirmelerle ziyaretçileri sitede tutmak için hayli yararlı bir uygulamadır.
Tüm bunların yanı sıra, Google’ın geçtiğimiz yıllarda duyurduğu Page Experience tecrübesini de güzelleştirebileceğini söyleyebiliriz. Aslında baktığımızda bu iskelet ekranlar sayfa içerisinde bulunan layout’ların (düzenin) bir ön izlemesini yarattığı için site içerisinde yaşanan kayma meselelerinin da önüne geçiyor. Olağanda, bir sayfa açıldığında compenent’lerin apansız yüklenip sayfayı titretmesi dahi CLS tarafında olumsuz bedellendiriliyor. Skeleton loading sayesinde bu sorunun da önüne geçebiliyoruz. CLS yani cumulative layout shift sayfa içerisinde yaşanan tertip kaymalarını skorlayıp GSC tarafından biz SEO’culara raporluyor. JS tabanlı sitelerde ekseriyetle bu sıkıntıların önüne geçmek sıkıntı olabiliyor. Site JS ile tarandığı için bu sayfaların yüklenmediği vakitlerde skeleton loading işinizi çözecektir.
İskelet Ekranları Ne Vakit Kullanmalıyız?
- İskelet ekranlar çoklukla CSR ile kurgulanmış alt yapılarda kullanılmaktadır.
- Yükleme mühleti 3 saniyeyi geçen sayfalarda kullanılabilir.
- Trafiği çok fazla olan sayfalarda kullanılabilir.
- Aynı anda birden fazla öge yüklenirken ziyaretçiye bir compenent’in yüklendiğini bildirmek için kullanılabilir.
- Uzun süren süreçler için kullanabilir.
Sonuç
Yapılabilecek ufak bir UX (User Experience) güzelleştirmesiyle birlikte aslında genel olarak birçok şeye sahip olabiliyoruz. Şayet projeniz için uygun olduğunu düşünüyorsanız iskelet ekranlar kullanıcı tecrübesini güzelleştirebilecek, SEO tarafında dolaylı olarak olsa bile rakiplerinizden bir adım önde olmanızı sağlayacaktır.
Hemen çıkma oranı hakkındaki Bounce Rate Nedir? Nasıl Düşürülür? başlıklı yazımızı da buraya bırakmış olalım. Şimdiden keyifli okumalar!
