Category Archives: User Experience

_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.
measuring-perceived-performance

Improving perceived performance of your webpages

Performance is the key factor in improving user experience. Faster the user sees information, the better for the site to have a high customer retention. Webpage performance can be categorized in to three parts: 1. Loading performance 2. Execution/Rendering Performance and 3. Perceived performance.

Perceived performance is the speed that user feels while interacting with the webpages/application. Controlling/Improving this kind of performance is all about prioritization. This can be subjective at times, and there is no defined ways to achieve it. The techniques described below are some of the proven ways one can try in their own applications

Techniques to apply

1. Fix the page loading and rendering performance

This is first level fix that one needs to do to start. Any page that takes more than 3 seconds to appear on user screen completely out of scope for this discussion

2. Lazy load all below the fold images

3. Implement critical CSS

4. Fix the animations

5. Make use of loading indicators

6. Avoid heavy operations/manipulations on scrolling/swipe events

7. Add indications to all clickable items

8. Activate above the fold javascript interactivity along with components

9. Ajaxify components that are below the fold

10. Implement HTTP2 push(preload assets) mechanism

11. Lazy load any popup that appears on the load

12. Fix layouts to avoid flickering while loading/scrolling