â–Ľ
Streaming live at 10am (PST)

Again Google PageSpeed

#1

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 those resources directly in the HTML.

Remove render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js

This is one of the reasons I am getting a 60 / 100 score.

55 PM
Screen Shot 2017-07-31 at 10.04.55 PM.png1045x234 32.2 KB
50 PM

The other 3 are the 3 css files…
/css/normalize.css
/css/components.css
/css/client-pqc-sh-v3.css

Page Load Speed
#2

Here is a writeup about PageSpeed from Webflow’s CTO:

How PageSpeed Actually Affects Your Google Rankings

#3

Thanks. I’ve seen this.
The post appears to contain a reference to Webflow Hosting.
I’m not using Webflow Hosting.

The site is question is 1 of 10 small websites

  • on a brand new top-of-the-line dedicated server…
  • which happens to be on a 10GB port.

I’m not having a speed problem.

Everything is fully optimized.

with the exception of… what I cannot change…

  • which is - render blocking js.

And that’s what Google PageSpeed is complaining about.

@brryant

#4

webfont.js has to be in the <head> to reduce the FOUC. You can easily remove that error by not using a webfont (Typekit, Google Font). That script isn’t Webflow specific, but user-opt-in when they decide to use a Typekit or Google Font.

Again, I’m not quite sure what the fixation is on Google Page Speed. It’s purely heuristic based, and the score has zero bearing on how your page actually loads, or how it ranks in SEO.

Could you help me understand a bit more what your concerns are?

#5

Have you thought maybe…
it’s a client concern ?

When a client see’s that their website is scoring 61 out of 100…
they become concerned. And it’s Google who’s saying it’s “61 / 100”.

And everyone knows Google. And many, many people think
if Google says it. It must be true. So clients become concerned.

When my client is concerned…
I become concerned.

I’m a Webflow client…
maybe this is not about a fixation. Maybe it’s about a concern.

#6

Try plugging in different Google sites into Page Speed Insights and demonstrate to the client that even Google themselves don’t always follow their own “insights”.

e.g. https://cloud.google.com/

image

image

Page Score matters!
#7

not a bad idea…
using the same url you provided…
it appears Google not consistent with the scores.

34 PM
Screen Shot 2017-08-01 at 5.07.34 PM.png702x791 45.7 KB

#8

Oh wow, that’s interesting to see. Wonder why that is.

#9

not sure… but I’m keeping both screenshots handy.

Whenever a client complains about it…
I’ll just show them the screenshots.

You know what they say…
pictures are worth a thousand words.

#10

Same here.

I read the CTO writeup, and I understand that Pagespeed score is not having an effect on my sites’ speed, but it is a factor that clients have asked about, especially when coming from Wordpress (with plenty of ways to achieve a high score).

I hate to compare to Wordpress…but is there a way we could explain to them why it doesn’t matter to have a low Pagespeed score?

#11

share this response with your clients:

not even google’s own websites score high on their own tool.

#13

FYI, even the services of Google does not have 100 points

#14

@Michael_Messina
Pixel Geek is pointing to the correct post…
however… take a look at the results here

#15

That’s a solid idea!

No idea why Google either doesn’t follow their guidelines or this tool sets a stupidly high benchmark…

#16

Hi!

I discussed same issue with webfont.js earlier with some colleague, he decided to use one of those features:

  1. <script async src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" type="text/javascript"></script>
    2.<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="styleshet" lazyload>

I believe it can help to get some more point in PageSpeed Insights, but there can raise some issues with FOUT/FOIC in browsers.

As @PixelGeek mentioned - there is no sense in reach such 100/100 in most cases)
I’d recomend to have some additional tests with tools like Pingdom FullPageTest or WebPageTest - to see what’s really matters and affects load time most significantly.

#17

Plus if you are serious about pagespeed, you would need to look into SSR/CSR HTTP2.0 anyway. For instant loading, just add sw-precache.

Also, find out whatever makes up your app shell (like navbar & Co) and put it in the head of your document, lazyload the rest.

Keep file sizes to a minimum, don’t load scripts where they aren’t needed and if, async/lazyload.
Dont forget to minify and gzip them boys as well.

If you want to get serious with speed, you should probably also get started with something like fiddler, though this tool is very useful for many more cases and for web devs in general.

Best,
Karl-Heinrich

#18

I’ve stopped using Google Page Speed
in place of other services
primarily gtmetrix

Here’s are the results for a site I tested a few days ago…
boef optimization and after. Still have a little work to do though.

opened #20