Deutsch
English
Page Speed & Performance
Page Speed and Performance are crucial ranking factors for modern search engines. Google has defined clear metrics with Core Web Vitals that directly influence the ranking algorithm. A fast website not only improves search engine position but also user experience and conversion rate.
Google Page Speed Evolution
Core Web Vitals - The Most Important Performance Metrics
Core Web Vitals are the three most important performance metrics that Google uses for ranking:
1. Largest Contentful Paint (LCP)
LCP measures the time until the largest visible element of a page is loaded. The value should be under 2.5 seconds.
LCP Benchmarks
2. First Input Delay (FID)
FID measures the time between the first user interaction and browser response. The value should be under 100 milliseconds.
3. Cumulative Layout Shift (CLS)
CLS measures the visual stability of a page. The value should be under 0.1.
4. Interaction to Next Paint (INP)
INP is the new Core Web Vital that replaces FID. It measures response time to user interactions and should be under 200 milliseconds.
Performance Metrics in Detail
Lab Data vs. Field Data
Other Important Performance Metrics
- First Contentful Paint (FCP): Time until first visible content
- Time to Interactive (TTI): Time until page is fully interactive
- Speed Index: Speed of visible content
- Total Blocking Time (TBT): Time when main thread is blocked
Performance Optimization Techniques
1. Image Optimization
5 Steps for optimal image performance:
Modern Image Formats:
- WebP: 25-35% smaller files than JPEG
- AVIF: 50% smaller files than JPEG
- SVG: For icons and simple graphics
2. Code Minification
8 Points for optimized code:
- Minify CSS
- Minify JavaScript
- Compress HTML
- Remove unused CSS
- JavaScript bundling
- Tree Shaking
- Code Splitting
- Dead Code Elimination
3. Caching Strategies
Browser Caching:
- Static Assets: 1 year
- HTML Pages: 1 hour
- API Responses: 5 minutes
Server-Side Caching:
- Redis for dynamic content
- Memcached for session data
- CDN for static assets
4. Critical CSS
Critical CSS contains the styles needed for above-the-fold rendering. This reduces render-blocking resources.
6 Steps for Critical CSS:
5. Resource Hints
- Preload: Preload important resources
- Prefetch: Load resources for next page
- Preconnect: Prepare DNS lookup and connection
- Dns-prefetch: Speed up DNS resolution
HTTP/2 and HTTP/3
HTTP/2 Advantages
- Multiplexing: Multiple requests over one connection
- Server Push: Proactive sending of resources
- Header Compression: Reduced overhead
- Binary Protocol: More efficient processing
HTTP/3 Advantages
- QUIC Protocol: Faster connection establishment
- Multiplexing without Head-of-Line-Blocking
- Better performance with packet loss
- Integrated encryption
Performance Monitoring and Tools
Google PageSpeed Insights
Free tool from Google for performance analysis with lab and field data.
Google Lighthouse
Open-source tool for comprehensive website audits with performance ratings.
WebPageTest
Detailed performance analysis with various locations and devices.
Chrome DevTools
Integrated browser tools for performance debugging and optimization.
Performance Monitoring Categories:
- Lab Testing: Lighthouse, PageSpeed Insights
- Field Monitoring: Google Analytics, Real User Monitoring
- Debugging: Chrome DevTools, WebPageTest
- Continuous Monitoring: New Relic, DataDog
Mobile Performance
Mobile Performance is particularly important as Google uses Mobile-First-Indexing and mobile devices often have slower connections.
Mobile-specific Optimizations
- Touch-optimized elements
- Reduced data transfer
- Progressive Web App (PWA) features
- AMP (Accelerated Mobile Pages)
Mobile Performance Development:
Performance Budget
A Performance Budget defines limits for various resources to achieve the desired performance.
Common Performance Problems
1. Render-Blocking Resources
CSS and JavaScript that block rendering should be optimized or loaded asynchronously.
2. Unoptimized Images
Large image files without compression or modern formats significantly slow down load time.
3. Too Many HTTP Requests
Each request costs time. Combine resources and use spriting techniques.
4. Missing Caching Headers
Without caching, resources are reloaded on every visit.
5. Third-Party Scripts
External scripts can significantly impact performance.
Common Problems and Solutions:
- Problem: Render-Blocking CSS → Solution: Critical CSS + Async Loading
- Problem: Large Images → Solution: WebP/AVIF + Compression
- Problem: Many Requests → Solution: Bundling + Spriting
- Problem: No Caching → Solution: Set Cache Headers
- Problem: Third-Party → Solution: Lazy Loading + Monitoring
Performance Testing Strategies
1. Continuous Monitoring
Implement continuous performance monitoring with tools like Google Analytics or Real User Monitoring.
2. Automated Tests
Integrate performance tests into your CI/CD process with tools like Lighthouse CI.
3. A/B Testing
Test performance optimizations with A/B tests to measure impact on rankings.
4. Regular Audits
Conduct monthly performance audits to detect deteriorations early.
Future of Performance
Core Web Vitals Evolution
Google continuously expands Core Web Vitals and adjusts thresholds.
New Performance Metrics
- Interaction to Next Paint (INP) replaces FID
- Extended Mobile Metrics
- Privacy-focused Performance Measurements
AI-powered Optimization
Machine Learning is increasingly used for automatic performance optimizations.