Client side optimizations - parthmehta/performance-checklist GitHub Wiki

CSS and JS

  1. Use SASS for writing CSS. You end up writing less code.
  2. Minify all the stylesheets and JS files.
  3. Write/include JS at the bottom and stylesheets at the top.
  4. Remove unused CSS and JS.
  5. Avoid empty src or href.
  6. Reduce the number of DOM elements.

Images

  1. Use sprites of images/icons.
  2. Use responsive images.
  3. Lazy load data and images.

Network Calls and Data

  1. First page load is very important for any website. With apps built on Angular and React take more time on loading the first page itself. It’s better to load only the required JS on the first page, and have service workers download the remaining JS in background.
  2. Having AMP page for the first load is also a better option.
  3. Using service-worker to cache most of network calls. Building PWA.
  4. Sharing data with server in gzip format.
  5. Setting expiration time of static content from server. So, that browser will cache the resource till that time.
  6. If the user is offline, then cache the actions performed by user and as soon as the user is online, sync it with server.
  7. The data contract of API’s must be exact as per the required data on the UI. API’s should send processed data as needed on the UI and no extra data.
  8. Delete the data/cookies stored in browsers if not needed.
  9. Use Streaming JSON for better performance. Mainly used for displaying search results.