WordPress sitenizi Google PageSpeed Insights aracılığıyla incelediyseniz, Google muhtemelen size WordPress sitenizdeki “Render Blocking” kaynaklarını kaldırmanız gerektiğini söylemiştir.
“İşleme Engel Kaynaklarını Ortadan Kaldırma” Ne Anlama Geliyor?
İşleme engelleme kaynaklarının ne olduğunu ve sitenizin yükleme sürelerine neden zarar verdiğini anlamak için, web tarayıcısının bir web sayfasını nasıl oluşturduğuna bakarak başlamamız gerekir.
Bir ziyaretçi sitenize geldiğinde, web tarayıcıları temel olarak sitenizin kodunun üstünden başlar ve aşağı doğru okur.
Bu süreçte bir CSS veya JavaScript dosyasıyla karşılaşırsa, o dosyayı indirip işlemek için beklerken “okumayı” durdurması gerekir. Bu kaynakları indirmek ve ayrıştırmak için “duraklatıldığı” süre, web sitenizin içeriğinin birisi sayfaya geldiğinde hemen görülebilen kısmını yüklemek gibi çok daha verimli bir şeye harcanabilir.
Bir ziyaretçi sitenize geldiğinde, tarayıcıları yukarıdan aşağıya okumaya başlar. Bu nedenle, sitenizde ekranın üst kısmındaki içeriğin HTML kısmını ayrıştırmadan ve oluşturmadan önce, javascript dosyasını indirip ayrıştırmayı beklemesi gerekir. Sonuç? Ekranın üst kısmındaki içerik için HTML kısmının görüntülenmesi daha uzun sürer buda ziyaretçilerinizin sitenizi daha yavaş olarak algılayacağı anlamına gelir.
Google, işleme engelleme kaynaklarını ortadan kaldırmanızı söylediğinde, aslında “Gereksiz kaynakları sitenizin kodunun üstüne yüklemeyin çünkü ziyaretçilerin tarayıcılarının görünür sitenizi indirmesi daha uzun sürecektir.” demekte.
İşleme Engelleyen Kaynaklar Nedir?
İşleme engelleme kaynaklarına atıfta bulunurken, genellikle CSS yada Javascript dosyalarından bahsediyoruz. Tüm CSS ve JavaScript dosyalarının oluşturma engelleme olmadığını anlamak önemlidir. Kritik CSS’nizi en üste yerleştirmeniz önemlidir, aksi takdirde ziyaretçileriniz, stilsiz boş içeriğinizi görecektir.
Görüntüler İşleme Kaynaklarını Engelliyor mu?
Hayır, resimler oluşturmayı engellemiyor. Dosya boyutlarını azaltmak için resimlerinizi optimize etmek yine de önemlidir, ancak resimleriniz için dağıtım yolunu optimize etme konusunda endişelenmenize gerek yoktur.
Sitenizde İşleme Engelleyen Kaynakları Nasıl Test Edilir
WordPress sitenizin şu anda işleme engelleme kaynaklarına sahip olup olmadığını değerlendirmek için Google PageSpeed Insights’ıkullanabilirsiniz.
Tek yapmanız gereken test etmek istediğiniz URL’yi girmek. Ardından, Fırsatlar altındaki “İşleme engelleme kaynaklarını ortadan kaldır” bölümünde her bir kaynağı listeler.
İşleme Engelleyen Kaynaklarını Nasıl Ortadan Kaldırırsınız?
Endişelenmeyin, bunu manuel olarak yapmanız gerekmez. Bir sonraki bölümde oluşturma engelleme kaynaklarını ortadan kaldırmanıza yardımcı olabilecek WordPress eklentileri hakkında konuşacağız. Ancak, bu eklentilerin, oluşturma engelleme kaynaklarını ortadan kaldırmak için perde arkasında neler yaptığını anlamak faydalıdır.
İşleme Engelleyen JavaScript Nasıl Ortadan Kaldırılır?
İşlemeyi engelleyen JavaScript’i ortadan kaldırmak için birkaç farklı strateji vardır, ancak ana yöntemler şunlardır:
- Async: HTML ayrıştırıcısının (örneğin bir ziyaretçinin tarayıcısı) HTML’in geri kalanını ayrıştırırken JavaScript’i indirmesine izin verir. Yani, dosya indirilirken ayrıştırmayı tamamen durdurmaz. Ancak, HTML ayrıştırıcısını indirdikten sonra komut dosyasını yürütmek için duraklatır.
- Defer: HTML ayrıştırıcısının HTML’in geri kalanını ayrıştırırken JavaScript’i indirmesine izin verir ve HTML ayrıştırma işlemi bitene kadar komut dosyasının yürütülmesini bekler.
Defer kullanmanın yararı, komut dosyalarınızın kodda göründükleri sırayla yürütüleceklerinin garantilenmesidir.
Async bu yaklaşımı kullanmaz, bu da tüm JavaScript kaynaklarına uygularsanız sorunlara neden olabilir. Genellikle belgede daha önce görünen kaynaklara bağımlı kaynakları kırabilir. Async’in oluşturduğu en yaygın sorun, jquery.js belgeye eklenmeden önce yüklemeye çalışan bozuk jQuery kaynaklarıdır.
İşleme Engelleyen CSS Nasıl Ortadan Kaldırılır?
İşleme engelleme CSS dosyalarını ortadan kaldırmak biraz daha zor olabilir çünkü ekranın üst kısmındaki içeriği oluşturmak için gereken CSS’i geciktirmemeye dikkat etmelisiniz. İdeal düzenleme şu şekilde olmalıdır:
- Ekranın üst kısmındaki içeriği oluşturmak için gereken stilleri belirleyin ve bu stilleri HTML ile aynı satırda yayınlayın.
- Koşullu, yani yalnızca belirli aygıtlar veya durumlar için gerekli olan CSS kaynaklarını tanımlamak için CSS dosyalarını çeken bağlantı öğelerindeki ortam özniteliğini kullanın.
- Kalan CSS kaynakları, genellikle ertelenmiş veya eşzamansız JavaScript ile eklenerek yapılan bir hareketle, eşzamansız olarak yüklenmelidir.
WordPress Eklentisi ile İşleme Engelleme CSS ve JavaScript Kaynaklarını Giderme
Autoptimize ve Async JavaScript ücretsiz eklentilerini birlikte kullanarak kendiniz bu işlemi yapabilirsiniz.
Her iki eklentiyi de yükledikten sonra, Ayarlar → Async JavaScript’e gidin ve:
- Üst taraftaki Enable Async JavaScript kutusunu işaretleyin.
- Hızlı Ayarlar kutusunda Apply Async yada Apply Defer arasından seçim yapın.
Async seçeneği sitenizde sorunlara neden oluyorsa, eklentinin size bir seçenek sunduğu defer seçeneğini veya jQuery hariç tutmanızı öneririz.
Async JavaScript eklentisini ayarladıktan sonra Ayarlar → Otomatik iyileştirme’ye gidin ve:
- Optimize JavaScript Code seçeneğini seçin.
- Optimize CSS Code seçeneğini seçin.
İleri düzey bir kullanıcıysanız, ek JavaScript ve CSS optimizasyon ayarlarıyla oynayabilirsiniz, ancak çoğu site varsayılan ayarlarla iyi durumda olacaktır.
Bu dosyalardan daha fazlasını ortadan kaldırmak istiyorsanız, kritik CSS’nizi manuel olarak satır içi yapmak için Autoptimize özelliğini kullanabilirsiniz.
İsterseniz eklentileri ayrı olarak da kullanabilirsiniz. Ancak her iki eklentinin de aynı geliştiriciden geldiği ve birbirleriyle çalışmak için tasarlandığı göz önüne alındığında, çoğu site için en iyi yaklaşım bunları birleştirmektir.
