Implement http / 2 server push using nghttp2

Hello everyone, today I will talk about how I set up server push on my website and achieved an increase in page rendering speed. First, what is server push in HTTP / 2 ? This technology allows the server to “push” additional data to the client, at the time of the request of the main document. That is, in the usual situation, the browser requests the html-page, then it processes it and comes to the conclusion that it needs to load additional files for the correct display: styles, scripts, images. After that, downloads them and displays the final result. Server push allows you to send additional files at the time of receiving the main document, and they will already be in the cache when they are required by the browser. Due to this, the site loading speed increases.

This time the scheme will be as follows:


')


Now directly about the implementation itself. Currently, nginx in HTTP / 2 mode does not support server push technology. For these purposes, I will use nghttp2 - it is used in CloudFlare to implement push'ey for their clients. nghttp2 is a set of tools that implement the HTTP / 2 protocol. Namely: standalone server, client and reverse proxy server. We are interested in the part that implements the proxy server, the program is called nghttpx.

Customization

Install nghttp2:

apt-get install nghttp2 

Configure nghttpx. The configuration file /etc/nghttpx/nghttpx.conf is rendered

 frontend=93.170.104.204,443 #IP    - backend=127.0.0.1,6081 #IP   - private-key-file=/etc/ssl/ssl.webshake.ru.key #  certificate-file=/etc/ssl/ssl.webshake.ru.pem #      ,  nginx http2-proxy=no # server push   workers=1 #  

We check that the site is working. Now, in order to “launch” the style file into the browser, it is enough for the client to transfer a type header to nghttpx from the backend:

 Link: /path/to/file.css; rel=preload; as=stylesheet 

For a JS file, the header would be:

 Link: /path/to/file.js; rel=preload; as=script 

I added 14 such headers by implementing this in PHP. Added lines to index.php file:

 <?php header("link: </wp-content/themes/shootingstar/style.css>; rel=preload; as=stylesheet", false); header("link: </wp-content/themes/shootingstar/css/elegantfont.css?ver=4.5.3>; rel=preload; as=stylesheet", false); header("link: </wp-content/plugins/google-captcha/css/gglcptch.css?ver=1.23>; rel=preload; as=stylesheet", false); header("link: </wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=_2.7.2_beta>; rel=preload; as=stylesheet", false); header("link: </wp-content/plugins/crayon-syntax-highlighter/themes/github/github.css?ver=_2.7.2_beta>; rel=preload; as=stylesheet", false); header("link: </wp-includes/js/wp-emoji-release.min.js?ver=4.5.3>; rel=preload; as=script", false); header("link: </wp-includes/js/wp-embed.min.js?ver=4.5.3>; rel=preload; as=script", false); header("link: </wp-content/themes/shootingstar/js/responsive.js?ver=1.0>; rel=preload; as=script", false); header("link: </wp-content/themes/shootingstar/js/selectnav.js?ver=0.1>; rel=preload; as=script", false); header("link: </wp-content/themes/shootingstar/js/menubox.js?ver=1.0>; rel=preload; as=script", false); header("link: </wp-content/themes/shootingstar/js/scroll-to-top.js?ver=1.0>; rel=preload; as=script", false); header("link: </wp-content/themes/shootingstar/js/placeholders.js?ver=2.0.8>; rel=preload; as=script", false); header("link: </wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1>; rel=preload; as=script", false); header("link: </wp-includes/js/jquery/jquery.js?ver=1.12.4>; rel=preload; as=script", false); 

and restarted Varnish to flush the entire cache.

Result

After that, the browser uploaded the home page of your site and saw the fuzzy files:

And here is the download with disabled guns:


The file that was sent using server push has an appropriate header.


Here is a comparison of the rendering speed of the main page when pushing files with styles and JS and without push:



The measurements were carried out with the WebPagetest / tool, which I learned from my colleague. Open-source project, a bunch of metrics, settings and test servers are available. I advise everyone!

Also in the process of work, I nakodil mini-service that allows you to quickly check the list of files to be pushed by typing the url of the site. Maybe someone will come in handy - webshake.ru/post/480

Conclusion

Server push technology has reduced the download and rendering of my site from 1.7 to 1.4 seconds, which is already 17%! It works and should be used.

Finally, some more metrics with WebPagetest.




Source: webshake.ru/post/480