Author 詩語

Performance Testing using Google PageSpeed Insights

We all want our websites to load quickly, and there are a number of services out there to help us test, evaluate, and fix various issues affecting the loading speed of our pages. In this series of docs, we will be looking at the major players in this area, Google PageSpeed Insights, GTMetrix, Pingdom and WebPageTest, and how they can help you improve the loading speed of your Avada website. Read on!,PageSpeed InsightsPageSpeed Insights is an online tool from Google, which helps in identifying performance best practices on any given website. The PageSpeed Insights API (PSI) reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved, and suggests overall ideas of how to make a website faster.
Page Performance SummaryAt the top of the report, PageSpeed Insights provides a score which summarizes the page』s performance. This score is determined by running Lighthouse to collect and analyze lab data about the page. A score of 90 or above is considered fast, and 50 to 90 is considered average. Below 50 is considered to be slow.
You will notice to the top left that the report defaults to the Mobile Results, in line with Google』s Mobile First Indexing. See the Desktop results, as shown below, by clicking on the Desktop tab.
Below this Performance Summary are several sections, that first show the data captured, then a range of audits that show how to fix issues, how to generally improve the site, and finally a list of passed audits. Let』s have a closer look.,Overview
Data Collection

Field Data

Lab Data

Audits

Opportunities

Diagnostics

Passed Audits

Common Issues

Conclusion

Links,Data CollectionPageSpeed Insights provides both lab and field data about a page. Lab data is useful for debugging performance issues, as it is collected in a controlled environment. However, it may not capture real-world bottlenecks. Field data, on the other hand, is useful for capturing true, real-world user experiences – but has a more limited set of metrics. See How To Think About Speed Tools for more information on the 2 types of data.
Field DataField Data – This section shows a rolling 30 day report of the page using the Chrome User Experience Report. The field data is basically a historical report about how a particular URL has performed over time, and represents anonymized performance data from users in the real-world on a variety of devices and network conditions.
Classifying Fast, Average & SlowPageSpeed Insights classifies field data into 3 buckets, describing experiences as fast, average, or slow. PSI sets the following thresholds for fast / average / slow, based on analysis of the CrUX dataset:

Fast
Average
Slow

FID
[0, 50ms]
(50ms, 250ms]
250ms and up

FCP
[0, 1000ms]
(1000ms, 2500ms]
2500ms and up

