Vay be dostum, aynı dertten muzdarip çok arkadaş var piyasada, yalnız değilsin yani. Eskiden bir site açtık mıydı, kodunu yazdık mıydı tamam sanırdık, şimdi her yerden bir servis, bir eklenti peşimizde. Adı üçüncü parti script ama sanki birinci dereceden baş ağrısı oluyor bazenler! :D
Bak şimdi, bu işin temeli biraz eleme ve erteleme üzerine kurulu. Misal, benim bir e-ticaret sitem vardı, canlı destek eklentisi falan derken anam bir bakmışım sayfa açılana kadar kullanıcı gitmiş başka siteye. Sonra oturdum düşündüm, bu adam siteye girer girmez canlı desteğe mi koşuyor? Hayır tabii ki. Önce ürünleri geziyor, sepete atıyor, kafası karışınca geliyor. Yani 'acelesi olan cama çıkmasın' misali, ne kadar çok şeyi sonraya bırakabilirsek o kadar iyi.
İlk olarak, gerçekten gerekli olmayan ne varsa elden çıkaracaksın. Belki eski bir analitik kodu, belki artık kullanmadığın bir sosyal medya eklentisi... Bunları bir gözden geçirip temizlemek, inanın bana, büyük bir nefes aldırır siteye. Lazım olmayan yükü niye taşıyalım ki, değil mi?
Sonra, bu scriptleri yükleme şekillerini değiştireceksin. HTML içine `` tagını koyduğumuzda tarayıcı onu okur okumaz çalıştırmaya başlar, bu da sayfanın diğer elemanlarının yüklenmesini bekletir. İşte burada 'async' ve 'defer' mucizeleri devreye giriyor. Eğer script diğer scriptlere veya sayfanın içeriğine bağlı değilse, yani kendi başına takılıyorsa, 'async' kullan. Bu, tarayıcının scripti arka planda indirirken diğer HTML'i işlemeye devam etmesini sağlar. İndirme bitince hemen çalışır.
Eğer script sayfanın DOM yapısına ihtiyaç duyuyorsa ama yine de sayfa yüklemesini engellemesini istemiyorsan, o zaman 'defer' kullanmalısın. 'Defer' ile scriptler yine arka planda indirilir ama HTML tamamen ayrıştırılıp DOM oluşana kadar çalıştırılmaz. Üstelik defer kullanılan scriptler sırasıyla çalışır, bu da önemli bir avantaj.
Bir de 'lazy loading' denilen bir olay var ki, bu da can kurtarıcı. Özellikle sayfanın alt kısımlarındaki, kullanıcı aşağı kaydırmadan görmeyeceği görseller veya iframeler için harika bir çözüm. Onları kullanıcı oraya gelene kadar yükleme, hem bant genişliğinden tasarruf et hem de ilk yükleme hızını iyileştir.
Son olarak, 'Resource Hints' denen şeylere bir bakmanı öneririm. Özellikle 'preconnect' ve 'dns-prefetch', tarayıcıya üçüncü parti kaynaklara daha erken bağlantı kurması veya DNS çözümlemesi yapması için ipuçları verir. Böylece o kaynaklar gerektiğinde daha hızlı hazır olur.
Uygula bunları, bak gör site nasıl kuş gibi hafifleyecek. Emeğinin karşılığını alırsın inşallah. Hadi kolay gelsin! ;)
