performance 归档 - Avada 文档

Performance Testing using GTMetrix

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

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.

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

Avada Optimization Guide

Optimization for page load speed is a very complex area, as so many things affect how fast a page loads. This is from the speed of the server, to the options and settings selected, right through to the type of content and the size of the images added to the page.
We have specific content on How To Use The Performance Wizard, and How To Optimize Above The Fold Content For Performance, but in this document, we offer you more general information, in the form of a wide range of optimzation tips to help when building your content.,Building The Content
Less is more. The more elements/content the page contains, the higher the node count, and therefore the more that needs to be rendered. This is the excessive DOM count that is referenced in tests. Do you really need all that content on the homepage or can some be moved to subpages?

Avoid an above the fold slider, unless it』s important to the design. If you want a large hero image, it』s better to use a static image. When using a slider, the slide is JS driven and needs to wait for the rest of the document to be ready before fully rendering. This will decrease page load scores. If you want the slider on desktop but not mobile, you can use conditional rendering to display the slider only on desktop. Then add separate content for mobile.

Avoid very large images (large in dimensions and large in file size). Obviously images are important to a website, but ensure the choices make sense and that the images are optimized. See our Image Size Guide document for detailed information on this.

Set your largest above the fold image to skip lazy loading. This option is available for container background images and image elements and only available if lazy loading in the globals is set to Avada (recommended). By setting to skip the lazy load the image will be faster to load – important for LCP measurements in Google core web vitals. If you generate critical CSS this will also be used as a flag to preload the image – further improving load time.

Clever use of background colors, gradients and lightweight SVGs can often make a big impact. They give the visual impact without the loading time.

Avoid animations above the fold, for the same reason as using a slider. Using them further down the page is fine, but you want the viewport (the initially viewable area) to be quick and stable (no movement) when loading.

If you have a choice between a column background image or an image element (to accomplish the same thing) – use an image element. Responsive capability is superior and loading will be quicker.

Use Layout Sections for each area. When Layout Sections are used for each aspect of the site (header, page title bar, footer, content) Avada has more knowledge about what needs to render, and therefore assets can be made more efficient. The builder elements are also maintained and updated, legacy features are not. This is especially important for the header in order to avoid CLS.

Avoid embeds unless necessary. For example, embedding a third party form or multiple twitter feeds on your homepage. Not only do you have to wait for them to load, they often bring with them extra assets which might not even be required. For forms for example, it』s best to use Avada Forms where possible.

Use the Facade global option for the YouTube and Vimeo Elements. This will cause the video to only load when clicked, thereby reducing overall page load content.

Be selective about any extra plugins. More plugins will mean more assets being loaded and more memory usage. If there is the option of using a feature in Avada instead of a plugin, then we definitely recommend that. Avada assets are combined together to be more efficient than a plugin.

Create your own custom icon set and disable Font Awesome. If you only plan to use a select number of icons, then try out the Avada icons feature and create your own lightweight icon set. See the How To Replace Font Awesome Icons With A Custom Icon Set doc, for more information on this process. Alternatively, if you do still want to use Font Awesome, disable the subsets you aren』t using in Global Options – Theme Features.

If you are adding custom CSS in a child theme, chances are you would actually be better to add it to the global options custom CSS. This will vary, but usually the child theme CSS is loaded separately as part of another request, whereas the global options custom CSS is compiled into the main file with the rest.

Generate Critical CSS for above the fold content. This option can be enabled in the performance Wizard, or in the Global Options > Performance tab. You can then generate critical CSS for specific pages to assist the above the fold content loading faster.

Avoid parallax on mobile. If you are using parallax on containers, set to off for mobile. It should not have a big impact on the design of the page and the parallax will make the page less responsive on mobile. Especially important for the time to interactive measurement in Google core web vitals.

Avoid automatic popups. Popups to get newsletter subscriptions may look nice, but will be treated negatively by Google page speed insights as having a negative impact on user experience.,Configuring The Performance TabPerformance Tab – find the ideal option combination (it』s impossible to be prescriptive here, as this is not the same for everybody)

