I am looking for some help / tips on improving my lighthouse score. The speed element of my site is causing me to have a really low score which I am sure is affecting my rankings.
My site; www.our-trace.com is not complex and has normal scripts running like; gtm, analytics, fb pixel, memberspace so I wouldn’t have expected such a low score.
From my lighthouse report I have noted the big culprits for KiiBi and load time. If anyone has any advice I would really appreciate it - I am not a developer but will try my best to do anything needed
Large images in non next-gen format; I have looked into converting the images loading the site to next gen format ( webp ) but I then cannot upload these to webflow. Could you provide guidance on how I can solve this within webflow? (note some of the images on our homepage are loading from a linked collection database)
Remove unused Javascript; I am aware of the scripts/tags I have running on the site namely; gtm, analytics, memberspace, & fb pixel. One that is flagged in the files with a few seconds load time and 122.8 kIB is the uploads-ssl.webflow.com js. Could you explain what this is loading and if there is a way for me to reduce the load time on it?
Eliminate render-blocking resources ; Is there a way to deliver only the critical JS/CSS inline and defer the non-critial? This has a transfer size of 54.4kiB
Efficiently encode images: I can easily run my images through an optimiser but there are many other options noted here such as we webp formats, CDN
Fonts & fonts displaying invisible on load;** I can see a large number of fonts loading on page load - is there a way to reduce this? It seems inefficient. If i want to use the font-display CSS would i need to add a html div to the page and include the code that way? See here for more information on what i would like to solve for.
CDN;I currently have the CMS subscription which defines that the closest servers will only be used for america and parts of europe. Are you able to provide an estimate to the speed improvement of my site if I moved the “business plan” with Global CDN?
Defining explicit heights and width to my images ; when an image is set to auto does this prevent that from happening? This seems like a simple one to target but I am unclear on the setting in webflow to do this.
**8. Another key area taking up 2.8s of load is the thread work ; could you explain how I can minimise the main thread work namely script evaluation
can you provide a read-only link to your Webflow site, so I can take a look on your styling?
I’ve just taken a little peek on your code and I think there can be done some improvements. Especially on your fonts. Have u already tried to embed an HTML File for it?
Hey nico - thanks so much for that, super clear and easy to follow! I have done it but unfortunately I am not seeing a big increase in my lighthouse score. I don’t suppose you would have any other tips?
That’s pretty tricky. You could try to reset all of your montserrat fonts (also on the all body tag) and then put this code in your Head Tag in the project settings:
“code on my docs document”
Remember to make a back up before you do that.
For this to work, make sure that all your montserrat fonts are reseted. On every body/div/section/column etc.
Hope that helps!
If you’ve got problems implementing I can do another loom for you.
THanks nico - i think i just need access to the doc.
QQ: if the style is blue it needs resetting - does this apply to the size, alignment, colour? If so, when I reset this makes the style something I don’t want - in this case should I be resetting the styles of the class it is inherited from?
Thanks so much! Ive made that change and my score on pingdom has gone up a few points which is great. Do you happen to have any insight as to why scores on pingdom come out so much better than lighthouse? My lighthouse scores are still really bad!
I took a peek at your site and the only low scores I’m noticing in terms of performance are on mobile (in the 20s) with desktop coming in around 75.
Outside of the scripts, it looks like there’s some potential to shave off some page weight in your imagery. I’d make sure you’re loading images at appropriate dimensions and running those through some sort of lossless compression like TinyPNG.
The carbon footprint section (tree image) for example is over 200kb even though it’s only rendering at 300px wide, while each of the climate positive project images in the three columns appear to be a similar dimension with those images coming in at 140kb, 91kb, and 151kb respectively. The hero image (which is the largest on your page) is nearly 350kb but still showing relatively blurry on my 1080p monitor since it’s only 1440px wide. For that file size I’d expect something around 1800-2000px wide. As a test I tossed the exact image downloaded from the website into TinyPNG and it was reduced by nearly 140kb (or 41%) and I see no change in visual quality.
Obviously these aren’t the only factors to the lower scores, but I always recommend folks take into consideration image heft first as it’s the easiest to solve.
That said, I honestly feel like the PageSpeed score is overhyped in its affect in your overall SEO efforts as I’ve seen many client competition sites in the teens on mobile performance, with optimized sites still falling into the higher end of the “bad” (red) score range. Obviously this will have some effect on ranking, but very few sites even rank on the first page organically nowadays anyway (most of it is paid/promoted) and visitors are finding websites through other means like social media with greater frequency. Couple that with increasing mobile data speeds and you’ll find that most users are still converting on sites with average to poor PageSpeed scores.
I recommend reviewing analytics and making optimizations based on that data, keeping in mind that things like content and marketing messaging can have a huge affect on things like bounce rates as well.
Make sure your preview toggle is still turned on √