What is HTTP2 Server Push and Why You Should Enable It on Your Site

Reblogger Eileen Burns
Commercial Real Estate Agent with Trans State Commercial RE Ft. Lauderdale/Miami/Palm Beach 0516472

This Florida Real Estate Connector was WOWed once again keeping up with technology.  Speaking geek is certainly a challenge in addition to your regular day job!  Peter Mark explains what is new and why we need to pay attention if we have interactive websites.  Florida residential real estate and Florida commercial real estate buyers will click off your site in less than  8 seconds. So, it is important to stay in the mix and update your web site on a continuing basis.  Even if you do not speak geek, seek out a professional who has a passion for customers like me.  Hope you enjoy the read and check back at Florida Probate Agent once my site is back and and not only running...but updated!

Over time the web has become richer and richer with a huge increase in the number of files that are involved in making up just a single web page. Add to that a MLS Feed and you got yourself a huge load of files to boot. The number of assets a page has to carry is many times overwhelming, especially when we live in a mobile world with 3G and 4G. The main problem is latency.



With 1 single landing page with a MLS feed, you've got CSS files which tell you how to layout the page. You've got JavaScript files. The browser has to collect the HTML, then it has to collect the image files. Then the CSS and the JavaScript files. Then the CSS and JavaScript files then in turn might reference other files that the browser has to collect and so on. Add to that plugins, social media, video embeds and the like.So you're looking at 100 requests or so to serve a single web page.


What is HTTP?


A protocol is an official procedure or set of rules governing how to do something. If you want to meet the head of state, certain high profile person in a meeting,  there is a protocol on how you would approach, address and interact with that individual. On the internet and particularly the web, Hyper Text Transfer Protocol or HTTP is an application level protocol which defines the message structure between the web browser or a web client requesting content or resources and web server that is delivering the application.


what is http and http2

Problems with HTTP 1.1


HTTP 1.1 allows only one request to be process at a time through a connection.  This means the browser can request and receive many different files at the same time and doesn't have to wait for one file to finish before starting the download of the next one. This in turn means concatenated CSS and JavaScript files and image files to speed up downloads by reducing HTTP requests no longer makes any sense. Rather than piling everything into one huge file we can now download several smaller files simultaneously.


Because HTTP 1.1 was not designed to handle such loads, web developers have come up with a bunch of different hacks to improve the load speed of pages. Another thing that people do to reduce the impact of latency is using CDNs or content delivery networks. Basically what they do is they have servers all around the world and they basically cache local copies of all the parts of your website. Some of the popular hacks include domain sharding, image sprites and concatenation and minification of javascript and CSS files.



HTTP/2 Is the New Standard


The HTTP2 protocol was designed to solve many issues that the HTTP 1.1 protocol had with modern websites. When HTTP 1.1 was introduced in 1997 web pages had some HTML markup and perhaps an image or two. Nowadays web pages can contain hundreds of resources with images, fonts, web style, sheets, MLS feeds and so on. HTTP/2 is designed to address some limitations of HTTP 1.1 Some of those limitations have to do with how browsers fetch and retrieve the resources that are needed to to retrieve a page.


Do You Have HTTP/2 Enabled on Your Site?


HTTP version 2 is the new protocol that takes over after HTTP 1.1.  Even though the HTTP/2 protocol was introduced more than three years only 30.9%  percent of websites utilize it as of October 2018. HTTP/2 is now supported by over 80% of global web browser usage. Web hosting companies are rapidly deploying support as well meaning it is quickly becoming the standard protocol for web traffic. Many times I find that a website does not use HTTP/2 for all of its resources.


Check to see if HTTP/2 is enabled on your website https://tools.keycdn.com/http2-test  or https://nixcp.com/tools/http2-test/ or if you're a geek like me use lighthouse chrome extension and HTTP/2 and SPDY indicator. Contact your hosting provider and tell them to enable it. Nothing special required. No migration! If they don't offer it, get a CDN and you will be fine. But why not have both?




http2 enabled server



Take Advantage of HTTP2 on Your Website


To take advantage of http2 on your site 3 requirements need to be met first your server.


1. Your Server must support HTTP 2 and all its features.