Lazy Loading – Avada. Do not use lazy loading from a plugin and Avada. This will almost certainly break image loading on the front-end and will not be beneficial. Avada lazy loading ensures carousels and dynamic content work properly, it is also tied together with critical CSS. So we definitely recommend sticking with Avada lazy loading.

Font Face Rendering – Swap All

Preload Key Fonts – None (or if your LCP is a heading, then the font weight used for the heading)
Emojis Script – Disable, unless you need it (comment area)
jQuery Migrate Script – Disable, unless you need it for a plugin. Even still we would recommend disabling and finding a more update option instead of the plugin.

Load jQuery In Footer – On. This will vary depending on content and plugins. Best approach is to turn it on and then check your website. If you notice issues then disable it, if you don』t then leave it on and the page load should be faster.

Load Stylesheets In Footer – Off. Having it on will result in page shift which will contribute to a high CLS score. If you want to defer the styles the better option is to use the critical CSS option. When the page has critical CSS it will automatically move the rest of the styles to the footer.

Enable Gzip Compression – Off. This one depends on your host, but having some form of compression is important. Most modern hosts will automatically use compression – in which case you can leave off. If you are unsure you can test by turning on and then testing your website performance.

Enable Video Facade – On. If you are using a lot of Vimeo or YouTube videos then turn on. If you are not using videos then leave it off.
CSS Compiling Method – File. Only use database if you must, only use disabled if you are actively working on the site and debugging.
Load Media-Queries Files Asynchronously – Off. In most situations the load times will be worse when enabled.
Enable CSS Variables – Either, but On will be fine as default.
Enable Critical CSS – Set to on. On your page content ensure you have set your page above the fold image to skip lazy load. Then visit the critical CSS page and generate critical CSS for your page. This will add critical CSS to the head of the page and move the rest of the styles to the footer. It will also preload the image set to skip lazy load. Both of these should contribute to an improvement in the LCP metric in Google core web vitals, but it depends on hosting and the content.

Enable JS Compiler – On.
Enable Progressive Web App – Either. Its unlikely to improve first page load, therefore speed tests wont pick up on why its good. However, for page loads after the first the PWA should improve speed a lot. So it can be nice to enable767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Avada OptimizationTurn off Elastic Slider unless you need it (unlikely)
Turn off post types you aren』t using (slider, portfolio, FAQ).

Turn off the Font Awesome subsets you don』t need, and consider switching to a custom icon set only.

Font Awesome v4 Compatibility – Off. If you do have version 4 icons, edit the pages and select a new icon (will be version 5 by default)
Load Frontend Block Styles – Off (unless needed)
Legacy Button Presets – Off. These are the color presets – green, blue etc. A fairly substantial amount of CSS can be saved by having this disabled and setting the desired colors to the button instead.

API scripts (YouTube, Google) Turn these off unless you are using them.

Disable elements you don』t use in Avada – Builder Options. This will save some CSS from being loaded and speed up PHP page building. JS is already conditional based on element usage on the page.

Disable any plugins you are not using. Plugins recommended by Avada are only for a specific purpose – they are not mandatory. If you are not using any sliders ensure you have all slider plugins disabled. Same goes for any other plugins you no longer need.,Extra Optimization
Get good quality hosting that is suited to WordPress. This will improve server response time. We use WPEngine.
Ensure you are up to date with PHP. If your host isn』t providing recent versions of PHP you may way to consider switching elsewhere. Newer PHP versions are more performant and will improve server response.
Cache. There are so many options here and different setups. You can have a cache plugin like WP Rocket, super cache etc. Also there is cache offered by hosts. There is loads of information out there on the subject. Just remember, the more cache the more you need to clear and check at update time. Also, always avoid using two options for the same thing (cache, minification, lazy load etc).

Minification. You can use a plugin to improve minification. However beware, you will not always get positive results and like caching you can end up causing problems. In most cases, you are better served leaving off and improving the content.

Image CDN. There are various image optimization and serving platforms. It』s best to try these out and find a combination which works for you. Popular plugin options are Smush plugin and EWWW image optimization. For CDN, we recommend CloudFlare. Finally, also bear in mind some hosts provide this as standard. For example Siteground offers WebP image generation in their optimization plugin.

