Speed index, bir web sayfasının öğelerinin ne kadar hızlı görünür hale geldiğini gösteren bir web sayfası yükleme performansı metriğidir. Speed index(SI) sadece ekranın görünen kısmında ölçülür. Ekranın baş bölümünün üstündeki görünen kısmı, web sayfası içeriklerinin görsel ilerleme ve görsel eksiksizlik hızı ile Speed index puanını etkiler. Farklı görüntü alanı boyutları, farklı Speed index puanları üretecektir.

Speed ​​index, 2012 yılında Webpagetest tarafından tanıtılmıştır. Speed ​​index’in ölçüm ve optimizasyon metodolojileri ile birlikte öneminden dolayı birçok farklı yaklaşım mevcuttur. Speed index, “ Gerçek Sayfa Hızı ” ile birlikte “ Sayfa Hızı Algısı ” ile de ilgilidir .

İyileştirilmiş bir hız endeksi puanı, bir web sitesinin kullanıcıyla görsel olarak daha hızlı iletişim kurduğu ve kullanıcıya ziyaretin amacına ulaşmak için daha hızlı bir fırsat sunduğu anlamına gelir. Hız Endeksi, Önemli Web Verilerinde bir web sayfası yükleme performans ölçüsü değildir. Ancak Speed index, bir web sayfasının kullanıcı için ne kadar verimli yüklendiğini gösteren önemli göstergelerden biridir.

Bu nedenle Search Intent ile Speed ​​Index arasında önemli bir bağlantı vardır . Bir kullanıcının Arama Amacı “hızlı bir işlem gerektiriyorsa”, Hız Endeksinin önemi hem UX hem de SEO için daha da artacaktır.

Speed Index Nasıl Ölçülür?

Speed index ölçülürken, bir web sayfasının ekranının görünen kısmındaki içerik, sayfa yükleme sırasında her 1 saniyede 10 kez kareler halinde kaydedilir. Sayfa yüklenirken alınan her kayıt arasındaki farka yani çerçeveler arasındaki farka algıda içeriğin yüklenme hızı noktasında bakılır.

“Tam” oranı, sayfa yüklenirken kaydedilen her kare ile web sayfası yüklendikten sonra çekilen son kare arasındaki farkın karşılaştırılmasıyla yüzde olarak hesaplanır. Farklı kareler için Tam Oranı da Speed index Puanının bir göstergesidir.

Speed index Puanını ölçerken, Görsel Tamlık yükleme süresi boyunca bir çizgi grafiğinde gösterilir. Görsel Tamlık Yüzdesi, web sayfası yükleme sırasında her an için kaydedilen kareler arasındaki farklara bakılarak işlenir ve grafiğe yerleştirilir. Görsel Tamamlanma Oranı Y Ekseninde, Yükleme Süresi X Eksenindedir. Bu noktada iki ayrı web sitesi karşılaştırıldığında Görsel Bütünlük hızı bulunur ve Görsel Bütünlük Hızı Speed index’idir.

Speed Index Nasıl İyileştirilir?

Speed index’ini iyileştirmenin iki yolu vardır. Bu yöntemlerden bazıları Aşamalı İşleme ile, diğerleri ise Kaynak Yükleme Sırası Optimizasyonu ve Kaynak Sıkıştırma ile ilgilidir. Speed index Puanını iyileştirmek için uygulanabilecek sayfa hızı yöntemleri aşağıda listelenmiştir.

