Streaming live at 10am (PST)

Page Load Speed


#1

Hi Webflow,

Apologies if this in the wrong category.

I ran my new site through Google’s page speed tool and got this optimisation recommendation:

Is anyone able to shed any light on this for me please?

Live Site: https://www.mesafc.co.uk/
Share link: https://preview.webflow.com/preview/mesafc?preview=d633839e14d0f3dc0e24bb11763771dc

Thanks,
Rob


Eliminate render-blocking JavaScript and CSS
Remove Render-Blocking JavaScript From Your Website
Render-blocking JavaScript and CSS
Google analytics speed improvements
Render blocking javascript
Just with nav bar Google Speed is 67-100
Optimizing images for Google & removing render blocking Java Script
2017 Eliminate render-blocking JavaScript and CSS in above-the-fold content
#2

Hi @roblewi5, there are two things being addressed in the Page Speed report, which indicate that:

  1. The CSS is being loaded from an external url, and pagespeed is asking to have that optimized, perhaps by loading the CSS inline. At the moment however this is not possible to change so that message will continue.

  2. There is some script in the head of the site, that is required for all Webflow sites and cannot be removed. Page speed is asking to remove the scripts from the head and load that somewhere else, such as in the Before Body of custom code, however this too is not something that can be changed at the moment. There is a wishlist item for this here: https://wishlist.webflow.com/ideas/WEBFLOW-I-180

Regarding pagespeed, that is only one factor/report, take a peek at this post which shows how pagespeed actually affects ranking: How PageSpeed Actually Affects Your Google Rankings

I hope this helps


#3

Hi @cyberdave,

Thanks for taking time to reply so comprehensively.

Website infrastructure is not my forte, and I was asking because I wondered if this was something I could action myself. I was not doubting Webflow’s abilities :slight_smile:

The article is interesting and thanks for sharing. I can understand the Amazon servers and Fastly CDN Network will comfortably keep the TTFB down.

I do have to explain to my clients, whom I pass on the cost of the hosting, is that Webflow uses the fastest and securest servers around. This is because some of them know hosting is far cheaper elsewhere, but they are unaware what they get for their money behind the scenes.

Regards

Rob


#4

I’ve had some issues with Google PageSpeed.

Instead… I tend to use GTMatrix… to provide more accurate numbers.

You can see the original discussions here:

and GTMatrix Result here


#5

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.


Google will now make page speed a ranking factor from July
#6

This question has already been asked multiple times on this forum.

Please start by reading these topics:

Here is an explanation about PageSpeed from Webflow’s CTO: