HTTP/2 server push is one of the new ways of improving website speed. It takes away the necessity of browsers to go through webpages and their files to be able to make requests to the web server for downloading resources that are needed to properly load the webpages.
Instead, server push allows specifying resources in the HTTP header of the webpages so the browsers know about those specified resources before needing to go through the webpages and their files to be able to find those resources. This allows browsers to start downloading those resources early because they wouldn't need to wait until discovering those resources to make requests for downloading necessary files. This way, HTTP/2 server push allows for early downloading of the website resources.
How Browsers Load Websites
To understand how the HTTP/2 server push works, let's first see how website files are loaded in a browser:
When you enter a web address in your web browser then press enter or when you click on a link, the browser goes through some process to connect to the web server where the website is being hosted. Then the browser makes a request to view the webpage. In response to that, the server sends the HTML document (the main webpage) of that page.
Then the browser parses/goes through the page and when it finds a link for another necessary file (e.g., CSS, JS, images, fonts, etc.) on that page, the browser makes another request to download that file. Then when the browser finds another file, it makes another request to download that file and so on.
Then as the browser downloads each file, it goes through those files and starts rendering the webpage to your screen. And that's how you see a website on your screen using just the website address.
What Is HTTP/2 Server Push
When a web browser requests to view any of your webpages, your web server sends only the HTML file of that webpage. Then the browser reads/parses that HTML file and sends additional file (CSS, JS, images, etc.) requests to the server as it finds those files in the HTML file and in the additional files.
HTTP/2 server push allows web servers to send necessary files alongside the HTML document when the browser first asks to view a webpage. So, the web server starts sends those additional resources even before the browser requests them. Therefore, it eliminates the time taken to make those additional file requests. This reduction in time in turn helps improve your website loading speed.
How Does HTTP/2 Server Push Affect Speed
Depending on which files are being pushed, you can see a variety of results in the website load speed. For instance, if you push only the resources that are needed to load only the above the fold contents (these are the contents that are visible on the browser screen without ever scrolling the webpage), your website load speed will appear to be faster to the visitors. This will also give you a higher Google PageSpeed Insights score.
If you push only the files that are discovered by the browsers only when parsing another file of the webpage, the total load speed of your website will improve. But if you push both the files that are necessary for the above the fold contents and the files that are discovered while parsing another file, your total website speed may sometimes improve even more but it may cause to slow down the loading speed of your above the fold contents.
And pushing too many files may slow down the loading of your above the fold contents and also the total load time of your website. That’s because pushing multiple files simultaneously will distribute the download speed among all the files which will slow down the download speed of all the individual files. As a result, the rendering of other files will also be delayed which will slow down the loading of the above the fold contents as well as the total website loading speed.
Even worse, pushing files without considering their effect on the critical rendering path may cause a non-critical file to be rendered first than a critical file which is needed for the above the fold contents. This may slow down the loading of the above the fold contents even more while compared to not pushing any files at all. This may also introduce FOUC (Flash of Unstyled Content) issue where you first see only website contents without any design and then after a while it gets the formatting back and everything looks normal.
Which Files Should I Use for HTTP/2 Server Push
As discussed above, using server push with files without properly considering their impact can have variety of effect on the website load speed. You can get an improvement in website speed by pushing the right files but also see an opposite impact by pushing files without realizing their consequences. So, you need to be careful about which files you are using with HTTP/2 server push.
I recommend pushing only the key requests like the ones necessary to load the above the fold contents. But if you want to go further, you can also push the files that can only be discovered from another file of the webpage other than the HTML file itself but a better way to do that would be using preload. Preload works in a similar manner to HTTP/2 server push but instead of pushing files from the server, it allows browsers to simultaneously load those files. You can read more in this how to preload key requests in WordPress article.
However, this CSS HTTP/2 Push option will push all the CSS files regardless of whether they are needed in the above the fold contents. So, I recommend keeping this option turned OFF.
But CSS files are needed very early in the website loading process to avoid FOUC issue and to properly load your website design. So, pushing CSS files can be a good idea for achieving a faster CSS load speed. But LiteSpeed Cache plugin has the Critical CSS feature which will help us achieve better CSS loading behavior. So, you wouldn’t need to enable this CSS HTTP/2 option. Critical CSS is another option in this settings page so it has been discussed there.
How to Server Push Website Resources
Server push instruction is given in the HTTP header of the webpages using the link header followed by the server push directives for the specific resources.
The server push directive takes advantage of the HTML preload resource hint. As such, rel=preload is used inside the server push directive of the specified resources. You can read more about HTML preload in this article and the types of supported resource types for preload in this link.
Below are some example syntax to server push some common file types:
CSS
This is a syntax to server push CSS files:
link: </style.css>; rel=preload; as=style* /style.css is the file that you want to server push so it may be different for you
* as indicates the resource type you want to preload
JS
Here is a syntax to server push JavaScript files:
link: </main.js>; rel=preload; as=scriptImage
Here is a syntax to server push image files:
link: </logo.png>; rel=preload; as=imageServer Push Multiple Files
You can server push multiple files by separating their push directives with a comma. Below is a syntax to server push a CSS and a JS file.
link: </style.css>; rel=preload; as=style
, </main.js>; rel=preload; as=scriptNote
Server push doesn’t instruct web browsers to apply the specified files to the webpages. So, even when using server push, you will still need to have separately linked those files in the webpages (HTML files) for the files to be applied to those webpages.
You can read more about HTTP/2 server push from this article by Jeremy Wagner from Smashing Magazine.