Itulis.com
Proof That Premium Design and Perfect Performance Coexist
Our own agency website — the proof that we practice what we preach. Full premium design with animation, built performance-first from day one.
Performance Snapshot
The Challenge
Itulis.com is our own agency portfolio — the site that has to prove we practice what we preach. It demands premium design with scroll-triggered animations, glassmorphism, gradient effects, and rich visual storytelling, while still hitting near-perfect scores.
Issues Identified
- Premium design requirements: glassmorphism cards, gradient text, animated transitions on every section
- Scroll-triggered reveal animations on 40+ elements across the page
- Backdrop-filter (glassmorphism) known to be GPU-expensive, especially on mobile
- Complex gradient backgrounds with multiple radial gradients per section
- Client expectation: the agency site must score higher than client sites
The Strategy
Engineered every visual effect to use GPU-composited properties only, disabled expensive effects on mobile, and built a custom scroll observer that adds zero main thread overhead.
T19: Minimal Inline Observer
A single IntersectionObserver script (under 500 bytes inline) drives all 40+ scroll-triggered reveal animations. No animation library needed.
T27: Mobile Backdrop Disable
Glassmorphism backdrop-filter disabled on screens under 1024px. Replaced with a solid semi-transparent background that looks identical.
T28: Decorative Motion Guard
Floating gradient orbs and parallax elements hidden on mobile via a .decorative-motion class. Zero GPU cost on constrained devices.
T29: Reduced Motion Respect
Users with prefers-reduced-motion see fully visible content with no animation. Accessibility-first approach to motion.
T4: Zero External CSS
All styles inlined via Astro build pipeline. The browser renders the page with a single HTML document — no CSS file requests.
T18: Contain Paint Hero
Hero section uses contain: layout paint to isolate the complex gradient background from the rest of the render tree.
The Execution
Built from scratch as an Astro site with every design decision validated against Lighthouse. Each visual effect was A/B tested for performance impact before inclusion.
Design-Performance Contract
Established rules: every animation must use only transform/opacity. Every gradient must be a background, not a filter. Every glass effect must have a mobile fallback.
Component Architecture
Built a library of performance-safe components: GlassCard, GradientText, ScoreCircle, RevealOnScroll — each pre-tested for zero layout shift.
Mobile-First Performance
Developed mobile version first with all decorative effects disabled. Desktop enhancements layered on top via media queries.
Scroll Animation System
Single IntersectionObserver instance observes all .reveal elements. Staggered delays via CSS classes. Observer disconnects after all elements visible.
Continuous Validation
Lighthouse CI integrated into deployment. Every push validated against a performance budget: LCP under 2s, CLS 0, TBT under 10ms.
The Results
Itulis.com proves the thesis — scoring 97 on mobile and 100 on desktop with full premium design, glassmorphism, animations, and gradient effects.
Key Achievements
- Mobile score of 97 with full premium visual design
- Desktop achieves perfect 100 with all effects enabled
- FCP of 1.0s — premium design renders instantly
- TBT of 0ms — zero main thread blocking despite 40+ animations
- CLS of 0 — no layout shifts from fonts, images, or dynamic content
- Total page weight under 200KB including all visual assets
Verify It Yourself
Don't take our word for it. Click the buttons below to run a live PageSpeed Insights test on Itulis.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.