What are some ways to improve web performance?

I have found reducing sizes for image and using compression adds value in serving pages fast. But keeping the smallest JavaScript uncompressed code is the key to achieve the best performance of your page. As JS is a single threaded language, JS holds the main thread for being parsed and that makes your page blocked for the user at that time. Brotli compression is better than GZIP, you can use that with fallback until all browsers provide brotli compression support.

Yes using CDN always gives us the advantage of delivering the content fast. You can decide different caching strategies for your APIs, static content and sometimes dynamic persona based content too. I have recommended this to many high traffic web applications to serve in less than 2 seconds. Proper Caching helps you reduce the server load.

IntersectionObserver is a helpful API to lazy load the modules/components used out of the screen fold. We can import & render the section in the browser, only when the user intends to visit it. This will result in fast Time-To-Interactive measure. Page load time will also be reduced. Based on the type of content, decide static rendering, server side rendering, client side rendering or HTTP/2 server push (preloading script/styles). We can leverage any latest frameworks (if possible) or build/use a custom technique in legacy apps.

Totally agree, when Google started measuring Web Vitals it reduces our performance metrics score. Following the reports from WebPageTest and fixing them brings us back. Regularly following the reports gave us confidence and continuous performant applications.

Optimize database queries: ->Database queries can be a significant bottleneck in web performance. -> To optimize them, we can use techniques such as indexing, caching query results, and reducing the number of queries by combining them or using more efficient query methods. Implement responsive design: -> Responsive design ensures that our website adapts and optimizes its layout and resources based on the user's device and screen size. -> This can improve web performance by reducing the amount of unnecessary content and resources that need to be loaded on smaller devices.

1. Improving API response time: this will help to get fast data and render faster, we used to have a thumb rule API should respond in less than 200ms, you can set yours. 2. Reading the device configuration on the server and sending the device specific content - this will help prevent unnecessary data transfer over the network.

Lot of API calls at the page load may reduce the performance. Either club number of related APIs together or call the APIs only when the user needs to see/interact the content. May try using cached API data, store user session data. Sometimes different script and styles are used for various viewports. Keep an eye to avoid loading unnecessary modules in a specific device.