Bir internet kullanıcısı için yavaş bir web sitesinden daha sinir bozucu bir şey yoktur. Bir web sitesi sahibi olarak web sitenizin performansını hızlandırmak, bu hayal kırıklığını azaltmak veya ortadan kaldırmak sizin işiniz.

Yavaş web sitesi yüklemesinin trafiğe olumsuz etki edeceğini herkes bilir. Ziyaretçilerin yüzde 40’ının yüklenmesi 3 saniyeden uzun süren bir web sitesinden ayrılacağını muhtemelen duymuşsunuzdur. Ancak mobil kullanıcılar için rakamlar daha da kötü. Google çalışmaları, sayfaların yüklenmesi 3 saniyeden uzun sürerse ziyaretlerin yüzde 53’ünün büyük olasılıkla siteyi terk ettiğini gösteriyor.

Hızın artık bir lüks değil, zorunluluk haline geldiği çok açık. Kendinize “Web sitemi nasıl hızlandırabilirim?” diye sormalısınız. Herhangi bir değişiklik yapmadan önce site hızınızı değerlendirin ve bunu daha sonraki ölçümlerde temel olarak kullanın. Burada özetlenen yöntemlerden hangisinin size en fazla başarıyı getirdiğini belirlemek için her değişiklikten sonra test edin.

Görüntüler

Görüntüler için temel kural şudur: Asla gereğinden büyük bir görüntü sunmayın. Bu, web sitenizin ziyaretçilerinin kullanması muhtemel birçok farklı ekran boyutu veya görünüm alanı göz önüne alındığında, takip edilmesi zor olan basit bir kuraldır. Resimlerden bahsettiğimizde, boyut yalnızca piksel ölçüm boyutları değil, aynı zamanda görüntü kalitesi tarafından kontrol edilen dosya boyutudur. İşte izlenecek bazı yollar:

• Her görüntünün birden çok sürümünü (boyutunu) oluşturun. Görüntü alanı boyutunu algılamak ve uygun boyutta görüntüler sunmak için kodla birlikte kullanılırlar, böylece elde taşınan bir cihaza 3000 piksellik bir görüntü veya bir Retina ekrana 200 piksellik bir görüntü göndermezsiniz.
• Google’ın .webp’si veya logolar için yeniden boyutlandırılabilir .svg dosyaları gibi farklı resim biçimlerini deneyin.
• Lazy Loading, şu anda tarayıcıda görünmeyen görüntülerin (ve belirli diğer öğelerin) yüklenmesini önleme yöntemidir. Örneğin, baştan sona resimlerin olduğu uzun bir makalede, makalenin ilerleyen bölümlerinde görüntülenen ve ilk tarayıcı penceresi için gerekli olmayan resimler, ilk sayfa yüklemesinde yüklenmeyecektir. Web sitenize Lazy Loading uygulamak en basit görevler değildir, ancak resim ağırlıklı bir web sitesi çalıştırıyorsanız, kesinlikle değerlendirmelisiniz. Web sitenizde WordPress kullanıyorsanız kullanabileceğiniz Lazy Loading eklentileri vardır (a3 Lazy Load gibi).

İçerik Dağıtım Ağları (CDN)

CDN’ler sunucu ve kullanıcı arasındaki mesafeyi azaltmak için geliştirildi. CDN, ziyaretçinin bulunduğu yere göre web sitesi ziyaretçilerine içerik sağlayan küresel bir sunucu ağıdır. Yani en basit ifadeyle bir dosya yüklersiniz, CDN o dosyayı birden fazla sunucuya kopyalar, ardından bir ziyaretçi web sitenize geldiğinde CDN hangi sunucunun ziyaretçiye en yakın olduğunu belirler ve dosyaları o sunucudan teslim eder. Bu nedenle, Kaliforniya’daki arkadaşınızın site dosyalarınızı Ankara’dan görüntülemesi yerine, onları Avrupa’daki bir sunucudan, mesafenin yarısından daha az bir mesafeden yükleyebilirler.

CDN’ler büyüdükçe ve genişledikçe daha fazla sunucu, nüfusun daha büyük bölümlerine yakın hale geldi. Bir CDN’nin görüntüler gibi dosyalarla nasıl zaman kazandıracağını görebilirsiniz (ve bazıları görüntüleri anında otomatik olarak yeniden boyutlandırabilir!), ancak bahsettiğimiz diğer varlık dosyalarında da yardımcı olabilirler.

Caching

Yavaş bir web sitesiyle mücadele etmenin kesin bir yolu, dosyaları önbelleğe almaktır. Önbelleğe alma, web sitesi dosyalarının bir ziyaretçinin tarayıcısında (veya bir ziyaretçinin bilgisayarında) geçici olarak saklanmasıdır. Yerel depolama, her sayfa yüklemesinde aynı dosyanın sunucudan istenmesi gerekmediği anlamına gelir. Bu nedenle, siteniz tek bir CSS dosyası kullanıyorsa, ziyaretçi dosyayı bir kez indirir, bundan sonra her sayfa yüklemesi için dosya yerel önbelleğinden çağrılır ve sayfa oluşturmayı çok daha hızlı hale getirir.

Assetler ve Scriptler

Bir zamanlar web dünyasının nadir oyuncuları olan JavaScript ve Cascading Style Sheets (CSS), artık web sitelerinin büyük çoğunluğu tarafından kullanılan temel araçlardır. Hem JavaScript hem de CSS kullanmadan en basit modern web sitesini bile oluşturmakta zorlanacaksınız. Ancak web sitesinin yavaş yüklenmesinin nedenleri genellikle bu dosyaların kullanımına kadar takip edilebilir.

Sorun şu ki, JavaScript ve CSS “oluşturmayı engelleyen kaynaklardır”, bu da JavaScript ve CSS yüklenirken HTML ayrıştırmasının durduğu anlamına gelir. Böylece ayrıştırıcı bir etikete ulaştığında, betiği getirmeyi ve çalıştırmayı durdurur, ardından HTML’yi yüklemeye devam eder. Bunun potansiyel olarak nerede bir performans sorununa yol açabileceğini (ve mümkün olan her yerde satır içi CSS’den kaçınmanın neden en iyisi olduğunu) görebilirsiniz.