• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » HTTP/2 Server Push : Nginx & WordPress

By Abhishek Ghosh November 29, 2016 1:16 pm Updated on November 29, 2016

HTTP/2 Server Push : Nginx & WordPress

Advertisement

Here is a Clear, Easy Guide on HTTP/2 Server Push. Nginx & WordPress is Commonly used Combination For HTTPS on Cloud to Dedicated Servers. We need to clarify some matters which are probably not clear. HTTP/2 Server Push Nginx has been more a buzzword than real guides and usage. It is CloudFlare who has support. Unless RFC is followed, other resources will not work :

Vim
1
2
3
https://tools.ietf.org/html/rfc7540
https://http2.github.io/http2-spec/
https://w3c.github.io/preload/#server-push-http-2

Nginx community edition does not support HTTP/2 Server Push as server software. Nginx Plus paid does support HTTP/2 Server Push as server software. H2O server cum reverse proxy, Apache2 supports HTTP/2 Push. CloudFlare service does support HTTP/2 Server Push as reverse proxy service. In other words, if you are using Nginx community edition, then after following the guide you have pass through CloudFlare service to get HTTP/2 Server Push. We do not recommend that for production server. As we normally do not use CloudFlare, but standard DNS like Dyn DNS. You can test how it feels on dev server. We are first configuring Nginx & WordPress for HTTP/2 Server Push.

 

Needed Setup For Testing HTTP/2 Server Push With Nginx & WordPress

 

Normal Nginx WordPress setup with Let’s Encrypt or any SSL certificate. Please search our website using the search function in case you need something.

Advertisement

---

 

How to Test HTTP/2 Server Push With Nginx & WordPress

 

You can follow our guide and test with Google Chrome’s Console tool. If you pass through CloudFlare DNS, it will show the resources as “Push”. , Nginx community edition is going towards scrap. On Chrome browser, click options in this manner :

Vim
1
2
View > Developer > Javascript Console > Network
(right click on console's name option to get option menu)

Click to tick these options on the context menu you got by right click :

Vim
1
Method, Status, Protocol, Scheme, Initiator

Now test some website which has like :

Vim
1
2
https://blog.cloudflare.com/
https://www.shimmercat.com/

Under Initiator column of Chrome’s Javascript Console you’ll see that there are “Push”, like this entry :

Vim
1
screen.css?v=7f0b850bac GET 200 h2 https Push / (index):16

You’ll see that only blue coloured bar is present. If you click on it, you’ll get a menu with context box where clearly written “Receiving Push”. Check their header with cURL (or cURL for Windows) :

Vim
1
2
curl -I -s https://blog.cloudflare.com/ | grep link
link: </assets/css/screen.css?v=7f0b850bac>; rel=preload; as=style,<//cdn.bizible.com/scripts/bizible.js>; rel=preload; as=script,<https://code.jquery.com/jquery-1.11.3.min.js>; rel=preload; as=script,<//fast.eager.io/CGVfxD1y6q.js>; rel=preload; as=script,</assets/js/jquery.fitvids.js?v=7f0b850bac>; rel=preload; as=script

This is a screenshot illustrating push on console :

http-2-server-push-nginx-wordpress

 

How to Setup Nginx For HTTP/2 Server Push

 

It does not matter whether you are using free Nginx or paid Nginx. This is mandatory step. Upon cURL, you have to receive this stuffs which you want to push :

Vim
1
2
link: </wp-includes/js/jquery/jquery.js>; rel=preload; as=script
link: </wp-includes/js/jquery/jquery-migrate.min.js>; rel=preload; as=script

You can join multiple if you want like example header of cURL. Edit the “virtual hosts” file under /etc/nginx/sites-available directory (in case of Ubuntu, Debian), which is normally named as default and normally add the directive under server block in the way you add various headers. This is a set of example :

Vim
1
2
3
add_header link "</wp-includes/js/jquery/jquery.js>; rel=preload; as=script";
add_header link "</wp-content/themes/example/style.css>; rel=preload; as=style";
add_header link "</wp-content/uploads/this/image.jpg>; rel=preload; as=image";

After adding, run nginx -t and restart nguni with sudo service nginx restart command. Clear caches of your website and perform cURL to check header.

 

How to Setup WordPress For HTTP/2 Server Push

 

Obviously, you may need to test within WordPress instead of always testing with editing Nginx config. Both together (Nginx and WordPress) not needed. If your web server support push, then you can use PHP to add header or WordPress Plugin to add header response like “Add Headers” plugin (on WordPress repo). If you use PHP then this will be the syntax :

Vim
1
<?php header('link: </wp-content/themes/example/style.css>; rel=preload; as=style'); ?>

WordPress does have function to add header :

Vim
1
2
3
4
add_action( 'send_headers', 'add_header_push' );
function add_header_push() {
header( 'link: </wp-includes/js/jquery/jquery.js>; rel=preload; as=script' );
}

Tagged With paperuri:(40eb0f61d7ef8cc927d5d72ae3bd7b56) , nginx http2 push , http/2 push wordpress , http2 push wp , https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1821 24j_2Jd9U22C94zwHuuhSggGGUMv-2sj1hgTMsJsEkN8XUX3AEaDh2v3svFxRO3W 11b4afee85655ce4f8b257af9c2b12eae67edb14&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme , nginx http 2 push

This Article Has Been Shared 443 Times!

Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to HTTP/2 Server Push : Nginx & WordPress

  • Steps To Install Nginx Plus on Ubuntu Server (HP Cloud)

    Here Are the Steps To Install Nginx Plus on Ubuntu Server Running on HP Cloud. Nginx Plus is the Paid Version of Nginx with Extra Features.

  • Nginx PHP5-FPM WordPress : Major Tweaks

    Here is a Short Yet More Than Enough Guide For the Most To Tweak Nginx PHP5-FPM WordPress Setup Running on Ubuntu 14.04 on Rackspace Cloud Server.

  • HHVM WordPress (Nginx Ubuntu Server) Tweaks

    Here are some special HHVM Wordpress (Nginx Ubuntu Server) Tweaks for Page Speed optimization, Compatibility of WordPress Themes and Plugins.

  • Nginx Cache Purge Module For fastcgi_cache WordPress

    Nginx Plus by Default Supports Cache Purging. Nginx Cache Purge Module For fastcgi_cache Exists Can Be Used For Community Edition of Nginx.

  • Nginx Configuration With include Directive For WordPress

    Nginx Configuration With include Directive Can Make the default of nginx.conf file less bloated specially for WordPress W3C like plugins.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • Exploring the Benefits and Advantages of Microsoft’s Operating System March 22, 2023
  • Web Design Cookbook: Accessibility March 21, 2023
  • Online Dating: How to Find Your Match March 20, 2023
  • Web Design Cookbook: Logo March 19, 2023
  • How Starlink Internet Works March 17, 2023

About This Article

Cite this article as: Abhishek Ghosh, "HTTP/2 Server Push : Nginx & WordPress," in The Customize Windows, November 29, 2016, March 23, 2023, https://thecustomizewindows.com/2016/11/http2-server-push-nginx-wordpress/.

Source:The Customize Windows, JiMA.in

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT