The Performance Book

We can improve performance in the following places:

Frontend Processing

What are the parts of the critical render path

Browser requests HTML page
Browser starts building DOM as it parses HTML
Browser finds <link> tag in HTML so requests CSS file
Browser starts building CSSOM as it parses CSS
Browser finds <script> tag in HTML so requests JS file
Browser reads JS file and augments DOM/CSSDOM if needed
Browser finds <img> tag in HTML so requests IMG file
DOMContentLoaded event fired when DOM and CSSOM completed e.g. document.addEventListener('DOMContentLoaded', callback)
Browser combines DOM and CSSDOM into a render tree
Browser uses render tree to layout components
Browser uses render tree to paint components
load event fired when components have completed painting e.g. window.addEventListener('load', callback)

Notes: In the Chrome browser Developer Tools Network Tab, a blue vertical line indicates when DOMContentLoaded occurs and a red vertical line when Load event occurs

What are some handy tips I can follow to make sure my critical render path completes quickly

HTML

Keep your <link> tags in your <head /> so that CSSOM is completed as fast as possible
Keep your <script> tags just before your closing </ body> tag so DOM and CSSOM completed as fast as possible
Consider bundling <link /> tags into as few as possible to reduce the number of round-trips to server
Consider bundling <script> tags into as few as possible to reduce the number of round-trips to server

CSS

Consider using media queries to only load assets if it makes sense for device with that form factor
Consider using simplest possible selector queries to speed up CSSOM resolution
Consider keeping only your above the fold CSS in the <head/>

Consider lazy loading your below the fold CSS in a <script /> tab just before your closing </body>

<body>
  <!-- elided content -->
  <script type="text/javascript">
    const createStyleSheet = document.createStyleSheet || (href) => {
      const link = document.createElement('link')
      link.href = hrefÏ
      link.type = 'text/css'
      link.rel = 'stylesheet'
      const head = document.querySelector('head')
      head.appendChild(link)
    }
    createStyleSheet('./below-the-fold.css')
  </script>
</body>

JS

Load scripts asynchronously (Use for scripts that don't affect DOM or CSSOM e.g. Google Analytics)
Defer loading of scripts (Use for scripts that affect DOM or CSSOM for below the fold content)
Minimise DOM manipulation
Reduce long running scripts

Network Processing

How long it takes for data to go up/down the wire

File Size - make sure files being requested are as small as possible
- Shrink the size of your CSS files: https://cssminifier.com/
- Shrink the size of your HTML files: http://minifycode.com/html-minifier/
- Shrink the size of your JS files: https://skalman.github.io/UglifyJS-online/
- Shrink the size of your IMG files: https://tinyjpg.com/
- Scrub metadata from from your IMG files: https://www.verexif.com/en/
- Prefetch files likely to be used soon: https://css-tricks.com/prefetching-preloading-prebrowsing/
- Consider max connections per domain for fetching files: https://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser
- Use profiling tools to find out what needs to be optimised:
  - page weight calculator: https://pageweight.imgix.com/
  - page speed insights: https://developers.google.com/speed/pagespeed/insights/
File Count - make sure as few files are being requested as possible
Above the Fold - make sure only ATF assets requested in <head /> and lazy-load below the fold assets in <script/> block e.g.

Backend Processing

How long it takes to build a response for a request

NextThe CSS Book

Last updated 4 years ago