Streaming live at 10am (PST)

Website Ranks Poorly on Google's PageSpeed Insights (~35/100)

As someone who values the importance of a website’s loading speed, I was surprised to see Google’s PageSpeed rank one of my sites consistently in the 30–40 range out of 100 on mobile (desktop isn’t much better).

And the marketing team pins this as one of the largest factors for people dropping off between clicking on the ad and the webpage loading. No surprise there.

I’m wondering if you could check out the site and let me know if anything obvious stands out to you:

Couple of things to note:

  • The site pulls episode images from an RSS feed, which get upscaled to 3000x3000px by the podcast service to meet Apple podcast requirements. We do our best to upload the most compressed originals.
  • The mp3 player pulls the audio file from the RSS feed as well. Removing these didn’t seem to improve page speed.
  • We are using Memberstack to control gated content, Lucky Orange to monitor website use, and Font Awesome for our icons.

Here’s the link to run the speed test yourself:

Is the PageSpeed calculation an accurate representation of a real user’s experience?

What are some things you would try to help with the loading speed score?

Thanks!

Yes. I prefer lighthouse v6+ for a real world pan. You can also use the waterfall in the network tab in devtools for great insights into what is really happening.

Start with the actionable feedback of the tool. Dropping the page size would be a start. 12MB+ has ways of sending users to other sites fast.

Performance tuning is an artform.

Thanks for taking a look Jeff. Totally agree. Would you mind taking a look at the results below with me? I want to make sure I understand what they’re saying:

1. Serve Images in Next-Gen Formats

What do they mean by “next-gen formats”? Is this something Webflow supports? Also what do they mean they’re unable to locate the resources—I double-checked on my Webflow Canvas and those images are indeed being used on the page.

2. Eliminate Render-Blocking Resources

Is there a better place to put these resources? If I understand correctly, isn’t that the main CSS file provided by Webflow? As far as Memberstack, that’s located in the Custom Code section at the top of the head tag (as recommended by their team). Is there anything can be done for these two items above?

3. Remove Unused JavaScript

As far as I understand, all of those are being used.

And those are the heavier hitting items that are showing up in the “Opportunities” section. What can I do here for these?

I also see that the site is downloading Font Awesome, which is around 1mb—anything I can do to reduce this? I think they offer a way to create a custom library of icons so you download only the icons that you are using for the site. Do you know if this method is easy to work with on Webflow?

Also, does anybody know if there’s a image compression program that’s Zapier-compatible that I could run my images through before they get deposited into the CMS?

Many thanks :raised_hands: :raised_hands:

1,2,3 are not things you are going to be able to improve on.

  1. Webflow does not generate nextgen formats nor does it support them in the asset manager. I have a couple of clients where we use img-ix or cloudinary and hand off image generation to their scripts which will return WebP automatically when the browser supports it. Requires embeds.

  2. You can’t further optimize CSS delivery with Webflow. It’s a black box. You also can’t update the memberstack js. That’s out of your control.

  3. Each one of the scripts is outside your control. Choice you have is to not load them which speeds up your site a bunch. Always funny to see Google complaining about Google provided sources.

Further optimizations could help. But like your Doctor, I am not free.

1 Like