Google PageSpeed Insights How to Achieve a 90+ Score

Google PageSpeed Insights: How to Check and Improve Your Website Speed

Is your website losing 53% of visitors due to slow loading? Does every second of delay reduce conversions by 7%? Spoiler: Google PageSpeed Insights will reveal all issues in 30 seconds and provide ready-made solutions.

Table of Contents:

• 📌 What is Google PageSpeed Insights
• 📌 How to Use the Tool
• 📌 Core Web Vitals: Key Metrics
• 💼 Top 10 Speed Problems and Solutions
• 🛠️ Step-by-Step Website Optimization
• 📊 Monitoring Tools
• 📈 Website Speed and SEO
• ⚖️ WordPress vs Shopify vs Custom
• 💡 Real-World Optimization Case Studies
• ❓ Frequently Asked Questions (FAQ)
• ✅ Conclusions

⸻

🎯 What is Google PageSpeed Insights

Google PageSpeed Insights is a free tool from Google for analyzing the loading speed of web pages on mobile devices and desktops.

The tool is available at https://pagespeed.web.dev/ and displays a score from 0 to 100, where higher is better.

📊 Why Website Speed is Critical

Google statistics show striking figures:

• 📉 53% of users leave a site if it takes more than 3 seconds to load
• 📉 1 second delay = -7% conversions (millions of dollars for e-commerce)
• 📉 Every 100ms delay = -1% sales (Amazon study)
• 📈 Fast sites get 25% more organic traffic

👉 Real-world example: Walmart's online store improved its loading speed by 1 second and gained +2% conversions. That's millions of dollars in additional annual revenue.

What PageSpeed Insights Shows:

• ✅ Performance Score: Overall score from 0 to 100
• ✅ Field Data: Real user data (Chrome User Experience Report)
• ✅ Lab Data: Simulated testing under controlled conditions
• ✅ Core Web Vitals: Google's three key metrics
• ✅ Opportunities: Specific recommendations for improvement
• ✅ Diagnostics: Additional information about issues

Website speed affects Google ranking through the Page Experience signal, introduced in 2021.

✅ Quick Summary: PageSpeed Insights is not just a speed tester, but a comprehensive tool for diagnosing and optimizing website performance.

⸻

🔬 How to Use Google PageSpeed Insights

The checking process takes 30-60 seconds and requires no technical skills.

📈 Step-by-Step Guide

Step 1: Open the Tool

Go to the official PageSpeed Insights page.

Step 2: Enter the URL

