- Nupur Badoni
- November 3, 2025
January 6, 2026
Full-Stack Solutions
Deepak Mishra
Why do so many websites feel slow? It’s usually not because of hosting but shipping too much JavaScript, load things nobody asked for, and rely on stacks that look impressive but don’t perform well in the real world can.
Even today, it’s common for a site to ship about 2 MB of JavaScript but still takes several seconds before it is usable.
When we started building our own site, we set three non-negotiable goals:
- • Pages that load fast
- • Strong SEO foundations
- • A stack that’s easy to maintain
Stack up prior to avoid issues later. In this blog, we break down on what we used in productions and optimizations to hit 90+ Page Speed Scores with Next.js, without overengineering or inflating the infrastructure costs.
The Biggest Mistake We See: Overbuilding the Stack
Adding too many tools, features, or libraries slows down the development, increases complexity, and creates difficulties while maintaining the system. So instead of chasing features, we focused on If it doesn’t clearly improve performance, developer experience, or SEO, it doesn’t make the cut.
Why we Chose Next.js for the Frontend
Next.js powers our frontend development by giving us the flexibility to choose the right rendering strategy for each page:
- • Server-side rendering (SSR) for dynamic content
- • Static SiteGeneration (SSG) for blogs, landing pages, and case studies
- • Content updates use Incremental Static Regeneration (ISR)
This means search engines always see fully rendered HTML, while users get fast load times without waiting for JavaScript to do all the work.
On top of that, Next.js handles a lot of performance work automatically:
- • Images are optimized and converted to modern formats
- • Pages are code-split so users only download what they need
- • JavaScript loads per route, not all at once
It’s a strong foundation without requiring constant manual tuning.
Master Responsive Layout with Bootstrap Grid
Bootstrap Grid is a powerful choice when we talk about creating responsive layouts. We really don’t want a full CSS framework weighing us down. Instead of importing all of Bootstrap, we pulled in only the grid system.
This really helps us in:
- • A reliable responsive layout
- • Minimal CSS footprint
- • Zero Bootstrap JavaScript
All UI components are styled with small, scoped CSS files resulting in tens of kilobytes saved and far more control over what ships to the browser.
Sanity as an Ultimate Headless CMS
Unlike traditional CMS, Sanity keeps content completely separate from presentation. Editors can collaborate in real time; preview changes instantly, without touching the codebase.
From a performance perspective:
- • Content is fully structured
- • GROQ queries let us fetch only the fields we need
- • Images are served through Sanity’s CDN and transformed on demand
It pairs extremely well with Next.js and keeps payload sizes tight, making sanity an excellent choice for dynamic, modern projects that require scalability and agility.
AWS Amplify Meets GitHub for Seamless Deployment
Amplify when combined with GitHub enable smoother, automated deployment of web applications by removing almost all deployment friction:
- • Every GitHub push triggers a build
- • Preview URLs spin up automatically
- • CloudFront CDN and SSL are handled for you
Overall, AWS Amplify + GitHub is the ultimate duo for developers seeking enterprise-grade infrastructure without managing pipelines, servers, or certificates.
Performance Tuning, Strategies that Actually Move the Needle
Critical CSS in Web Development
Critical CSS is the minimal set of CSS rules required to render the visible part of the webpage immediately upon loading. By inlining these styles, the page renders immediately without waiting for CSS downloads.
Optimize Image in Next.js
For better performance alongside user experience, built-in image optimization is possible with Next.js image component.
What does using the Image component mean?
- • Responsive image sizes by default
- • Automatic WebP/AVIF conversion
- • Lazy loading out of the box
- • Blur placeholders to prevent layout shift
This ensures images are delivered in the most efficient way, cuts our image payloads by over 80%. Hence, improving both SEO and user experience.
Code Splitting and Dynamic Imports to Perform Better
Loading Less JavaScript Upfront
During the initial page load, not every component or feature needs to be loaded. Heavy or less frequently used components are dynamically imported or loaded only when required, with lightweight skeleton loaders in the meantime.
This approach significantly keeps the initial bundle small and a more responsive user interface.
Accelerate Web Performance using Resource Hints
Resource hints are HTML tags that help browsers to load webpages faster. preconnect and dns-prefetch are the common resource hints used for external services like Sanity, Google Analytics, and fonts. These are widely supported in modern browsers and are practical ways to optimize web performances.
Web Font Optimization Without External Requests
Next.js self-hosts Google Fonts and applies font-display: swap automatically. We also subset fonts to include only required characters, cutting font file sizes by up to 70%.
By self-hosting and optimizing fonts, one can significantly improve page load times, reduce layout shifts, and provide a more consistent user experience. No invisible text. No third-party font delays.
Third-Party Scripts Done Right
Managing external scripts to maximize their benefits, Analytics and embeds are loaded after the page becomes interactive. For heavier embeds (like YouTube), we use facade patterns, so nothing loads until the user interacts.
This keeps third-party scripts from hijacking performance.
Optimize Data Fetching with Graph-Relational Object Queries (GROQ)
GROQ based data fetching retrieves the data we require the most; One can filter, sort, and project data making it easier to retrieve exactly what your application requires. Smaller payloads mean faster builds, quicker page loads, and less wasted bandwidth.
Incremental Static Regeneration (ISR) to Improve Site Speed
Pages are statically generated for speed, then refreshed in the background when content changes. Users always get fast pages, and editors don’t have to wait for full redeployments.
Security Integrated from the Start, Not Added Later
We enforce strict security headers, HTTPS everywhere, and a locked-down Content Security Policy.
For production traffic, AWS WAF adds protection against:
- • SQL injection
- • XSS
- • DDoS attempts
- • Malicious IPs
Storing secrets as environment variables with minimal token permissions and restricting CORS to production domains only enforces least-privilege access and domain isolation, reduces insider risks and unauthorized data exposure from the design phase.
SEO Beyond Meta Tags
Every page dynamically creates its own metadata, Open Graph tags, and structured data using Schema.org. This enables rich snippets in search results and improves click-through rates without relying on extra plugins or hacks.
Strong technical SEO only works when it supports a broader growth plan. That’s the reason we align on-page optimizations and performance with a winning digital marketing strategy, not isolated tactics.
CI/CD That Just Works
From pushing code to GitHub to deploying, our flow is fully automated:
- Push to GitHub
- Amplify detects the change
- Runs, Builds, and Tests
- Site deploys to CloudFront
- Cache is invalidated automatically
Further, branch-based environments make it easy to test changes before they hit production.
The Results
Our dedicated efforts in website performance optimization have paid off with the top Lighthouse scores across the board, proving that smart UX and content design strategies will deliver real results.
- • Performance: 86 (Mobile) / 99 (Desktop)
- • Accessibility: 100
- • Best Practices: 100
- • SEO: 100
Bundle Size Reduction
Significantly, we also achieved bundle size reductions:
- • JavaScript: Down by 75%
- • CSS: Down by 84%
- • Images: Down by 88%
No heavy infrastructure. No complicated pipelines. All achieved at just $5-$15 per month, while keeping the costs incredibly low with AWS Amplify, Sanity CMS (on its free or Growth plan), and CloudFront. That’s a fraction of traditional WordPress hosting or container-based setups.
Final Thoughts
This stack delivers on all fronts:
- • Fast enough to keep users engaged
- • SEO-friendly by default
- • Developer-friendly with excellent DX
- • Secure, scalable, and cost-efficient
Plan to build a modern website today, start with Next.js, pair it with Sanity, deploy via AWS Amplify, and invest early in performance. That upfront effort pays off in lower costs, fewer headaches, and better business results.
Explore how our website development services focus on performance-first builds scale without unnecessary complexity.
To see how these principles translate into real-world results, check out how we helped redefine the digital experience for hospitality brands with enhanced UI and engaging content in this detailed case study.
Do you have a specific project in mind or else need to build a high-performance, SEO ready website? Contact us and discuss your requirements with us.
FAQs
1. What impacts the website speed even on good hosting?
Even on good hosting too much JavaScript, loading unnecessary features, and use of bloated frameworks slow down the websites. Optimizing what's included in the stack becomes expensive moreover hosting.
2. Why choose Next.js for frontend?
Next.js provides SSR, SSG, and ISR to deliver fast, fully rendered pages while minimizing JavaScript payload.
3. How does Sanity CMS enhance website speed?
Sanity CMS separates content from presentation, allows fetching only required fields with GROQ, serves images via CDN, and supports real-time content updates.
4. How can we maintain strong SEO?
Pages dynamically generate metadata, schema.org, and open graph tags for structured data, with no extra plugins required.
