Hello,
During the page speed insight, I have some recommandations and I don’t find a way to improve it :
"Consider reducing the length of strings and the size of resource downloads or postponing the download of unnecessary resources to improve page loading. " :
I think my website is uploading lot of fonts but I only use two (muli & Arial) and their “sub-font” (muli black, muli regular…) :
how can I make my website faster by not uploading fonts I never use
When you were building your site did you try out a bunch of different fonts? If so, are there any classes remaining that aren’t being used or are set higher up in the CSS that are still calling those old fonts?
Hello,
Yes, I started with templates, then I modified everything.
I also tried a lot of fonts that I have now deleted.
I have now only uploaded a writing font (muli) with its derivatives (muli black, muli regular etc…) but the problem remains.
Sharing your read-only link would be helpful, those look like Google fonts based on the fonts.gstatic.com references. My guess is you have old classes that are still referencing those somewhere. Although there was a thread recently about an issue with Webflow loading more fonts than necessary: Open sans - Webflow adds unused fonts file requests - entire site - #9 by cyberdave
Without seeing your published and read-only it is hard to troubleshoot.
hi @sam-g ! Thanks for your message.
Please find attached my read-only link : Webflow - Poptribe
best regards
@lemundibu try going to your style panel and cleaning up the styles there:
You have 705 unused styles on your site right now. If you are done with the layouts, you probably don’t need them anymore. If you aren’t, and you paid for a template, wait until you finish building your site and then hit the Clean Up link. That way you still have the styles available from the template until you are ready to go live.
Try that and republish.
-Sam
Thank you for this information !
I started with a free webflow template and use other projects to build some part of my website.
I had no idea about this clean up before your message.
My website is almost finished (may be few modifications but most is finished)
If I clean up my website now, what’s the impact ?
best regards
@lemundibu it just removes style rules / classes that are not being used anywhere on the site. So let’s say you used a template and it had a grid system with 12 classes for different column widths, and you never used the style for a column width of 2 (.col-2) it will remove this class from the site and if in the future you were trying to create a .col-2 the style would be gone and you’d have to create it yourself.
So it is somewhat destructive, but also can clean up a lot of issues and I would recommend doing it at some point.
Thank you ! I just did it !
No impact in the design so this is great, but still no impact on the page speed insight (I still have the schem with the message : "Consider reducing the length of strings and the size of resource downloads or postponing the download of unnecessary resources to improve page loading. "
Do you mind sharing your published site link?
Yes ! www.poptribe.co
If you open your css file: https://uploads-ssl.webflow.com/5c0a2238718a0a5aec8b4886/css/yacines-stunning-project.webflow.b2a761556.min.css
Use search to look for the fonts being called:
You can see the selectors that are calling these fonts, which there are a few for each of the three listed in the screenshots (montserrat, open sans, varela). You can then find those elements on your site for instance finding your h4:
You can see Open Sans is selected. You should clear that option by option clicking on the blue labels next to Font and Weight.
As a side note, you don’t need to assign properties for every class you are creating. For instance if you create a class on your H1 here and then redefine all of the font styles that are identical to your plain H1, you are creating a lot of redundant CSS rules on your website, which makes it much harder to update/manage over time.
Imagine if you have to change the font family for every H1 on your site. If you have that defined in one place, the basic “H1” selector (“All H1 Headings” in webflow) you can simply update it there vs having to go through every H1 you have given a class for and then re-assigned the font family on. If you are using Muli on every H1, you don’t have to define it on every class you are adding on top of an H1. CSS cascades from the top down, so if you have defined Muli on the plain H1 selector, you don’t have to define it on “Heading 42 Copy”.
Styles set on H1 will cascade down to your Heading 42 Copy, unless they are overwritten by the more specific selector.
H1 > Heading 42 Copy
Does that make sense?
Thank you for all these very very valuable informations.
I will work on it and come back to you when I’m finished !
Thanks again !
Nice site! I should look into this influencer stuff one of these days.
Thank you ! Feel free to send me a message if you want to try our solution !
Hi,
I change several things as you show me.
It’s quite complicated to find each font. I think I’ve found everything and modified everything but there are apparently still some fonts left if I rely on the speed test page.
The effect on the speed of the site is very small, actually, because the fonts are always recognized by the Google page speed insight.
May be I did a mistake somewhere
Best regards
@lemundibu I see references to those fonts in your css still:
In order to do this you need to find these elements one at a time, for example:
You need to find the element with the class of “footer-link” which may be written as “Footer Link” in Webflow and remove the property. You need to do this with each instance for each of the fonts or they will continue to be called.
The time taken for your site to load affects not only it’s ranking, but it is much more convenient for visitors to the site if it loads quickly. The score can be from 0 to 100 points. The higher the score, the better. If the page scored more than 85 points, then it loads quickly. To check it is possible with the help of https://sitechecker.pro/speed-test/
High site loading speed has a positive effect on conversion and sales on the site and increases confidence. Search engines encourage fast sites when ranking in SERPs and pessimize slow sites. Your site is becoming accessible and convenient for users of mobile devices such as smartphones and tablets.
i had the same problem with my website and even decided to hire a programmer for fixing it based on this article - https://greenice.net/find-great-web-developer/ but the issues were resolved. We deleted a ton of “zombie” pages on the website and it helped.