Experimentation. Especially with performance plugins, its good to give them a test and find the winning formula for your setup. Just remember to clear caches between testing.,Testing
Load the page yourself before testing for load time. This is important if you are changing global options and then testing straight away to find the best score. For example, say you enable a cache plugin and then visit GTmetrix to test the URL straight away. The page will not be cached by the plugin yet and therefore you won』t actually be seeing a representative result. Best to visit the page yourself first (just a simple page load in your browse) then test. Additionally on first page load the CSS and JS files are compiled, which means more processing time than subsequent page loads.

Google Page Speed. Faster to do than using the website, you can use the Lighthouse feature in Chrome developer tools. https://developers.google.com/web/tools/lighthouse. Just ensure you are performing this in an incognito window where you are not logged in. Otherwise the scores will be worse, due to admin asset loading.,Useful ResourcesWhat Are Google Core Web Vitals, And Why They MatterHow To Use The Performance WizardHow To Optimize Above The Fold Content For PerformanceAvada Optimization Guide
Image Size Guide

Is Your Site Running Slow?

How To Speed Up Your Site Using Plugins

Comprehensive Guide To WordPress Image Optimization

Avada Speed & Performance

Avada is created with both speed and performance in mind. Avada is highly optimized and provides you with the ability to get good speed test scores on most tools like Google PageSpeed Insights, GTMetrix, Pingdom, and Web Page Speed Test.
Of course, the final result will depend heavily on your site』s content. But Avada also offers a range of options to help you further tweak performance and load times. Let』s have a look at an overview of what』s on offer, and where you can tweak your settings.,Overview
Performance Wizard

Performance Tab
Advanced Options
Avada Builder Elements

Site Optimization

Useful Resources,Performance WizardThe Performance Wizard was released with Avada 7.4. This Wizard is meant to be used after your website has been completed, and it takes you through several steps to help you decide what features to turn off to help optimize the loading speed of your website. Please see the Performance Wizard documentation for more information on how to use this feature. This process allows you to tweak options from most of the sections listed below, in a semi-automated fashion. But for most control, you can also adjust the settings in the various sections individually.,Performance TabTowards the bottom of the Avada Global Options, you will find the Performance tab. This tab has a range of options to help tweak load times, depending on your preferences. These are split into three categories, Performance, Dynamic CSS & JS, and Progressive Web App.
View the Performance Tab Options!Performance
WordPress jpeg Quality – Controls the quality of the generated image sizes for every uploaded image. Ranges between 0 and 100 percent. Higher values lead to better image qualities but also higher file sizes. NOTE: After changing this value, please install and run the Regenerate Thumbnails plugin once.

WordPress Big Image Size Threshold – Sets the threshold for image height and width, above which WordPress will scale down newly uploaded images to this values as max-width or max-height. Set to 「0」 to disable the threshold completely. In pixels.

Image Lazy Loading – Choose your preferred lazy loading method for your website』s images to improve performance. Choose from Avada, WordPress, or None. IMPORTANT: The WordPress native method can cause issues with dynamically loaded elements like image carousels.

Iframe Lazy Loading – Choose your preferred lazy loading method for your website』s iframe to improve performance. Choose from Avada, WordPress, or None.

Font Face Rendering – Choose 「Swap All」 for faster rendering with possible flash of unstyled text (FOUT) or 「Block」 for clean rendering but longer wait time until first paint. 「Swap Non-Icon Fonts」 will use a mix of the first 2 methods (「swap」 for text fonts and 「block」 for icon-fonts).

Preload Key Fonts – Make a selection to prioritize fetching resources that will be requested later in page load. This improves page load time as the browser caches preloaded resources so they are available immediately when needed. Choose from All, Google Fonts, Icon Fonts, or None.

Preload Google Font Variants – Select the variants of Google fonts that should get preloaded. Leave empty to preload all variants. If, for example, you find that some text is the Largest Contentful Paint, then selecting the variants to preload can help with that metric.

Preload Google Font Subsets – Select the subsets of Google fonts that should get preloaded. Leave empty to preload all subsets.

Emojis Script – If you don』t use emojis you can improve performance by removing WordPress』 emojis script.

jQuery Migrate Script – If you are not using any deprecated jQuery code, you can disable this script to improve performance.

