Last Updated: January 05, 2018
· szymonkor

Tips on fast website rendering

Core takeaways from awesome article: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

  • Use async loading of JavaScript so that the browser does not block rendering for JS. It makes DOMContentLoaded event trigger earlier!
  • Combining all assets in one page is also a way. However I would avoid it in complex projects, facing the advent of HTTP/2 - https://en.wikipedia.org/wiki/HTTP/2.
  • Iterate! Use Chrome Dev tools to track the performance.
  • Browser executes JS no sooner than CSSOM model is created
  • Avoid external JS and CSS (i.e. host JS libraries on your own and use cdn for development)
  • media="print" stylesheets are not loaded in normal mode. It may sound obvious, but I didn't know they are not taken into scrutiny before one tries to print the website.

SOURCE: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp