Optimise your Web Product performance

Today it’s not about ‘get the traffic’ — it’s about ‘get the targeted and relevant traffic

Relevant traffic will come only when your web product is properly targeted and performant.

Performance is the key to success applies to the web products more than ever before

Basic Performance Improvements

1. Put css in the head tag
2. Put scripts just before the body closing tags
3. Make your page HTML syntactically correct
4. Make less http calls
5. Avoid 301 Redirections

These performance steps are very simple and easy to implement

Some advance Optimisation steps

Bundling

Bundle your javascript files and css files appropriately to make sure that it keeps a balance between a single file size multiple https call, now a days mostly the trend is to send Critical CSS and Immediately usable component

Minification

Minify your javascript & css files to reduce the file size

CSS Improvements

• Mark media queries as non blocking to speed up the first render
• Use less CSS overall

JS Improvements

• Use async & defer appropriately to avoid render blocking
• Put inline JS if it is considerably small

Images

• Use scalable images like SVGs
• Use sprites for the icons
• Use webp images with the fallback to jpeg
• Use LazyLoad for the images

Fonts

• Do not use custom fonts if not required
• Prioritise based on browser support
• Choose only the relevant styles you need
• Keep character sets down to a minimum
• Host fonts locally or prefetch
• Store in LocalStorage with Base64 Encoding

Caching

• Leverage browser caching as much as possible, as per product requirement
• Add durable cache expiration header in static assets
• Enable component caching at server side
• Enable CDN caching for assets

Rendering

• Keep first render from the server to deliver fast first page render
• Successive renders could be on client side for good user experience
• For better performance, implement progressive rendering
• Make use of browser intersection observer API to reduce rendering load on browser

Networking Improvements

• Ensure that number of network round trips are lesser

• Implement DNS prefetch, for quick DNS resolution

• Implement GRPC support both at Backend & Frontend for faster request response cycle

• Reduce/Remove network redirection

• Always use Ajax call for interacting with servers for user interaction

• Implement Brotli compression

• Make use of fast reverse proxy server for performance tuning of the resources

Monitoring

• Use Chrome performance analyser Light House for verifying impact of improvements
• Use page speed to verify page load time

The focus of this article is to list down the improvements which can be done, there is always some scope of performance improvement in a web product. Intentionally I have not mentioned the links and code snippets so that readers explore more about the terminologies instead of directly using the snippet.