4

I am trying to use HTTP/2 server push, powered by Cloudflare. I am trying to push two assets using the following HTTP Header...

Link: </img/whysoslow-hero.jpg>; rel=preload; as=image, </lib/bootstrap.min.css>; rel=preload; as=style

The image is reference as a background image in a stylesheet and this is being pushed and then used correctly (downloaded once).

However, I am referencing the stylesheet in the HTML of my page like this...

<link rel="stylesheet" href="/lib/bootstrap.min.css">

...and it's being pushed but then also being fetched as well (downloaded twice).

My website is... https://whysoslow.co.uk

Here's a screenshot of the Network tab in Chrome showing that the assets are pushed, but then the stylesheet is downloaded again...

Screenshot of Network tab in Chrome

Can anyone explain to me why this is happening and how I can resolve it?

EDIT:

I've since noticed that the console is saying...

A preload for 'https://whysoslow.co.uk/lib/bootstrap.min.css' is found, but is not used due to an integrity mismatch.

So it's the SRI check that's failing. But I don't understand why, it's fetching the same file, so it should be identical. Why would they not be identical?

Rik Lewis
  • 750
  • 4
  • 10
  • Why are you using SRI on assets your domain serves own? That's usually used for assets not under your control on another domain (which you then can't push). – Barry Pollard May 24 '19 at 19:40
  • I use Gulp - the assets were originally loaded from CDN but moved them to be locally hosted as I was making performance improvements. I've removed the SRI now, because like you say, not necessary now. – Rik Lewis May 24 '19 at 22:02

1 Answers1

2

Now that I've figured that out, I've also managed to find the answer...

How to preload script using integrity and crossorigin

Short answer: You can't preload and use SRI, it's not supported yet.

Rik Lewis
  • 750
  • 4
  • 10