Load jQuery In Footer – Set to 『on』 to defer loading of jQuery to the footer of the page. This will only take effect if no other jQuery dependent scripts are added to the head. Turning this on can cause JS scripts to break, use with caution.

Load Stylesheets In Footer – Set to 『on』 to defer loading of the stylesheets to the footer of the page. This improves page load time by making the styles non-render-blocking. Depending on the connection speed, a flash of unstyled content (FOUC) might occur.

Enable Gzip Compression – Set to 『on』 to add Gzip Compression rules to the .htaccess file. IMPORTANT: This option works only on Apache web servers with mod_gzip and mod_deflate enabled.

Enable Video Facade – Use video facade in order to load video player only when video is played. IMPORTANT: This option is only applied to YouTube and Vimeo elements.
Dynamic CSS & JS
CSS Compiling method – Select 「File」 mode to compile the dynamic CSS to files (a separate file will be created for each of your pages & posts inside of the uploads/fusion-styles folder), 「Database」 mode to cache the CSS in your database, or select 「Disabled」 to disable.
Combine Third Party CSS Files – When enabled, third-party CSS files will be combined into Avada』s main stylesheet. Plugins affected are WooCommerce, The Events Calendar, Slider Revolution, ConvertPlus, Contact Form 7 and bbPress. IMPORTANT: When this option is changed, Avada Caches have to be reset for changes to apply.
Load Media-Queries Files Asynchronously – When enabled, the CSS media-queries will be enqueued separately and then loaded asynchronously, improving performance on mobile and desktop.
Enable Critical CSS – Set to 『on』 to enable the generation of critical CSS. Once turned on your can manage from the Critical CSS page.
Cache Server IP – For unique cases where you are using cloud flare and a cache server, ex: varnish cache. Enter your cache server IP to clear the theme options dynamic CSS cache. Consult with your server admin for help.

Enable JS Compiler – By default all the javascript files are combined. Disabling the JS compiler will load non-combined javascript files. This will have an impact on the performance of your site.

Reset Fusion Caches – Resets all Dynamic CSS & Dynamic JS, cleans-up the database and deletes the uploads/fusion-styles and uploads/fusion-scripts folders. When resetting the caches on the main site of a multisite installation, caches for all sub-sites will be reset. IMPORTANT NOTE: On large multisite installations with a low PHP timeout setting, bulk-resetting the caches may timeout.
Progressive Web App
Enable Progressive Web App – Enable this option if you want to enable the Progressive Web App feature and options on your website. This is primarily a caching app, under development at Google. For more information on this, please refer to this document.

Cache-First strategy file types – File types added in this list will be cached in the browser. Subsequent page requests will use the cached assets. Use this for static assets that don』t change like images and fonts.

Network-First strategy file types – File types added in this list will be cached in the browser. Subsequent page requests will first try to get a more recent version of these files from the network, and fallback to the cached files in case the network is unreachable. If your site』s content gets updated often we recommend you can use this for your content.

Stale-While-Revalidating strategy file types – Any file types added here will be served with a cache-first strategy, and after the page has been loaded the caches will be updated with more recent versions of the selected file types from the network. Use this for assets that may get updated but having their latest version is not critical.

