1

I am doing the free course Website Performance Optimization at https://classroom.udacity.com/courses/ud884 from 2014 from Ilya Grigorik.

Although I completed the course now, I did not get the definition of critical rendering path length. The most formal defition was given at https://developers.google.com/web/fundamentals/performance/critical-rendering-path/optimizing-critical-rendering-path

the critical path length is a function of the dependency graph between the critical resources and their bytesize: some resource downloads can only be initiated after a previous resource has been processed, and the larger the resource the more roundtrips it takes to download.

I do not understand this definition. I read it a couple of times, but I just don't get anything from this sentence.

It is a function of the dependency graph between the critical resources and their bytesize

I never heard of a function of A between B and C. I only know a function f from A to B which means A is the domain and B the image and for each element x of the set A, f(x) is in the set B. But I guess here something else is meant, not in the mathematical sense of a function?

some resource downloads can only be initiated after a previous resource has been processed, and the larger the resource the more roundtrips it takes to download.

What is a roundtrip? When do resource block other resources? Does blocking mean here the number of connections per domain? Like in HTTP1 one may only download 2 connections in parallel (unoffically 6). So if I have 3 resoucres in parallel, 1 is blocked? And if I user HTTP2, then there is no blocking when downloading many resources in parallel?

I thought the definition becomes more clear when watching the videos, but unfortunately not.

  1. https://www.youtube.com/watch?v=ufCVTowBxoY

enter image description here

This example has 3 critical resources (The HTML, the css file, and the js file). The get request for the HTML represents one roundtrip, then after the HTML is downloaded, the CSS and the JS are requested. They can be downloaded in parallel so this is the second roundtrip. Leaving the us with 2 roundtrips. This makes sense to me. The solution can be found at https://www.youtube.com/watch?v=gXvftH75M7I&t=1s

  1. https://www.youtube.com/watch?v=R_udjn0u3yM&t=2s

enter image description here

This example has suddenly 5 roundtrips. But I would say this should have again only 2 roundtrips, because the css and js files can all be downloaded in parallel.

Actually, I cannot think of a situation, where I would have more then 2 roundtrips. First roundtrip is always the HTML, and all js/css assets will be downloaded in a second roundtrip.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.