FID & FCPFirst Input Delay (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.
First Contentful Paint (FCP) marks the point, immediately after navigation, when the browser renders the first bit of content from the DOM. This is an important milestone for users because it provides feedback that the page is actually loading.
Recommendations
Read more about FID and how it affects your page load.

Minimize the number of render-blocking external stylesheets and scripts upon which the page depends. See Render-Blocking CSS and Loading Third-Party JavaScript.

Use HTTP Caching to speed up repeat visits.

Minify and compress text-based assets to speed up their download time. See Optimizing Encoding and Transfer Size of Text-Based Assets.

Optimize JavaScript bootup and reduce JavaScript payloads with tree shaking or code splitting. The goal is to do less JavaScript work on page load.
Origin SummaryOrigin Summary shows a developer the speed of all the pages that are served from this page compared to other pages in the Chrome User Experience Report over the last 30 days.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Lab DataUnlike the Field Data, the lab data is based on a simulated load of a page on a single device and fixed set of network conditions. As a result, the values may differ. Labdata analyses a page using Lighthouse and then simulates how it will load on a mobile device. It then gives a performance score between 0-100 based on a set of performance metrics, including: First Contentful Paint, First Meaningful Paint, Speed Index, First CPU Idle, Time to Interactive, and Estimated Input Latency.,AuditsLighthouse separates its audits into three sections:

Opportunities provide suggestions how to improve the page』s performance metrics. Each suggestion in this section estimates how much faster the page will load if the improvement is implemented.

Diagnostics provide additional information about how a page adheres to best practices for web development.

Passed Audits indicates the audits that have been passed by the page.
OpportunitiesThe Opportunities section is what it says on the label. This section provides developers with recommendations to improve a page』s speed and gives an estimation of the page speed gained.
You can expand on the opportunities by clicking the small chevron on the right, and there is a link more more information about the particular issue.,DiagnosticsDiagnostics supplies more information about the performance of a page as well as other recommendations to improve a page』s speed.
Likewise, the Diagnostics section can be expanded one point at a time, with further information and links to even more.,Passed AuditsThe final section, Passed Audits, is useful as it tells developers the audits that the page has passed on. These individual audits can also be expanded to show more details.,Common Issues
Images – Images will be a typical issue for many sites. PageSpeed Insights might suggest you Defer offscreen images, Serve images in next-gen formats, or Properly size images. These issues must be addressed independently, but to get started on understanding the issues, please see A Comprehensive Guide to WordPress Image Optimization post.

Server Response Time – PageSpeed insights will often list Reduce server response times (TTFB) as an issue. This is the Time to First Byte, and to improve this, you will need to work with your hosting company to see if anything can be done in this area.

Eliminate render-blocking resources – Render Blocking, like many other technical terms, can be a complicated topic. It totally depends on the individual site and even page setup, which resources will be render blocking, so it』s very difficult to give general advice. Most of the time it will be the WP native jQuery libraries and the Avada stylesheet (which is the main static stylesheet and, if file compiler is used, the dynamic stylesheet) and these are not the sort of resources you want to eliminate. For other resources and complex site setups, cache plugins that combine resources, defer JS loading etc. can help, so please read our caching documents linked below.,ConclusionGoogle PageSpeed Insights is a valuable tool to help detect and remedy issues that may be affecting your websites』 load time. It does however require time, patience and expertise. There are also other similar services like GTMetrix, Pingdom, and WebPagetest.
Remember, due to hosting and content variables, site optimization is a very complex area, and falls well outside of the support we can provide for Avada.
The Facebook Avada User』s Group has a large and very active membership, and this topic is regularly discussed on the Group.,Useful Links & Resources
Performance Testing using GTMetrix

Performance Testing using Pingdom

Performance Testing using WebPageTest

Pingdom vs GTmetrix vs WebPageTest

Avada Speed and Performance

How To Speed Up Your Site Using Plugins

CSS & JS Compilers

A Comprehensive Guide to WordPress Image Optimization

General Cache information

Performance Testing using GTMetrix

We all want our websites to load quickly, and there are a number of services out there to help us test, evaluate, and fix various issues affecting the loading speed of our pages. In this series of docs, we will be looking at the major players in this area, Google PageSpeed Insights, GTMetrix, Pingdom and WebPageTest, and how they can help you improve the loading speed of your Avada website. Read on!
GTmetrixGTMetrix is a popular online tool to analyse the load speed and performance of a web page. You can use the service without being logged in, but to take advantage of the full range of free features, you need to sign up for a free account. There is also a PRO plan, but the free plan is more than enough for the majority of users.
When you visit the site, you are immediately welcomed and invited to get straight to work, with an address bar to input the URL to test. As their website notes 「GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.」
Overview
Analysis Options

Performance Report

Result Tabs
PageSpeedYSlowWaterfallTimingsVideoHistory
Issues Type

Conclusion

Links
Analysis OptionsIf you choose to sign up for a free account and log in, you have many more options to customise your tests, including the browser used, the type of connection, and the location of the tests, which can be very useful if you have a local customer base.
Directly under the URL field, you will find a number of clickable options for that particular test. You can click directly on them to make fast changes to your analysis options.
If you click the Analyse Options on the far right, this will expand to the full options set, where you can choose the following options.

Location: By default, the Test Server Region is set to Vancouver in Canada. When you are logged in however, you can choose from Dallas, Hong Kong, London, Mumbai, Sydney or São Paulo.

Browser: By default, GTmetrix uses the Chrome browser on Desktop. If you wish, you can change this to Chrome (Android, Galaxy Nexus) or Firefox (Desktop).

Connection Speed: By default, GTmetrix use an unthrottled connection, but you can choose from a range of options here, including Broadband Fast, Broadband, Broadband Slow, LTE Mobile, 3G Mobile, 2G Mobile, and 56K Dial-up…

Create Video: You can turn this feature on for any test, to help debug page load issues by seeing exactly how the page loads. View the page up to 4x slower to help pinpoint rendering or other page load problems.

Adblock Plus: By turning this on, you can prevent ads from loading using the Adblock Plus plugin. This can help you assess how ads affect the loading of your site.

Stop Test onload: This final option, if turned on, ends the test when all resources have been loaded. GTmetrix now use as the default, Fully Loaded Time, which is the point after the Onload event fires and there has been no network activity for 2 seconds. To read more about this option, view the GTmetrix FAQ.

Advanced Options: There are also some advanced options a bit further down, around HTTP authentication, cookies, and whitelisting and blacklisting urls.
It must be noted that these home page options are for individual tests. If you』d like to set your default options for page analysis, head to the User Settings area, linked at the top right of the site, and make your choices in the following dialog.
NOTE: At the bottom of these settings, you also have the option of adding your own CDNs to get a more accurate score. YSlow』s default list of CDNs are ones used by Yahoo. You can use a * to match any number of characters, and a ? to match a single character. You enter the CDN』s hostnames, not URLs; for example, static.gtmetrix.comPerformance ReportOnce you have set your options, and entered a URL, you click the Analyse button, and GTmetrix goes to work. When the job is completed, you are presented with a Performance Report. This summarizes your page performance, based off key indicators of page load speed.

PageSpeed Score: GTmetrix analyzes your page with both Google PageSpeed and Yahoo! YSlow rule sets, and in the Performance Scores section, it starts with the PageSpeed Score. Note: the average scores are highlighted when you hover over the arrow to the right of the score.

YSlow Score: The next Score listed is the YSlow score, an initiative of Yahoo. This is a set of 23 measurable rules that affect web page performance. PageSpeed and YSlow scores relate to the front end of the website, but measure slightly different things in different ways, hence the possibility of different scores. To read more about these two rule sets, read this FAQ post or this GTmetrix blog post.
Fully Loaded Time: The Fully Loaded Time is the point after the Onload event fires (when the processing of the page is complete and all the resources on the page have finished downloading) and there has been no network activity for 2 seconds. As mentioned previously, there is an option to change this result to reflect the Onload time. See this FAQ item for more details.
Total Page Size: This is simply your total page size in Megabytes, which includes all of the files that are used to create the page: the HTML document, any included images, style sheets, scripts, and other media. This is often an indicator of unoptimized content.

Requests: On the most basic level, an HTTP/S request happens whenever a browser asks for something from your server. That can be a file like a style sheet, an image, embedded video or a script. Basically, everything your site is made up of. Each of these is a separate request. This measures the total number of requests for the page.

Average Scores: The averages for all five scores are highlighted by hovering over the arrows next to the scores, and your page』s performance, relative to the average of all sites analyzed on GTmetrix, is noted by the arrow pointing up and being green, or pointing down and being red. See the GTmetrix FAQ for more details.
Result TabsPageSpeedThe individual tabs under the Performance summary area, are where you can see what specific areas your website is performing well, or poorly, in. The PageSpeed Tab provides results and recommendations on 27 PageSpeed tests. They are ranked with a grade, using a lettering system, where A is the best and F is poor. Under the Type columns, it shows what sort of content or area the recommendations refer to, and in the last column, Priority, it gives an indication of the individual issue』s importance in the overall result.
Using the small arrow on the left hand size of each recommendation, you can expand the section. If you have scored under 100 on any test, there will be more specific detail on the files or areas that may need improvement, as well as links to further information.
YSlowThe YSlow tab works in the same way as the PageSpeed tab does, showing the 18 YSlow tests that GTmetrix perform, and the Grade achieved, Type and Priority of each one.
Again, each recommendation can be expanded where specific files and further information will be provided.
WaterfallThe Waterfall tab shows a visualization of content loading behavior. It displays the request-by-request loading behavior of your website. Every script, media file, and/or third-party resource your page requests is displayed here.
If you don』t have experience with these charts, they can be overwhelming. Start by reading this How to Read a Waterfall Chart for Beginners document from GTmetrix.
Like the other tabs, you can drill down into the specific load events shown in the Waterfall chart for more information.
TimingsThe Timings tab provides a unique visualization of your page load events. These events include:

Redirect duration

Connect duration

Backend duration

Time to First Byte (TTFB)

First paint time

DOM interactive time

DOM content loaded time (and JavaScript event duration)

Onload time (and JavaScript event duration)

RUM Speed Index
These timings are connected to the waterfall chart, by way of a color coded system to interpret what is happening when in the waterfall chart.  Mouse over each of the Events loaded along the top to get a description and a corresponding color and marker to show where this event is taking place on the waterfall chart.
These timings are for technical users – they』re meant for providing even more insight on your page load activity. Much like the Resource Usage Graphs, they are not scores to chase unless you have a strong development background. For more information on the Timings Tab, visit the GTmetrix Blog.
VideoIt』s also possible in GTmetrix to record and playback a video of the page load, showing yet another visualization of the page load. You can change the speed down to a 1/4 speed to get a good idea of what』s loading when.
HistoryFinally, the history tab, shows you your history of tests with that specific url. Depending on how long you have been using it, there will be more or less data in here for you to analyze.
Issue TypeIn GTmetrix, the recommendations are all listed, broken down by type. These range across Images, Server, Content, CSS, JS, Cookies, and Content. See the following for a brief breakdown of the types of these content types.

Images – Images will be a typical issue for many sites. If you scan the Type column and look for Images, you will be able to see 5 tests across both PageSpeed and YSlow that will identify if your images need optimization. These issues must be addressed independently, but to get started on understanding the issues, please see A Comprehensive Guide to WordPress Image Optimization post.

Server Response Time – There are 10 tests, across both PageSpeed and YSlow, related to server response times. This can be a very technical area, but the GTmetrix Blog has a lot of great articles and How To guides to help you understand how your server response affects your load times.

CSS / JS – There are 15 tests, across both PageSpeed and YSlow, that deal with either CSS and JS, and these are commonly areas that don』t achieve perfect scores. It is impossible to give specific advice, as each site will be different, but Avada does provide options in the Theme Options to assist with this. Navigate to Theme Options > Performance > Dynamic CSS & JS to access a number of options that can help in this area.
Caching plugins as well, are also recommended to help with some of these issues. We have a range of documents that cover CSS, JS, caching, plugins and other performance based topics. Please see the Links section below.

Cookies – There are 2 tests on YSlow that deal with cookies, to do with cookie size and the use of cookie free domains.

Content – Finally, the remaining 13 tests, across both PageSpeed and YSlow, deal with content issues. This is a broad category that deals with minifcation, query strings, bad requests, redirects, and a few other areas. Again, caching plugins are also recommended to help with some of these issues.
ConclusionGTmetrix is an easy to use, and very valuable tool to help detect and remedy issues that may be affecting your website』s load time. Much of it is very technical however, and it does however require time, patience and expertise to learn.
Remember, due to hosting and content variables, website optimization is a very complex, technical area, and falls well outside of the support we can provide for Avada.
Apart from our many documentation resources, the Facebook Avada User』s Group has a large and very active membership, and this topic is regularly discussed on the Group. You can also ask questions on the Community Forum.
Useful Links & Resources
Performance Testing using WebPageTest

Performance Testing using Pingdom

Performance Testing using Google PageSpeed Insights

Pingdom vs GTmetrix vs WebPageTest

GTmetrix FAQ

Avada Speed and Performance

How To Speed Up Your Site Using Plugins

CSS & JS Compilers

A Comprehensive Guide to WordPress Image Optimization

General Cache information

Performance Testing using WebPageTest

We all want our websites to load quickly, and there are a number of services out there to help us test, evaluate, and fix various issues affecting the loading speed of our pages. In this series of docs, we will be looking at the major players in this area, Google PageSpeed Insights, GTMetrix, Pingdom and WebPageTest, and how they can help you improve the loading speed of your Avada website. Read on!
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,WebPageTestWebPageTest is a website performance testing site, targeted mainly towards developers. It offers a plethora of website performance testing options, albeit from a relatively outdated interface. But don』t be fooled by its appearance. Of all the major testing platforms, this one is often considered the best, due to it』s enormous number of options. Even the homepage points to its power, opening as it does with the Advanced Testing mode. Let』s dig into the options on offer with this awesome tool.
Overview
Options

Test Results Summary

Details

Performance Review

Content Breakdown

Domains

Processing Breakdown

Screen Shot

Conclusion

Links
OptionsAdvanced TestingThere are simply too many options in the Advanced Testing section to cover, as this is designed to be a powerful tool for developers. But there are choices here not available in the Simple Testing section that can be very useful, even to beginners.
To start with, there are a huge number of Test Locations to choose from, and in the default location, also a huge variety of devices to use. Dulles, VA is the default location, and with that location, you can choose from a large number of both Android and Apple devices with which to run your test. If you prefer, you can select your location from a map. Once you have picked your location, you can specify which browser you would like to use, and in the Advanced Settings, you can choose the connection speed.
The diversity of testing options on offer make this a very powerful tool for developers. There is the ability to run up to 9 consecutive tests, and you can show results for the first view only or also the repeat views, and you can capturing video of the page load as well. Going into the other tabs would only be useful for developers, but there are a huge range of options to customize your tests as much as you want.
Simple TestingThe Simple Testing interface is correspondingly simple. You can choose whether to use a Desktop configuration, or one of three mobile configurations, using Slow 3G, Regular 3G, or 4G. You can also include a repeat view of the site, and run a Lighthouse audit, but that』s where your options stop. For a simple test though, this is still a great starting point.
Test Results SummaryWhen the test has completed, you are presented with a Results Summary. WebPageTest tests pages against a custom set of six speed recommendations, and gives a grade (from A to F) against the first 5, and a simple tick or cross for the last one, the effective use of a CDN. You can click on each of these grades to go to the related area on the Performance Review tab.
Directly under the initial Summary area, are the links to the many result breakdown tabs. We will cover them one at a time. Under that, is an option to Re-run the test, some links to download the data in various formats, and a table showing a summary of the page load times.
Below this are the remaining summaries of the test results. In a slightly clunky interface, there is a table showing the Waterfall, Screen Shot and Video across the top for the first view, and below that, the same information for the repeat view.
On the left of the table, are some very technical links to the Chrome Dev Tools Timeline, and Chrome Trace, as well as a link to the Processing Breakdown tab. If you click on the Waterfall image you are taken to the details tab, and likewise you can click on the screen shot and video links to view further detail for those. At the bottom of the page is a link to the Content Breakdown tab, and a summary of the content by requests and by file type.
Let』s now look at the individual results tabs and what they can show us.
DetailsThe Details tab is where it gets very technical. After the performance grade summary and the page load table, this time formatted slightly differently and including a few more specific events, the page is basically split up into 4 sections, Waterfall View, Connection View, Request Details, and Request Headers.
The Waterfall View, shows a cascading visualization of the page load across time, and you can click on any individual request to bring up more specific detail about that request. For a developer, you can see how powerful this can be.
The Connection View is similar to the waterfall view, but instead of focusing on the requests, looks at how the content loads from all sources. The connection view Basically, it shows each TCP socket and the requests that are retrieved over them. Just another way of looking at the information flow, and mostly useful for advanced developers.
The Request Details section provides details of every request, and if you click on a particular one, you will be taken to the corresponding expanded entry in the Request Headers section.
Performance ReviewThe Performance Review tab shows the page requests, marked against a  Full Optimization Checklist. This covers the 6 areas WebPageTest has tested for and highlights how each request has fared again the relevant criteria.
Below this is the Details section, showing the scores of each of the six sections, and details of any issues that took the score down from a perfect 100. This information allows you to see which files or processes to specifically target to improve your page load times.
Finally, below this is a Glossary of the six tests, explaining what objects are applicable for each test, and what is checked. This section is very useful for beginners to get an idea of what affects page load speed and where you can start to make improvements.
Content BreakdownThe Content Breakdown tab is very useful to see your content from above, showing you the breakdown by both type and bytes. You can expect images to be a large percentage of your content, and a chart shows you exactly what type of file each request is. Another chart shows you the content byte size by type. Below this is a connection view that is color coded so you can see where your various content is loading and how long it takes.
If you have chosen Repeat Loading in your tests, the Repeat View information is shown directly below this, showing how different your second load can be due to caching.
DomainsThe Domains tab simply shows you content breakdown by domain. Depending on how your site is set up, this may only show one domain or several. Here, we can see a small percentage of requests and content is coming from Google Fonts and Cloudflare.
Processing BreakdownWe are getting into seriously nerdy technical territory here, but the Processing Breakdown shows us the various Processing Categories and Processing Events and the percentages of each for the page load.
Screen ShotThe Screen Shot tab shows you a screen shot of the site, fully loaded on the device you have chosen for testing. There is an option to create a video if you haven』t selected that before testing, and you can download the video frames if you wish.
ConclusionWebPageTest is a highly regarded testing platform, with a toolset mostly suited for developers, or advanced users. There are a profusion of testing locations, and despite the slightly outdated interface, this service gives you all the information you would need to optimize your website』s loading time.
Remember, due to hosting and content variables, website optimization is a very complex, technical area, and falls well outside of the support we can provide for Avada.
Apart from our many documentation resources, the Facebook Avada User』s Group has a large and very active membership, and this topic is regularly discussed on the Group. You can also ask questions on the Community Forum.
Useful Links & Resources
Performance Testing using GTMetrix

Performance Testing using Pingdom

Performance Testing using Google PageSpeed Insights

Pingdom vs GTmetrix vs WebPageTest

Avada Speed and Performance

How To Speed Up Your Site Using Plugins

CSS & JS Compilers

A Comprehensive Guide to WordPress Image Optimization

General Cache information

What Are Google Core Web Vitals, And Why They Matter

In short, Core Web Vitals is part of an update to Google』s Search Results algorithm, that takes into account various aspects of a user』s page experience when browing a website. Google defines Core Web Vitals as 「a set of real-world, user-centered metrics that quantify key aspects of the user experience.」
As can be seen in the screenshot below, the three Core Web Vitals of Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), are combined with other existing metrics as 『search signals for page experience』. These page experience signals, in combination with more typical content related signals, will be integrated into Google』s search results algorthm, and help determine your website』s position on the SERPs (Search Engine Results Pages).
In this document, we will look at why this change is important to you, how to measure your website』s performance in these areas, what changes Avada has made to help you with this important update, and what you can further do to improve your website to take advantage of these changes.,Why Do Core Web Vitals Matter?Before we look in detail at what Core Web Vitals are, let』s first take a quick look at why they matter. Apart from wanting to provide your users with the best user experience they can have, most website owners see page ranking on Google』s search results as very important.
Beginning in mid-June of 2021, Google will be releasing a new update to its search results algorithm, which will arguably make UX the second most important ranking factor after content. So for this reason alone, making sure your website』s Core Web Vitals are up to speed is important.
As you can see in the quote below, taken from Google』s Blog, that while providing a good page experience will not overirde great, relevant content, Google is now also ranking page experience for its search results, and for pages with similar content, the page experience, and hence the Core Web Vitals, will be much more important for a good search ranking.,What Are the Core Web Vitals Metrics?Initially, there are three Core Web Vitals. The metrics that make up Core Web Vitals will evolve over time, but the current set for 2021 focuses on three aspects of the user experience – loading, interactivity, and visual stability – and includes the following metrics (and their respective thresholds):
Largest Contentful Paint: This is the time it takes for a page』s main content to load. An ideal LCP measurement is 2.5 seconds or faster. What Google is asking here is how fast does the largest piece of content in the viewport take to load? On many websites, this is typically a slider or an image, but it can also be text.
First Input Delay: This it the time it takes for a page to become interactive. An ideal measurement is less than 100ms. So the question being asked here is how quickly is the page interactive? To put it another way, when a user clicks on something, a button or a JavaScript event, how fast can the browser begin to process that and produce a result?
Cumulative Layout Shift: This is the amount of unexpected layout shift of visual page content. You have probably experienced a situation where you』ve loaded a page on your mobile phone, and go to click a button, and at the last second it shifts and you hit something else. This is Cumulative Layout Shift. An ideal measurement is less than 0.1. With this question, Google is asking how quickly is the page stable?,Tools To Measure Core Web VitalsThere are numerous tools to use to measure Core Web Vitals. What you use will depend on your experience with Developer Tools. Google has provided a number of tools over the years to measure and report on performance. Some developers are experts at using these tools, while others have found the abundance of both tools and metrics challenging to keep up with.
Site owners should not have to be performance gurus in order to understand the quality of experience they are delivering to their users. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.
For each of the above metrics, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices. Tools that assess Core Web Vitals compliance consider a page passing if it meets the recommended targets at the 75th percentile for all of the above three metrics.

For more details on the tools Google provides in this area, please see this page: https://web.dev/vitals-tools/,How Do I Improve My Core Web Vitals?This is a complex area, and what to do will depend a lot on your actual content. A good place to start however, is the Avada Performance Wizard. This can be found at Avada > Performance, from the WordPress Dashboard, or from Maintenance > Performance Wizard, from the Avada Dashboard. This should be run once you have completed building your site, and can help you optimize the global option settings that can help with page speed, and indirectly, Core Web Vitals.
You should also consider your above the fold content. This has a big impact on your Core Web Vitals results, and improving this content can have a big impact. See the How To Optimize Above The Fold Content For Performance Video for full details on this.
Once your pages are complete, you can also generate Critical CSS (CSS for above the fold content) via the Critical CSS page. This is found at Avada > Critical CSS, from the WordPress sidebar, or Maintenance > Critical CSS from the Avada Dashboard. On this page, you can generate the Critical CSS for the home page, any single page, blogs posts, portfolios, or the entire site.
Finally, check out the Avada Optimization Guide for plenty of tips and tricks to help you build sites that are super fast to load.