Page Load Speed

[roblewi5 (Rob)]

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

[cyberdave (Dave S.)]

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: Ability to toggle On/Off Modernizr script in the | Webflow Wishlist

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

[roblewi5 (Rob)]

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

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

[Revolution]

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:

Again Google PageSpeed

Anyone encountering this issue with Google PageSpeed ? How is it fixed. Possible Optimizations Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of th…

and GTMatrix Result here

Page Load Info for one of my projects

Using gtmetrix Before optimization - Export Webflow Project → Minify → Upload → Serve [21 PM] [23 PM] After optimization Step 1 - Export Webflow Project → Minify → Upload → Serve [46 PM] I re-ran the test… and got 2.2s for the Fully Loaded Time instead of 2.8s [14 PM]

[samliew (webflowexpert.com)]

1. Eliminate render-blocking CSS

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

@cyberdave

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.

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.

[samliew (webflowexpert.com)]

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

Please start by reading these topics:

• HTTP Compression, CSS/JS Minification, Eliminate Render Blocking, and PageSpeed
• Page Speeds / JS Minification
• Google Pagespeed Insights Score
• Page Load Speed

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

• How PageSpeed Actually Affects Your Google Rankings