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.
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.
CSS should (can) be pushed and will make your site faster by doing so
Fonts should be “preloaded” not pushed
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.
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.
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.
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.
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)
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.
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.