Shrivantra is a digital publication by The Royals Valley that publishes expert articles on business, startups, technology, AI and personal growth. It is designed to help readers think smarter and grow faster.

What topics does Shrivantra cover?

Shrivantra covers business strategy, startups, mindset, technology, AI trends, productivity, careers and personal growth — with practical articles published weekly.

Who publishes Shrivantra?

Shrivantra is published by The Royals Valley, a digital product studio based in Kolkata, India, founded by Abhijeet Kumar.

Is Shrivantra free to read?

Yes, all content on Shrivantra is completely free to read. There is no paywall.

How often does Shrivantra publish new articles?

Shrivantra publishes new articles every week. Subscribe to the newsletter at shrivantra.com to receive new posts directly in your inbox.

Where is Shrivantra based?

Shrivantra is based in Kolkata, West Bengal, India and is operated by The Royals Valley.

Your Website Is Slow Because You're Loading Everything at Once — Fix It With Lazy Loading

5 min read

You spent three weeks building a beautiful dashboard. Charts, tables, modals, sidebars. You deploy it. Then someone opens it on their phone in a city with average connectivity and it takes 8 seconds to load..

They leave.

This is the lazy loading problem — and most developers don't fix it until someone complains.

What's Actually Happening

When a user visits your app, their browser downloads all your JavaScript before rendering anything meaningful. If you've imported 12 components, 3 chart libraries, a rich text editor, and a PDF viewer at the top of your file, all of that code downloads even if the user is only going to see the homepage.

This is called an "over-fetching bundle," and it kills both performance and user experience.

Code Splitting and Dynamic Imports

Modern bundlers like Vite and Webpack support dynamic imports. Instead of:

import HeavyChartComponent from './HeavyChartComponent'

You write:

const HeavyChartComponent = React.lazy(() => import('./HeavyChartComponent'))

Now that component's code only downloads when it's actually needed. Wrap it in a <Suspense> tag with a fallback and you have a functional, fast-loading app.

Next.js makes this even easier with next/dynamic. You can also disable SSR for specific components that only make sense on the client side.

Images Are the Other Offender

Most developers don't realize that images can be lazy-loaded natively with a single HTML attribute:

html<img src="photo.jpg" loading="lazy" alt="..." />

That's it. The browser won't load that image until the user scrolls near it. For a blog or product listing page with 20+ images, this can cut initial load time dramatically.

For React apps, libraries like react-intersection-observer give you fine-grained control over when components render based on viewport visibility.

What You Should Lazy Load

Heavy chart libraries like Recharts, Chart.js, or D3 — load them only when the chart is on screen. Modal dialogs — they don't need to be in the initial bundle if the user might never open them. Admin-only routes — if 90% of users never see the admin panel, why should they download its code? Rich text editors, PDF viewers, map components — all lazy load candidates.

What You Should Not Lazy Load

The main layout, navigation, and above-the-fold content should load immediately. Lazy loading these creates a flash or jump that feels broken.

Rule of thumb: if the user sees it in the first 3 seconds, load it eagerly. If they might never see it, load it lazily.

Performance is a feature. Slow apps lose users before they ever get a chance to impress them.

Fix React performance bottlenecks: see why your React app re-renders too much and how to stop it.

Trim your JavaScript bundle size by avoiding heavy npm dependency bloat.

Understand how web app architecture impacts bundle size and initial page load speed.

Secure your frontend architecture: stop storing API keys in client-side code.