Optimizing website performance and critical rendering path

  • Many things can lead to high rendering times for web pages - the amount of data transferred, the number of resources to download, length of the critical rendering path (CRP), etc.
  • To minimize data transferred, remove unused parts (unreachable JavaScript functions, styles with selectors not matching any element, HTML tags always hidden with CSS) and remove all duplicates.
  • Reduce the total count of critical resources to download by setting media attributes for all links referencing stylesheets and making some styles inlined. Also, mark all script tags as async (not parser blocking) or defer (evaluated at end of page load).
  • You can shorten the CRP with the approaches above, and also rearrange the code amongst files so that the styles and scripts of above-the-fold content load before you parse or render anything else.
  • Keep style tags and script tags close to each other in HTML (linewise) to help the browser preloader, and batch HTML updates to avoid multiple layout changes (such as those triggered by window resizing or device orientation).

Full post here, 8 mins read