1. Lazyload ile Ekran Dışı Görüntüler Yükleme.
2. Görüntüler için yer tutucular ekleme.
3. Yeni nesil görsel uzantıları kullanma.
4. Ölü ve kullanılmayan kodları temizleme.
5. Web sayfası için gerekli diğer kaynaklarla birlikte CSS ve Javascript’i sıkıştırmak.
6. CSS ve Javascript dosyalarını birleştirerek istek sayısını azaltmak.
7. Web sayfası kaynakları için bir önbellek hiyerarşisi ve stratejisi oluşturma.
8. Görüntü dosyalarını kullanıcı tercihlerine göre kayıpsız veya kayıplı olarak optimize etmek.
9. Erteleme ile üçüncü taraf izleme kaynaklarının indirilmesini erteleme.
10. Yazı tipi dosyalarını sıkıştırma, birleştirme ve optimize etme.
11. CSS ve JS Dosyalarını Yeniden Düzenleme.
12. Daha hızlı teslimat ve yanıt süreleri için Sunucu Koşullarının İyileştirilmesi.
13. Web sayfası kaynaklarının daha hızlı iletilmesi için CDN kullanımı.
14. DOMContentLoaded Olayının daha hızlı gerçekleşebilmesi için HTML Yapısının DOM Boyutunu azaltma.
15. Web Sayfasının Anahtar İsteklerini Önceden Yükleme.
16. Katlama bölümünün üstünü yapmak için Shadow DOM kullanmak ana önceliktir.
17. Daha yumuşak sayfa geçişleri için Sanal DOM kullanma.
18. Sunucu tarafında sıkıştırma altyapısı olarak Brotli, Gzip ve Deflate kullanma.
19. Web sayfaları için Ön işlemeyi kullanma.
20. Web sayfaları için Sunucu Tarafı Oluşturma’yı kullanma.
21. Ekran Dışı Web Sayfası Öğesinin Oluşturulmasını Geciktirmek için “content-visibility:auto” CSS’yi kullanma

CSS ve JavaScript Optimizasyonu

Web sayfalarının hızlı yüklenmesi, kullanıcı deneyimini iyileştirmenin kritik bir parçasıdır. CSS ve JavaScript optimizasyonu, sayfanızın daha hızlı yüklenmesine yardımcı olan önemli adımlardan biridir. Bu yazıda, gereksiz dosyaları birleştirme, sıkıştırma, lazy loading ve asenkron yükleme gibi en iyi uygulamaları ele alacağız.

1. Gereksiz Dosyaları Birleştirin ve Sıkıştırın

Web sayfanızın hızını artırmak için ilk adım, gereksiz CSS ve JavaScript dosyalarını birleştirmek ve sıkıştırmaktır. Bu, sayfanın yükleme süresini azaltır ve veri transferini optimize eder.

Birleştirme (Concatenation): Farklı CSS ve JavaScript dosyalarını tek bir dosyada birleştirerek tarayıcının birden fazla dosyayı indirme gereksinimini ortadan kaldırabilirsiniz. Bu, sunucu isteği sayısını azaltır ve sayfanın daha hızlı yüklenmesine yardımcı olur.

Sıkıştırma (Minification): CSS ve JavaScript dosyalarındaki gereksiz boşlukları, girintileri ve açıklamaları kaldırarak dosyaları daha küçük hale getirin. Bu, veri transferini azaltır ve tarayıcıda daha hızlı yorumlanmasını sağlar.

2. Lazy Loading Kullanın

Lazy loading, sayfanın yüklenmesini geciktirmeyen öğeleri optimize etmenin etkili bir yoludur. Lazy loading, sayfa yüklendiğinde sadece görüntülenmesi gereken öğelerin yüklenmesini sağlar.

Resimler için Lazy Loading: Özellikle büyük resimler için lazy loading kullanarak sayfa yükleme süresini önemli ölçüde azaltabilirsiniz. Resimler, kullanıcı sayfayı aşağı kaydırdıkça yüklenir.

3. Asekron Yükleme

Sayfanın yüklendikten sonra dinamik içerikleri veya kaynakları asenkron olarak yüklemek, kullanıcının sayfayı hızlı bir şekilde görmesine olanak tanır. Bu, özellikle sayfanızda dinamik içerikler, widget’lar veya haritalar gibi yavaş yüklenen öğeler varsa önemlidir.

Asekron Yükleme için <script> Etiketi: JavaScript kodunuzu asekron olarak yüklemek için <script> etiketini kullanın ve async veya defer özelliklerini ekleyin. Bu, sayfa yüklenirken JavaScript’in diğer işlemleri bloke etmemesini sağlar.

Sonuç

CSS ve JavaScript optimizasyonu, web sayfanızın hızını artırmanın ve kullanıcı deneyimini iyileştirmenin önemli bir parçasıdır. Gereksiz dosyaları birleştirme, sıkıştırma, lazy loading ve asenkron yükleme gibi en iyi uygulamaları kullanarak sayfanızı daha hızlı ve daha etkili bir şekilde yükleyebilirsiniz. Bu, ziyaretçilerinizin sayfanızı daha hoş bir şekilde deneyimlemelerini sağlar ve sitede daha fazla zaman geçirmelerine yardımcı olur. Unutmayın, hızlı yüklenen web sayfaları kullanıcı sadakatini artırabilir ve arama motorları sıralamalarını olumlu etkileyebilir.