Subsequent Page Load Optimization 🚀

Have you ever been to any website and then click on a button which redirects you to another page, "but" it just takes forever to open which convinces you to never touch the website again 🫠.

Loss of another valuable Customer 😥.

Simplified Top-down Steps to Avoid This !!

I have documented these client-side optimization strategies in sequence, which can exponentially improve your website's page navigation.
Have also provided dedicated articles on each topics covered below.

1. Prefetch & Cache It

• This approach should resolve most of your problems. Prefetch essential resources like fonts, JavaScript, and images asynchronously on your main page to avoid blocking the initial page load and affecting the user experience.

• Suppose you have a button, you can load the assets on hover. So that when the user clicks on it and navigates to the next page the scripts, images, etc will already be available.

• Now once you have prefetched your required assets, make sure to cache them for as long as possible to avoid re-downloads. You can utilize various caching strategies suited to your website's use case.

• You may also ensure about back-forward cache to provide a smooth nav back experience.

2. Minify JS & Remove Unused CSS

• This step is very important, might have just taken the top spot. Avoid writing overly complex JavaScript that slows down your website.
• Always remember Less Code -> Faster Load time -> Shorter Execution Time
• Remove unnecessary JavaScript code to reduce file size and improve performance. Minify the js files using webpack.
• Eliminate CSS rules that are not used on the current page, reducing CSS file size and enhancing load speed.
• Use dynamic imports to avoid loading extra js chunks.
• You can also look into code spitting for further optimization

3. Compression

• Compress files like images, JavaScript, and CSS using algorithms such as Gzip to reduce the amount of data transferred to the browser.
• Upload the images in next gen image formats, you can use Cloudinary for this.

4. Lazy Loading

• Defer loading non-essential resources like images, videos or scripts until they are needed, typically when they come into view, to reduce the initial load time.
• This article talks more about lazy loading

5. Use HTTP 3 or HTTP 2

• Both HTTP/2 and HTTP/3 are faster than HTTP/1.1, so it’s a no-brainer to use these faster communication channels. However, you have to choose between the 2 based on your customer base.
• HTTP 3 might not be supported on legacy browsers
• You can find the difference between these HTTP 1 vs HTTP 2 vs HTTP 3

6. Reduce Layout Shifts

• Layout shifts happen when elements move unexpectedly during page load, causing a poor user experience. If you have rendered one component, but due to some javascript action you are changing the style of an component again in the rendering process. It retriggers the full style -> layout -> painting -> compositing rendering process which blocks the main Javascript execution thread. Read more about How Browser Works to understand it better.
• Reserve space for images, ads, or dynamic content before they load.
• You should also use animations or transitions to make changes feel smoother.

7. Conclusion

There are numerous methods via which you can make your website load faster, however I have tried to cover the best client-side strategies that can significantly impact your subsequent page load time. Keep your logic simple, and avoid complex JavaScript or unnecessary re-renders.

"The Best way to optimize page load is to simply load less stuff"

💡Important Tip

Before implementing any optimization don't forget to profile 🎬 your website's performance both before & after, back it up with enough evidence whether it actually improves your website's performance or making it worse. Also, make sure it's pocket friendly 💰

 
Checkout this website Function Dynamic, it's the fastest website in the world. Their page load & navigation experience is just seemless.
They have also talked about, how they have optimized their page and their performance metrics

🤗 Feel free to share your thoughts and let me know if I missed anything. I'd love to hear what strategies you use to optimize subsequent page load times!