Bilgisayar Mühendisliği

Oluşturmayı Engelleyen Kaynakları Kaldırmak

Oluşturmayı Engelleyici Nedir (Render Blocking): İnternet sayfasının hızlı bir şekilde yüklenmesini engelleyici faktörlere verilen isimdir. Oluşturmayı engelleyen kaynaklar ortadan kaldırılarak bir sayfanın üst kısımlarının 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:

-Reklam-
Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırarak Sayfanın Açılışı Kısaltılır
Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırarak Sayfanın Açılışı Kısaltılır

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

1- Async ve Defer Metotlarını Kullanın

Async Nedir: Sayfa derlendiğinde JavaScript (.js) kaynağına denk gelindiğinde, JS kaynağının yüklenmesini beklemeden sonraki satırlardan kodun çalıştırılmaya devam edilmesini sağlayan yöntemdir.

// Kullanış Biçimi (Syntax)
<script src="dosya.js"></script> // Normal Kullanım
<script async src="dosya.js"></script> // Async İle Kullanım

Defer Nedir: Tanımlandığı komutun sayfa çözümlemesi tamamlandıktan sonra yürütülmesini sağlayan yöntemdir. CSS ve JS dosyalarının her ikisi için de kullanılabilir. Oluşturmayı engelleyen kaynakları ortadan kaldırın sorunun çözümü için en ideal yöntemdir.

// Kullanış Biçimi (Syntax)
<script src="dosya.js" defer></script>
Async ve Defer Metotları Oluşmayı Engelleyen Kaynakları Azaltır
Async ve Defer Metotları Oluşmayı Engelleyen Kaynakları Azaltır

Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırmak İç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- Critical Path Kullanın

Critical Path (Kritik Yol) Nedir: Kullanıcının cihazında 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.

-Reklam-

         
Above The Fold ve Below The Fold Nedir?
Above The Fold ve Below The Fold Nedir?

Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırmak İçin:
✅ Sayfanın üst kısmının hızlıca yüklenmesi için zorunlu olan kaynakları tespit edin ve bu kaynakların critical path optimizasyonu ile hızlıca yüklenmesini sağlayın.
✅ İlgili CSS dosyalarını HTML içerisinde 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.
✅ İlerleyen sürelerde render olacak (oluşacak) reklam, banner, video gibi alanlar için mevcut alanı dolduracak bir şekilde görsel kullanın. (Image placeholder)

Oluşturmayı Engelleyen Kaynaklar (Render Blocking) Sorunu Kritik Yol (Critical Path) İle Çözülebilir
Oluşturmayı Engelleyen Kaynaklar (Render Blocking) Sorunu Kritik Yol (Critical Path) İle Çözülebilir

💡 Profesyonel İpucu: Tüm CSS dosyasını HTML içerisinde inline (internal) olarak yerleştirmek oluşmayı engelleyen faktörleri ortadan kaldırmak için kolay bir yöntemdir. Fakat;
➽ HTML boyutunu önemli şekilde büyüttüğü
➽ Meta etiketlerini bulunamaz kılarak sitenin sosyal medya ile yazışma uygulamaları gibi çeşitli platformlarda paylaşıldığında thumbnail oluşumunu engelleyebildiği ve
➽ Sunucu yanıt süresini uzatabildiği için önerilmez.
(Ayrıca Bakınız: Sunucu Yanıt Süresi Nedir? Nasıl Kısaltılır?)

Bu sebeplerden ötürü CSS dosyaları için kritik yol kullanmak en akıllıca seçim olacaktır. Peki CSS için kritik yol nasıl kullanılır? İlk başta tüm CSS dosyalarını erteleyin. Daha sonra sayfanın hemen yüklenmesi için gerekli olan kritik CSS satırlarını bulup; şu şekilde <head> etiketinden sonra style etiketi içerisine ekleyin:

-Reklam-

Kritik CSS Nasıl Oluşturulur? [Kritik Yol Örneği]
Kritik CSS Nasıl Oluşturulur? [Kritik Yol Örneği]

3- 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.

Fakat yazı tipleri sayfanın üst bölümünde yükleninceye kadar özel yazı tiplerini değil de standart yazı tipini göstermek (preload) yazı tiplerinin geç yüklenmesini sağlar ama oluşmayı engelleyen (render-blocking) olmadığı için sayfa hemen yüklenir.

Yazı Tiplerini Preload Yükleterek Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın
Yazı Tiplerini Preload Yükleterek Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın

4- 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?)

-Reklam-

         
Lazy Load Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın Sorununun Çözülmesinde Kullanılabilir
Lazy Load Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın Sorununun Çözülmesinde Kullanılabilir

Oluşturmayı Engelleyen Kaynaklar Hakkında Son Söz

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, ş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: Site Hızlandırma: Google Pagespeed Hataları ve Çözümleri)

Technogezgin.com Bilgi
Oluşturmayı engelleyen kaynakları ortadan kaldırın sorunu” konulu yazımız hakkında eklemek istediklerinizi, sorularınızı ve (eğer varsa) yazıdaki yanlışları yorumlarda belirtebilirsiniz.

Bilgi güçtür, paylaştıkça büyür. Bu sebeple bu yazıyı da; yazının altındaki (logolu) paylaşım tuşlarını kullanarak gönül rahatlığı ile paylaşarak bize büyük bir iyilik yapabilirsiniz.

Ana Sayfa: 
https://www.technogezgin.com/
Hayata Dair Özgün ve Kaliteli Yazılarımız: 
https://www.technogezgin.com/blog/

-Reklam-

MrKaptanTR

Hacettepe Üniversitesi'nde bilgisayar mühendisliği öğrencisi, aynı zamanda technogezgin.com internet sitesinin de kurucusu. Kafaları açan, bilgi hazinelerine değer katan, bakış açılarını adeta uçuran, “Vay be, adamlar bunu da mı yapmış?” dedirtecek cinsten içerikler üretmeye çalışan birisi.

2 Yorum

  1. Kardeşim 15 yıllık bir webmaster olarak yazıyorum, tebrik ediyorum seni içeriklerin gayet güzel, yolun açık olsun .

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı