_MG_3567

Website Performance Checklist

Here is the a quick list of check points if you are looking for performance optimization. Different type of applicaiton require different treatment, however this list is for a regular website.

  • Loading Performance

    1. Images are optimized for web
    2. Pages/content served through HTTP2
    3. Javascript is minified and bundled
    4. CSS files are minified and bundled
    5. All the content are compressed with gzip/brotli
    6. Lazy load images
    7. Cache headers should be set with at least one week expriration
    8. Avoid document.write for Javascripts for first time execution
    9. Apply PWA methods to optimize caching
    10. Make use of CDNs for static asset delivery
    11. Optimize TTFB time at your server
    12. Make sure you have proper content encoding applied.
    13. Remove ETags if there.
    14. Avoid redirects if possible
    15. Lazy load iframes
    16. Make use of image sprites if applicable
    17. Load assets in a cookie free domain
    18. Prefetch DNS if there are multiple DNS
  • Execution Performance

    1. There are no 404 errors
    2. There is no blocking scripts.
    3. All non critical javascript files are defered or asynced
    4. There are no javascript exceptions / errors
    5. There are relatively less number of DOM nestings
    6. Though it’s subjective to your application, prefer to minimize number of DOM objects in your page.
    7. Javascript is modularized so that there is no unnecessary executions
    8. Remove console logs – they make the browser slow
    9. Avoid geolocation permission at the time of load
    10. Also avoid notification permissions on at the time of load
    11. Avoid rendering lot of content on the first go. Use lazy rendering techniques.
    12. Avoid too large images as backgrounds. Also avoid scaling images.
    13. Avoid filters, shadows(specially text shadows) when ever possible.
    14. Check for scripts that execute in browser resize or scroll
    15. Optimize CSS libraries/utility libraries that are not required
    16. Avoid synchronous ajax request
    17. Make sure there are no invalid DOM elements/ nesting. Common mistakes like non list items in ordered/unorderd list.
  • Percieved Performance

    1. First meaningful paint does not take more than 3 seconds
    2. Late load/load on demand images that are not required on first view.
    3. Critical CSS and JS is loaded at the time of loading – prefetch them or embed them.
    4. No interaction take more than 1/40 seconds to respond.
    5. User is given indication of anything processing, if it’s takes more than 200 milliseconds
    6. Avoid popup messages/notifications at the time of loading the page.