Oluşturmayı Engelleyen Kaynakları Kaldırmak

Oluşturmayı Engelleyici Nedir (Render Blocking): İnternet sayfalarının hızlı bir şekilde yüklenmesine ve oluşturulmasına doğrudan engel olan dosyalara verilen isimdir. Bu faktörler optimize edilmemiş dosya yüklemelerinden veya optimize edilmemiş ayarlardan kaynaklanır. Oluşturmayı engelleyen kaynaklar ortadan kaldırılarak bir sayfanın sorunsuzca hızlı bir şekilde yüklenmesi sağlanır.

Bu sayede de kullanıcının internet sayfası yüklenene kadar ekran başında uzun süreler bekletilmesi engellenir. İşte bu yazıda oluşturmayı engelleyen kaynakları ortadan kaldırın sorunu hakkında sebepleriyle açıklanmış detaylı çözüm önerileri bulacaksınız. Oluşturmayı engelleyen faktörlerin sebep olduğu yüklenme sorununu tıpkı şu görseldeki gibi ifade edebiliriz:

Oluşmayı Engelleyen Kaynakları Ortadan Kaldırın [Çözüm]

1- Async ve Defer Özelliklerini Kullanın

📌 Async Nedir: Sayfa derlendiğinde JavaScript (.js) veya stil (.css) kaynağına denk gelindiğinde, JS veya CSS kaynağının yüklenmesini beklemeden sonraki satırlardan kodun çalışmaya devam etmesini sağlayan yöntemdir. Örnek kullanımlar şu şekildedir:
(Ayrıca Bakınız: JavaScript Nedir? Nerelerde Kullanılır? [Yakında…])

<!-- JS Dosyaları İçin Kullanış Biçimi (Syntax) -->
<!-- 1- Normal Kullanım -->
<script src="dosya.js"></script>
<!-- 2- Async İle Kullanım -->
<script async src="dosya.js"></script>
<!-- CSS Dosyaları İçin Kullanış Biçimi (Syntax) -->
<!-- 1- Normal Kullanım -->
<link href="dosya.css">
<!-- 2- Async İle Kullanım -->
<link rel="stylesheet" href="dosya.css">

📌 Defer Nedir: Tanımlandığı komutun sayfa yüklemesi ve derlenmesi tamamlandıktan sonra yürütülmesini sağlayan yöntemdir. Kritik olmayan CSS ve JS dosyalarının her ikisi için de kullanılabilir. Bu metodun örnek kullanımları şu şekildedir:
(Ayrıca Bakınız: CSS Nedir? Nerelerde Kullanılır?)

<!-- JS Dosyaları İçin Kullanış Biçimi (Syntax) -->
<!-- 1- Normal Kullanım -->
<script src="dosya.js"></script>
<!-- 2- Defer İle Kullanım -->
<script src="dosya.js" defer></script>
<!-- CSS Dosyaları İçin Kullanış Biçimi (Syntax) -->
<!-- 1- Normal Kullanım -->
<link href="dosya.css">
<!-- 2- Defer İle Kullanım -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null; this.rel='stylesheet'"> 
<noscript><link rel="stylesheet" href="styles.css"></noscript> 

✅ Oluşturmayı engelleyen kaynakları ortadan kaldırmak için önemli olmayan kaynakları ertelemek amacıyla async ve defer metotlarını kullanın. Bu sayede daha az önemli olan JS ve CSS dosyalarını ilk zengin içerikli boya (FCP) tamamlandıktan sonra yükleyip çalıştırabilirsiniz.

✅ Eğer JavaScript dosyalarından dolayı görsel fonksiyonlarda bir bozulma oluyorsa onu defer değil async olarak yükletip çalıştırmayı deneyin.
✅ Hayati önemde olmayan kodları header yerine footer’da yükletin.

2- Satır İçi Kritik CSS Kullanın

📌 Critical Path CSS Nedir: Kullanıcının cihazında sayfa açıldığına ilk görünen kısımlar için gerekli olan stil dosyalarıdır. Kritik CSS sayfaların hızlı bir şekilde oluşturularak internet sitesinin en hızlı şekilde açılmasını sağlayan özel bir yöntemdir. Bu yöntem sayesinde yüklenme önceliği gereksiz kaynaklar yerine önemli olarak işaretlenmiş olanlara verilir.

✅ Oluşturmayı engelleyen kaynakları ortadan kaldırmak için; sayfa açıldığında ilk görünen kısımların yüklenmesi için zorunlu olan (above the fold) stil kaynaklarını tespit edin ve bu kaynakların kritik yol optimizasyonu ile hızlıca yüklenmesini sağlayın.
✅ Ana sayfa, blog sayfası, diğer sayfalar, içerik sayfaları ve etiket sayfaları için ayrı ayrı kritik yol CSS’leri oluşturun.

✅ Akıllı telefon, tablet ve bilgisayarlar için ayrı ayrı kritik CSS’ler oluşturun.
✅ Kritik olmayan yani sayfa açıldığında ilk başta görünmeyen (below the fold) stil kaynaklarını HTML içerisinde satır içi (inline – internal) olarak yerleştirin.