App Splash Screen Logo – Logo displayed for your website at 512px x 512px when installing as an app. Logo image must be in PNG format.
App Display Mode – If the user installs your site as an app, select how the app will behave.
App Theme Color – Select a color that will be used for the header of your app, as well as the browser toolbar-color on mobile devices.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Advanced OptionsFeaturesIn the Avada Global Options, you will find Features under Advanced > Features. This tab has a large range of options to enable or disable various Avada features, such as Mega Menus, YouTube and Vimeo API Scripts, Google Map Scripts and many more. If you are sure you won』t be using them, turning these features off will help improve load times, as the features will not be loaded.
To help decided which features to disable, you can now use the Performance Wizard to get recommendations your your install.
View the Features Options!,Post TypesUnder Advanced > Post Types, you will find options to completely disable various post types within Avada. These include Avada SLider, Avada Forms, Avada Portfolio and Avada FAQ. Disabling these will reduce the overall footprint of the theme, offering a modest improvement.
View the Post Types Options!,Avada Builder ElementsYou can also disable any of the Avada Builder Elements you are not using, including Layout Elements and Form Elements. You can find these at Options > Builder Options > Avada Builder Elements, from the Avada Dashboard. Disabling unused Elements can lead to a small increase in performance, but use with caution. Disabling an element will remove it from all pages/posts, old and new. If it was on a previous page/post, it will render as regular element markup on the front end.
From Avada 7.3 and up, you will also find the Run Element Scan button, which will scan your site and deselect all unused Elements for you. All you have to do is then save the options. See the Avada Builder Options doc for more info.,Site OptimizationDespite all the performance options we provide, when it comes to site optimization, Avada plays a much smaller part than you might imagine. Avada is optimized so that it』s fast on its own, and can be tweaked to be faster as shown above, but ultimately, user content will primarily dictate how fast your site will perform. Images play a huge factor in speed results, as well as hosting, extra plugins, content, and more.
Just as an example, if you have a site that』s 1100px wide and upload a 2000px image on a page, your page speed score will drop heavily. This is because sites like Google or GTMetrix will see a 1100px container that unnecessarily has an image in it that is almost twice its size.
There is a wealth of external tools you can use to analyze your site』s loading times, and to find the bottlenecks and non-optimized content that will affect the load speed of your pages. For more information on these tools, please see the following docs:

Performance Testing Using GTMetrix

Performance Testing Using Google Page Speed Insights

Performance Testing Using Pingdom

Performance Testing Using WebPageTest,Useful ResourcesWhat Are Google Core Web Vitals, And Why They MatterHow To Use The Performance WizardHow To Optimize Above The Fold Content For PerformanceAvada Optimization Guide
Image Size Guide

Is Your Site Running Slow?

How To Speed Up Your Site Using Plugins

Comprehensive Guide To WordPress Image Optimization

How To Replace Font Awesome Icons With A Custom Icon Set

Having a custom Icon Set with just the icons you need for your site will always be better for page load speed than having to load the various Font Awesome Icon subsets. So in Avada 7,4, and the Performance Wizard, we have included a helpful way you can scan your site for the icons it uses, so you can then create a custom Icon Set, you can upload. This would then allow you to turn off the Font Awesome icon subsets, slightly improving your page load speed. Let』s see how to do this.,Run The Performance WizardSee the How To Use The Performance Wizard doc for full details of that process, but for our purposes, we just want to look at Step 3 of the Wizard. Here you can use the Find Recommendations button, at the top of the page, to scan your site for all the icons it uses. As you can see in the screenshot below, you will then see a list of all icons used and where they are used.,Create The Custom Icon SetFrom Avada > Icons, you can then create a new Custom Icon Set to replace the icons you are using. To start, give the Custom Icon Set a name and click on Create A New Icon Set (or just hit Enter). This takes you to the Edit Icon Set page. Now we have created a Custom Icon Set, we have to populate it. To do this, click on the Icomoon link to open Icomoon in a new tab, where you can generate and download a custom icon set in the form of a zip file.,Build The Custom Icon SetThere are several methods to create a Custom Icon Set In Icomoon. You can load the Font Awesome Icon set and select your icons from there, either manually, or by searching.
But in our circumstances, we are replacing a specific set of used icons with a custom set of the same icons. Please see the How To Upload And Use Custom Icons In Avada doc for more general information on creating Icon sets in Icomoon, but for this task, perhaps the easiest way to recreate the specific icon set is to download them directly from the Performance Wizard and upload them to Icomoon.
To do this, the first step is to download the icons from the Performance Wizard. On the Icons page of the Performance Wizard, you will see the Full List of icons. As you can see from the screenshot below, you can click on this icons to download the svg file.
Once you have downloaded all the icons you need to create your set, you can create a new Empty Set in Icomoon for your custom icons to be uploaded into. This is found from the top menu, as seen below.
Then it is simply a matter of dragging and dropping the downloaded icons into your empty set in Icomoon.
Once you have selected all the icons for your custom set, click the Generate Font button at the bottom of the screen, as seen in the screenshot below.
Before continuing on to click Download, one important thing to note is that every icon pack you upload must have a unique Font Name and CSS Class Prefix before importing into Avada. You can change the Icomoon defaults in the Preferences (via the link next to the Download button, or from the top toolbar) before downloading your custom icon set, as seen below. Once you have done this, click Download.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Alternative MethodIf you don』t want to use the above method, the alternative is to add the FontAwesome Icon Set into Icomoom from the Icomoon Library, as seen below, and then either manually select, or search for the icons you need for your custom icon set.
Searching in Icomoon however, can give many choices, so you need to know which specific icon you used in your website to know which icon to select. This is why downloading the icons from the Performance Wizard is an easier method.
Whether you need to search, or can just recognize the icons you have used visually, you just need to go through and select the icons you need for your custom set. Once you have selected all the icons you need, you can go to the Generate Font button, as previously.,Upload Your Custom Icon SetOnce you have generated and downloaded your custom font set, you now need to upload it to your website.
Back on the Edit Icon Set page, you will find a simple upload interface to upload your custom icon set. (There is also a shortcut to this page in any element that has the Icon Picker. Here you will find a Plus button in the top right corner of the Icon Picker, which takes you straight to the Custom Icon page.)
To upload a Custom Icon Set, simply give the Set a name, and then click on the Select File button. Navigate to your icon set (as a zip file) and select it.
Then just click Publish in the right hand side. This will load the Custom Icon set. If you need to update the set later on, there is an Update Custom Icon Set button you can use to reupload the set, as seen below. The icons will now be available through the Icon Picker, in their own tab.
IMPORTANT NOTE: If you create an Icon Set from the Avada > Icon page, the set will be saved immediately, before you even add the icons. And when you add icons, the set is auto saved. If you add an Icon set through the Plus button in the Icon Picker or by clicking Add New when on the Edit Icon Set page, the set will be unpublished until you click Publish.OK, that』s it. You can now return to the Global Options (Advanced > Features) and disable the Font Awesome Icon subsets. As you have a Custom Icon Set, these are now not needed.
To use your new Custom icon Set, head to any element that uses an icon, including the Icon Element. There, you will see any custom icon sets at the top of the icon picker, and you can now just choose the set and select icons from that.

