Why Site Speed Matters
Users have increasingly high expectations. A 1-second delay can cost thousands of euros in lost conversions. Google uses speed as a ranking factor. Performance is no longer optional - it's critical.
Speed Impact Statistics
- 1 second delay = 7% conversion loss
- 53% abandon if site takes >3 seconds
- Bounce rate increases 32% when load time goes from 1 to 3 seconds
- Fast sites have 2x higher conversions
- Amazon: 100ms delay = 1% revenue lost
- Google: Speed has been a ranking factor since 2018
- What it measures: When the largest visible element loads
- Target: < 2.5 seconds
- Impact: User perception of load
- What it measures: Time until site responds to first interaction
- Target: < 100ms (FID) / < 200ms (INP)
- Impact: Interactivity
- What it measures: How much the page "shifts" during loading
- Target: < 0.1
- Impact: Visual stability
- URL: pagespeed.web.dev
- Core Web Vitals
- Specific recommendations
- Lab and Field data
- Waterfall analysis
- Multiple locations
- Historical data
- Deep analysis
- Multiple runs
- Visual comparison
- Network tab (waterfall)
- Performance tab (profiling)
- Lighthouse audit
- Core Web Vitals report
- URLs with issues
- Real user data
- What's loading?
- In what order?
- What's blocking?
- What are the biggest files?
- Can they be compressed/optimized?
- Analytics, ads, widgets
- Impact on performance
- Server response time
- <200ms ideal
- 30% smaller than JPEG/PNG
- Nearly universal support
- Ideal for most cases
- 50% smaller than JPEG
- Growing support
- Next-gen format
- Photographs
- Fallback for older browsers
- When transparency needed
- Graphics with solid colors
- Icons and logos
- Infinitely scalable
- Very small
- Tools: TinyPNG, ImageOptim, Squoosh
- Quality: 80-85% for JPEG
- Savings: 50-80%
- Use srcset for different screen sizes
- Specify sizes to tell browser what size to choose
- Browser automatically picks the right image
- Add loading="lazy" attribute on images
- Load images when approaching viewport
- Native HTML attribute
- Reduces initial load
- Always specify width and height on images
- Prevents CLS (Cumulative Layout Shift)
- Browser reserves space before loading
- Cloudflare Images
- Imgix
- Cloudinary
- Auto-optimization and resize
- Critical (npm package)
- CriticalCSS
- Penthouse
- Whitespace
- Comments
- Redundant characters
- cssnano
- clean-css
- PostCSS
- PurgeCSS
- UnCSS
- Tailwind's purge
- Don't use @import to load other CSS files
- @import blocks parallel loading
- Better to use separate link tags or concatenation
- Terser
- UglifyJS
- esbuild
- Webpack
- Rollup
- Vite
- Smaller initial load
- Load only what's needed
- Add defer attribute on scripts
- Doesn't block HTML parsing
- Executes after DOM is ready
- Maintains script order
- Add async attribute for independent scripts
- Doesn't block HTML parsing
- Executes immediately when loaded
- Doesn't guarantee execution order
- Ideal for analytics and tracking
- Chrome Coverage tool
- Bundlephobia (check package sizes)
- Import cost (VS Code extension)
- Analytics
- Chat widgets
- Ads
- Social widgets
- Lazy load where possible
- Facades (placeholders)
- Self-host critical ones
- Regular audit
- Shared -> VPS -> Dedicated
- Traditional -> Cloud
- Cloudflare
- AWS CloudFront
- Fastly
- Bunny CDN
- Servers close to users
- Reduces latency
- Aggressive caching
- DDoS protection
- Configure Cache-Control header on server
- Static assets (CSS, JS, images): cache for 1 year
- HTML: short cache or no-cache
- Use cache busting (versioning) for updates
- Redis
- Memcached
- Page caching
- Edge caching
- TTL configuration
- Universal support
- 70-80% size reduction
- 15-20% better than Gzip
- Modern browser support
- Preferred when possible
- Multiplexing
- Header compression
- Server push
- Requires HTTPS
- QUIC protocol
- Faster connections
- Better for mobile
- Frequent queries
- Columns in WHERE/JOIN
- Avoid N+1
- Limit data retrieved
- Caching layer
- Caching plugin (WP Rocket, W3 Total Cache)
- Image optimization (ShortPixel, Imagify)
- CDN integration
- Database cleanup
- Too many plugins
- Heavy themes
- Excessive post revisions
- Large media files
- Optimized product images
- Lazy load reviews
- Defer non-critical JS
- Minimal distractions
- Fast payment processing
- No blocking scripts
- Aggressive code splitting
- Server-side rendering (SSR)
- Static generation where possible
- Virtual scrolling for long lists
- Memoization
- Efficient state management
- Page load times
- Time to interactive
- Core Web Vitals
- Google Analytics 4
- SpeedCurve
- New Relic Browser
- Datadog RUM
- Calibre
- SpeedCurve
- Pingdom
- LCP > 3s
- CLS > 0.1
- TTFB > 500ms
- Error rates
- [ ] Enable compression (Gzip/Brotli)
- [ ] Enable browser caching
- [ ] Use CDN
- [ ] Optimize images (format, size, lazy load)
- [ ] Minify CSS/JS
- [ ] Defer non-critical JS
- [ ] Critical CSS inline
- [ ] Remove unused CSS/JS
- [ ] Code splitting
- [ ] Preconnect to important origins
- [ ] Optimize web fonts
- [ ] Server-side rendering
- [ ] Service workers
- [ ] HTTP/2 or HTTP/3
- [ ] Database optimization
- [ ] Edge computing
- 100,000 visitors/month
- 2% conversion
- $100 average order
- Revenue: $200,000/month
- Bounce rate drops 20%
- Conversion increases to 2.5%
- Revenue: $250,000/month
- Increase: $50,000/month
- Measure before optimizing
- Focus on critical path
- User experience > metrics
- Continuous, not periodic
Core Web Vitals
Google measures three main metrics:
LCP (Largest Contentful Paint)
FID (First Input Delay) / INP (Interaction to Next Paint)
CLS (Cumulative Layout Shift)
Performance Diagnosis
Testing Tools
Google PageSpeed Insights:
GTmetrix:
WebPageTest:
Chrome DevTools:
Google Search Console:
What to Analyze
1. Waterfall Chart
2. Largest Resources
3. Third-Party Scripts
4. Time to First Byte (TTFB)
Image Optimization
Why It Matters
Images are usually 50%+ of page weight.
Image Formats
WebP:
AVIF:
JPEG:
PNG:
SVG:
Optimization Techniques
1. Compression
2. Responsive Images
3. Lazy Loading
4. Specified Dimensions
5. CDN for Images
CSS Optimization
Critical CSS
What it is:
CSS needed for above-the-fold, inline in HTML.
Implementation:
1. Identify critical CSS
2. Inline in
3. Load rest async
Tools:
Minification
Eliminates:
Tools:
Remove Unused CSS
Problem:
CSS frameworks include everything, you use 10%.
Solutions:
Avoid @import in CSS
JavaScript Optimization
Minimize and Bundle
Minification:
Bundling:
Code Splitting
What it is:
Splitting the bundle into chunks loaded on-demand.
Benefits:
Defer and Async for Scripts
Defer:
Async:
Remove Unused JavaScript
Tools:
Third-Party Scripts
Problems:
Solutions:
Server-Side Optimization
Hosting and Server
Upgrade hosting:
CDN (Content Delivery Network):
CDN Benefits:
Caching
Browser Caching:
Server Caching:
CDN Caching:
Compression
Gzip:
Brotli:
HTTP/2 and HTTP/3
HTTP/2:
HTTP/3:
Database Optimization
Indexing:
Query Optimization:
Specific Optimizations
WordPress
Essentials:
Avoid:
E-commerce
Product Pages:
Checkout:
SPA (Single Page Applications)
Initial Load:
Runtime:
Continuous Monitoring
Real User Monitoring (RUM)
What it is:
Data from real users, not lab tests.
Metrics:
Tools:
Synthetic Monitoring
What it is:
Regular automated tests.
Tools:
Alerting
Setup alerts for:
Optimization Checklist
Quick Wins
Medium Effort
Advanced
ROI of Optimization
Impact Calculation
Example:
After optimization (load time 4s -> 2s):
Investment vs Return
Optimization cost: $5,000-20,000 (one-time) Return: $50,000+/month (ongoing) ROI: 250%+ in first month
Conclusion
Web performance is a continuous discipline, not a one-time project. The business impact is direct and measurable.
Principles:
Getting started:
1. Audit with PageSpeed Insights
2. Identify biggest issues
3. Prioritize by impact
4. Implement and measure
5. Setup continuous monitoring
---
The DGI team offers web performance audit and optimization services. Contact us for a free analysis of your site.