Videos on website VERY SLOW to load

[LuckyPaws]

Hello,

I am having a problem with the videos on my website. They are loading incredibly slow! How do I fix this problem? (Note: I am designing a new updated website currently with a new version of WD, but it won't be done for a while and I need this problem fixed asap because it is affecting my business).

www.luckypawsmn.com - Center of page

https://luckypawsmn.com/dogbootcamp.htm - 4 videos near bottom of page

[gwpriester]

They all load almost instantly on my computer. I do have a pretty good download speed however.

[Acorn]

Hello,
I am having a problem with the videos on my website. They are loading incredibly slow! How do I fix this problem? (Note: I am designing a new updated website currently with a new version of WD, but it won't be done for a while and I need this problem fixed asap because it is affecting my business).
www.luckypawsmn.com - Center of page
https://luckypawsmn.com/dogbootcamp.htm - 4 videos near bottom of page

I am not seeing any real delay in the video graphic appearing. A click on Play and it runs.
What I do see is that it seems to load twice.

Now I think this is because of two or three things.
First, the site is unsecure http:// so the browser has concerns in opening into YT, https://. I have recently come across this; a mixture of cross-origin and YT code is working against you.
Second, the double tap might be because your have identical embed code in Main and Variant. Try adding in an id and possibly name parameter as well.
Third, your pages are exceeding dense, Home is bringing across over 6MB and potentially up to 16MB of data. A disaster on a cell. Main load time is around 4 seconds. you need to be hitting 2MB and 1 second. You could instead link to the YT page rather than embed. Use the YT-generated front image or just screenshot it. Add the YT link and make it open in a new tab.
Fourth, I lied. Try add loading="lazy" into the embed code if you are keeping it.
On Home, move the YT to the bottom of the page. That way, it does not impact on the page load until it is scrolled into view. No change in position on the Bootcamp page.
Another option is to put the videos into a pop-up layer or a new video page.
My preference would be lazy load the Home, Variants as YT new pages, separate video pages for the remainder, also lazy loaded..
Fifth, the number of different fonts in play is dramatic and will drag you down as each browser will use of substitute as it sees fit. A lot of buttons are images,, soft-group instead.

<iframe width="448" height="252" loading="lazy" id="Main01" src="https://www.youtube.com/embed/px15lot_G44" title="Dog Trainer Minneapolis - In Home Dog &amp; Puppy Boot Camp Minneapolis, MN" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Acorn

[LuckyPaws]

Appreciate the responses. Acorn, I am very much a novice so I'm going to have to re-read through your info several times and get back to you with questions. Unfortunately I can't be leading clients away from my page (to go to youtube video), so it must be embedded. Is there a better way to embed other than Youtube?

Yes, I feel I have a lot to learn regarding minimizing the website so that it isn't so dense as you put it. What causes it to be so dense?

[LuckyPaws]

Can I put this exact code in the html code(body) area of the video? On my end the code reads a bit different.

<iframe width="448" height="252" loading="lazy" id="Main01" src="https://www.youtube.com/embed/px15lot_G44" title="Dog Trainer Minneapolis - In Home Dog &amp; Puppy Boot Camp Minneapolis, MN" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

This is what the code currently says for the home page video:

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/w-PVL-CQ99o?rel=0" frameborder="0" allowfullscreen></iframe>

[Acorn]

[QUOTE=LuckyPaws;656517]I can't be leading clients away from my page (to go to youtube video), so it must be embedded./QUOTE]A YT page opening in a new Tab still leaves your website there. When they close YT, your site re-opens.

You need to first work out why you are being delayed. You may have browser extensions that Gary or I don't.

You are calling up lots of little bits, tons on images and font changes. The browser is making around 200 fetches, YT is adding in more code and so rendering is always going to be an issue.

To keep your viewers in place, you could create a separate video website and each page has your logo, a single video and a Back link. It would not need a variant as you can apply Scale to fit width, if your XDA allows.

There is an art in designing site but you need to know the tool.
All important images should have an image filename.
Avoid Xara Navbars or large sites as you have 10 image buttons on MouseOff, same on MouseOver and duplicated for every Main page. That's a lot of unnecessary images.

I lot of work I do is remedial so I would be selling myself short if I explained it all.

Sorry.

Acorn