How To Use Critical CSS

Critical CSS is a performance feature that was added in Avada 7.4. You can enable this in the Options > Performance tab, or when going through the Performance Wizard. Once it has been enabled, you can access the Critical CSS page from the WordPress sidebar at Avada > Critical CSS, or at Maintenance > Critical CSS from the Avada Dashboard.
Both take you to the Critical CSS page, where you can generate Critical CSS for both pages and posts. Critical CSS is the CSS necessary to style the above the fold content. When generated for a page, this will be loaded into the page head, with the rest of the styles moved to the footer, which should mean the above the fold content is quicker to be styled and there is less render blocking time.
Generate Critical CSSOn the right hand side of the Critical CSS page, you can select which content you want to generate the Critical CSS for. Options are Homepage, All Pages, Specific Pages, Global Single Post, and Global Single Portfolio. Make your choice, and then click on Generate Critical CSS.
Depending on your choice, and the number of pages or posts etc. you have on your website, this CSS generation may take some time. You will see a dialog as can be seen below, while the CSS is being generated. Do not close the browser during this process, or it wil be interupted.,Manage Critical CSSOnce the process has completed, you will see the screen looks something like this, with the pages listed for which Critical CSS has been generated.
When you mouse over the generated CSS, you can see some links underneath each set to help you manage the Critical CSS. You can delete the set entirely, or you can clear or regenerate both the Mobile CSS or the Desktop CSS. There is also a Regenerate button at the far right, which regenerates both.,Preload ImagesWhen critical CSS is generated it also checks for images above the fold which are set to skip lazy load. If any are found, it will save those along with the critical CSS and preload them to speed up load time.
IMPORTANT NOTE: If you change the above the fold content on a page, then you should regenerate the critical CSS.

How To Use The Performance Wizard

Introduced in Avada 7.4, the Performance Wizard is a step-by-step wizard to help you optimize the performance of your Avada website. it can be found at Avada > Performance from the WordPress Dashboard, or Maintenance > Performance Wizard from the Avada Dashboard. Please read on for more information about how the Wizard can help you, and watch the video below for a visual overview.
IMPORTANT NOTE: The Performance Wizard should only be run once the website is complete.,1. StartThis screen is just where you begin the Performance Wizard. At the top of the page, there is a Run PageSpeed Insights buton, which you can use to do a before and after comparison of your page loading times.
There is a reminder that the optimization process should only be run once the website has been completed, and there is a link to the Performance related documentation, and a Let』s Start button. Click that to begin the Performance Wizard.,2. FeaturesIn this step, you can disable any features you aren』t using, thereby reducing the amount of code loaded. Please be cautious, as disabling a feature you are using will result in broken behaviour until it is enabled again.
As you can see in the screenshot below, the Wizard loads with the current Features as set in the Global Options. At the top of the page, there is a Find Recommendations button, which when clicked will scan your website and offer you recommendations about the various features.
Once, the scan is complete, you will see the Wizard』s recommendations. The green ones mean that the current option is appropriate, the red ones are options which the Wizard recommends be changed, and the blue ones are ones that can』t be automated, and require you to consider the options yourself. The Apply All button, found next to the Find Recommendations button at the top, will apply all the red recommendations. But best practice here is to take your time to go through each of these features and make your changes.
Once you have made your choices, click the Save Changes button at the bottom, before clicking Next Step.,3. IconsIn this step, there are two options relating to Icons. You can choose which Font Awesome icon subsets you want to load, and you can set Font Awesome v4 Compatibility.
If you click the Find Recommendations button, the Wizard scans your website and offers a range of infomation pertaining to the icons used on the site, to help you make your choices. It offers a full list of all the icons used on the site, breaking them down into the individual pages they are used on. (If they are under the Meta column, this means they are not used directly in the content, but are in used in a menu). This list is useful if you want to convert your Font Awesome icons to a single custom icon set to improve your load time. See the How To Replace Font Awesome Icons With A Custom Icon Set documentation for more information on that process.
The recommendations for the two font options lets you know which subsets you can turn off, or need on, and in the Font Awesome v4 Compatibility option, the recommendation also lets you know if you have any old v4 icons, which you could then update, so you could turn off v4 compatability.
Once you have made your changes on this page, click Save Changes, and then Next Step.,4. FontsIn this step, you can check which fonts are being loaded on your website and optimize how those fonts are served. Ensure all families and variants selected here are required. Less variants will mean less requests and therefore faster loading. This page is split into two sections – the Global Fonts, and the Font Serving Global Options.
Clicking on Find Recommendations checks how many font variants are being used on the site, and makes recommendations about the Font Serving options. There are five font options you can change, depending on your website. They will all affect performance to some degree. For example, you can Preload Key Font Variants for a faster LCP (Largest Contentful Paint) if the LCP on your site is a font. Again, when you are done, click Save Changes and then Next Step.,767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada
5. ElementsIn this step, you can disable any Design, Layout or Form Elements you aren』t using. When disabled, the Elements will not load and will therefore not be available in the Builder.
There are three buttons at the top of this page. Find Recommendations, Enable All, and Disable All.
Clicking on Find Recommendations scans your website to see which Elements you are using, and deselects all the Elements you are NOT using. If your website is finished, you could then save your changes, thus stopping any unused Elements from loading. Just be aware that you would have to re-enable these Elements to use them at a future time.,6. OptimizationIn this penultimate step of the Wizard, you can optimize how the CSS and JS assets should be enqueued. These options can have a large impact on the performance of the page load but some of these can also break functionality, particularly if you are using a caching plugin, so be sure to test your site after any changes.
When you are done with your changes, click Save Changes and then Finish Wizard.,7. FinishThis takes you to the FInish page, which clears the site cache and assets. The Wizard also displays how many plugins you have, as these can have a big effect on performance. If you have missed any possible improvements, these will be listed on the right-hand side, next to the Active Plugins.
At the bottom, are some links to specific docs that can help with your understanding of website optimization, and how to perform further optimization, such as optimizing for above the fold content, and enduring that your images are all the right size and optimized as well. Finally, at the top, you can click the Run PageSpeed insights button again, to see how the site has improved.
There are always more things you can to to optimize your site, like choosing faster hosting, running a CDN, installing a caching plugin, further optimize your images and much, much more, but the Performance Wizard is a great first step once you have completed your site, to get it up to speed.