2. The connection between the server and the browser must be encrypted through SSL, starting with HTTPS.

3. The browser must support HTTP 2 which almost all browsers do.


If any one of these three requirements fails the connection will be an Http 1.1 connection instead. To ensure stability on the web HTTP/2 extends existing functionality in HTTP  1.1

Meaning if a server or browser does not support version 2 or you don't have an SSL connection the site will just fall back through the older protocol without anything breaking.


Really important to understand is that HTTP1 an HTTP/2 can coexist together. If you've got an HTTP 2 capable server but the browser that's connecting to it that doesn't speak HTTP/2 it will simply fall back to using HTTP1. HTTP/2 is not a migration not like moving from HTTP to HTTPS is a migration.There's really no negative impact that you can have on your SEO from deploying HTTP/2.


Does Google Notice if You Have HTTP/2 ?


Google is using is what they call chrome user experience report data. You can see this inside their PageSpeed insights tool. Their browser has measured how quickly a page will load and then reports that information to Google. What's important is that chrome does support HTTP2.


So Chrome users if you deploy HTTP/2 will get a faster experience on the website and that will be reported to Google. They confirm that this is playing into rankings. This is actually gonna impact your SEO performance buy speeding things up for users.


Googlebot won't benefit. Google themselves will notice. This will be reported through Chrome usage data and will have an impact on your SEO as well as making things a lot better for your users. Users will more likely to stay on your website and less likely to bounce off.



HTTP/2 is the Way to Go


HTTP 2 solves the problem in multiple ways. it compresses the HTTP headers, allows for several push which can send resources to the browser before the HTML document is even completely parsed and enables multiplexing. Which allows the client and server to process multiple requests over the same connection.


That reduces the overhead of establishing many HTTP connections. HTTP/2 is an upgrade protocol so if the browser does not support it, it will still work fine with http 1.1 but if the browser does support it the connection will be upgraded to the HTTP/2 protocol. There are many reasons to set up HTTP/2 on your server and no reason not to! Get the double improvement in latency. Combine a CDN with HTTP/2.


Because CDN's cache your static asset so they've got local copies of the image files etc. That means that when your server only speaks HTTP1 it doesn't matter because your CDN is able to respond to requests for your image files ,your JavaScript files for you. It doesn't need to speak to your server so the CDN can just speak HTTP 2 to users and immediately get most of the benefits of HTTP/2


CDN's can only do so much with caching. These hacks attempt to reduce the number of HTTP requests to the server because establishing an HTTP connection carries a lot of overhead. During that it uses hundreds of resources and slows down the rendering of the page. That causes user frustration and leads to high bounce rates.

How HTTP2/ Works


The first thing my client has to do is request you know some page from the server and then the server sends that page back. Then usually we know that that page requires other resources to load.


So now the client has to open up another connection to request some sort of CSS file and that gets sent back. Then I have to open up another connection to maybe request the the JavaScript that the page needs to run. What's going on here what are some of the problems with this protocol? The protocol as the old HTTP 1.1 protocol that is written requires lots of separate transactions between the client and the server to retrieve this one page.


So first I get the HTML content then I have to issue separate requests for a bunch of other parts of the file. If you go to a complicated page and open up the chrome developer console look at the network waterfall diagram that occurs when you load that page. You can see there's a whole sorts of tiny little requests that are filtering out all over the internet that are required to retrieve just this one page.


How does HTTP 2 improve on this situation?  HTTP2 allows what's known as multiplexing and does so in a dynamic way.  The real goal in http2 is to try to do as much as possible with as few round trips as possible. Because one of the problems here with this model is that all of these separate connections that I have open to the server via http 1.1, those connections take time to establish, remember sometimes the TCP doesn't start to use the full bandwidth of the connection right away. S the connection can be slow initially and there's all these round trips that have to go.


So a user has to ask the server for a part of the page the server responds I ask it again it responds again. If your round-trip time between you and the server is small, this isn't that big of a concern. But if you're connected to the Internet in a way where your round-trip time is large, then this can make it very very slow to load pages.

