Guide to setting up HTTP/2 Server Push with Cloudflare Worker?

Application Performance
1

Hi,
I’ve been looking into HTTP/2 Server Push and was wondering if there’s an official guide/tutorial on setting up Server Push with my website? My site isn’t a WordPress site so I’m hoping I can achieve this using a CF Worker?

I have critical files I want to Server Push to increase loading time and performance.

  • WOFF2 Font Files
  • CSS Files
  • JavaScript Files

Your feedback is appreciated!

Thanks,
Jay

2

I do not have the most experience with Workers but with Frontend performance.

So if you want to push files, do that thats clever, but please never push more then CSS Files, everything else will not bring any performance benefits.

  1. CSS should (can) be pushed and will make your site faster by doing so
  2. Fonts should be “preloaded” not pushed
  3. JS should not be preloaded at all!

JS actually always should be defered and loaded after everything else was loaded.

Thats just my 2cents on “HTTP2/Push” and performance.

2 Likes
3

Hey @M4rt1n,
Thanks for the tips dude!

I’d love to give it a shot with pushing my CSS files at-least, as it’s stated, “too much of something could be bad”

Just looking for a tutorial with achieving this with a Cloudflare Worker. I did find this link when googling but he’s using a Cloudflare Site, in my case I already have my site and just want to push those assets to it.

How to Configure HTTP/2 Server Push on Cloudflare Workers Sites

4

May I quickly ask from where you are serving the content?
An VPS? WebHosting Package with a Webserver or any other kind of hosting?

Because CloudFlare natively respects your Headers and therefore it will push these files you push on your origin Server.

I for example am mostly pushing files with Apache or Nginx

If you use Apache you can just add these lines to your .htaccess and it will automatically push the file:

Header add Link "</css/app.min.css>; rel=preload; as=style"

ofc you should replace the link with the link to the CSS file you want to push.

For the fonts you can add this (to the Header in your HTML files)

<link rel="preload" type="font/woff2" as="font" href="/fonts/FontBold.woff2" crossorigin>
(again replace path with path to your font)

Then it should get preloaded but not pushed.

Maybe this helps you to solve the problem even without Workers

2 Likes
5

Thanks for your feedback,
I currently am using my GitHub repository tied into Heroku for deployments so I guess Heroku is hosting these files.

Heroku doesn’t have any such support to modify headers but Cloudflare certainly does :smiley:
Apache/NGINX does make this look easy on that part lol.

6

Ok I understand. Yes Heroku does not support HTTP2/Push…

But anyway if it have do be done with workers you can have a read here:

I just always try to solve things as much natively as possible as this is the best and most stable thing.

1 Like
7

Thanks man, was looking at that link, I could try it and see if it works.
I too, love doing things natively, hoping to get some extra performance :smiley:

1 Like
8

May I ask if you are talking about arc2d.com?

1 Like
9

Hey man,
Yep that’s what I’m referring to, I have a bunch of preload requests and would like to offload some of that to a Server Push for some CSS files and images as I keep getting some blocking time with images.

I’m kind of overdoing it with preload and want to cut that down.

10

If I may recommend some things:

  1. Concatenate ALL CSS into 1 file
  2. Concatenate JS into as less as possible files
  3. PreLoad Fonts and the one Image which shows up in the BackGround on Top
  4. Push CSS
  5. Disable HTTP3 (in Cloudflare Settings)
    HTTP2 is mostly faster then HTTP3, have a read here: https://blog.cloudflare.com/http-3-vs-http-2/

For a small test page of 15KB, HTTP/3 takes an average of 443ms to load compared to 458ms for HTTP/2. However, once we increase the page size to 1MB that advantage disappears: HTTP/3 is just slightly slower than HTTP/2 on our network today, taking 2.33s to load versus 2.30s.

  1. Do not load HTML files dynamically and puzzle them together with JS. This will produce a lot of renderblocking at the beginning untill all the HTML files are loaded and puzzled together (in my opinion MainProblem at your Page)
  2. do not use more then 3-4 Fonts (you are using 10)
  3. keep external requests at a bare minimum and at best at 0
    https://cdn.jsdelivr.net/gh/Nashorn/od-cocoon@latest/framework.src.js
    Better deliver this JS file from your Server and even better combined with the other JS files as one single file
  4. do not use JS in a way it will be required for styling and displaying the Page! Its bad practice as CSS and DOM should solely be used for Styling and Content and JS for functions.

That should help you getting your site performing better. But as already stated the part where you load parts of the DOM (as HTML with content in Tags) and puzzle them together with JS will produce the most renderblocking and the most unneeded requests.

3 Likes
11

Thanks for all the info/suggestions you’ve provided @M4rt1n!
I’m going to implement the most I could with your suggestions.

Some of the custom/dynamic parts come from the framework transpiling/injecting W3C WebComponets where they have their own respective HTML/CSS/JS assets. I’m going to let the framework load last and still if that helps any.

This is also going to help me gain more performance skills to use on other projects.

Thanks man, have a good week ahead!

1 Like
12

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.