İnternet sitesi için PageSpeed optimizasyonu yapan kişilerin en çok karşısına çıkan hataların başında; hiç kuşkusuz “Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın” hatası gelmektedir. Özellikle web geliştiriciliği konusunda deneyimli olmayan; HTML & CSS & Javascript konusunda uzman olmayan kişilerin çözümünde zorlandığı bu hata; birkaç ufak detay ile rahatlıkla çözülebilmektedir. Bu yazımda sizlere tüm scriptler ve yazılımlarda kullanabileceğiniz “Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın” hatasının çözümlerinden bahsedeceğim.
Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın Hatası Nedir?
Bir internet sitesini tarayıcınızda açtığınızda; süreç yukarıdan aşağıya doğru ilerlemektedir. Yani ilk olarak HTML dosyanız çekilir ve ilk satırdan başlanılarak fonksiyonlar, görseller, dosyalar taranır. Özellikle JS ve CSS tarafında ise inline’dan ziyade bir style.css veya main.js gibi dosyalarımız olduğu için; HTML’de bu dosyalar çağrılır. Sistem de standart prosedürde; çağrıldığı satıra gelir ve dosyanın tamamen çağrılmasını bekler ondan sonra alt satıra inerek işlemine devam eder. Bu da haliyle açılış süresini ve yüklenme süresini arttıran hususlardır. Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın Hatası da tam olarak bu sebepten dolayı gelmektedir.
Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın Hatası Çözümü
Çözümü sizlere aktarırken sadece WordPress kullanıcılarını değil; tüm yazılımları etkileyecek çözümleri aktarmaya çalıştım. Aşağıdaki iki yöntemi deneyerek sorunu ortadan kaldırabilirsiniz. Fakat burada değinmem gereken husus; bu işlemlerde JS ve CSS dosyalarının geç yüklenmesini veya aynı anda yüklenmesini sağlıyoruz. Bu da yazılımsal olarak çakışmalara ve tasarımsal bozukluklara sebep olabilir. İşlemleri yaparken, canlı olarak sitenizi de test etmeyi unutmayın.
Asenkron Olarak Dosyaları Çalıştırma
Yukarıda anlattığımızı en yalın haliyle düşündüğümüzde sürecin şu şekilde ilerlediğini görüyoruz:
Satırı Oku -> Alt Satıra Geç -> Dosya Çağrıldıysa Dosyayı Getir -> Çalıştır -> Alt Satıra Geç
Peki yukarıdaki düzen yerine hem dosyayı getirip çalıştırmak hem de o sırada alt satıra devam etmek isteyebilir miyiz? Cevap: EVET.
Bunun için HTML’de bulunan -> async <- özelliğinden faydalanacağız.
<script async src="script.js" ></script>Yukarıdaki kodda da gördüğünüz üzere script.js dosyasını asenkron olarak yükleme talimatı verdik.
Dosyaları Gecikmeli Olarak Çalıştırma
Asenkron çalışma mantığında aynı anda işlem yapma durumu söz konusuydu. Bu da aslında %100 çözüm üretmede yeterli kalmayan bir yöntem. Çünkü, o sırada birçok dosyayı asenkron olarak çağırırken aslında yine oluşturmayı engellemeye başlarsınız. Bu durum için de ikinci metod “Defer” yani gecikmeli olarak çalıştırmadır.
“Defer” metodu ile; tarayıcınız tüm HTML’i okur ve defer etiketine sahip kodları tüm tarama bittikten sonra çağırıp çalıştırır. Böylece oluşturmayı engelleyen tüm kaynaklarınız gecikmeli olarak yüklendiği için sorun ortadan kalkar. Örnek kod parçacığı aşağıda yer almaktadır:
<script defer src="script.js" ></script>Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın hatasının çözümü için sunduğum bu iki çözüm yönteminin de en büyük sorunu; tekrardan belirteceğim üzere tasarımsal ve fonksiyonel bozukluklara sebebiyet verebilmesidir. Çünkü bir JS dosyasını gecikmeli çağırmanız, herhangi bir sectionda o kodla bağlantılı HTML’in doğru çalışmamasına sebep olabilir. Bu hususta test yapa yapa, tek tek dosyalara müdahale ederek hareket etmenizde fayda var.