✅ En yüksek verimi almak için bu işlemi olabildiği kadar mantıklı ve hızlı bir şekilde planlayın.
✅ Çeşitli internet siteleri veya eklentiler aracılığı ile otomatik olarak kolaylıkla kritik CSS oluşturabilirsiniz.

Bu sebeplerden ötürü CSS dosyaları için kritik yol kullanmak ve kalan CSS dosyalarını satır içi yaparak ertelemek en akıllıca hareket olacaktır. Peki CSS için kritik yol nasıl kullanılır? Kritik CSS satırları oluşturulduktan sonra; bu satırlar <head> etiketinden sonra <style> etiketi içerisine alınarak şu şekilde eklenmelidir:

Site hız testi araçlarında genellikle optimize edilmemiş JavaScript ve CSS dosyaları oluşturmayı engelleyen kaynaklar olarak ifade edilir. Fakat görseller ve yazı tipleri gibi dosyalar da optimize edilmedikleri taktirde açılış süresini önemli ölçüde uzatabilirler. [AMA BU HIZ TESTLERİNDE GÖRÜNMEZ!]

3- Tembel Yükleme (Lazy Load) Kullanın

Bir sayfada ne kadar fazla görsel, video ve reklam varsa sayfa boyutu o kadar fazla büyüktür. Sayfa büyüklüğünden ötürü de, sayfanın oluşması için kullanıcının indirmesi gereken dosya miktarı bir o kadar fazladır. İşte bu durum da (özellikle yavaş internet sahibi kullanıcılar için) yine sayfanızı oluşmayı engelleyen (render blocking) haline getirir.

Fakat bu sorunu görsellerin, videoların ve reklamların sayfanın kaldırıldıkça yüklenmesini sağlayan lazy load özelliği ile çözebilirsiniz. Bu konuda detaylı bilgi almak için şu yazımıza göz atabilirsiniz:
(Ayrıca Bakınız: Lazy Load Nedir? Ne İşe Yarar?)

4- Yazı Tiplerini (Fontları) Optimize Edin

Yazı tiplerini sayfanın üst bölümünde (header) yükletmek fontların hızlı yüklenmesini sağlar ama sayfayı oluşmayı engelleyen (render-blocking) hale getirdiği için sayfanın açılma süresi uzar. Bu sebeple yazı tiplerinin header’de yüklenmesinden kaçınılmalıdır.

Fakat yazı tiplerinde font-display özelliği için swap veya optional parametresi ile sayfa yükleninceye kadar özel yazı tiplerini değil de standart yazı tipini göstermek yazı tiplerinin geç yüklenmesini sağlar ama oluşmayı engelleyen (render-blocking) olmadığı için sayfa hemen yüklenir.

Özet: Oluşturmayı Engelleyen Kaynaklar Optimizasyonu

Oluşturmayı engelleyen kaynaklar sorununa hatalı kaynak yüklemesi kadar temiz kod ilkesine uygun olmadan gelişigüzel kodlanmış temalar da sebep olmaktadır. Bu tarz temaları her ne kadar optimize ederseniz edin, başınıza yeni sorunlar çıkarırlar. Bu sebeple tema seçimi de son derece kritiktir. Bu konuda detaylı bilgi almak için şu yazılarımıza göz atabilirsiniz:
(Ayrıca Bakınız: En İyi WordPress Tema Seçimi Nasıl Yapılır?)
(Ayrıca Bakınız: Kodlama & Programlama Standartları Nelerdir?)

Unutmayınız ki sayfaların geç açılması hem SEO, hem kullanıcı deneyimi hem de kazançlar açısından son derece olumsuz bir durumdur. Sayfa yükleme süresi ile hemen çıkma oranı arasındaki ilişkiyi gösteren bir araştırma şu şekildedir:
(Ayrıca Bakınız: Arama Motoru Optimizasyonu (SEO) Nedir? Nasıl Yapılır?)

Sitenizdeki hatalı kaynak yönetiminin sayfayı oluşturmayı ne kadar süre ile engellediğini çeşitli araçlar vasıtasıyla ölçebilirsiniz. Bunlardan birisi Google Pagespeed Insights aracıdır. Eğer sayfada oluşturmayı engelleyen kaynaklar var ise, oluşturmayı engelleyen kaynakların listesi ile beraber şu uyarıyı alırsınız:

Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın: Kaynaklar, sayfanızda ilk boyamayı engelliyor. Kritik JS/CSS’yi satır içinde yayınlama ve kritik olmayan tüm JS/stilleri erteleme seçeneğini değerlendirin. (…)

Kritik öğeleri satır içi yapmanıza veya daha az önemli kaynakları ertelemenize yardımcı olabilecek çeşitli eklentiler vardır. Bu eklentilerin sağlayacağı optimizasyonların tema veya eklentilerinizin özelliklerini bozabileceğine dikkat edin. Bunu engellemek için muhtemelen kodda değişiklik yapmanız gerekecektir

➽ Google Pagespeed Insights aracı ile ilgili bilgi almak ve bu aracı kullanarak site hızınızı önemli ölçüde nasıl iyileştirebileceğinizi öğrenmek mutlaka şu yazımıza göz atmanızı öneriyoruz:
(Ayrıca Bakınız: Google Pagespeed İle Site Hızlandırma Rehberi)