İşte JavaScript performansını artırmak için uygulayabileceğiniz 7 etkili teknik:
1. Lazy Loading ve Asenkron Yükleme: Hızla Gelen Bir Çözüm
Lazy Loading kullanmak için aşağıdaki gibi bir yöntem kullanabilirsiniz:
const images = document.querySelectorAll('img[data-src]');
const options = { threshold: 0.5 };
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
}, options);
images.forEach(image => {
observer.observe(image);
});
Bu küçük ama etkili teknik, yalnızca sayfa görüntülenmeye başladığında gerekli verilerin yüklenmesini sağlar, böylece sayfa başındaki içerikler hızla gösterilebilir.
2. JavaScript Dosyalarını Küçültme ve Sıkıştırma: Temiz, Hızlı ve Etkili
Aşağıdaki gibi bir araç kullanarak dosyalarınızı küçültebilirsiniz:
// Örnek: UglifyJS kullanarak JavaScript sıkıştırma
uglifyjs input.js -o output.min.js
Bunu yaparak JavaScript kodlarınızın boyutunu ciddi şekilde küçültebilirsiniz.
3. Web Worker Kullanımı: İşleri Parçalarına Ayırın
Web Worker kullanarak aşağıdaki şekilde bir çözüm oluşturabilirsiniz:
const worker = new Worker('worker.js');
worker.postMessage('Başlangıç');
worker.onmessage = function(e) {
console.log('Web Worker Yanıtı:', e.data);
};
Bu teknik, yoğun JavaScript işlemleri gerektiren sitelerde oldukça kullanışlıdır.
4. Kod Bölme (Code Splitting): Her Şey Zamanında Yüklenmeli
import('./module').then(module => {
module.load();
});
Bu strateji ile gereksiz yüklemeleri önleyebilir, hızlı bir site deneyimi sunabilirsiniz.
5. Yerel Depolama ve Cache Yönetimi: Hızlı Erişim İçin
Yerel depolama kullanım örneği:
localStorage.setItem('userToken', 'abc123');
const token = localStorage.getItem('userToken');
Bu teknik, özellikle kullanıcı bilgilerini ve sık kullanılan verileri saklamak için faydalıdır.
6. Kritik CSS ve JS Ayrıştırma: Yalnızca Gerekli Kodlar Yüklenmeli
// Dinamik olarak stil sayfası yüklemek
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'critical.css';
document.head.appendChild(link);
Bu sayede, gereksiz yüklemelerden kaçınarak sayfa hızını artırabilirsiniz.
7. Asenkron Script Yükleme: Daha Hızlı Sayfa Yükleme
Bu teknik, özellikle dışa bağımlı script dosyalarının sayfanın yüklenmesini engellemesini önler.
---
Sonuç: Performans Önceliğiniz Olmalı
Unutmayın, hızlı yüklenen bir site sadece ziyaretçilerinizi memnun etmekle kalmaz, aynı zamanda Google gibi arama motorları tarafından da değerli görülür. Bu yüzden, sitenizin performansını iyileştirmek için hemen bu teknikleri uygulamaya başlayın!
