I am trying to understand how to read the comments below, so I could improve the (very) poor speed test results I’m getting. Can anyone advise if there are quick fixes that can be done?
This is the full report and screenshot:
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
select these and optimze all the png and jpg image with https://tinypng.com/
Thanks @Moheen. I did that, but I don’t think that’s the issue. If I understand it correctly the 6.6 seconds go for unused JS code.
As for the images, Webflow scales them down automatically as far as I know (unless they’re background images, which they are not). Am I right?
@pitz can you share read only link I want to check the images sizes and animations and website structure.
your images are not optimized first of all optimize all the images
and improve website structure and use BEM for css classes names & Why did you on eCommerce functionality on your website?
Thanks again for taking the time to help @Moheen. I read this article about Webflow responsive images a while back. That’s why I stoped optimizing the images. As I understand Webflow is doing it automatically, but maybe someone from Webflow could jump in to clarify?
As for cleaning the CSS, yea that’s nice to do what the impact on site speed is minor.
I’m trying to use BEM as much as possible, but this site is still in development and nothing is set in stone, so it can get messy. Again, this is not something that should affect loading speed that much.
You mentioned eCommerce. What do you mean? This site does not have any eCommerce functionality. Can you clarify?
A few simple tips:
- Remove any unused interactions (if there are any)
- Compress all images
- Instead of using Webflow’s Google font integration, download the font you’re using and manually upload it (and turn on the display: swap toggle). I saw you’re using Adobe fonts as well, but I’m not sure if you’re able to download them like Google fonts?
- In case you use third party scripts (embedly etc.), enter the script only on the pages they’re needed, not site wide
Webflow does seem to serve properly sized images based on screen size, but there doesn’t seem to be any compression involved. So this always has to be done manually.
Hi @pitz. Looks like you’ve received some good help about image file sizes and CSS, but I still see one big opportunity for you to improve your speed.
The big drag on your load time is the YouTube JS. Ironically, it’s Google’s product that’s causing you to get a slower speed on Google’s web dev tool.
The best way to avoid this is by loading a Thumbnail Image within a Lightbox for your video, so when the page loads it is only looking for an image and not a video with all of its associated JS. Only when someone clicks on your thumbnail will the video be loaded.
Some platforms provide a tool to do this, but Webflow does not. However, their are a few different workarounds. The one I’ve used is a Lightbox with a Thumbnail Image inside it. Under the Lightbox Element Settings, I’ve added a YouTube media link.
You can see the implementation on my site here and on other resource pages Top 10 Beats Every Music Producer Should Know
This page gets a PageSpeed Insights score of 96.
The only downside is that your page will miss out on the related SEO benefits of having YouTube videos embedded. But since Google’s Core Web Vitals assessment is currently having a big impact on whether your page will be served up or not, speed may be a better bet.
Since I rebuilt and launched our site in June 2021 with Webflow, we have increased our speed scores from 20’s up to 90’s, and we have seen 5x as much traffic.