I may have designed the slowest Webflow page of all time. Where did I go wrong?

Chuck_Braman · December 22, 2020, 6:52pm

Google PageSpeed Insights gives the homepage on my new site a rating of 5 out of 100: https://developers.google.com/speed/pagespeed/insights/?url=miamijazzbands.com

In contrast to the uploaded site (whether on Siteground’s servers or Webflow’s staging server), when toggling preview in Webflow, the page loads smoothly and instantly.

Webflow user Mike Yevin suggested that “It looks like the lower score issue comes from the video usage on the page (multiple videos that all appear to be loading their own script files). There are some tutorials on preventing these videos from being fully “loaded” until the user interacts with them (only showing a preview image and a play button at first) and since you’re not auto-playing any of them by default this would be my recommendation. I’ve done it before on YouTube video players before, but I’d imagine the process for Vimeo is similar or even the same, so it should be fairly easy to do with a small snippet of custom code.”

I did spend about an hour trying to locate these tutorials without success. I then contacted Vimeo, who hypothesized it could be caused by the code generated by Webflow, and suggested using their embed code instead (see below):

As they suggested, I tried replacing Webflow’s Video Element with the Embed Element containing their native code, but then I lose the ability to auto-resize the video at lower breakpoints, which makes this an unpractical solution. (I also suspect that the Webflow Video Element is not the source of the speed issue and that they were just offering a generic suggestion.)

Not being a coder, I’m at an impasse right now. I would really appreciate it if anyone could offer any insights or advice on how I could solve this page speed issue (including any improvements unrelated to the videos if such are possible).

The URLs for my site are https://www.miamijazzbands.com (Siteground server) and https://miamijazzbands.webflow.io/ (Webflow server).

Thank you.

Here is my site Read-Only: https://preview.webflow.com/preview/miamijazzbands?utm_medium=preview_link&utm_source=designer&utm_content=miamijazzbands&preview=12a269da023c5752f44898df1bc35875&mode=preview

mikeyevin · December 22, 2020, 11:10pm

Sorry for not getting back to you in the previous thread @Chuck_Braman, to give you an idea of where my head is at lately, I just realized that Christmas is this Friday

I’ve included the link I found with a solution to not load Vimeo videos until user interaction, however I haven’t tried this out so I’m not sure if it will be the best solution in this case:

As an alternative you could swap the Video Element with a Lightbox Element containing a video and link each slider section with each other so the videos can be watched one after the other from within the lightbox itself. I can’t say for sure, but this may prevent the video embed elements from being loaded until a user clicks—which is very similar to the solution I linked above.

Chuck_Braman · December 22, 2020, 11:35pm

You absolutely don’t need to apologize, @mikeyevin, your generosity, and expertise has been wonderful and is appreciated.

Yes, speaking of dates sneaking up, I’m moving from NYC to South Florida on Sunday, believe it or not. Packing, making phone calls, I think I definitely may have taken on more than I can chew by trying to perfect this website before I leave, as nice as it would be to have it completed before I get there.

I really appreciate your locating and recommending this likely solution. I think I may have to postpone implementing it for a little while. In the meantime, thank you again, and I hope you and your family have a wonderful holiday.

webdev · December 22, 2020, 11:46pm

The lightbox is the preferred approach (over the one you are currently doing) since the player code is not loaded until the user clicks the lightbox. That is the case even when you use placeholder lightbox images in a slider. The page will load fast and if a user wants to watch they can. The only drawback is when a user clicks on a lightbox that is set to video, the user will need to click the play button in the resulting player.

I used this demo to test performance. It works as expected.
Jazz-098d24 demo (webflow.io)

Chuck_Braman · December 23, 2020, 3:01am

Thank you very much for taking the time to create this demo and share your advice, @webdev. As I mentioned in my comment to Mike above, I may need to devote all my attention for the next few days preparing for a move to a new city (I’m definitely trying to do too much at once right now), but I will definitely explore your solution.

