Today's Work: Performance Improvements and Code Cleanup
Today I focused on several performance-related tasks as well as refining code structure to enhance user experience and maintainability.
Page Lazy Loading Experiment and Results
I experimented with lazy-loading to improve initial load performance.
The goal was to prioritize rendering of:
- Header
- Footer
- CTA buttons
- Hero section
while deferring the rest of the page.
Outcome: Unfortunately, this approach caused the footer to load first on page open, which felt counterintuitive and reduced perceived performance.
After evaluation, I decided to reject this strategy for now.
Optimizing Icon Imports
Previously, I imported lucid-icon components separately in each component file.
To improve bundle size and code clarity, I consolidated all imports into a single lucid-icon.ts module.
However, I mistakenly used dynamic imports for this module, which caused extremely slow page transitions.
I reverted to a simple static import/export approach, restoring smooth navigation.
Improving EC Site Recommendation Logic
On the EC site recommendation page, I found that one of the purchase options was missing from the candidate list.
I added the missing option and refined the user questionnaire logic to ensure fair and clear recommendations without bias.
Setting Lighthouse Performance Goals
I set specific Lighthouse score targets to define clear performance goals for this project.
The benchmark is to outperform the client’s current LP, which helps me prioritize improvements effectively.
Tomorrow’s Focus: Unused JavaScript and Font Issues
- Identify and handle unused JavaScript to further reduce bundle size and improve load times
- Continue investigating the font loading issue, which still prevents my specified fonts from rendering correctly
Performance optimization is an iterative process. Every improvement counts toward a faster, more enjoyable user experience.
tags: nextjs, performance, frontend, lighthouse, portfolio
Top comments (0)