Kritik Olusturma Yolu

Kritik olusturma yolunun optimize edilmesi sayfalarimizin performansini iyilestirme açisindan kritik öneme sahiptir: Amacimiz, kullanicinin bir sayfada gerçeklestirmek istediginiz birincil eylemle ilgili içerige öncelik tanimak ve bu içerigi görüntülemektir.

Hizli bir web deneyiminin saglanmasi tarayicinin çok çalismasini gerektirir. Bu çalismanin çogu web gelistiricileri olarak bizden gizlenir: Biz biçimlendirmeyi yazariz ve ekranda güzel görünümlü bir sayfa görüntülenir. Ancak, tarayici HTML, CSS ve JavaScript kodumuzu tüketmeden ekrandaki olusturulmus piksellere tam olarak nasil gider?

Performans için optimize etme; HTML, CSS ve JavaScript baytlarinin alinmasindan bunlari olusturulan piksellere döndürmek için gerekli islemenin yapilmasina kadar aradaki bu adimlarda neler oldugunu anlamayla ilgilidir. Bu adimlar kritik olusturma yolu`nu olusturur.

asamali sayfa olusturma

Kritik olusturma yolunu optimize ederek, sayfalarimizin ilk olusturma süresini önemli ölçüde iyilestirebiliriz. Bunun öteside, kritik olusturma yolunun anlasilmasi, iyi performans gösteren etkilesimli uygulamalarin olusturulmasi için bir temel görevi de görür. Etkilesimli güncellemelerin islenmesine iliskin sürecin, sürekli bir döngü içinde ve ideal olarak saniyede 60 kare hizda yapildigi anlasilmistir! Ancak, simdilik aceleci davranip hata yapmayalim. Ilk olarak, basit bir sayfayi görüntülerken tarayicinin nasil ilerledigine dair hizli, en bastan baslayan bir genel bakisa göz atalim.

Critical Rendering Path

You will learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.

You’ll learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites. From there, you’ll start exploring and experimenting with tools to measure performance and simple strategies to deliver the first pixels to the screen as early as possible. You’ll learn how to dive into recommendations from PageSpeed Insights and the Timeline view of Google Chrome’s Developer Tools to find the data you need to achieve immediate performance boosts!

This is a free course offered through Udacity

Take Course