Performance Metrics: Opportunities & Diagnostics
What are Opportunities & Diagnostics?
Opportunities and Diagnostics are two categories of response returned by Google’s Lighthouse tools, which underpin Moz’s Performance Metrics suite, as well as Google’s own Pagespeed Insights. For each page audited, a list of Opportunities and Diagnostics is returned. There is overlap between the two categories, but they roughly cover:
Opportunities: Suggestions as to where to get started with improving the performance of this page. Often multiple opportunities will boil down to a single issue - for example, one excessively bloated JavaScript file might be both a render blocking resource, and an opportunity for minifying. On the other hand, these opportunities can err on the side of being pedantic, and not all of them will yield significant performance gains.
Diagnostics: This is useful information to understand and debug the audit. For example, diagnostics include the element that is being used to measure “largest contentful paint”, so you don’t have to guess.
We'll go through each opportunity and diagnostic in turn, offer a basic overview of how to understand each, and link out to more developer-focused web.dev resources.
Opportunities
Eliminate render-blocking resources
Potentially affected metric(s): First Contentful Paint, Largest Contentful Paint, Speed Index
What does this mean and why does it matter?
Render-blocking resources are files that the browser needs to request and process in order to initially load the page. For example, these might include fonts, HTML, CSS, and JavaScript files.
When render-blocking resources are encountered, your page stops loading until render-blocking resources are processed, ultimately slowing down your load speed.
How can I fix this?
In many cases, only a small amount of your render-blocking resources are actually needed. In order to get your content to display faster, move the important parts of these necessary files into your main HTML — critical lines of CSS, for example. For those files that are not used, instruct your browser to carry on loading without waiting for the rest or delete entirely (known as loading "asynchronously.")
Remove unused CSS
Potentially affected metric(s): First Contentful Paint, Largest Contentful Paint, Speed Index
What does this mean and why does it matter?
CSS is the language used to style a web page, and is often stored in large files that are referenced by multiple web pages. Unused CSS are rules and code that are found within external stylesheets that have no impact on the page in question — perhaps they're intended for some other page, or perhaps they are for a long-since-deprecated page feature.
Unused CSS is extra code that a user's browser has to download and process, which slows down the performance of your page.
How can I fix this?
Instruct your browser to carry on loading without waiting for CSS that's only used below-the-fold (known as “asynchronous” loading), or delete unwanted rules entirely. If you have a single CSS file referenced by multiple very different pages, consider splitting this out — although this has tradeoffs, as some users may already have the larger file cached.
Properly size images
Potentially affected metric(s): Largest Contentful Paint, Speed Index
What does this mean and why does it matter?
Unnecessarily large or high resolution image files slow down your page load time and increase a user's cellular data usage.
There's little benefit in sending your beautiful, original quality image to someone's cellular device while they're wandering around with minimal signal. Even on good quality connections, the difference may be indistinguishable on many screens.
How can I fix this?
Vary your image sizes according to the device that is requesting an image.
Defer offscreen images
Potentially affected metric(s): Largest Contentful Paint, Speed Index, Time to Interactive
What does this mean and why does it matter?
Offscreen images are images that appear below the fold (the bottom of the initially visible area, before a user scrolls).
More often than not, much of a page's content requires a user to scroll below the fold before it's visible. However, content above the fold is often delayed by content further down being downloaded or processed.
How can I fix this?
Instruct a browser to only load certain resources (especially large files like images) when they're actually needed, otherwise known as lazy loading. This can improve Largest Contentful Paint and Time to Interactive. Be careful, though — sometimes the experience can be jarring for users if large images rearrange the page as they scroll.
Minify CSS
Potentially affected metric(s): First Contentful Paint, Largest Contentful Paint, Speed Index
What does this mean and why does it matter?
Minifying CSS implies the removal of unnecessary or redundant data in external CSS files. (External CSS files are files referenced by multiple pages, which tell them how to style the HTML of a page).
"White space" or annotations in code (tabs, spaces, paragraph breaks, etc.) make code easier for humans to read, but unnecessarily lengthens download time, ultimately affecting your first and largest contentful paint.
How can I fix this?
Various third party tools or plugins can minify files for you.
Minify JavaScript
Potentially affected metric(s): First Input Delay
What does this mean and why does it matter?
Minifying CSS implies the removal of unnecessary or redundant data in external JavaScript files. (Often used to power interactive elements or tracking features on a page).
"White space" or annotations in code (tabs, spaces, paragraph breaks, etc.) makes code easier for humans to read, but unnecessarily lengthens download time, ultimately affecting your first and largest contentful paint.
How can I fix this?
Various third-party tools or plugins can minify files for you.
Efficiently encode images
Potentially affected metric(s): Largest Contentful Paint, Speed Index
What does this mean and why does it matter?
Efficiently coded images are optimized images that load faster and consume less data, which is particularly important when using cellular data.
Smaller image files will improve your largest contentful paint, and page load speed. Be careful, though — if not encoded properly, loss of quality can occur and make your images appear fuzzy or blotchy.
How can I fix this?
Compress your images to make file sizes smaller without sacrificing quality. Often this can be done with a CMS plugin.
You can also experiment to see what's possible without losing image quality. For images with few colors and sharp edges, use a vector format such as SVG.
Serve images in next-gen formats
Potentially affected metric(s): Largest Contentful Paint, Speed Index
What does this mean and why does it matter?
Tried and trusted image formats like JPEG and PNG are surprisingly old, and at this point technology has moved on. Next-gen formats are image formats like JPEG 2000, JPEG XR, and WebP.
These formats provide better compression than PNG or JPEG without sacrificing quality, which ultimately leads to better download speeds and improvement of your largest contentful paint.
How can I fix this?
Replace older image formats, such as JPEG and PNG, with newer more efficient formats like JPEG 2000, JPEG XR, and WebP. CMS plugins or third party software can be used to convert images, or ask your designers to provide images in the preferred format. WebP, in particular, can replace both JPEG for more complex compressed images, and PNG for lossless compression (compression with no reduction in quality).
Enable text compression
Potentially affected metric(s): First Contentful Paint, Largest Contentful Paint, Speed Index
What does this mean and why does it matter?
Text files often contain significant repetition, which means they are good candidates for compression — a method of making files smaller during transmission by sending information than tells the browser how to construct the file, rather than sending the file itself.
Text files with repetition lengthen download times and impact how long it takes for the main portion of your content on your page to load.
How can I fix this?
Serve your text-based files with compression (gzip, deflate, or brotli) to minimize total network bytes. Or, send a smaller file that can be expanded at the other end into the original version.
Preconnect to required origins
Potentially affected metric(s): First Input Delay
What does this mean and why does it matter?
When a page requires an external resource to load, it has to go through a process of contacting the relevant server, opening a connection, and then sending requests, as well as transfers back and forth.
By adding preconnections for your external resources, your page will load much quicker to the user without negatively affecting the use of bandwidth.
How can I fix this?
Instruct your browser to prepare connections ahead of time for third-party origins, with "preconnect" and "dns-prefetch" resource hints added to the HTML of the page.
Reduce server response times (TTFB)
Potentially affected metric(s): First Contentful Paint, Largest Contentful Paint, Speed Index
What does this mean and why does it matter?
When users navigate to a URL in their web browser, the browser makes a network request to fetch that content. Your server receives the request and returns the page content. This is known as Time to First Byte.
This effectively improves all loading time metrics, as the initial delay to contact the server adds time to every other point that we might measure.
How can I fix this?
Improvements in this area often come down to caching and/or CDN usage to make sure that commonly used resources are kept ready to go, preferably on the same continent as the user, rather than being assembled or searched out on the fly by your own server.
Avoid multiple page redirects
Potentially affected metric(s): First Contentful Paint
What does this mean and why does it matter?
Redirects slow down page load speeds and introduce additional delays. If you are an SEO, you may already be working to avoid redirect chains for link equity reasons.
As well as diluting link equity, multiple redirects add unnecessary delays. Doing this repeatedly (i.e. redirecting from A, to B, to C, rather than just from A to C) compounds the issue, and there's no benefit to doing so.
How can I fix this?
Update links to point to resources' current locations. It's especially important to avoid redirects in resources required for your Critical Rendering Path.
Potentially affected metric(s): Largest Contentful Paint, Speed Index
Use video formats for animated content
Potentially affected metric(s): Largest Contentful Paint, Speed Index
What does this mean and why does it matter?
GIFs are a legacy file format for rendering animated content on a page and can slow down load speeds, especially at the levels of quality and fluidity expected by modern users. Video formats are now preferred.
Unnecessarily large files, such as GIFs used in place of video files, can impact how quickly the main content on your page loads and is visible to a user.
How can I fix this?
Formats developed for video tend to be significantly easier for browsers and connections to deal with for these high fidelity memes and animations. Use MPEG4/WebM videos for animations and PNG/WebP for static images to save network bytes.
Reduce the impact of third-party code
Potentially affected metric(s): First Input Delay
What does this mean and why does it matter?
"Third-party code" generally means scripts provided by your adtech, analytics, a/b testing, or social embeds for functionality such as social sharing buttons, video player embeds, chat services, and advertising retargeting, to name a few.
Third-party scripts can provide powerful functionality, but many users have concerns about the privacy and security implications, and they are particularly problematic for performance.
How can I fix this?
Generally, you should be disciplined in your use of such functionality, especially on pages that don't strictly call for it. But, if you must, see Google's article on how to efficiently load third-party JavaScript.
Avoid non-composited animations
Potentially affected metric(s): First Input Delay, Cumulative Layout Shift
What does this mean and why does it matter?
A non-composited animation is any animation that forces an earlier step in the rendering pipeline (Style, Layout, or Paint) to be revisited. Non-composited animations perform worse because they force the browser to do more work, which makes it less responsive, and slower to finish loading the page.
How can I fix this?
This issue is flagged if an animated element on your page requires some earlier, already completed step in the browser's display process to be revisited. Avoid this by only changing certain properties that do not require recalculations of earlier steps.
Lazy load third-party resources with facades
Potentially affected metric(s): Cumulative Layout Shift
What does this mean and why does it matter?
Typically embeds, such as an embedded Tweet, significantly delay page load. And, embeds often require surprisingly large JavaScript files to function.
If we tell the browser to carry on loading until an embed is needed (known as "lazy loading"), you end up with a clunky user experience, because the embed suddenly appears while a user is browsing a page, with other content forced to shift around it to make room. This ultimately affects visual stability and adds unexpected layout shifts.
How can I fix this?
Lazy-loaded content can be initially replaced with an empty block or a simple, symbolic element that takes up the same amount of space. This means that when an embed eventually loads, the rest of the page won't have to move around to accommodate it.
Remove unused JavaScript
Potentially affected metric(s): First Contentful Paint, First Input Delay
What does this mean and why does it matter?
JavaScript is used to power interactive elements, tracking functionality, and much more on modern websites. Unused JavaScript is redundant code found within external scripts that has no impact on the page in question — perhaps intended for some other page, or a long-since-deprecated page feature.
This is a waste — both of download size, and of processing power on the user's device. If the browser needs to parse the JavaScript before initially rendering the page it will delay the First Contentful Paint, but even in a case where the JavaScript can be parsed later, it forces the browser and internet connection to do extra, unnecessary work alongside more important tasks.
How can I fix this?
Only request a given JavaScript file on pages that actually need it. Consider unbundling so that you can serve more streamlined files that match the actual functionality of a page.
Avoid serving legacy JavaScript to modern browsers
Potentially affected metric(s): First Contentful Paint
What does this mean and why does it matter?
Older browsers such as IE10 and Opera Mini require some legacy code to function, which results in larger JavaScript files.
If you aren't catering to a niche audience of legacy browser users, this extra download size is going to waste bandwidth that could be used to expedite something more useful.
How can I fix this?
Aim for the latest "ES6" JavaScript standard.
Use HTTP/2
Potentially affected metric(s): First Contentful Paint, Largest Contentful Paint
What does this mean and why does it matter?
HTTP, or "hypertext transfer protocol," is the ruleset used by servers and browsers to send and receive files on the web.
Under the older, longstanding HTTP/1.1 standard from the late 90s, opening a connection to another domain only allowed you to download one file at a time from that domain, creating a back and forth of requests, which was very inefficient. Multiple connections could be made to mitigate this, but even this was limited, and added extra latency. HTTP/2 alleviates this issue by allowing multiple files to be downloaded over a single connection, which has significant implications (and simplifications!) for web optimization.
How can I fix this?
This is normally a case of using a CDN, or updated server software, to make sure you can take advantage of the latest technology.
Remove duplicate modules in JavaScript bundles
Potentially affected metric(s): First Contentful Paint, Largest Contentful Paint
What does this mean and why does it matter?
People often bundle up JavaScript into a smaller number of files, for simplicity and to reduce the number of requests required to download it. However, this can result in some overlap where multiple bundles are used on one page.
This overlap represents redundancy, and as with other JavaScript inefficiencies is a waste of bandwidth and/or processing power that could be better used elsewhere to expedite loading the page.
How can I fix this?
You have two options — either unbundle some files so you don't have to request so much at once, or reduce overlap and make sure that pages request the correct files.
Preload LCP image
Potentially affected metric(s): Largest Contentful Paint, Speed Index
What does this mean and why does it matter?
Preload informs browsers about critical resources that should be loaded as soon as possible, before they are found in HTML.
The largest area within the viewport is occupied by an image. Preloading allows the largest piece of content to be rendered quicker.
How can I fix this?
Consider using "<link rel=preload>" to prioritize fetching resources that are currently requested later in page load.
Diagnostics
Avoid enormous network payloads
The network payload is the total size of the resources needed to render your page. Large network payloads are highly correlated with long load times and can cost users money depending on their cellular data plan.
Serve static assets with an efficient cache policy
Static assets are images and text files (such as CSS) that can be delivered to an end user without having to be generated, modified, or processed. When a browser requests a resource, the server providing the resource can tell the browser how long it should temporarily store or cache the resource, which can help speed up load times for future visits.
Ensure text remains visible during webfont load
If your page requires the browser to download a custom font, this can result in the text not being visible while the font is downloaded. Ensure text stays visible during webfont load by displaying a more common browser default font first, during the download of the custom font.
Does not use passive listeners to improve scrolling performance
Event listeners are bits of JavaScript that "listen" for user input. If you have a listener that could conceivably prevent normal scrolling behavior, browsers will prevent all scrolling until that JavaScript has been executed. Flagging "listeners" as passive indicates to browsers to not block scrolling.
Avoids document.write()
Historically, document.write() has been a common way of injecting third party JavaScript into webpages. Some browsers now block this method altogether. There are better alternatives to introduce external scripts that can be loaded asynchronously (without blocking the rest of the page load).
Does not minimize main-thread work
The main thread is where the browser handles most of the processing involved in figuring out how to display the page. It includes interpretation of your CSS, your HTML, and typically most or all of your JavaScript. Complex calculations, large scripts, or delays to the main thread will bog down loading.
Avoid an excessive DOM size
The DOM, or Document Object Model, is the structure of rendered content on the page. An excessive DOM size means a page with a very large number of discrete elements. Sometimes deceptively simple pages can suffer from this, if many elements are hidden or otherwise not obvious to the user. Check on your legacy functionality, plugins, or other off-the-shelf components.
Reduce JavaScript execution time
Large or excessively complex scripts simply take longer for the browser to interpret, which causes delays in load time.
Minimize third-party usage
Typically, third-party code on your site will be made up of ad platforms, analytics platforms, A/B testing software, and social embeds. Review third party scripts and tools in use. For those you absolutely need, consider lazy loading.
Avoid chaining critical requests
Before it can render a page, a browser needs to discover and parse all of the "critical" HTML, CSS, fonts, and so on. Some of these files may only be discovered through other resources that themselves are referenced in the original HTML, meaning multiple files have to be downloaded and parsed back to back, rather than at the same time, which is called a critical request chain. Chains add large delays to page load. Instead, preload critical resources, or mark them as asynchronous if they are not genuinely critical.
User Timing marks and measures
If you have implemented the User Timing API in your JavaScript, the output from that will be displayed here. This is not a fixable opportunity, just useful information.
Keep request counts low and transfer sizes small
Forcing the browser to download lots of files, or large files, introduces a bottleneck that is often unnecessary.
Largest Contentful Paint element
The Largest Contentful Paint metric is defined as the time taken for the largest element on the page to be rendered. This field will show what that element is, to help you debug if you feel your largest contentful paint is too slow.
Avoid long main-thread tasks
This issue means that some individual tasks are causing large delays in processing - typically parsing complex CSS or JavaScript. If any one task is causing a major delay all on its own, something is probably wrong! Replacing or removing this code is likely to be a "quick win"!
Avoid large layout shifts
A layout shift is when elements of the page are forced to move around to accommodate each other as the page loads. Use placeholder elements to reserve space for elements as they load in, and set image sizes in CSS. Preload fonts to minimize issues caused by different character dimensions between system and custom fonts.
Network Round Trip Times
Network round-trip time (RTT) is the duration, measured in milliseconds, from when a browser sends a request to when it receives a response from a server. RTTs can have a large impact on performance. If the RTT to an origin is high, it's an indication that servers closer to the user, or otherwise more responsive, could improve performance.
Server Backend Latencies
Latency is the amount of time it takes from when a request is made by a user to the time it takes for the response to get back to that user. Server latencies can impact performance. If the server latency of an origin is high, it's an indication the server is overloaded or has poor backend performance.
Keep learning
- Core Web Vitals - Moz SEO Learning Center
- Core Web Vitals: The Next Official Google Ranking Factor - Whiteboard Friday
- Are We There Yet? The State of the Web & Core Web Vitals [Part 1] - The Moz Blog
- Announcing the Moz Performance Metrics Beta - The Moz Blog
- Performance Metrics - Moz Pro Help Hub
- Page Speed - Moz SEO Learning Center
- Technical SEO Certification - Moz Academy
- Make Core Web Vitals Your Competitive Advantage - On-demand webinar
Put your skills to work
Page experience is now more important than ever. Ensure speed, interactivity, and stability across your site are in good condition with the Performance Metrics beta in Moz Pro. Try it out for free: