dagernParticipantApril 6, 2022 at 10:59 amPost count: 4
I’m using Avada Theme on my website and I just discovered, that the google speed score is quite low and the reason for this image size or any of the most common reasonms but theme related issues (Check out the Report here or see Image)
Does anyone knows if thats a common issue and how to fix it?
DennisAmmar. SKeymasterApril 6, 2022 at 4:20 pmPost count: 2227
There are a lot of factors that goes into the site speed, here is a very detailed article explaining how you can actually make the scores better.
Content – building the content
Less is more sometimes. The more elements/content the page contains, the higher the node count. The more that needs to be rendered. This is the excessive DOM count that is referenced in tests.
Avoid an above the fold slider unless important to the design. If you want a large hero image, better to use a static image as a background. If 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.
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 are optimized. Clever use of background colors, gradients and lightweight SVGs can often make a big impact for less.
Avoid animations above the fold. For the same reason as the slider. Using further down the page is fine, but you want 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. This is not vital, nor hugely impactful right now, but it may be in the future. When layout sections are used for each aspect of the site (header, page title bar, footer, content) we have more knowledge about what needs to render and therefore assets can be made more efficient.
Avoid embeds unless necessary. For example, embedding a third party form or serving multiple YouTube videos 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, best to use the Avada Forms where possible. For videos you might want to have them on a separate page, or load it within a lightbox instead of on page load.
Be selective about your extra plugins. More plugins = more assets being loaded. Also not always optimized to take into account what is already being loaded
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. 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 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
Performance Tab – find the ideal option combination (not the same for everybody)
Lazy Loading – Avada (or a plugin, but Avada’s will ensure carousel and other areas work properly)
Font Face Rendering – Swap Non-Icons (you can also use swap all, but it is a balance)
Preload Key Fonts (7.2) – Icon Fonts or All
Emojis Script – Disable, unless you need it (comment area)
Load Stylesheets In Footer – Off. The page shift is usually not worth it, but you might want to ty it first.
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. Try it out first, but usually the scores will be worse
Enable CSS Variables – Either, but On will be fine as default.
Enable JS Compiler – On. With an HTTP2 server it might be debatable but even then more often than not it works faster being 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 enable
Avada Optimization – turning off what you don’t need
Turn off Elastic Slider unless you need it (unlikely)
Turn off post types you aren’t using (slider, portfolio, FAQ, icons). New to 7.2.
Turn off the FontAwesome subsets you don’t need
Font Awesome v4 Compatibility – Off
Smooth Scrolling – Off
Load Frontend Block Styles – Off (unless needed)
API scripts (YouTube, Google) Off unless you are using.
Disable elements you don’t use in Avada – Builder Options. This will save a little bit of CSS, but overall will be minimal impact in 7.2 since we have improved the JS loading
Extra Optimization – caching, minification, server
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.
Good quality hosting that is suited to WordPress. Will improve server response time.
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.
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.
Experimentation. Especially with performance plugins, its good to give them a test and find the winning formula for your setup.
Load the page yourself before testing. This is important if you are changing global options and then testing straight away to find the best score. Eg, say you enable a cache plugin and then set 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 the valid result. Best to visit the page yourself first (just a simple page load in your browse) then test.
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
Hope this will help you out.Jetxpert-EnvatoBlockedApril 6, 2022 at 9:17 pmPost count: 339
In addition to Ammar’s suggestions, the following posts provide practical tips that will help speed up any Avada website (including yours):
Best wishes!MetroParticipantApril 7, 2022 at 11:22 amPost count: 116
When using Avada CSS and JS compilers a file is created when someone visits the page. If a cache plugin is used, how does it work if the cache is created before someone has visited the page (before the file is compiled). Or is the file compiled before the page is cached?
- You must be logged in to reply to this topic.