Server Push for Fonts

I’ve been able to implement server push for CSS and JS, using the Cloudflare Plugin and the added line of code in wp/config, as recommended by Cloudflare.

On another site I’m inlining CSS and preloading my self-hosted fonts, which load super quick.

However, they are called every time due to the preload hint, unlike Server Push that keeps a diary and doesn’t push them twice until the next session.

If I just set the link header in .htaccess as Header add Link <"/fonts/poppins.woff2>; rel=preload", as per the Apache documentation, the fonts are pushed, but the problem is the fonts are still loaded normally as well.

Adding the full <“font/poppins.woff2>; rel=preload; as=font/woff2; crossorigin” only preloads the fonts rather than pushes them.

It’s not that I need to save any speed, but rather don’t want to waste people’s resources.

Any help is appreciated.

From the image, I’m not seeing anything loading twice. But if the font is pushed, then loaded normally, wouldn’t that second load come from the browser’s cache?

Yes, that’s just the preloaded fonts.

Here’s one where they’re loading twice…

Although I’ve found some more information from an earlier thread.

https://community.cloudflare.com/t/http2-server-push-woff2-files/77873/2

Just trying that now.

Using my browser’s Dev Tools, it doesn’t look like they’re loaded twice.

Yes, mine seems the same - different to WebPageTest. Perhaps that’s because I’ve got a service worker running, too?

There’s still something not right, though, becasuse Server Push is fine for CSS and JS. It’s only fonts that are causing me grief. :slight_smile:

fonts require preload to have crossorigin even if they are self hosted but they shouldn’t be loaded again a second time. I tested my Wordpress blog which preloads a self hosted font and I do not see fonts loading a 2nd time only at all https://www.webpagetest.org/result/200326_PX_0f5bb2f82ae87bc59ba4b650b1b2ec2c/3/details/#waterfall_view_step1

But are you referring to CF HTTP/2 Server push requirement to just use rel=preload ? In that case yes HTTP/2 server push will push the asset everytime. The reason is HTTP/2 server push is not browser cache aware and AFAIK Cloudflare’s HTTP/2 server push is not browser cache aware either.

Usually outside of Cloudflare HTTP/2 on origin web servers such as Apache or Nginx their HTTP/2 implementation allows for configuring browser cache aware HTTP/2 server push

If you have own self-hosted Service Worker depending on what it’s doing it could call the asset again i.e. pre-cache Service Worker with revalidation checks. That is normal and I see it on my forums which as Service Worker precaching too https://www.webpagetest.org/result/200326_CX_0e56ff1f03f35d5535fa4f48d75a21a7/3/details/#waterfall_view_step1.

It’s balance to be made, Service Worker pre-caching will only show up as extra requests for 1st visits which your standard webpagetest 1st visit tests would show. To properly evaluate it’s effectiveness you need to test for return/repeat visits as that is where Service Worker pre-caching is most effective as unchanged assets are located in visitor’s browser cache and doesn’t make a network request.

Example for my forums with Service Worker pre-cache doing a webpagetest with 1st, 2nd and 3rd visit in same session testing caching effectiveness at all levels from Cloudflare CDN cache, Service Worker pre-caching and origin Nginx cache https://www.webpagetest.org/result/200326_BG_7e64dc55e0ef030e136c28b8f0eec02f/

where 1st visit waterfall shows the Service Worker pre-cache 2nd request for revalidation https://www.webpagetest.org/result/200326_BG_7e64dc55e0ef030e136c28b8f0eec02f/3/details/#waterfall_view_step1

then 2nd visit waterfall within same webpagetest session shows effectiveness of caching at all levels to not request already cached requests including fonts - leaving just my advertising requests assets https://www.webpagetest.org/result/200326_BG_7e64dc55e0ef030e136c28b8f0eec02f/3/details/#waterfall_view_step2

the connection view differences between 1st visit and 1st return visit in webpagetest

Basically, if you want to save visitor’s data bandwidth DO NOT use Cloudflare’s HTTP/2 server push as it isn’t browser cache aware so will push the asset to return/repeat visitors even if it’s already in the visitor’s browser cache.

1 Like

Thanks for the feedback, just working my way through it all.

