Performance Optimization

What Is Optimization

Optimization shows up everywhere in software.
A game needs a stable frame rate, an app needs to feel responsive, a database needs fast queries.

On the web, it refers to how fast the site loads and runs, without changing what it does or how it looks.
It matters because slower load times push people to leave before they see the content, and search engines use site speed as a ranking factor.
Speed enhances user satisfaction and gives more visibility.

Lighthouse & Core Web Vitals

Lighthouse is a free auditing tool (built into Chrome DevTools, or run via PageSpeed Insights) that scores a page from 0–100 across Performance, Accessibility, Best Practices, and SEO.

The Performance score is built on Core Web Vitals, three metrics Google treats as essential to a good experience:

• LCP (Largest Contentful Paint): How long until the largest visible element finishes rendering. (Target is ≤ 2.5s).
• INP (Interaction to Next Paint): How responsive the page feels when someone actually interacts with it. (Target is ≤ 200ms).
• CLS (Cumulative Layout Shift): How much content jumps around while loading. (Target is ≤ 0.1).

One thing worth knowing: Lighthouse measures in a simulated environment, not real users on real devices and networks.
It's a great way to catch problems before shipping, but it won't always match the actual experience.

Bundle Size & Code Splitting

Every JavaScript file shipped to the browser has to be downloaded, parsed, and executed before anything works.
The more code bundled together, the longer it takes, especially on slower connections or devices.

Bundle Size

This is the total weight of your JavaScript and CSS sent to the browser. A single large bundle means visiting a simple page downloads code for features they'll never use on that page.

Code Splitting

Instead of shipping one giant bundle, code splitting breaks the app into smaller chunks that load only when needed.
Frameworks like Next.js do a lot of this automatically, but you can also split manually for anything heavy.
Dynamic imports (next/dynamic in Next.js, or React.lazy) let you defer loading a component until it's actually needed, so heavy components don’t weigh down the rest of the site.

Checking Your Own Bundle

Tools like @next/bundle-analyzer show what's actually inside your JS bundles. It’s useful for spotting dependencies that are unexpectedly huge before it becomes a problem.

Asset Optimization

Images and fonts are often the heaviest files on a page — heavier than the JavaScript itself.
Optimizing them is usually the highest-impact, lowest-effort win.

Images

• Compression: Reduce file size without a visible drop in quality. Modern formats like WebP compress better than PNG or JPEG.
• Responsive images: Serve a size that actually matches the device. There's no reason to send a 4K image to a phone screen.
• Lazy loading: Only load images that are about to enter the viewport, instead of all at once on page load. Native loading="lazy" on <img> tags handles most of this.

Useful ffmpeg Commands

FFmpeg is a free command-line tool for converting and compressing images and video.

PNG → WebP:

ffmpeg -i input.png -c:v libwebp -quality 80 output.webp

• -quality 80 is a good default. Visually pretty much the same for most images, but smaller than PNG.

PNG → WebP, resized to a specific width:

ffmpeg -i input.png -vf scale=800:-1 -c:v libwebp -quality 80 output.webp

• scale=800:-1 sets the width to 800px and calculates height automatically to keep the aspect ratio.

Batch convert a whole folder:

for f in *.png; do
  ffmpeg -i "$f" -vf scale=800:-1 -c:v libwebp -quality 80 "${f%.png}.webp"
done

Video → MP4, resized, strip audio:

ffmpeg -i input.mov -an -vf scale=1280:-2 -vcodec libx264 -crf 23 output.mp4

• -an drops the audio track entirely. Useful for silent looping background videos.
• -2 instead of -1. H.264 requires even pixel dimensions, and -2 guarantees that.
• -crf controls quality vs. file size. Lower number is higher quality, larger file. 18–23 is a solid default.