Streaming live at 10am (PST)

Fonts uploading / Website speed

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…) :

image

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

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 : https://preview.webflow.com/preview/yacines-stunning-project?utm_medium=preview_link&utm_source=designer&utm_content=yacines-stunning-project&preview=688c4a2b572bbffbd15aacb8da5e1610&mode=preview

best regards

@lemundibu try going to your style panel and cleaning up the styles there:

image

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

1 Like

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

1 Like

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?

1 Like

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.

1 Like

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:

image

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.