DEV Community: Amit kumar

How I Improved Lighthouse Performance on My Portfolio Without Killing the Visual Experience

Amit kumar — Tue, 09 Jun 2026 11:41:34 +0000

How I Boosted Mobile Lighthouse Scores Without Ruining My Site’s Design

When optimization advice tells you to "just delete animations, drop background effects, and make everything static," it feels like a defeat. You shouldn’t have to sacrifice your brand identity for a 100 Lighthouse score.

I recently optimized my Next.js portfolio with a simple mindset shift: Don't delete the experience. Change when and how the experience is paid for.

Here is the exact 6-step checklist I used to keep the motion-driven personality of my site while securing great mobile performance.

1. Fix the Actual LCP Asset First
Before touching any code or animations, look at your Largest Contentful Paint (LCP) element. On my homepage, it was the hero image.

The Fix: Keep using next/image, but supply a realistic sizes attribute for mobile viewports (e.g., sizes="(max-width: 768px) 100vw, 50vw").

Why it works: It stops the browser from fetching a desktop-scale asset on a slow mobile network. Optimize the request, not the design.

2. Stop Over-Prioritizing Non-LCP Images
Marking too many images with priority creates massive network competition on mobile.

The Rule: If an image is below the fold, or isn't part of the initial render, remove the priority tag. Let the browser focus entirely on the first paint.

3. Defer Shared Layout Helpers
Features like toast containers, analytics scripts, speed insights, and scroll-to-top widgets add heavy tax to hydration and early JavaScript execution.

The Fix: Implement a delayed client enhancement pattern. Render the core page content first, and wait until the browser is idle or the user interacts to load non-critical helpers.

4. Make Animations Cheaper to Carry
You don’t have to get rid of motion, but you should minimize its JavaScript footprint.

Scope your animation libraries only to the sections that actually use them.

Utilize lazy-loading motion features (like features offered in Framer Motion).

Swap out trivial JavaScript animations for pure CSS animations where possible.

5. Treat Decorative Backgrounds as Progressive Enhancement
If a background gradient, mesh, or particle effect defines your site’s premium feel, don't delete it.

The Fix: Serve a lightweight, static atmospheric background immediately. Then, load the heavier, interactive, or animated decorative layers after the page has stabilized.

6. Audit and Re-run Methodically
Pushing entire sections completely out of the render lifecycle can cause layout shifts and broken UX. Move only clearly non-essential behavior off the critical path, and re-run Lighthouse after every single change so you know exactly what is moving the needle.

Wrapping Up
Performance isn't the enemy of good design; poorly staged execution is. By intentionally staging what renders first and what can wait, you can keep your site expressive, animated, and lightning-fast.

Want the full technical breakdown? Check out the original, in-depth guide on this lighthouse.

I FOUND THIS ARTICLE HELPFUL FOR ME AS I WAS STUCK IN TOKEN ROTATION IN SERVER COMPONENT

Amit kumar — Wed, 25 Feb 2026 21:13:42 +0000

Mateusz Baranowski

Mar 4 '22

Next.js Authentication - JWT Refresh Token Rotation with NextAuth.js

#webdev #nextjs #authentication #jwt

108

5 min read

Backend Development for Beginners: The Brain Behind Every App (Node.js/Express Guide - Part 1)

Amit kumar — Thu, 05 Feb 2026 08:20:02 +0000

If the Frontend is the "face" of an application, the Backend is the brain. It handles the logic, security, and data that users never see but constantly interact with.

In this first part of my guide, we’re breaking down the fundamental pillars of backend engineering.

The Trinity of the Backend 🏛️ Every system relies on three core components:

The Language/Framework: Logic providers like Node.js (Express), Python (FastAPI), or Java (Spring Boot).

The Database: Where data lives. Whether it's SQL (PostgreSQL) for structured data or NoSQL (MongoDB) for flexibility.

The Server: The computer that "serves" data. In 2026, we mostly use cloud providers like AWS or DigitalOcean.

APIs: The Bridge 🌉
APIs are the messengers. When a user clicks "Add to Cart," the API carries that request to the server, waits for the "brain" to update the database, and brings back a success message.
Modern Folder Structure 📁
Organizing code is just as important as writing it. A clean Node/Express structure looks like this:

models/ - Data schemas

controllers/ - Business logic

routes/ - Endpoint definitions

middlewares/ - Auth & Logging

What’s next?
In Part 2, we will build a real CRUD API with MongoDB and proper error handling.

Check out the full article on my portfolio: amitdevjourney.com