This content originally appeared on DEV Community and was authored by ri ki
Today’s Work: Deploying to Netlify and Performance Optimization
Today, I deployed my project to Netlify and tested the performance in the production environment.
Performance Bottleneck: Hero Video Loading Time
I noticed the initial page load was slow, mainly due to the hero video size. To address this, I used FFmpeg to compress the video, reducing its size from 5.58MB to 3.4MB, a significant improvement.
Image Optimization on Farm Stay Page
For the farm-stay page, I optimized the hero image by specifying explicit width and height instead of using the full size. Here is the updated <Image> component:
<Image
src="/assets/images/stay/hero2.webp"
alt="Hero background"
width={800}
height={600}
className="object-cover w-full h-full"
priority
/>
This change helped with layout stability and loading speed.
Lighthouse Scores
After these optimizations, my Lighthouse scores were:
Performance: 85
Accessibility: 89
Best Practices: 82
SEO: 91
Project Conclusion
With these final improvements, I consider this project complete.
It was a great learning experience focusing on deployment and real-world performance tuning.
I’m excited to apply these skills in future projects!
tags: nextjs, netlify, performance, video-compression, portfolio
This content originally appeared on DEV Community and was authored by ri ki