Google PageSpeed Insights: How to interpret and improve your score
A website's loading speed directly influences its ranking in search engines, its conversion rate and user satisfaction. Every extra second it takes for the page to display can mean losing a...
A website's loading speed directly influences its ranking in search engines, its conversion rate and user satisfaction. Every extra second it takes for the page to display can mean losing a potential customer.
Studies show that a one-second delay reduces conversions by up to 7%. Google PageSpeed Insights is the official tool that evaluates a website's performance and gives concrete recommendations for improvement, helping you understand exactly where precious time is lost during loading.
Many people check their PageSpeed Insights score and get discouraged when they see a low number, without understanding what that score actually represents and which actions have the biggest impact on improving it. The score is only a summary indicator.
What really matters are the individual Core Web Vitals metrics and how they affect users' real experience on the website. A score of 45 on mobile does not necessarily mean your website is unusable, but that there are clear optimization opportunities that you can address systematically.
In this guide you will learn how to correctly interpret Google PageSpeed Insights results, which metrics have the biggest impact on SEO optimization and what concrete actions you can take to improve your website's performance.
We will go through each section of the report, explain the meaning of each metric and give you practical solutions you can implement regardless of the platform your website runs on.
Google PageSpeed Insights: how to interpret and improve your score
Google PageSpeed Insights analyzes your website from two perspectives: lab data (simulated in a controlled environment) and field data (collected from real users through the Chrome User Experience Report, CrUX).
Both are important, but field data reflects the real experience and has a direct impact on rankings in Google. If your website does not have enough traffic to generate CrUX data, the tool will show only lab data, which is a common situation for smaller or niche sites.
Understanding the score and the color codes
The PageSpeed score ranges from 0 to 100 and is calculated from six performance metrics weighted differently. Not all metrics have the same impact on the final score: LCP and TBT (Total Blocking Time) carry the most weight. The color codes show the state of each metric:
- Green (90-100): good performance, no immediate changes needed
- Orange (50-89): average performance, there are opportunities for improvement
- Red (0-49): poor performance, urgent action is needed
The Core Web Vitals metrics explained
Core Web Vitals are the set of metrics that Google considers fundamental for user experience. Understanding each one lets you prioritize your optimization efforts correctly and get the biggest impact for the least effort.
Largest Contentful Paint (LCP)
LCP measures the time it takes to load the largest visible element in the viewport (usually a main image or a large block of text). The ideal value is under 2.5 seconds. LCP is often the most important factor in how users perceive speed: it is the moment when the page seems "ready" for interaction.
Common causes of a slow LCP:
- Large unoptimized images that dominate the visible area of the page
- Web fonts that block text from displaying until they load
- Slow server response (high TTFB: Time To First Byte)
- CSS or JavaScript that blocks page rendering
- No CDN (Content Delivery Network) for fast delivery of static files
fetchpriority="high" attribute to the LCP image to signal to the browser that it must be loaded with top priority.Interaction to Next Paint (INP)
INP replaced First Input Delay (FID) as a Core Web Vitals metric in March 2024. It measures the latency of all user interactions throughout the visit, not just the first interaction. The ideal value is under 200 milliseconds, and a value above 500ms is considered poor.
A high INP indicates that JavaScript is blocking the browser's main thread, preventing a quick response to user interactions.
Solutions include: reducing and optimizing JavaScript, using the async and defer attributes, removing unnecessary third-party scripts and breaking long JavaScript tasks into smaller chunks using the "yielding to the main thread" technique.
Cumulative Layout Shift (CLS)
CLS measures the visual stability of the page: how much elements move around on the screen while loading. The ideal value is under 0.1. A high CLS is frustrating for users: imagine pressing a button that moves right before you click, activating something else.
Common causes of high CLS:
- Images and videos without dimensions specified in the HTML
- Ads that are inserted dynamically and shift the content
- Web fonts that change the text size on load (FOUT/FOIT)
- Content inserted dynamically above existing content
- Elements that appear after user interaction without reserved space
The "Opportunities" section, opportunities for improvement
PageSpeed Insights provides a list of opportunities ordered by estimated impact in seconds saved. This is the most valuable part of the report for immediate action. The most common recommendations and how to implement them:
- Serve images in next-gen formats: convert images to WebP or AVIF. In WordPress, plugins such as ShortPixel or Imagify do the conversion automatically. AVIF offers better compression than WebP but has more limited browser support
- Properly size images: don't load 3000px images for a 600px container. Use responsive images with the srcset and sizes attributes to serve the right size to each device
- Eliminate render-blocking resources: CSS and JavaScript that block rendering must be optimized. Inline critical CSS and load the rest asynchronously. Use the media attribute to load non-essential CSS conditionally
- Reduce unused CSS/JavaScript: remove unused code from CSS and JS files. Optimization plugins can do automatic minification and concatenation. Check code coverage in Chrome DevTools
- Enable text compression: enable GZIP or Brotli compression on the server. Brotli gives 15-20% better compression than GZIP for text files
- Preconnect to required origins: add preconnect hints for external resources (Google fonts, CDNs, analytics scripts) to eliminate connection latency
The "Diagnostics" section, technical diagnostics
This section provides detailed technical information that has no direct impact on the score, but points to potential problems that can become important in the long term or on lower-performance devices:
- Avoid enormous network payloads: the page transfers too much data. Check the total size and identify large resources. The recommended target is under 1.6MB in total
- Serve static assets with an efficient cache policy: configure cache headers for static files. A browser cache TTL of at least 1 year for files with a hash in the name
- Avoid excessive DOM size: the page contains too many HTML elements. Simplify the structure and remove unnecessary elements generated by page builders. An optimal DOM has fewer than 1400 nodes
- Minimize main-thread work: JavaScript takes up too much time on the browser's main thread. Profile the code with Chrome DevTools to identify expensive functions
- Reduce JavaScript execution time: scripts take too long to execute. Consider splitting large bundles and lazy loading non-essential functionality
The difference between mobile and desktop
PageSpeed Insights gives separate scores for mobile and desktop. The mobile score is almost always lower because the test simulates a mid-performance device (Moto G4 or equivalent) on a 4G connection with 150ms latency and 1.6 Mbps download speed.
This reflects reality. Most users access websites from phones that perform worse than laptops.
Focus on mobile optimization because Google uses mobile-first indexing. The mobile version of the website is the one evaluated for ranking.
A good desktop score but a poor mobile one does not help you in organic rankings. If you have to choose between optimizing for desktop and for mobile, always prioritize mobile.
How to prioritize optimizations in practice
Not all optimizations are equal in effort and impact. Here is a practical approach to get the best results in the shortest time:
- Optimize images: the biggest gain with the lowest risk. Convert to WebP, specify dimensions and use lazy loading for images below the fold
- Enable compression and caching: server-level or .htaccess changes with immediate impact and minimal risk
- Remove unnecessary plugins/scripts: every third-party script adds latency and blocks rendering
- Set up a CDN: reduces latency for users who are geographically far from the server
- Optimize fonts: use font-display: swap and preconnect to Google Fonts
Complementary tools for performance analysis
PageSpeed Insights gives a general overview, but for detailed diagnosis also use specialized tools that can give you valuable additional information:
- Chrome DevTools (Performance tab): detailed analysis of page loading with a visual timeline and exact identification of bottlenecks
- WebPageTest.org: testing from servers in different locations with detailed results, a visual filmstrip and comparisons between runs
- Google Search Console: the Core Web Vitals section shows field data for all the website's pages, grouped by URLs with similar problems
- GTmetrix: combines Lighthouse metrics with additional performance analysis and offers historical comparisons
- Lighthouse CI: integration into the development pipeline to detect performance regressions before deployment
Prioritize optimizations with a big impact on Core Web Vitals, test changes in a staging environment before applying them to production and monitor performance constantly. A fast website is built through a continuous process of measurement, optimization and verification, not through a single one-off intervention.
Source references
Dorel Tănase
Original author at GOAI. Published here in English with permission.