This content originally appeared on DEV Community and was authored by ri ki
Today's Focus: Performance Improvements Based on Lighthouse Audit
Following feedback from Lighthouse, I tackled several areas to improve performance, accessibility, and overall user experience.
Button Component Unification
To reduce redundancy and ensure consistent behavior and styling, I consolidated button components into a single shared version.
This simplifies the codebase and helps enforce a consistent UI across the app.
Replacing Hero Video with Preloaded Image
The hero section previously used a video background, which delayed the First Contentful Paint (FCP).
To improve load times, I replaced the video with a preloaded static image as a placeholder.
This allows users to see something immediately while heavier content loads in the background.
JS-to-CSS Gallery Refactor
I replaced the JavaScript-based gallery implementation with a pure CSS version.
This not only reduces bundle size but also improves performance and maintainability.
Tomorrow’s Plan: Continue Optimization
I’ll continue addressing Lighthouse’s suggestions and explore additional enhancements to reduce layout shifts, improve asset delivery, and optimize image handling.
Performance tuning is an ongoing process — every millisecond counts when it comes to user experience.
tags: nextjs, performance, lighthouse, frontend, css
This content originally appeared on DEV Community and was authored by ri ki
ri ki | Sciencx (2025-07-08T00:05:33+00:00) Umemura Farm Website – Devlog #29: Lighthouse-Informed Refactoring and Optimization. Retrieved from https://www.scien.cx/2025/07/08/umemura-farm-website-devlog-29-lighthouse-informed-refactoring-and-optimization/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.