Elementor Background video is slowing down my website

My homepage is loading very slow. It looks like it has something to do with my background video hosted externally on Google servers (YouTube). I've run a couple test on GTmetrix and they mentioned I should leverage browser caching for the following scripts : https://snag.gy/Zdb45x.jpg

I went on the live chat to try to figure this out but nobody seems to understand too...

I didn't build the website from scratch. It's a new client that had its website built on Elementor and I'm not very familiar with it. Is it normal for Elementor's background video to slow down the website that much?

Thanks for your assistance. Support is granted so you can have a look at the backend maybe.

Website : https://santek5s.com/

  • Adam Czajczyk
    • Support Gorilla

    Hello Etienne

    I hope you're well today and thank you for your question!

    I checked the site and tested it with Google PageSpeed insights. These YouTube scrips were not reported there but I also wouldn't worry much about them. There are, however, other "render blocking resources" reported and some additional things that could be done to speed the site up.

    One of the "quirks" of this site is that while it's built with Elementor it's built upon Divi theme. This is quite a strange way of doing things as Divi theme itself is a "builder theme" and using Elementor "over it" is kind of "redundant" and in fact may be slowing down the site and causing unexpected issues in future. However, this is not something that could be easily changed without rebuilding the site entirely so just make sure about one thing:

    keep the "Minfiy" options in Divi settings (Divi -> General Options -> Advanced) disabled all the time.

    Make also sure that in "Advanced" Elementor settings the CSS is printed out "internally" instead of being printed out to external files.

    Then go to Hummingbird and clear all caches. Once that's done you would want to go to "Hummingbird -> Asset Optimization" page and enable Asset Optimization option there. Let it scan the files and complete and you should see a list of files there.

    Next to the "Re-check files" and "Clear Cache" buttons there you'll see the "Advanced mode" button ("3 sliders" icon) so use it to switch the tool to advanced mode. After that, for each file on the list you'll get (from left to right) buttons:

    - for CSS files: "compress", "combine", "move to footer", "inline"
    - for JS files: "compress", "combine", "move to footer", "force load after the page has been loaded"

    Just ignore the 5th button on the right (the "exclude" one).

    The goal is to, simply speaking, enable as many of these buttons there as possible without breaking the site. This, unfortunately, is an "experimentation" kind of task and there's no universal way to set that up so you'll need to go through this in a "trial & error" way - enable them for 2-3 files, check the site, make adjustments if necessary, move on to next files until the end of the list.

    It is, however, very powerful tool that should let you eliminate as many render blocking resources from the site as possible. Once that's done, you'll also need to let the site re-build its cache (that means visiting each and every page on it - as a logged out user) and it should get noticeably faster.

    Additionally, before doing that all, please go to the plugin list on your site and review active plugins. There are some plugins that are not actively used as they are only useful for certain activities (e.g. migration plugin or plugin to search&replace data in the database,) so it's highly recommended to keep such plugins - that are not used on site - disabled so they wouldn't add-up to resource use.

    Give it a go, please and let's see how it improves performance.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.