I recently built a web app and discovered that it felt much slower for other people than it did locally, partly because my development server and browser cache hid the problem. A mobile performance test showed a first-contentful-paint time of around 36 seconds, which was a serious wake-up call. After optimizing, the site now loads in roughly a second or two and scored between 94 and 98 in different runs.
Some improvements I tried included subsetting fonts, converting images to WebP or AVIF, compressing videos, loading JavaScript only when needed, conditionally rendering components instead of hiding them, removing unused dependencies, specifying image dimensions, replacing autoplay videos with preview images, deferring noncritical CSS and external scripts, moving expensive work to workers, setting resource priorities, reducing layout shift during hydration, and removing unused CSS.
The best solution depends heavily on the site and the user flow, so I'm curious: what less-obvious techniques have helped you improve loading speed and the overall user experience?
4 Answers
Working without a framework can be a useful way to understand what the browser is doing underneath. Even simple HTML, CSS, and JavaScript sites still benefit from the same lessons: optimize assets, avoid unnecessary work, and measure performance under realistic conditions.
Explicit width and height values on images are an underrated improvement. They prevent layout shifts and make the page feel more stable even when the download time hasn’t changed. Testing on slower devices and connections is just as important as optimizing the bundle.
The performance score itself isn’t the whole story. Lab scores can fluctuate, and some recommendations may not improve the real user experience in every situation. Core Web Vitals based on real-user data are usually more meaningful than a single simulated score. Also, font subsetting and lazy-loading components should be tested carefully because they can hurt caching or make interactions feel slower.
Test with caching disabled in your browser’s network tools, and also try a realistic mobile connection. Local development servers, warm caches, and fast desktop networks can hide the problems that actual visitors experience.
The image-preview-before-video approach is especially effective because it avoids sending large video files to visitors who never press play. Preconnecting to third-party origins can also help when fonts or scripts must come from a CDN. Real-user measurements are the best way to confirm that an optimization actually helped.