Enable HTTP/2 Server Push on blocking resources

Rule from network under performance category

What is a trooper!

we have submitted your edit to the community for review! We'll review and make it live on the site in the next few hours, the internet thanks you :).

Browse another section of the knowledge base



Suggest an edit

Cancel

This rule has no content... yet.

Add content to this rule

Or just browse to view rules that have content



 

With HTTP/2 becoming more commonplace, one of the first features of the new version is Server Push. This allows web servers to send required assets for the current page (or known following pages) to the client as part of the first request.

When a client connects a website using HTTP/2 a connection is opened which downloads the web page (as it normally would in HTTP/1 as well). But the connection can also be used to "push" resources down with the initial request, meaning the entire web page (including required resources) can be downloaded on a single connection in parallel.

This saves users (especially those on mobile) the horror of connection latency to open up another connection to download the required resources.

It is recommended to "push" (at a minimum) any block scripts or stylesheets in the head of your page. This enables users to download a full working version of your page to render while the rest of the page downloads, giving your users a faster experience as the page would load extremely fast.

How do I fix this?

To enable Server Push there are a few options:

  • Using a provider like CloudFlare that supports the (Draft) Standard of preload from W3C will enable Server Push by simply providing a extra header. See the #preload for more details on how to enable in your website.
  • If using a language like NodeJS that creates the entire web service, server push can be implemented using one of the newer libraries, see Current HTTP/2 Implementations for details for your language/framework of choice.
  • For those with complete control over their servers, popular Web servers like NGINX will be getting support to enable soon.

Preload

The preload header allows websites to configure server push using only headers, to enable or disable respectively for resources. See the details from W3C

To enable for a resource, the following header should be provided:

Link: </asset/to/push.js>; rel=preload; as=script

To disable for a specific resource:

Link: </dont/want/to/push/this.css>; rel=preload; as=stylesheet; nopush

NGINX

To configure headers for NGINX include the following in your server block:

server {
  ...
  add_header Link "</dont/want/to/push/this.css>; rel=preload; as=stylesheet; nopush"; 
  ...
}

Apache (Most shared hosts)

To configure headers for Apache add the following to your .htaccess file (in the root of your website) with the following:

Header add Strict-Transport-Security "max-age=157680000"

Resources

Browse another section of the knowledge base



Signup icon
Ready to see how well your site scores?

Passmarked works best when you have an account. It allows you to keep a dashboard with saved data of the sites you have run through the system, we’ll alert you about important updates and you get access to the Passmarked Slack forum.

Sign up to get started