PageSpeed Insights Integration Demo
This is what the PageSpeed Insights integration looks like when displaying real Google data. Below you'll see two examples: excellent performance and average performance.
Example 1: Excellent Performance
This is what a well-optimized site looks like. Notice the green scores, fast Core Web Vitals, and minimal optimization opportunities. This is the target for all Optymizer client sites.
PageSpeed Insights
Analyzed: 1/16/2026, 9:48:18 PM
URL: https://optymizer.com
Core Web Vitals (Lab Data)
Real User Data (Chrome UX Report)
Top Opportunities
Eliminate render-blocking resources
Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.
Properly size images
Serve images that are appropriately-sized to save cellular data and improve load time.
Minify JavaScript
Minifying JavaScript files can reduce payload sizes and script parse time.
Example 2: Average Performance (Needs Work)
This is what many sites look like - yellow and red scores indicating performance issues. Notice the longer Core Web Vitals times and significant optimization opportunities with real time savings potential.
PageSpeed Insights
Analyzed: 1/16/2026, 9:48:18 PM
URL: https://example.com
Core Web Vitals (Lab Data)
Top Opportunities
Reduce server response times (TTFB)
Time To First Byte is too slow. Consider using a CDN, optimizing server code, or upgrading hosting.
Eliminate render-blocking resources
Resources are blocking the first paint of your page.
Properly size images
Serve images that are appropriately-sized.
Enable text compression
Text-based resources should be served with compression (gzip, deflate or brotli).
Remove unused CSS
Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content.
How the Integration Works
Build-Time Analysis
The PageSpeed API is called during the Astro build process, not on every page load. This means zero performance impact for your visitors and efficient use of API quota.
Graceful Error Handling
If the API is unavailable or rate-limited, the page continues to build successfully without the PageSpeed section. No broken pages, just a missing optional feature.
Optional API Key
Works without authentication (~400 req/min). Add a Google API key to get higher limits (25,000 req/day). Perfect for development without keys, production with keys.
Smart Caching
Results are cached in the built HTML. When serving the page, browsers can cache it for hours. Only re-analyze on deployment, not on every visit.
Usage Examples
1. Simple Page Analysis
---
import { fetchPageSpeedData } from '@/utils/pagespeed';
import PageSpeedCard from '@/components/PageSpeedCard.astro';
const data = await fetchPageSpeedData({
url: 'https://optymizer.com',
strategy: 'mobile'
});
---
<PageSpeedCard data={data} />2. Quick Score Check
import { getPerformanceScore } from '@/utils/pagespeed';
const score = await getPerformanceScore('https://optymizer.com');
console.log(`Performance: ${score}/100`);3. Batch URL Analysis
import { batchAnalyzeUrls } from '@/utils/pagespeed';
const urls = [
'https://optymizer.com',
'https://optymizer.com/services/seo',
'https://optymizer.com/about'
];
const results = await batchAnalyzeUrls(urls, {
strategy: 'mobile'
}, 1000); // 1 second delay between requestsReady to Optimize Your Site?
These scores don't lie. Faster sites rank higher, convert better, and cost less to run. Let's get your site into the green zone.