Paste the full address of the page you want to test (e.g., https://example.com).

Step 3: Wait for Results

The analysis takes 20-40 seconds. Google tests the page twice: for mobile and desktop versions.

Step 4: Analyze the Report

Decoding the Performance Score:

• 🟢 90-100 points: Excellent
• 🟡 50-89 points: Needs Improvement

🔴 0-49 points: Poor

Field Data vs Lab Data: What's the Difference?

⚡ Important: Field Data is only available for sites with sufficient traffic. New sites will only have Lab Data.

How to Read the Opportunities Section:

Each recommendation shows:

• 🔹 Problem Name: e.g., "Properly size images"
• 🔹 Potential Time Savings: how many seconds can be gained
• 🔹 Resource List: which files need optimization
• 🔹 Link to Documentation: how to fix the issue

Set up tracking through Google Analytics to monitor the impact of optimization on behavioral metrics.

✅ Quick Summary: Focus on the mobile version, as Google has been using mobile-first indexing since 2019.

⸻

⚠️ Core Web Vitals: Key Metrics

Core Web Vitals are three main indicators that Google uses to assess the quality of user experience.

📊 LCP (Largest Contentful Paint)

What it is: The time it takes for the largest visible element on the page (image, video, text block) to load.

• 🟢 Good: Less than 2.5 seconds
• 🟡 Needs Improvement: 2.5–4 seconds
• 🔴 Poor: More than 4 seconds

How to improve LCP:

• ✅ Optimize images (WebP format, compression)
• ✅ Use a CDN for faster content delivery
• ✅ Eliminate render-blocking CSS and JavaScript
• ✅ Improve server speed (upgrade hosting)

📊 FID (First Input Delay) / INP (Interaction to Next Paint)

What it is: The time from the user's first interaction (click, tap) to the browser's response.

• 🟢 Good FID: Less than 100 milliseconds
• 🟢 Good INP: Less than 200 milliseconds
• 🟡 Needs Improvement: 100–300 ms (FID) / 200–500 ms (INP)
• 🔴 Poor: More than 300 ms (FID) / 500 ms (INP)

⚡ Important: Starting March 2024, Google is replacing FID with INP (Interaction to Next Paint) as the main interactivity metric.

How to improve FID/INP:

• ✅ Minimize JavaScript (remove unused code)
• ✅ Use Web Workers for heavy computations
• ✅ Break down long tasks into smaller chunks
• ✅ Delay the loading of third-party scripts

📊 CLS (Cumulative Layout Shift)

What it is: A measure of visual stability — how much the page "jumps" during loading.

• 🟢 Good: Less than 0.1
• 🟡 Needs Improvement: 0.1–0.25
• 🔴 Poor: More than 0.25

👉 Typical CLS problem: A user wants to click the "Buy" button, but at the last moment, an advertising banner loads, the button shifts down, and the user accidentally clicks on the ad. This is bad for UX.

How to improve CLS:

• ✅ Set width/height attributes for all images and videos
• ✅ Reserve space for dynamic content (ads, widgets)
• ✅ Avoid inserting content above existing content
• ✅ Use font-display: swap for web fonts

📊 Core Web Vitals Standards Table

Monitor metrics through Google Search Console in the "Core Web Vitals" section.

✅ Quick Summary: Achieving "green" scores across all three metrics significantly improves user experience and SEO.

⸻

💡 Top 10 Speed Problems and Their Solutions

Based on the analysis of millions of sites, here are the most common problems and ready-made solutions.

❌ Problem 1: Large Unoptimized Images

Symptom: PageSpeed shows "Properly size images" or "Serve images in next-gen formats"

Solution:

• ✅ Convert JPEG/PNG to WebP format (saves 25–35% of size)
• ✅ Use tools: TinyPNG, ImageOptim, Squoosh
• ✅ Add lazy loading:

<img src="image.webp" alt="Description" loading="lazy" width="800" height="600">

❌ Problem 2: Browser Caching is Not Used

Symptom: "Leverage browser caching"

Solution for Apache (.htaccess):

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/webp "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>

❌ Problem 3: Render-Blocking CSS and JavaScript

Symptom: "Eliminate render-blocking resources"

Solution:

• ✅ Add the defer attribute for JavaScript:

<script src="script.js" defer></script>

• ✅ Inline critical CSS directly in the <head>
• ✅ Load the rest of the CSS asynchronously:

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

❌ Problem 4: Slow Server (High TTFB)

Symptom: "Reduce server response time (TTFB)"

Solution:

• ✅ Update to PHP 8.2+ (30–50% faster than PHP 7.4)
• ✅ Connect a CDN (Cloudflare, BunnyCDN)
• ✅ Optimize the database (for WordPress: WP-Optimize)
• ✅ Change hosting to VPS or cloud (AWS, DigitalOcean)

❌ Problem 5: Uncompressed Content

Symptom: "Enable text compression"

Solution for Nginx:

gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1000;

Or use the more modern **Brotli** (compresses 15–20% better than Gzip).

❌ Problem 6: Too Many HTTP Requests

Symptom: Dozens of separate CSS/JS files

Solution:

• ✅ Combine CSS files into one
• ✅ Combine JavaScript files
• ✅ Use CSS sprites for icons
• ✅ For WordPress: Autoptimize plugin

❌ Problem 7: Missing Preload for Critical Resources

Symptom: Fonts load late

Solution:

<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>

❌ Problem 8: Third-Party Scripts Slow Down the Site

Symptom: Google Analytics, Facebook Pixel, chat widgets block loading

Solution:

• ✅ Load through Google Tag Manager with a delay
• ✅ Use the async attribute:

<script async src="https://www.googletagmanager.com/gtag/js"></script>

❌ Problem 9: Large Web Fonts

Symptom: "Ensure text remains visible during webfont load"

Solution:

@font-face {
font-family: 'MyFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* Shows a system font while the custom one loads */
}

❌ Problem 10: Lack of HTTP/2

Symptom: Server uses the older HTTP/1.1

Solution:

• ✅ Update the server to HTTP/2 (nginx 1.9.5+, Apache 2.4.17+)
• ✅ Or use Cloudflare (automatically adds HTTP/2)

✅ Quick Summary: 80% of speed issues are resolved by optimizing images and configuring caching.

⸻

🛠️ Step-by-Step Website Speed Optimization

Here is a practical action plan for achieving a 90+ score in PageSpeed Insights.

📋 Stage 1: Current State Audit

1. Test the site via PageSpeed Insights
2. Record baseline metrics (Performance Score, LCP, INP, CLS)
3. Take a screenshot of the report for comparison after optimization
4. Export the list of Opportunities into a spreadsheet

📋 Stage 2: Image Optimization (Most Important)

1. Convert all JPEG/PNG to WebP via Squoosh
2. Compress images (80–85% quality is optimal)
3. Add the loading="lazy" attribute for all images except those on the first screen
4. Set width/height for every image (to avoid CLS)

📋 Stage 3: Caching Configuration

For WordPress:

• Install a plugin like WP Rocket or W3 Total Cache
• Enable browser caching and page caching
• Configure GZIP compression

For Nginx (manual):

location ~* \.(jpg|jpeg|png|gif|webp|css|js)$ {
expires 365d;
add_header Cache-Control "public, immutable";
}

📋 Stage 4: CSS/JS Minimization

• ✅ Remove unused CSS via Chrome DevTools Coverage
• ✅ Minify files using online minimizers or build tools
• ✅ Combine multiple files into one (where possible)

📋 Stage 5: CDN Connection

Cloudflare (free plan):

1. Sign up at cloudflare.com
2. Add your domain
3. Change the nameservers at your domain registrar
4. Enable Auto Minify and Brotli in settings

📋 Stage 6: Server Optimization

• ✅ Update PHP to version 8.2+
• ✅ Enable OPcache for PHP
• ✅ Optimize MySQL (for WordPress: table optimization)
• ✅ Consider migrating to better hosting (if TTFB > 600 ms)

Check for technical errors using the Rich Results Test after major code changes.

✅ Quick Summary: Consistent execution of all stages yields a result of 85–95 points within 2–3 hours of work.

⸻

📊 Tools for Speed Monitoring

PageSpeed Insights is not the only tool for checking website speed. Let's look at the alternatives and their features.

✅ Tool Comparison

🔍 Lighthouse in Chrome DevTools

How to run:

1. Open the website in Chrome
2. Press F12 (Developer Tools)
3. Go to the "Lighthouse" tab
4. Select Mobile or Desktop
5. Click "Analyze page load"

👉 Advantage: you can test the site on a local server (localhost) before publishing changes.

🔍 GTmetrix: Additional Features

• ✅ Testing from different locations (Vancouver, London, Sydney, etc.)
• ✅ Choice of connection type (Cable, 3G, 4G)
• ✅ Comparison of results before/after optimization
• ✅ Speed monitoring (daily automatic tests)

✅ Quick Conclusion: test the site with several tools for a complete picture, but prioritize PageSpeed Insights.

⸻

📈 Website Speed and SEO

Since 2021, website speed has officially influenced ranking through the Page Experience signal.

✅ How Google Uses Speed in Ranking

• 📊 Core Web Vitals: official ranking factor since June 2021
• 📊 Mobile-first indexing: mobile speed is more important than desktop speed
• 📊 Page Experience Signal: combination of speed, security (HTTPS), absence of intrusive interstitials
• 📊 Indirect Impact: fast sites have a lower bounce rate and higher time on site

📊 Statistics on Speed's Impact on SEO

A Backlinko study (2023) analyzed 11.8 million search results:

• 🔹 Sites in the first position load in an average of 1.65 seconds
• 🔹 Sites with LCP < 2.5 sec receive 25% more organic traffic
• 🔹 A speed improvement of 0.5 sec can boost rankings by 2-3 positions

🔗 Connection to Other SEO Factors

Speed works in combination with:

• 🔗 Mobile usability: responsive design + speed = ideal UX
• 🔗 HTTPS: mandatory for Page Experience
• 🔗 Safe browsing: absence of malware
• 🔗 No intrusive interstitials: no pop-ups that block content

Combine speed optimization with correct Schema.org markup for maximum effect.

Set up canonical URLs correctly so Google indexes the fast versions of pages, not duplicates.

💡 Mobile Speed is More Critical

Google statistics:

• 📱 63% of search queries occur on mobile devices
• 📱 70% of mobile pages take more than 5 seconds to load
• 📱 Google has been using mobile-first indexing since 2019

⚡ Important: if your site has 95 points on Desktop, but 45 on Mobile — Google will evaluate the mobile version for ranking.

✅ Quick Conclusion: speed is not a direct top-10 factor, but fast sites have advantages due to better behavioral metrics.

⸻

⚖️ WordPress vs Shopify vs Custom: Optimization Features

Different platforms have their nuances of speed optimization.

📊 WordPress (most popular CMS)

Typical problems:

• ❌ Too many plugins (each adds CSS/JS)
• ❌ Heavy themes with visual builders
• ❌ Unoptimized database (thousands of post revisions)

Best plugins for speed:

• 🚀 WP Rocket (paid, $49/year) — best all-in-one
• 🚀 W3 Total Cache (free) — powerful, but complex
• 🚀 Autoptimize (free) — CSS/JS minimization
• 🚀 ShortPixel (free/paid) — image optimization
• 🚀 WP-Optimize (free) — database cleanup

Quick checklist for WordPress:

1. Choose a lightweight theme (GeneratePress, Astra)
2. Delete all unused plugins
3. Install WP Rocket or W3 Total Cache
4. Optimize images via ShortPixel
5. Connect Cloudflare CDN
6. Update to PHP 8.2+

📊 Shopify (e-commerce platform)

Typical problems:

• ❌ Limited control over theme code
• ❌ Apps add many scripts
• ❌ Heavy product images

How to optimize Shopify:

• ✅ Use Shopify's built-in image optimization
• ✅ Remove unnecessary Apps (each adds 50-200 KB of code)
• ✅ Optimize Liquid templates (remove unused code)
• ✅ Use lazy loading for product galleries
• ✅ Delay loading of third-party code (reviews, chat)

⚡ Important: Shopify has built-in CDN and optimization, so the base speed is usually better than WordPress.

📊 Custom (HTML/React/Next.js)

Advantages:

• ✅ Full control over the code
• ✅ Ability to use SSR/SSG
• ✅ No "extra" CMS code

Best practices:

• 🔹 Next.js: use Image component for automatic optimization
• 🔹 React: code splitting via React.lazy()
• 🔹 Static Site: generate HTML at the build stage (Gatsby, Hugo)

📊 Comparison Table

✅ Quick Conclusion: WordPress is the easiest to optimize via plugins; custom development yields the best results.

⸻

💡 Real Optimization Case Studies

Let's look at real examples of speed improvements with concrete numbers.

🔹 Case 1: Clothing Online Store (WordPress + WooCommerce)

Initial metrics:

• Performance Score: 24/100 (Mobile)
• LCP: 6.8 sec
• CLS: 0.42
• Load time: 9.2 sec

What was done:

1. Converted all product images to WebP (3200 images)
2. Installed WP Rocket + Autoptimize
3. Changed theme from Divi to Astra (400 KB lighter)
4. Removed 12 unnecessary plugins
5. Connected Cloudflare CDN
6. Optimized the database (deleted 18,000 revisions)

Result:

• Performance Score: 87/100 (+63 points)
• LCP: 2.1 sec (-4.7 sec)
• CLS: 0.08 (-0.34)
• Organic traffic: +42% in 2 months
• Conversion: +18% (faster checkout)

🔹 Case 2: Corporate Website (Custom React SPA)

Initial metrics:

• Performance Score: 48/100
• LCP: 4.2 sec
• FID: 280 ms
• Problem: all JavaScript loaded at once (2.1 MB)

What was done:

1. Implemented code splitting (React.lazy)
2. Added Server-Side Rendering (Next.js migration)
3. Optimized the bundle (reduced from 2.1 MB to 450 KB)
4. Added CDN for static resources

Result:

• Performance Score: 94/100 (+46 points)
• LCP: 1.8 sec (-2.4 sec)
• FID: 45 ms (-235 ms)
• Bounce rate: -28%

✅ Quick Conclusion: in all cases, image optimization and caching provided 70-80% of the speed improvement.

⸻

❓ Frequently Asked Questions (FAQ)

🔍 What PageSpeed score is considered good?

The goals for most sites are: 90+ points on Desktop and 80+ on Mobile. Achieving 100 points is very difficult and not always practical (especially for complex sites with many features). The main thing is to have all three Core Web Vitals in the "green" zone.

🔍 Does the PageSpeed Score directly affect ranking?

No, the PageSpeed score itself is not a ranking factor. Google uses Core Web Vitals (LCP, INP, CLS) from real user data (Field Data), not laboratory scores. But a high PageSpeed Score usually means good Core Web Vitals.

🔍 Why do mobile and desktop scores differ?

Mobile devices have a weaker processor and slower internet connection. Google simulates testing on a Moto G4 with a 4G connection (slower than modern flagships). Therefore, the mobile score is almost always 10-30 points lower than the desktop score.

🔍 What is more important: Lab Data or Field Data?

Field Data is more important for SEO — it's the real experience of your users. Lab Data is useful for diagnosing problems, but Google uses Field Data (if available) for ranking. Field Data appears after 28 days of sufficient traffic.

🔍 How long does it take to improve metrics?

Lab Data updates instantly after changes. Field Data updates every 28 days (it is a monthly average). This means the results of your optimization in Field Data may only appear a month after the changes are implemented.

🔍 Can a real site achieve 100 points?

Yes, but it is difficult for sites with dynamic content, analytics, and advertising. Static HTML pages easily reach 100 points. For WordPress/Shopify, a realistic goal is 90-95 points. You should not sacrifice functionality for the sake of 100 points.

🔍 What to do if third-party scripts slow down the site?

Use **Google Tag Manager** to centrally manage all scripts. Set up delayed loading for non-critical scripts (chat widgets, social plugins). Add the `async` or `defer` attribute to all third-party scripts.

🔍 How often should website speed be tested?

Recommended: once a month for monitoring and after every major site update (new theme, plugin, redesign). Set up automatic monitoring via GTmetrix or UptimeRobot for daily checks.

🔍 Is CDN necessary for a small site?

Yes, even small sites benefit from CDN. The **Cloudflare free plan** provides: CDN, HTTPS, Brotli compression, DDoS protection. This improves speed by 20-40% even for local businesses with an audience in one country.

🔍 PageSpeed Insights vs GTmetrix: what's the difference?

PageSpeed Insights uses official Google data (Lighthouse + Field Data from Chrome). GTmetrix shows more detailed information (waterfall chart, server location). Use PageSpeed as the main tool, and GTmetrix — for deep diagnosis.

Use semantic core 2.0 for content optimization for fast, high-converting pages.

⸻

✅ Conclusions

Let's summarize:

• 🎯 PageSpeed Insights is a must-have tool: for every site owner, regardless of niche
• 🎯 Core Web Vitals affect SEO: since 2021, it is an official Google ranking factor
• 🎯 80% of the improvement comes from images and caching: start with the basics before moving to complex things
• 🎯 Mobile speed is more critical: Google uses mobile-first indexing
• 🎯 90+ points is achievable: for most sites, this is achievable in 2-4 hours of work
• 💡 Recommendation: test speed monthly, monitor Field Data via Search Console, implement changes gradually

💯 Summary: Website speed is not just a technical metric, but a critical factor for business. Every second of delay costs you customers and revenue. Google PageSpeed Insights provides a free and accurate analysis in 30 seconds. Start by checking your site through PageSpeed Insights right now and implement the top 3 recommendations from the Opportunities section — you'll see the result in a week.

✍️ Author: WebCraft | 🚀 We Create Websites That Sell | 🌐 webscraft.org