Chuck_Braman · February 3, 2021, 10:41pm

Mike (@mikeyevin),

I’m finally at a point in my relocation process where I can cycle back to this project again and try and implement your suggestion.

So, not being a coder, I’m somewhat blindly attempting to follow the instructions in the solution you linked to (https://www.cssscript.com/lazy-load-vimeo-video/), but without success.

If I put their code:

link href=“vi-lazyload.min.css” rel=“stylesheet”
script src=“vi-lazyload.min.js”

into :

General Settings > Custom Code > Head Code

… and publish the site, the page doesn’t load. So I tried putting it instead into:

General Settings > Custom Code > Footer Code

… and published. I don’t know if this is in the right place to insert the code, but the page loads after publishing, so I proceeded from there.

To try and implement their instructions to:

Create an empty container for the Vimeo video and specify the video ID in the data-id attribute:
class=“vi-lazyload” data-id=“272532681”

… I deleted the Webflow Video component, replaced it with a div, gave the div a class of “vi-lazyload,” and in the “Settings” tab, input “104983494” (the Vimeo video identifier) into the “ID” field, and published. However, upon publishing, nothing shows up.

You can see the results of this in the first video (“Nice 'n Easy”) in the first set of videos as you scroll down the page.

Do you have any advice as to what I could or should do differently?

The current share link is: https://preview.webflow.com/preview/miamijazzbands?utm_medium=preview_link&utm_source=designer&utm_content=miamijazzbands&preview=12a269da023c5752f44898df1bc35875&mode=preview

Thanks in advance.

Jeff (@webdev),

Thank you again for your advice and demonstration of its implementation, however, changing to a Lightbox would be the last resort for me, as it adds extra steps for the visitor and breaks the consistency of my design, as I really would like the videos to stay embedded (but lazy-loaded) in the page, be directly selectable, and allow the visitors to use the boxes and arrows underneath to shuttle through them, which would be consistent with the design of the customer quotes that the videos alternate with. (If that’s possible…)

mikeyevin · February 3, 2021, 10:59pm

Glad to hear you’re starting to tackle this, I’m happy to help as much as possible.

In terms of using custom code, keep in mind that adding the code to your Project Settings will cause it to run site-wide, however I’d imagine this is the only page you’ll need it running on. For that reason, I’d recommend removing it and adding it to the Page Settings Custom Code area instead—but this shouldn’t affect whether or not the code executes on the page in question.

The bit where it references the data-id is actually referring to a data attribute and not the element ID so you’ll want to move that number to the correct area. You can add attributes to an element by going to the element settings panel under the “Custom Attributes” section:

That change should fix the issue and at least allow the video to show up

Chuck_Braman · February 4, 2021, 12:25am

Thanks, Mike.

I should have thought of this, because the ID field has the tool tip “For in-page linking.”

I’ve entered the data-id under Custom div attributes as you’ve suggested, but the video is still not displaying.

Chuck_Braman · February 10, 2021, 10:04pm

Hi @mikeyevin ,

So I’m trying to implement the custom code solution that you were generous enough to locate for me, that should cause my Vimeo videos to lazy-load, and thereby solve the slow-loading issue that is plaguing my site, but I am still not experiencing success.

I’ve created a video demonstrating my attempt to implement the solution.

https://www.loom.com/share/acbba703f64447bf85473b9293888bcf

If you (or if anyone reading this) have any insight as to what I may be doing wrong, or whether or not lazy-loading Vimeo videos in Webflow is actually possible, I’d really appreciate your advice.

I’ve restored my site to it’s state before my attempt to implement the solution. The share-only link is here: https://preview.webflow.com/preview/miamijazzbands?utm_medium=preview_link&utm_source=designer&utm_content=miamijazzbands&preview=12a269da023c5752f44898df1bc35875&mode=preview

Thanks.

mikeyevin · February 11, 2021, 8:04pm

So after taking a closer look at the code, I noticed that the included source isn’t referencing any CDN so it’s not actually loading the necessary script. You’ll need to download the files, host the required JS file and reference that location instead.

While you can’t upload JS files directly to your Webflow assets, you can get around that limitation by renaming the script file to a .txt and reference it with the type="text/javascript" attribute:

<script type="text/javascript" src="ASSET-URL.txt"></script>

iDATUS · February 11, 2021, 8:29pm

wondered what that was.

Chuck_Braman · February 11, 2021, 10:17pm

Thank you, @mikeyevin,

From my understanding of your instructions, I located and downloaded a copy of the javascript file. Then I changed the extension of the javascript file from .js to .txt and uploaded that file to Webflow as an asset. Then I put this code in the Before </body> tag field in the home page settings:

<script type="text/javascript" src="vi-lazyload.min.txt"></script>

(I didn’t upload the css file from the tutorial, as I assume Webflow handles this.)

Unfortunately it is still not producing different results for me. Would you have any insight as to what may be missing or what I may need to do differently?

Below is the share link and the site link, just to have them handy:

https://preview.webflow.com/preview/miamijazzbands?utm_medium=preview_link&utm_source=designer&utm_content=miamijazzbands&preview=12a269da023c5752f44898df1bc35875&mode=preview

https://miamijazzbands.webflow.io/

mikeyevin · February 11, 2021, 10:37pm

My apologies Chuck, you’ll need to grab the full URL for the asset (eg: //uploads-ssl.webflow.com/UNIQUE-ALPHANUMERIC-STRING/vi-lazyload.min.txt). You can quickly grab the full link from the Asset manager by selecting the newly uploaded file and then clicking the small link icon within the modal:

Chuck_Braman · February 11, 2021, 11:07pm

Thanks, @mikeyevin,

I changed this:

<script type="text/javascript" src="vi-lazyload.min.txt"></script>

to this:

<script type="text/javascript" src="https://uploads-ssl.webflow.com/5fa9b466402b24802294e26f/6025a89f80e3382aab6669e7_vi-lazyload.min.txt"></script>

Is this correct? Unfortunately, the video is still not showing…

mikeyevin · February 12, 2021, 12:57am

~~Are you sure the attribute on the element is correct for the video? The 104983494 ID isn’t showing up when I try and view it on Vimeo (https://vimeo.com/104983494):~~

~~https://vimeo.com/104983494~~

Welp, for some reason I wasn’t getting that video when I tried the link before posting the reply above, however it pops right up without issue

I’m poking around on the git page for the JS now and will take a closer peek at the page to see if I’m missing something myself.

Chuck_Braman · February 12, 2021, 1:14am

Thanks for hanging in there, Mike! Yeah, I have the videos blocked from being viewed on Vimeo, but they are not blocked from being viewed elsewhere.

mikeyevin · February 12, 2021, 1:17am

So I took a closer look and while it may not appear to be working, with some fiddling on the preview image I was able to get the base functionaliy working:

I believe—unlike similar Youtube lazyload scripts—Vimeo does not automatically grab the preview image which prevents the element from taking up the required space on the canvas. When I manually add the code to include the image, I am able to click that image and the video starts playing.

The Github page below gives a bit more detail on this and gives you another attribute to add (data-thumb="") to include a custom placeholder image.

Chuck_Braman · February 12, 2021, 6:06pm

Thank you, @mikeyevin,

Believe it or not, I spent 2 hours reading and re-reading the directions on Github and trying to understand them all. They may seem very simple to you as someone with a background in coding, and I suspect they are, but for me, with no coding knowledge, they are unclear and daunting to follow, for just one example, “Place your thumbnail in a folder set in JavaScript.”

I think you’ve already devoted way more time to this than I deserve, given that you are just extending your goodwill to a stranger and his problems. But to be honest, for me to execute this, I would probably need to see a detailed video demonstration of the steps.

Alternately, would you be interested in taking this on and me paying you for your services? In that case, I would only need simple instructions, once the work is done, for how to update the site with new videos when that need comes along in the future.

A couple of unrelated questions in the meantime…

As an alternate solution, would there be a way to get everything that is below the fold to load after what is above the fold loads (the name of the site along with its animation), i.e., have the above the fold content fully load first? If so, this might be a simpler solution to the problem. That is, as long as the Google algorithm is sophisticated enough to detect that this solves the usability issues otherwise associated with the slow-loading videos and doesn’t give my site an SEO penalty based on the slow-loading content below the fold.

Another question, or at least some new data that may be relevant to the loading speed issues on this page: the Webflow page is based on a page created in an older site using Adobe Muse, an app known for generating bloated, slow-loading code: Hire a great New York jazz band for your wedding. This page has significantly more content than the Webflow page, including more videos, yet Google gives it a page speed rating of 40 as opposed to the Webflow page rating of 5. Could there be something else of significance here causing the slow-down on the Webflow page?

Finally, another question, based on something I noticed last night, but again, this probably just reflects my ignorance. But when you first visit the Webflow page, it appears that the videos don’t load until you click on them. Then a spinning loading icon appears above the video, and you can see the progress of the video loading into the buffer in the time-bar underneath. Could it be that these videos aren’t loading until they are clicked on, even without the lazy-load code?

mikeyevin · February 12, 2021, 7:25pm

The Github page is definitely not as “user friendly” as the CSSScript page but I found it interesting because it gives a bit more information that wasn’t found on the original link.

The more I look at this and consider the way assets are handled in Webflow, the more I think utilizing the Lazload script is not necessarily the right move here. The fourth step you mention (“Place your thumbnail in a folder set in JavaScript”) is easy enough to achieve—as we know the domain where the assets are held—however Webflow generates additional, unique alphanumeric characters before file names after they’re uploaded that make this difficult.

I believe that the way Webflow handles the video elements may be the main culprit here, as it’s humorously loading the Embedly widget code for each video instance—rather than a single call for each. Looking at your old site, the videos are using the Vimeo default embed (which may be the better option here) and, if you’ll notice, the videos nested in the slider element don’t actually load until the slide is in view. Compare that to the Webflow site, and each video is immediately available when moving through the slider elements which means they are all being loaded at the same time. The delay after clicking play is expected, and this behavior is consistent regardless of how you choose to embed—the alternative would start loading the video content regardless of whether a user clicks to play which would lead to massive page sizes.

I’m curious what the page speed rating would be with the default embed code within an HTML Embed element rather than using the video element. If you have some time, I’d duplicate your page and try that out with the code below:

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe src="https://player.vimeo.com/video/YOUR-VIDEO-ID?color=ffffff&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>

Note: You can create the surrounding div element within Webflow instead (this is essentially a responsive container) as long as it’s using the same padding and position styles—which would require only the following code:

<iframe src="https://player.vimeo.com/video/YOUR-VIDEO-ID?color=ffffff&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

In addition to the code above, you’ll also need to include the single script on the page before the closing <body> tag:

<script src="https://player.vimeo.com/api/player.js"></script>

With those changes I’d imagine the page speed would be much improved and require minimal “upkeep” when adding new videos. I’m happy to continue answering any questions that may come up but I’m sure you’re comfortable taking care of the option I explained above. If for some reason you have extra questions or that doesn’t seem to help, I’m happy to hop on a quick call to chat about potential solutions for the project

iDATUS · February 12, 2021, 8:09pm

Mike, I spent a solid 4-5 days on lazyload youtube then tried vimeo and dropbox but couldnt get it to work. My question is whats the difference to putting a JS in a textfile vs page body or embed code on the page?
The only option I didn’t try was the text file so before I consider having another go just wanted to clear up if there is a difference or not.

For Chuck if you use Webflow lightbox pointing to a YouTube video you don’t get any preload.
You can link all the videos up, I did that for one of my pages showing webflow editor for users.