Reduce Page Speed

Hi there,

I am running ads to this page here: https://www.cleanenergyusaco.com/power-of-our-sun/l/swap-your-utility

And my bounce rate is almost 90%.

After running a test on Pingdom, it gave me a C grade.

Any suggestions here? I’m not really sure how to implement the Pingdom suggestions

Note: bounce rates are not necessarily due to page loading performance, but I do agree for a simple page, it is heavy.

I definitely see the infamous, still horribly-broken Google Font HTTP request “bug”.

Note 46.7% of your total page size (in KB) and 42% of your total HTTP requests are from fonts alone. You made the unfortunate error (sarcasm) of choosing one of Webflow’s default fonts. See this thread for more details: Open sans - Webflow adds unused fonts file requests - entire site

One workaround, while lengthy and tedious, is my post here: upload your own Google Fonts, in only the weights you use.

@PixelGeek, is Webflow ever going to address the horribly bloated font loader? This bad webdev practice was called out in 2015 by a web design startup; they’re new, but they’re good. Do note this bug affects 100% of your customer base.

For web design, you’ll want to pick which weights you use carefully: loading all nine weights of Exo 2 could seriously slow down your pages.

2 Likes

The promise in my ad copy is the same promise on the lander, and the copy uses a lot of language only people who have researched solar panels would know… I’m thinking since I’ve got my offer and audience down, it’s likely a page speed thing.

Anything i’m missing?

Also…

See the main header font here…

https://www.cleanenergyusaco.com/

I setup the font following your directions and must have made a mistake somewhere on here.

Top is clearly NOT montserrat

It’s important to take into consideration @TG2’s suggestion as bounce rate could be affected by page load time, however I’d imagine this is due to the expectation of visitors after clicking on the ads. What’s the CTA you use? Also, why are you requiring another click before visitors can do what you’re sending them to do (see if they qualify)?

For every additional click you require from your users you’re going to see a drop-off, and depending on your ad copy, your users may expect to see something more informative. For example, if your ad says something along the lines of “See if you qualify with our 30 second survey!” and they are greeted with another page stating the same thing, they’re probably not going to engage. If instead you brought them to a page that includes some additional information about average savings alongside the survey questions, they may be more enticed to stick around and fill out the form.

I’d recommend testing some alternate versions with more valuable information and no extra clicks (outside of submitting the form) to see if that helps out. While there are some added requests and additional page weight added due to the font bug mentioned above, I don’t see any evidence of that causing concern within Lighthouse:

image

That is definitely unusual. The CSS seems to be set correctly, but there’s no custom font downloaded, so it defaults to the browser’s default san-serif font (Segoe UI on Windows, IIRC).

I mean, there should be a font from uploads.ssl.webflow.com (your custom uploaded fonts). My site below:

2020-06-04_21-12-20

Unfortunately, on your site, there’s no custom fonts being downloaded: they’re all from Google. There should be at least one from Webflow.

Some quick thoughts:

  1. Which font file type did you upload to Custom Fonts? Ideally, Chrome (which I’m using) supports all the major types (TTF/OTF, WOFF, WOFF2, SVG etc.), so it shouldn’t be a problem. WOFF & WOFF2 are the main two for modern browsers.

  1. I also wonder if there’s an issue with the font name needing an escape character, for the 's in the name, so that it actually is Jacob\'s Montserrat 600. Would it be possible to try a file name without an apostrophe?

image

  1. The final solution might be removing the current font uploading it again & assigning a new class, instead of a combo class. Webflow (well, CSS, too) does not always play nice.

//

That’s valid: Lighthouse doesn’t necessarily mind all the fonts being loaded (they do load concurrently & from Google’s speedy CDN).

//

I do agree & like @mikeyevin’s suggestions. A few other small notes:

  1. Do you know if the bounce rate is before or after clicking on “Find Out If You Qualify”? I did notice that the actual survey has a quite large 3.8 MB JPEG loaded from the survey provider as soon as you open the survey. That image alone (of a power meter) is 74% of the page size.

  2. On the /swap-your-utility page, perhaps you could consider enhancing its textual visual hierarchy and focusing on one large call to action statement, as it takes some time to process each line with equal importance that each have a separate request (“Take Our… Survey”, “Find out”, “Just click the button”, “Find Out If You Qualify”).

  3. Some positive CTA examples that might be interesting to look at. On a personal note, I think building trust is important, so users feel comfortable using a form, clicking on the home page link you have, etc. Perhaps stronger brand identity here on this critical page could help, too: more photos & more details about what is available. Maybe the page layout is the survey at the top of the page & more information follows below for those users who, like you say, already know a lot about solar (following @mikeyevin comments). So then users are like, “I know a lot about solar. It’s why I clicked this link. Ah, see, I opened the link now and I was right: this site definitely is showing me they know a lot about solar, too.” I think that second connection is maybe a neat improvement, where you can match “expectation = result” for those users who click on this link.

2 Likes

After reading your reply, I assumed it was the apostrophe in there.

Took it out and now working :slight_smile:

For some reason though fonts are still taking up a bulk of my content size on pingdom and its almost exactly the same. So I figure it’s still loading those fonts.

Regarding your 3 small notes: I have noted them and once I figure out the font issue I am going to make some changes based off those

1 Like

I worked on the textual hierarchy… You think this looks better?