Improving the Web with Speed

As a geek business owner, it is important to always look for different ways to improve conversions for your site. From redesigning the headers, adding graphics that highlight a specific aspect of the site, and even CTA landing pages, you already know that small changes can have a big impact.

One of the easiest tactics you can benefit from today is speeding up your website. Loading time remains one of the largest contributing factors to page abandonment. The average user just has no patience for a page that takes too long to load.

In a way, the same can be said about the movies. In 1994, 20th Century Fox released Speed, a high-octane action thriller that blew everyone away, and still remains one of the best action films of the past forty years. In a movie like Speed, there’s no time for any witty dialogue or slow romances. It’s all about solving the next problem. Giving you new scenarios and problems to uncover so that you never have a second to relax.

Speed keeps your interest. It changes the way we behave online, and how we enjoy the movies. So today I’ll show you how to speed things up a little. But first, let’s take a closer look at some of the evidence proving that speed really is important.

The Facts

“High performance web sites lead to higher visitor engagement, retention and conversions.”

A faster website is better for everyone. A slow loading landing page not only impacts your conversion rate, but can also impact AdWords Landing Page Quality and ranking in Google search. Back in 2010, Google released a statement announcing that they would be using site speed as one of the over 200 signals in their web search ranking algorithms. Speed is driven by multiple factors, including how fast results are returned and how long it takes a browser to display the content.

For every second you remove from your loading time, you’ll increase customer confidence and trust in your website. But before you dismiss the idea as boring or potentially irrelevant to your own marketing efforts, here is a quick metric that might just convince you how important your website speed can be to your online success.

Google’s experiments demonstrated that slowing down their search results page by 100 to 400 milliseconds had a measurable impact on the number of searches per user of -0.2% to -0.6% (averaged over four or six weeks depending on the experiment). That’s 0.2% to 0.6% fewer searches for changes less than half a second. In 2012, Google had around 1.2 trillion searches. They would (in theory) have lost more than 480 billion searches because of a half a second change in site speed!

According to Matt Cutts, these three key points sum up site speed optimization:

  1. “This is actually a relatively small-impact change, so you don’t need to panic. “
  2. “Speeding up your website is a great thing to do in general. Visitors to your site will be happier (and might convert more or use your site more), and a faster web will be better for all.”
  3. “This change highlights that there are very constructive things that can directly improve your website’s user experience. Instead of wasting time on keyword Meta tags, you can focus on some very easy, straightforward, small steps that can really improve how users perceive your site.”

So overall we can see that speed really is a big deal. Sure it shouldn’t take up all of our efforts, but it does deserve our attention. Let’s take a look at some of the ways that you can improve your site loading times by breaking down key concepts that made the movie Speed such a commercial success.

Identifying and Solving the Problems

“A bus strapped with a bomb. Once it goes 50, the bomb is armed. Once it goes below 50, the bomb blows. What do you do?”

People love an adrenaline rush. It gets their heart racing and makes them feel like they’re really alive. Part of what made Speed such an engaging movie was its emphasis on the plot. I’m not talking about posing complex philosophical questions or an intricate look at the human psyche, just a down to earth, old fashioned problem that needs solving.

In the movie both of the main characters, Jack and Harry, are introduced just doing their job. They don’t give any formal introductions or any development of character. It’s all about the various scenarios they have to deal with. By the end of the movie, the audience has gone through 15 scenarios to be exact:

  • Scenario 1 – Elevator strapped with a bomb one hour before it blows
  • Scenario 2 – Partner taken hostage bomb strapped to his chest
  • Scenario 3 – Bomb on a bus – Stay above 50!
  • Scenario 4 – Getting on the bus
  • Scenario 5 – Passenger on the bus has a gun
  • Scenario 6 – Lots of traffic
  • Scenario 6 – Gap in the road
  • Scenario 7 – Somebody tries to get off the bus
  • Scenario 8 – Jack gets into trouble trying to disarm the bomb
  • Scenario 9 – The bus is leaking gas
  • Scenario 10 – Harry tries to find the bomber at his house
  • Scenario 11 – The bus losing gas
  • Scenario 12 – Get people off the bus
  • Scenario 13 – Finding the bomber
  • Scenario 14 – Bomber kidnaps Annie
  • Scenario 15 – Derailing the subway train

