Nedir bu Render-Blocking ve Critical Path ?

Selamlar,

Eğer sayfa optimizasyonu ve page speed ile ilgili çalışma yapıyorsanız aşağıdaki uyarıya mutlaka denk gelmişsinizdir.

Bu konu hakkında yeterince kaynak olmadığını fark ettiğimiz için bu uyarının sebepleri, sonuçları ve çözümleri üzerine değinmek istedik.

Teşhis ve Tanım: Above the fold — Below the fold

Web sayfanız ilk açıldığında görünen alana above the fold diyoruz. Geri kalanı ise below the fold olarak adlandırıyoruz.

Above the fold — Below the fold

Critical Path

Aranızda Endüstri Mühendisliği, M.I.S vb. programların öğrencileri/mezunları mevcut ise CPM (Critical Path Method) deyince aklında bir şeyler canlanıyor olabilir. CPM mühendislik alanında bir projenin tamamlanması için en kısa yolun tespit edilmesi amacı ile kullanılan bir çözümdür. Bizim burada bahsettiğimiz Critical Path kavramı ise aslında buna çok uzak sayılmaz. Kullanıcının web sitesi ile etkileşime geçebileceği bizim için kritik olarak ifade edilen en hızlı oluşturulması gereken alandır. Ve bizden istenen bu alanı olabildiği kadar planlı, anlamlı ve hızlı bir şekilde oluşturmaktır.

Optimize ve Optimize olmayan Above the fold

Hatalı Kullanımın sonuçları

Sayfadan kaçan ziyaretçiler…

Eğer Critical Path imiz planlı bir şekilde oluşturulmazsa ziyaretçimizin bizimle etkileşime geçme süresi artacaktır. Google istatistiklerine göre 3G hızında yüklenmesi 5sn den fazla süren siteler ortalama yüzde 25 civarı kullanıcıyı kaybetmeye mahkumlar. Bu süreyi optimize etmek (3 sn ve altı) için çok fazla yöntem bulunmakta fakat bu başka bir yazının içeriği olabilecek derinlikte bir konu. Bu sebepten Critical Path konusuna dönelim.

Düşen Google ratingi..

Google artık bütün sayfanın yüklenmesinin (DCL) yanında FCP isimli bir parametre kullanıyor ve bu parametreyi ranking işleminde aktif kullandığı düşünülüyor. Yani kısaca Critical Path SEO içinde önemli bir ölçüt.

Yöntemler

Öncelikle bu bölümü daha hızlı render etmek için 2 ana başlığa çok dikkat etmemiz gerekmekte. Birincisi Critical Path imize uygulanacak CSS i başka hiç bir kaynağa gitmeden Html imize uygulamak. İkincisi ise sayfayı çizerken recalculate (aynı elemente bir kaç kere etki eden farklı Css ler ile tarayıcının çizim ve element konumlarını yeniden hesaplaması) süresini en aza indirmek. 2. bölüm biraz mimariniz ile ilgili. Bunun için mevcutta yer alan bu yazımıza göz atmanız faydalı olabilir.

Critical path optimizasyonu için uygulayabileceğiniz farklı yöntemler mevcut. Bunlar;

• Above the fold alanının Css lerini Html içerisine internal olarak yerleştirmek.
• Javascript ve diğer Css leri FCP tamamlandıktan sonra yüklemek/çalıştırmak.
• Daha sonra render olacak alanlar için (banner vb.) render işlemine kadar mevcut alanı dolduracak şekilde görsel kullanmak. (Amaç recalculate azaltmak)
• Sayfa yüklemesine kadar assetler/görseller için placeholder görseller kulanmak. (Facebook, Linkedin, Youtube da denk gelmiş olmalısınız.)

Youtube placeholder

Critical Path Css Oluşturmak

Sayfaya internal olarak ekleyeceğiniz Css leri (Above the fold alanı için) ayırmak manuel olarak yapıldığı zaman çok uğraştırıcı ve verimsizdir. Yeterince iyi elenememiş Critical Path Css i Html sayfaya eklendiği zaman farklı alanlarda gol yemenize sebep olabilecektir. Critical Path i toparlarken toplam sürede sayfa boyutundan dolayı geriye düşmek bu olasılıklardan birisidir. Bu zahmeti ve verimsizliği yok etmek için bunu otomatize edecek bir çözüm gerekli. Bu çözümü kodunuz ve geliştirme ortamınız ile yaşatabilirseniz çok daha pratik olacaktır.

Critical

Bu işi otomatikleştirme ve eleme işlemi için Addy Osmani tarafından Critical isimli çok verimli çalışan bir node paketi yazılmış. Bu paketi ortamınıza entegre edip kodunuzla yaşatmanız Critical Path için optimum çözümü getirecektir.

Paket varsayılan olarak Gulp uyumlu geliyor. Gönüllüler tarafından Grunt ve Webpack loader versiyonları geliştirilmiş bulunmakta. Ortamınıza göre paketi seçip entegre etmek ise size kalmış.

Kullanım

Paketin sizden istediği bir kaç parametre var. Viewportunuzun genişliğini ve yüksekliğini vererek hangi sayfa aralığı için Critical Css lerin oluşturulacağını kontrol edebilirsiniz. “inline” parametresi ile css in farklı bir Css dosyasına mı yoksa Html içerisine inline olarak mı yazılacağını seçebilirsiniz. Ve artık Critical Path Css iniz hazır. Bundan sonra yapmanız gereken tek şey herhangi bir kaynağa gitmeden bu Css leri Html sayfanıza yüklemek. Bununla birlikte önce beyaz yada Css siz gelen Html sayfalardan kurtulup açılışı ile bütün tasarımı oturmuş (Above the fold alanı için) web sayfalarına ulaşabilirsiniz. Tabi diğer optimizasyonları da gözden kaçırmamak şartı ile.

Detaylı sorularınız ve sohbetleriniz için Medium hesabı dışında bize dev@hesapkurdu.com mail adresinden de ulaşabilirsiniz.

Hepinize ışık hızında açılan siteler ve iyi günler dileriz.