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.