January 26, 2017
Keeping up with web technologies is exhausting. If you review the last fifteen years of the web, the explosion of web technologies in recent years can make your head spin.
Almost all of these technologies — from geolocation to touch-screen integration — exist because they claim to make a web experience better or faster. At Elevate, we’re all about making a better customer experience. We care about site performance, so we’d like to surface some key technologies buried in all that mess that we feel are going to change the landscape pretty significantly over the next few years.
This three-part blog series will focus on how to improve your site’s performance. Tweaks that can be made to your web server, how you develop your site, and even how visual design can factor into improving a user’s experience:
- Part 1: Web Server Tweaks to Make Your Users Happy: Site Performance (You are Here!)
- Part 2: Benefits of Performance Budgets and Real User Monitoring: Site Performance
- Part 3: Images: Design Performance and Perception: Site Performance
Web Server Performance
While bandwidth and computational horsepower play a major part of a web server, an often overlooked strategy to boost performance is what technology is being used to serve the content.
Let’s compare a few web server technologies and third-party services that can greatly increase the speed and performance of your site.
HTTP/1.1 vs. HTTP/2 (Time to Migrate the World)
Users don’t think much about the HTTP protocol (the foundation of how data is communicated across the web) when they type that into a browser. In fact, it’s so uncool to say http:// (you know, “aych-tee-tee-pea-colon-backslash-backslash”) when you are talking about a URL. The HTTP/1.1 spec has been with us for more than fifteen years and it is starting to show its age, like an old car. The original spec was never designed to accommodate all that we are doing on the web these days. Today’s web pages average roughly 50–100 server requests to various files to render a page. HTTP/1.1 can only deliver those files one at a time, like a long line at the DMV. HTTP/2 (or H2 as cool kids say), solves a lot of the old spec’s shortcomings.
The benefits of HTTP/2:
- Data is binary, instead of textual (faster!).
- Data is fully multiplexed instead of being ordered and blocked. One single TCP connection allows multiple asset requests at the same time (multitask!).
- Data calls use one connection for parallelism (multitask!).
- The protocol uses header compression to reduce server overhead (smaller!).
- The protocol allows servers to “push” responses proactively into client caches (no waiting for something else to finish!).
What’s important for you:
- Most of the major web servers make it pretty easy to enable HTTP/2.
- Although the HTTP/2 spec doesn’t require a server-side SSL certificate, all current browsers require that HTTP/2 be used over the encrypted HTTPS protocol. Some big players have joined forces to make this upgrade free and easy to implement. Let’s Encrypt is one.
Implementing HTTP/2 will lead to faster page loads and to snappier, more responsive web sites. In other words: a better web experience. It will take time to transition, but before we know it we’ll be telling our grandchildren about how we used to use HTTP 1.1.
For further reading on the subject, please check out http2 explained.
Web Server Tools (Minimize Your Server’s Workload)
You can spend an enormous amount of time trying to optimize your site for speed. Fortunately, there are a handful of services that help simplify implementation by handling some of the complexities for you.
3rd Party Performance Solutions
- Cloudflare is a proxy that optimizes site performance through the use of DNS, CDN, and security practices.
- Incapsula is similar to Cloudflare in services, with slightly different offerings at different price points.
Self Hosting Solutions
If you are self-hosting your site or have full access to your web server, there are a few free tools and configurations you can use to speed up your site:
- Google Page Tools Module handles optimizations in realtime. Here is a good breakdown of the benefits and features.
- Nginx Page Caching stores a cached version of your page often in memory versus hitting your app for every request.
- Varnish is a web application accelerator also known as a caching HTTP reverse proxy.
There is nothing new about the concept of cloud hosting, but it is worth mentioning because it has gained an enormous amount of trust from enterprise IT teams. The greatest advantage of cloud hosting is how quickly you can scale your site up and down as the need arises. We use these, depending on the scale of the engagement:
Everything’s Always Changing
As you can see, we’ve made great strides from the early years of the web with so many new technologies that can help improve the performance of your site. As we evaluate new technologies, we focus on three requirements:
- Is there community or commercial support?
- What is the frequency of updates though patches and improvements?
- Does it actually have a business purpose?
Have a great tool you’ve used to help your or your client’s site performance? We’d love to hear about it below.
In the the next post in this series we’ll be sharing front-end performance techniques and tools that help speed up browser performance.