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 🙂 )
- Make Fewer HTTP Requests
- Use a Content Delivery Network
- Add an Expires Header
- Gzip Components
- Put Stylesheets at the Top
- Put Scripts at the Bottom
- Avoid CSS Expressions
- Reduce DNS Lookups
- Avoid Redirects
- Remove Duplicate Scripts
- Configure ETags
- Make AJAX Cacheable
This is a series of articles about modern network performance:
- HTTP 1.x / HTTP/2
- TCP / QUIC (UDP)
- IP / IPv6
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
- 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.
- 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>