Each of them sounds pretty simple and straightforward right? Well, as you watch the film, you’ll find that these scenarios aren’t as simple as they sound. Each of them ends up creating its own tension and impact on the overall quality and engagement of the film.

Just like the scenarios in the movie, even small little problems can have a big impact on your site speed. To improve their performance, you’re going to first measure and diagnose the speed of a page, which in itself can be a pretty difficult thing to do.

To make the process a little easier, we’ve compiled a list of tools that can help you identify which site speed issues you’re dealing with specifically on your web pages:

Each of these tools will give you an in-depth analysis of your website speed. They’ll break it down in ways that is easy to comprehend and calculate. Some of these tools are better at identifying varying aspects of site speed, so I’d suggest trying at least three of them to make a good observation on your site.

Moving forward, we’ll be addressing some of the most common speed improvements that webmasters need to make today. I’ll try to cover most of it in detail, but if you have any questions, please feel free to ask me about it in the comments.

Optimizing HTTP and Browser Caching

The main premise behind the movie Speed involves a bus full of people going 50 mph through the congested LA traffic. As the move progresses, police officers are able to clear the roads and lead them towards an empty airstrip near LAX.

Throughout the film we’re shown a ton of filler shots with the bus driving down these empty highways and we never really pay attention to them because we’re too invested in the action of the movie. What we don’t realize is that many of the exact same shots of the bus driving down a road are used again and again.

The director was probably thinking, “Why shoot more material when this one shot does a fantastic job of establishing a scene already?” Sure they add new material here and there, but overall the idea of rehashing an already established shot is the same. Save time filming and just reuse the same clip of the bus driving down LAX.

This is the exact same premise with caching. You’ve heard of the internet cache and cookies before right? Well let’s talk a little more about that.

Web pages typically include data that rarely ever changes. I’m talking about CSS files, image files, JavaScript, and other binary object files (media files, PDFs, Flash files). These files take a lot of time to download over a user’s network, which increases the time it takes to load substantially.

Caching allows theses specific resources to be saved by a browser or proxy. Once the resource is cached, a browser or proxy can refer to the locally cached copy instead of having to download it again on subsequent visits to the web page. This accomplishes two goals:

  • Reduce round-trip time by eliminating tons of HTTP requests for the required resources
  • Reduce the total payload size of the responses

You’re users are recycling an established shot. They don’t notice the files because they’re temporary and don’t take up much room on their hard drive. Plus they will enjoy the benefit because they will be loading their web page almost twice as fast after the first visit.

In addition, enabling caching can also significantly reduce the bandwidth and hosting costs for your site. Just like a director trying to save money by limiting how much material they shoot throughout production of the movie.

One of the keys to making the cache work properly is HTTP caching headers, which are sent by the web server to tell how long a resource is considered valid and when it was last changed. The HTTP protocol presents two distinct methods to define how long a resource is valid:

  • Expires header
  • Max-age header

The Expires header determines a date after which a resource is considered invalid. After this occurs, the user’s browser will ask for the resource again whenever they visit your web pages.

Max-age works in almost the exact same way except that it uses a straight integer number of seconds, instead of giving a specific date. This is a great feature because you can configure your web server with a constant value.

Both of these cache headers control the duration of a resource. In other words, this is the period of time during which the browser can use the cached resource without checking to see if a new version is available from the web server.

They are “strong caching headers” that apply unconditionally; that is, once they’re set and the resource is downloaded, the browser will not issue any GET requests for the resource until the expiry date or maximum age is reached.

I recommend that you set the Expires header or Max-age to be at least one month in the future and preferably a year if possible. Do not set it to more than one year in the future, as that violates the RFC guidelines. You only need to set one of the two headers this way. If you try to set both, then the Max-age header will always override the Expires header. If your resources change more often than that, you can change the names of the resources themselves. A common way to do that is to embed a version number into the URLs. The main HTML page can then refer to the new versions as needed.

Once a resource is rendered invalid, a browser has two options. It can download the resource again, or do a conditional GET request which only downloads the file if it has changed. In order to make a conditional GET request, the browser needs a way to figure out what version it has in the cache. Once again it is up to the web server to provide that, and once again the HTTP protocol gives possibilities:

  • Last-Modified header
  • ETag header

