1. Asenkron ve Erteleme (Defer) Yükleme Tekniklerini Kullanın
JavaScript dosyalarını doğru sırayla yüklemek çok önemli. Ancak bazen, sayfanın görünmesini bekleyen büyük JavaScript dosyaları sayfa yükleme süresini uzatabilir. Neyse ki bunun bir çözümü var. Asenkron yükleme ile JavaScript dosyalarını paralel olarak yükleyebilirsiniz. Bunun için HTML'deki
script etiketine async veya defer özelliği ekleyebilirsiniz.
Bu, JavaScript dosyasının sayfanın geri kalanının yüklenmesini engellemeden arka planda yüklenmesini sağlar.
2. Minify ve Sıkıştırma İşlemleri
JavaScript dosyaları ne kadar küçükse, sayfa o kadar hızlı yüklenir. Minify işlemi, JavaScript dosyanızdaki gereksiz boşlukları, yorumları ve satır sonlarını kaldırarak dosya boyutunu küçültür. Bunun için çevrimdışı araçlar veya online servisler kullanabilirsiniz.
Örnek olarak, UglifyJS veya Terser gibi araçları tercih edebilirsiniz. Minify edilmiş dosyalar daha hızlı yüklenir ve sayfa hızını artırır.
3. JavaScript Dosyalarını Doğru Sırayla Yüklemek
JavaScript dosyalarını doğru sırayla yüklemek, performansı doğrudan etkiler. Eğer bir dosya diğerine bağımlıysa, önce bağımlı olan dosyanın yüklenmesi gerekir. Aksi takdirde, sayfanın görünmesi gecikebilir.
Dosyaları doğru sırayla yüklemek için, bağımlı dosyaları önceliklendirerek yükleyebilirsiniz. Ayrıca, defer özelliğini kullanarak dosyaların sayfanın geri kalanı yüklenmeden önce yüklenmesini engelleyebilirsiniz.
4. Tarayıcı Önbellekleme Stratejileri
Sayfanızda sıkça kullanılan JavaScript dosyalarını, tarayıcı önbelleğine alarak sonraki ziyaretlerde hızlıca yüklenmesini sağlayabilirsiniz. Bunu yapmak için, web sunucunuzda uygun
Cache-Control başlıklarını ayarlayabilirsiniz.Örnek olarak:
Cache-Control: max-age=31536000
Bu başlık, tarayıcıya belirli bir süre boyunca dosyayı önbelleğe alması gerektiğini söyler, bu da sayfa yükleme sürelerini önemli ölçüde hızlandırır.
5. Lazy Loading (Tembel Yükleme) Uygulaması
Sayfanın tamamı yüklendikten sonra, görsellerin ve JavaScript dosyalarının yüklenmesini sağlamak için lazy loading tekniklerini kullanabilirsiniz. Böylece, kullanıcı sayfayı aşağıya kaydırdıkça yalnızca ihtiyacı olan içerikler yüklenir.
Bu yöntemi uygulamak için, modern JavaScript ile kolayca desteklenen
IntersectionObserver API'sini kullanabilirsiniz.
const images = document.querySelectorAll("img.lazy");
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
entry.target.classList.remove("lazy");
observer.unobserve(entry.target);
}
});
});
images.forEach(image => {
observer.observe(image);
});
Bu sayede sadece görünür olan görseller yüklenir, böylece sayfa daha hızlı açılır.
6. JavaScript ile Asenkron Veri Yükleme
Sayfa yüklendikten sonra, verilerin asenkron bir şekilde yüklenmesi daha iyi bir kullanıcı deneyimi sağlar. AJAX veya Fetch API'lerini kullanarak sayfa yüklendikten sonra verileri dinamik olarak yükleyebilirsiniz. Bu teknik, sayfanın ilk yüklenme süresini kısaltır.
fetch('data.json')
.then(response => response.json())
.then(data => {
console.log(data);
});
7. JavaScript Kodunu Modüler Hale Getirin
JavaScript kodunuzu modüler hale getirerek, yalnızca ihtiyacınız olan dosyaların yüklenmesini sağlayabilirsiniz. Webpack veya Rollup gibi araçlarla, gereksiz kodu ayıklayabilir ve dosya boyutunu küçültebilirsiniz.
8. CDN Kullanımı
Kütüphaneler gibi sıkça kullanılan JavaScript dosyalarını bir içerik dağıtım ağı (CDN) üzerinden sunmak, dosyaların daha hızlı yüklenmesini sağlar. Popüler CDN sağlayıcıları, JavaScript dosyalarını coğrafi olarak kullanıcıya en yakın sunucudan sunar, böylece yükleme süresi kısalır.
9. JavaScript Dosyalarını Paralel Olarak Yükleyin
Modern tarayıcılar, aynı anda birden fazla dosyayı yükleyebilir. Bu nedenle, JavaScript dosyalarını paralel olarak yükleyerek sayfanın hızını artırabilirsiniz. Ancak çok sayıda dosya yüklerken, başta belirttiğimiz gibi dosya sırasına dikkat etmeniz gerekir.
10. JavaScript'in İçinde Veritabanı İsteklerini Geciktirin
Web sitenizin JavaScript kodu veritabanı isteği yapıyorsa, bu isteklerin sayfa yüklenmeden önce yapılmaması gerekir. Bu tür istekleri, sayfa yüklendikten sonra başlatmak, ilk yükleme süresini önemli ölçüde hızlandırır.
