Moving on!

Just submitted the Website Optimization today.  It’s time to move on.  I hope to get some good feedback on the project and learn a few other ways to optimize websites.  But before the next project, here are a few reflections/things I’ve learned on Web Optimization.

– The Critical Rendering Path:  a graphical representation of how web pages are loaded in the browser. Here’s a quick drawing I made of the website I researched for the project:

The Critical Rendering Path

So let’s go over this piece by piece.  A user clicks a link and the browser starts to request the HTML file of that page at Time 0.  It receives a response from the server with that file and begins parsing the HTML to build the DOM (document object model).  While parsing, it runs into three CSS files in the header and has to halt rendering to request these files since CSS is render blocking, meaning it prevents the browser from rendering and painting the page for the user.

Finally, when all the files are received, the browser finishes up creating the DOM and CSSOM, runs the javascript,

The browser receives the CSS and continues building the DOM and CSSOM and sees the request for analytics.js.  Again, it stops building and requests this file.  Javascript is parser blocking, it cannot run until the CSSOM is fully loaded, because the browser knows the Javascript may alter the CSS.

While the browser is waiting for the file, there is a preloader that scans the rest of the HTML document for other files it may need.  It finds the other two javascript files and also begins to download them in the meantime.

Finally, the browser gets all the information it needs, completes the CSSOM, runs the javascript, finishes building the DOM, and can finally render the page for the user.

– The goal is to keep the Critical Rendering Path as short as possible and load as quickly as possible with a combination of minimizing the number of downloads, reducing render/parser blocking JS and CSS, and making the files smaller.

– The Chrome Developer Tool with its timeline mode is helpful to view this CRP as well as to measure how your site is performing if you have animations.  You can record what happens while your page is loading and then review all the places where the browser is repainting, recalculating, and running scripts.  The ideal frame rate for animations is 60 FPS or higher, as that’s around the normal browser refresh rate.