The Last-Modified header determines the date the file last changed. The ETag header is a unique identifier for a particular version of the file. This can be any value that uniquely identifies a resource (file versions or content hashes are typical). We recommend that you use the Last-Modified header because if the date is sufficiently far back, the browser may choose to skip requesting the file altogether. To see how these headers work in real life, try loading each of these pages twice in your .htaccess:

  • Expires off
  • Expires on

To load the pages a second time, either click on the link again, or click on the address bar of the page and press Enter. If you click the Reload button, that forces the browser to do conditional GET requests if the resources are in the cache.

To make this entire process a whole lot easier, try using a caching plugin instead. Currently, the two most popular caching plugins for WordPress are:

Caching plugins basically take care of storing your web pages as HTML on your server, and load these resources for you whenever someone accesses your website. This is a whole lot faster than dynamically loading your content from a database and utilizing the various PHP files that are necessary to get your pages to show.

Almost every website nowadays uses databases. Ecommerce sites and blogs are pretty much the text book example of this. Every request you (as a user) make to a server, slows the overall loading of a page down. This is the exact same concept with databases. Every single time you load a page the information is being requested from the database then returned to the visitor in seconds. Servers can only handle so many requests per second before they die under the strain of trying to give everyone the information that they have requested.

This is where caching comes in handy. Instead of requesting information every time a person opens a page, a caching system will call the information once every hour and saves the results.

Each visitor will get the saved version of your website until it updates again automatically. This is how big sites like Facebook deal with the millions of requests their databases get every second. This tactic is usually only needed for medium to larger websites however if you’re using a CMS such as WordPress or Magento then you can implement caching very easily with plugins or through tutorials provided for by your web host.

GZIP compression

Rarely does anyone character’s line of dialogue in Speed last more than 4 sentences. You think I’m joking? Go ahead and check the screenplay. Everything conversational is cut down to make room for what’s really important.

The very first line of dialogue from the good guys is just the police chief explaining the situation. Here’s what he says:

“What we have are fifteen people on the express elevator just below floor thirty. Included among them is Louis Tremain, chairman of NuTech and owner of this building. Bomb took out the cables. Bomber wants three million dollars, or he blows the emergency brakes.”

It’s such incredibly condensed dialogue and yet it works because it gets right to the action. There’s no time to worry about things like formal introductions and witty exchanges. We’ve got thirty people about to die in elevator unless they do something about it!

Throughout the film we see a number of occasions where the writer chose to give the characters simple, plain sentences to focus more on the scenario at hand. Whether it was diffusing a bomb, jumping a bus 50 feet in the air, or fighting on top of a moving subway train, there’s just no time for any of the drawn out lingo.

It proves to be pretty effective too. People where interested, engaged and ready to see what was going to happen next.

Gzip works in very much the same way. What it does is reduces the overall size of your HTML, CSS, PHP and other files that is constantly being sent over a server to your visitors.

Basically, gzip compression finds similar strings within a text file, and replaces it temporarily to make the overall file size smaller. This form of compression is particularly well-suited for the web because HTML and CSS files usually contain plenty of repeated strings, such as whitespace, tags, and style definitions.

In order to enable gzip compression on your website, all you have to do is add some code to the .htaccess file on your server. Travel to the file manager on your web host and add this code to your .htaccess file:

mod_gzip_on Yes

mod_gzip_dechunk Yes

mod_gzip_item_include file .(html?|txt|css|js|php|pl)$

mod_gzip_item_include handler ^cgi-script$

mod_gzip_item_include mime ^text/.*

mod_gzip_item_include mime ^application/x-javascript.*

mod_gzip_item_exclude mime ^image/.*

mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

This will dramatically increase your site speed while reducing your bandwidth. It basically gets your site to the good stuff faster. It’s translating the same way. In other words, your users see the exact same web page, but it’s getting there much quicker. This is a free option open to any webmaster that’s willing to implement it on their site.

Author blurb:

Hector Franco is the web development and marketing guru for usbmemorydirect.com. He enjoys working one-on-one with his audience and is always looking for new business marketing strategies.