Page Load Speed

1. Eliminate render-blocking CSS

a) By in-lining CSS styles on the page itself rather than a separate stylesheet file

Even if Webflow allows you to load the styles in the page itself (inline), it will be worse-off for the user, as the styles are no longer a separate file and can no longer be cached separately from the structure of the page. So if your user goes to another page of your site, they will have to completely download all the styles for your entire site on the new page, increasing loading times.

Making the styles inline on the page might only work well if your site is a single-page application with minimal styles.

Your project actually has three stylesheets that Webflow combines and minifies into a single file. I wouldn’t call that “minimal” as the process behind this is complicated due to all the options they provide in the project dashboard.

b) By asynchronously loading the external stylesheet

Yes this is actually possible with and without JavaScript. The upcoming HTTP2 protocol will also handle this automatically, so no action is required.

2. Eliminate render-blocking JS

If you do not use any Google font AND Typekit fonts in your Webflow project, the render-blocking scripts that Webflow inserts for these two font libraries will not be placed in your site header. As simple as that. (The other Google Analytics script already has the async attribute).

Typekit:

<script src="https://use.typekit.net/dls3yci.js" type="text/javascript"></script>

Google Fonts:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" type="text/javascript"></script>

The script above is also known as the Web Font Loader, which has a slight improvement in performance instead of the alternative blocking CSS which looks like this:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" type="text/css" />

a) By asynchronously loading the external script (for Web Font loader)

Yes this is possible BUT you will get a more noticeable FOUC. See https://www.lockedowndesign.com/load-google-fonts-asynchronously-for-page-speed/

The workaround described in the above link will only work well for a specially designed site with matching fallback fonts, not for general cases where users pick their fonts from a dropdown list like Webflow.

b) By in-lining JS on the page itself (for Web Font loader)

Yes it’s possible, but you can’t simply inline an external resource that isn’t created by you that might change its implementation/API suddenly and break your site.

1 Like