Your font is preloaded - not pushed - so it works like mine do preloaded.

When the files are pushed it says SERVER PUSHED when you click on each item. It also says SERVER PUSHED again for each item under the big green list further down the page.

Mine only load once when they’re preloaded, as they should, but from what I can gather they are called on repeat visits, whereas pushed resources aren’t.

Apologies if that wasn’t clear.

I don’t think it’s a problem with the service worker, but will have a full read of your information. Cheers. :slight_smile:

(My service worker is self hosted, but it’s a proper Workbox script, just repackaged in one file rather than 4 x external calls so is written properly - I’m not smart enough!)

Regarding speed. What I mean is the fonts are loading rapidly on Preload, but the pushed files are only pushed once and you set that in the Apache Push Diary.

For example, a day would mean they’re only pushed once per day, if the user visits the second day it will be pushed again.

So I’m only going to save 50 milliseconds pushing rather than preloading, but it’s the 304s I wish to erradicate. Cheers.

@eva2000 still can’t find a solution for this, but here’s my findings…

  1. Server Push and Browser Cache TTL Respect Existing Headers. Files will be pushed again on repeat visit in WebPageTest.
  2. Server Push and Browser Cache TTL 1 year for example. Files will only be pushed once.
  3. Presumably Cloudflare keeps track of this via the sever push diary I mentioned only when they’re setting the headers?
  4. Point being, it’s better to push once a day/week/month than preload every single time.

I also noticed that Filament Group have some fonts that are pushed, but not used, on their website. Maybe just forgot to remove them - or perhaps run into the same problem when adding crossorigin?

Thanks for pointing out the PWA score in WebPageTest. It’s something I’ll definitely be using in the future. :slight_smile:

That is expected behaviour for HTTP/2 server push as it isn’t browser cache aware as outlined in my above reply posts

that must be unique to Cloudflare and i haven’t tried that

Not sure you’d have to contact CF tech support to get hold of someone who knows it’s specifics

Not really, HTTP/2 Server push should ideally be browser cache aware but it isn’t technically out of the box without the aid of the web server or some mechanism. Whether CF has such mechanism for CF set browser cache TTL headers is unknown. There is no problem with preload being called everytime as it is browser cache aware unlike HTTP/2 Server push

With how HTTP/2 Server push in generally is done, it’s easier just to use preload. The difference in perceived render time for page load isn’t much.

To be precice you said: “But are you referring to CF HTTP/2 Server push requirement to just use rel=preload ? In that case yes HTTP/2 server push will push the asset everytime. The reason is HTTP/2 server push is not browser cache aware and AFAIK Cloudflare’s HTTP/2 server push is not browser cache aware either.”

So I’m saying, no it doesn’t push the asset every time. It’s pushing based on the Push Diary settings or equivalent.

You are correct with regard to preload being browser cache aware. After turning my Workbox service worker off, it doesn’t call for the fonts on repeat view.

Of course, now I know that, preload is the best option for saving data. Although using the push diary effectively can mittigate the server push wasted data problem somewhat.

Yup that’s what I have found with Workbox Service worker pre-caching in effect. Still helps for repeat visits though.

Yeah would be nice if CF HTTP/2 server push was made browser cache aware :slight_smile:

Quick update. Not a solution, but…

  1. My service worker is fine.
  2. The problem was the Vary Origin header that I’d set as instructed by this article https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

    This was due to initially trying to increase security be removing the asterix wildcard and adding my explicit origin. Everything seemed to be fine apart from when using the service worker.
  3. Currently still using the Access-Control-Allow-Origin header, but without Vary Origin has solved the problem and now the service worker isn’t trying to fetch the fonts unnecessarily.
  4. Apparently Apache sets the Vary header automatically if using Mod_Deflate which most people will be for compression.

Regarding the original question. Still no luck. It seems to me the problem is simple. Pushes are only done from the origin, so as soon as you add crossorigin (even from the same origin) the system obviously thinks a push isn’t posssible.

No matter what you do it won’t accept crossorigin or so it seems.

If anything changes in the future, would be interested to know. Cheers.

1 Like

This topic was automatically closed after 30 days. New replies are no longer allowed.