If you have ever been on your phone and you've been on a page that takes a long time to load, a lot of times what's happening is that the page requires lots of these types of round trips and some of them are very very slow. The browser is waiting for data from the server to render the page and until it gets all these pieces together it can't do any work. Sometimes the page even just seems totally broken.


How HTTP/2 Fixes Slow Page Loads


Http2 replaces as many of these round trips with one round trip. Also it avoids creating lots of new TCP connections. So the first thing that's going to happen in the HTTP 2 world is the client is going to open up a single connection to the web server. It's going to use that connection for all of the resources that it needs for this page.


It might say you know send me index.html and the server responds and then it cites say can I also have the next part of the page, the CSS file and the server responds. But now rather than requiring multiple TCP connections to be opened I'm doing it over a single connection. An HTTP also includes ways to avoid having one part of the site block other parts of the site.


So I have one connection so that's really good. The other really interesting and exciting part of HTTP 2 comes with something that you may have realized. Let's say I requested a page from this server. When the server returns the page HTML contents, the server knows that I need these other things. Why do I have to the server for all this stuff?


Shouldn't the server know that in order to render this page I also into the CSS file and this javascript file and some other things. Assuming that those files are coming from the same server which is common why does the server make me ask for all this stuff? It knows I need these documents! 



HTTP/2 Server Push


The idea here is that in certain cases the server can actually send me documents that I didn't ask for. So I never issued a get request for these documents but the server knows I'm going to need them.


I go to the server and I request index.html. The server knows that I need the CSS and the JavaScript and other resources that are required by this page. So rather than just sending me a index on HTML and making the ask for all that other stuff, it sends me index.html and then it pushes the other resources. So it sends on the same wire site Jas and site dot CSS and maybe there's images that this page needs.



Rather than having to issue all these get requests I'm receiving data from the server that preemptively. The server knows I need this information and in a lot of cases that makes a lot more sense to send it to the client even before it's asked. Because now there's really only one round-trip involved. I made one request and in one response I get all of the data back that I need to render this page.



This is both quicker and more efficient because instead of loading all the CSS and java scripts on one page we can load only the CSS and JavaScript required for the current page. Saving bandwidth and time in the process. Splitting our files up like this also has other benefits. Each file can be independently cached by the browser for a quick recall. A small update to style rule or script doesn't require a complete reload of all the styles or JavaScript.


You have to be careful not to sort of over push things so sending the same CSS file over and over to the the same browser.

So this is HTTP 2 pretty exciting certainly there will be other versions of HTTP that will be emerge in the future to meet future needs but HTTP 2 responds fairly well to some well understood needs and while interested problems with HTTP 1.1


This entry hasn't been re-blogged:

Re-Blogged By Re-Blogged At
ActiveRain Community
Diary of a Realtor
Old Farts Club
florida commercial real estate
florida residential real estate
florida real estate connector
florida probate agent

Post a Comment
Spam prevention
Spam prevention
Show All Comments
Myrl Jeffcoat
GreatWest Realty - Sacramento, CA
Greater Sacramento Real Estate Agent

The web is becoming more and more sophisticated all the time.  I suspect it will continue to do so.

Nov 06, 2018 03:33 PM #1
John Henry, Florida Architect
John Henry Masterworks Design International, Inc. - Orlando, FL
Residential Architect, Luxury Custom Home Design

Hi Eileen, good reblog and worthy of all of us to do.  If you have a graphics-heavy site as I do this does help meet Google's algorithm for speedier downloads.  Thanks.

Nov 20, 2018 05:01 AM #2
Eileen Burns
Trans State Commercial RE Ft. Lauderdale/Miami/Palm Beach - Fort Lauderdale, FL
FL Probate Agent, Hotel & Land Specialist

John Henry this is why I enjoy our Active Rain community so much.  I am constantly learning from my business colleagues and not afraid to share to help someone else.

Nov 20, 2018 05:34 AM #3
Post a Comment
Spam prevention
Show All Comments

What's the reason you're reporting this blog entry?

Are you sure you want to report this blog entry as spam?


Eileen Burns

FL Probate Agent, Hotel & Land Specialist
HowTo Acquire Real Estate Property With Your IRA accounts!
Spam prevention