SeSudu.com
A Recipe Site That Loads Faster Than You Can Read the Title
Malaysian recipe platform rebuilt with performance-first architecture. Optimized image pipeline and self-hosted fonts deliver instant loading.
Performance Snapshot
The Challenge
SeSudu.com is a Malaysian recipe platform with rich food photography, step-by-step cooking instructions with images, and embedded video content — all traditionally heavy assets that destroy mobile performance.
Issues Identified
- Recipe pages averaging 3.5MB due to high-resolution food photography
- Google Fonts loading 4 weights of a decorative font family — 280KB of font data
- Embedded YouTube players hydrating on every recipe page, even when below the fold
- No responsive images — full 2000px originals served to mobile devices
- Layout shifts from images without explicit width/height attributes
The Strategy
Built a complete image optimization pipeline and replaced all external font dependencies with self-hosted alternatives, while implementing aggressive lazy loading for below-fold content.
T7: Automated WebP Pipeline
Every food photo processed through an automated pipeline — resize, compress, convert to WebP, generate responsive srcset with 4 breakpoints.
T8: Explicit Image Dimensions
All images tagged with width and height attributes to reserve layout space. Eliminated CLS from image loading entirely.
T9: Native Lazy Loading
Below-fold recipe images use loading="lazy" with decoding="async". Only the hero food photo loads eagerly.
T1: Font Self-Hosting
Replaced Google Fonts with self-hosted variable font. Single 45KB file replaces 4 separate font requests totaling 280KB.
T17: Content-Visibility
Recipe step sections use content-visibility: auto to skip rendering of off-screen steps until the user scrolls.
T20: YouTube Facade
Replaced eager YouTube embeds with a lightweight facade — a thumbnail with a play button. Iframe loads only on click.
The Execution
Rebuilt the recipe platform on Astro with a custom image processing pipeline integrated into the build step, ensuring every image is optimized before deployment.
Image Audit
Catalogued 500+ food photos. Identified average size of 450KB per image. Set target of sub-40KB per image at the largest breakpoint.
Pipeline Development
Built a Sharp-based image processor that runs during build: resize to 4 breakpoints, convert to WebP, generate blur placeholder SVGs for LQIP.
Font Migration
Replaced the decorative Google Font with a self-hosted variable alternative. Created fallback stack with precise metric matching.
Video Facade Implementation
Built a custom YouTube facade component that loads a WebP thumbnail and overlay play button. Iframe injected only after user click.
Recipe Template Optimization
Restructured recipe pages to prioritize above-fold content. Applied content-visibility to ingredient lists and step sections.
The Results
SeSudu.com now delivers image-rich recipe content at blazing speed, scoring 96 on mobile and 99 on desktop — remarkable for a photography-heavy site.
Key Achievements
- Mobile score reached 96 on a photography-heavy recipe site
- Average page weight reduced from 3.5MB to 280KB (92% reduction)
- Food images compressed from 450KB average to 35KB average
- LCP improved to 1.6s — hero food photo loads in under 2 seconds
- CLS reduced to 0 with explicit image dimensions
- YouTube embeds no longer block initial page load
Verify It Yourself
Don't take our word for it. Click the buttons below to run a live PageSpeed Insights test on SeSudu.com — right now, in your browser.
Opens Google PageSpeed Insights in a new tab. Results are live and unmanipulated.
Want Results Like This?
Every project starts with a free performance audit. Let's see what we can do for your site.