This post was inspired by Ilya Grigorik and his amazing efforts to promote performance knowledge in almost every computer level (application, network stack and etc.). But before we start to explore these topics, let’s review the “golden rules” of high performance web sites. (some of them will be better off with http2 🙂 )

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put Stylesheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make AJAX Cacheable

This is a series of articles about modern network performance:

1. Browser
2. HTTP 1.x / HTTP/2
3. TCP / QUIC (UDP)
4. IP / IPv6

Browser

If you’re lazy about reading, watch this short video how browsers work.

It’s crucial to understand how Browsers work so you can optimize your page to load fast, believe me speed is a feature. Let’s suppose your browser is getting a response from example.com. It’ll receive a stream of bytes then it will convert it to characters (following the adopted encoding) and parse the chars to tokens and finally build the nodes which constitute the DOM. A picture is worth a thousand words. A similar process will also happen to build the CSSOM. But we’re not done yet, usually a page requires dozens of external resources (mostly: images, js and css), some of these resources are block rendering. For example, a simple page has CSS and JS as external resources. The browser will first get HTML build the DOM then it’ll find that it needs to download the css and js, after these files are downloaded it needs to build CSSOM, run the JS and rebuild the DOM, only after all these steps the browser will render the page. But the same page using non blocking css (media type/query) and js (async attribute) will make it render quicker, the steps between the first download (html) to render are reduced. It’ll render the page after the first DOM building.

A video (from Umar Hansa) that summarizes this

Some considerations

• All the great images above were stolen from Google’s web fundamentals.
• HTML and CSS are render blocking.
• For CSS you can specify media types and media queries to avoid render blocking.
• Javascript can change DOM and CSSOM, therefore its execution will block in both.
• Declare your Javascript as async when you can.
• Avoid CSS import
• Inline render-blocking css
• That’s all folks

<!-- this will block (you still can inline it) -->
<link href="style.css" rel="stylesheet">

<!-- this will block -->
<script src="app.js"></script>

<!-- this won't block -->
<link href="style.css" rel="stylesheet" media="print">

<!-- these won't block -->
<script src="user.js" async></script>
<script src="vendor.js" async></script>

It’s also very important to understand how Javascript works.