Help with page speed

Hi,

It’s taking at least 5 seconds for my page to load. I think most of that has to do with the fonts. Google fonts to be precise.

Here is also some more info: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.flowglobe.io%2F

This any of the following would help from this page: Case Study - Analyzing Web Font Performance - KeyCDN

This looks promising, but I’m not wholly sure how to go about implementing it.

Thank you and best, Nathan

site: www.flowglobe.io

https://preview.webflow.com/preview/flowglobemedia-nathan-steele?preview=a78b85db5b213b8d77fda00db8d59ed4

Hey did you check your project fonts? Try removing all the variants not being used. If there’s no bold remove them. Especially those fonts not used period, remove them. But I’m more inclined to look at images and their animations. What did that show?

1 Like

Why you need endless fonts? Lato & open sans & Raleway & and any google font out their :slight_smile:

No way to speed up your site like this (Blow out requests + Each request take X time + You get this issue llelize downloads across hostnames + Design issue - its better to use 1-2 fonts in most cases). In the next visit your site speed is OK (Because cache).

Start from this:

Next minimize some images:

Last minimize your logo (Its 1600px wide - no need for that - in the design its 330px).

1 Like

That helped a lot!

Thank guys @Siton_Systems @garymichael1313

@nathanphilsteele @garymichael1313 @Siton_Systems

Try to avoid using Google fonts and just upload your own.

Let’s say you were ONLY using “Open Sans 400” (normal weight) on your site,

Webflow actually loads ALL weights and styles (italic/italic + bold/italic + light/etc.)

This is what happens in your site header:
https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic

As you can see, all the 10 different “Open Sans” variations are loaded.

Worse still if you are using MULTIPLE Google fonts, you multiply that effect by the number.

Open Sans + Merriweather for example:
https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic%7CMerriweather:300,300italic,400,400italic,700,700italic,900,900italic

2 Likes

In fact, I’ve already mentioned this here (an empty project loads ALL variations):

How does the website load fonts - #4 by samliew

1 Like

Thank you! @samliew

Best,

Nathan

This topic was automatically closed after 60 days. New replies are no longer allowed.