How To Improve Web Page Load Time

Trending topics in SEO tend to focus on the more sexy stuff like optimizing the on-page, building links, and how social and author authority are poised to impact performance. While those are all important topics, they matter very little if you have a poorly performing website in the first place. Smart webmasters will do everything they can to optimize web page load time across their sites, as performance and technical optimization are prerequisites to improving the other areas.

But it’s not enough to just say we need to speed up page load time. Let’s look at some of the more effective ways of improving performance.

Minimize HTTP Requests

When a web page loads, it makes a series of requests to “fetch” various components for rendering the page in the browser. The more requests a page has to make, the slower it will fully load for the user.

You can reduce the number of HTTP requests in a few ways. Some of the more common methods are:

Combine CSS and Script Files

It is common sense that loading a single stylesheet or script will be faster than loading multiple items. Although it may not be easy to do if you need different items on different pages, the more you can combine files, the better your site will perform.

Use CSS Sprites

Rather than loading separate images for your background on every page, CSS sprites allow you to build them into a single item within the stylesheet. To take advantage of this technique, you will want to use the “background-image” and “background-position” attributes to serve up the images across your domain.

Reduce Number of Plugins

If you are using WordPress or a similar CMS that is extensible via plugins, get rid of anything you don’t absolutely require to operate the website. Each of these can introduce multiple HTTP requests for pages where they show up in a widget or other sidebar items.

Use a Content Delivery Network (CDN)

Redundancy is an IT tactic that most enterprises and big ecommerce companies use to improve overall uptime. The idea behind it is that you have multiple places where content, applications, or network connections can be accessed, so you have a backup plan in case one of the sources or connections fails.

A CDN operates in a similar fashion. When you adopt a CDN, think of it as creating redundant copies of your static website content in different locations. When a user accesses the website through a browser, content can be delivered in pieces from multiple servers, or from one server with less wait time for the page to load. While a lot of website owners don’t use this technique, it has been shown to improve page load time and overall website availability significantly.

Optimize Images

Believe it or not, images can be a major drag on your overall web page load time. One of the biggest mistakes we encounter during audits is related to images.

As you likely already know, you can resize images using the HTML on the page. This tactic is effective at displaying the image in the right size, but it does not change the original size of the image file. The entire file will still load; it will just look smaller.

The right way to handle images is to consider what size you want it to be in the browser upon final rendering. Then open up Paint, Photoshop, or whatever image editing tool you like, and resize it to those precise dimensions. We’ve seen some measurable page load time improvements on client websites by employing this very simple and easy-to-understand tactic by itself.

Minimize Use of Redirects

Redirects are great tools for several reasons. They can help retain link equity when you change a URL for a page on your site. You can use redirects to create vanity URLs for marketing campaigns and other activities. And they are an important tool for recapturing potential visitors to pages that no longer exist (404 errors).

On the other hand, don’t get carried away using redirects. Some good practices to keep in mind include:

Only Use Redirects When You Have To Do So

By their very nature, redirects add some amount of latency to the page load no matter what type of redirects you use. Always keep this in mind when discussing redirects.

Also, for LAMP stack based websites, you want to keep tabs on how big your htaccess file is. There is a limit to how much overhead you can load into that file. The htaccess gets pinged on every request, so a bigger file could drag down performance for the whole website, not just the page in question.

Avoid Redirect Chains or Loops

We have worked with clients who completely mismanaged redirects. Two common errors that drag down page load time are chains and loops.

Redirect Chains

One client of ours had redesigned and rearchitected their website three times in a five year period. Each time they relaunched it, they simply redirected all URLs to the new pages they had deployed. We found some URLs from the first iteration of the website were being redirected up to FIVE TIMES before landing on the right page. Needless to say, page load time for that URL was in excess of 17 seconds, which is completely outrageous on any device, especially mobile (where it was even slower).

Redirect Loops

Even worse than chaining a list of URLs together, we had one client who found themselves stuck in a redirect loop. Basically, they had created a situation where there were three URLs being redirected, each to another of the three URLs in question. Unfortunately, they had created an endless loop, where each redirect simply led to another redirect! This is a great reason to keep tabs on your redirects – it is easily avoidable and rather unforgivable from a user experience perspective.

Know When To Sunset Old Redirects

Following on the theme of keeping control over your redirects, always know when a redirect has run its course and can be retired. There is no hard and fast rule as to when to sunset old redirects. If you are doing all the other things right and have a functional XML sitemap, 6-12 months is a good rule of thumb to keep in mind. Once you sunset a redirect, be sure the old URL shows up as a 410 status code (gone / no longer exists).

For PPC: No Redirects Allowed

Although most SEM pros already know this, never use a redirect as the destination URL in a PPC campaign. Google will not approve an ad that includes a redirect, and neither will most of the other PPC providers.

Adopt GZIP Compression

GZIP does the same thing for larger web pages that “ZIPping” a file does for it’s filesize – it compresses the page to improve download time. Although every page and website is unique, Yahoo suggests that using GZIP can reduce response size by 70%. Most browsers today are able to “unzip” the web pages on load, so compatibility is not a concern in the vast majority of cases.

Deploy Stylesheets in the Header

This technique is more slight of hand than actual optimization. By moving stylesheets to the header of the page, it makes the page appear to load faster. Many browsers will not render any part of a page until the stylesheet loads. If you move the stylesheet to the top, the page will load progressively, so the user can see some of the page while the rest of the items are loading.

Reduce The Number of Scripts

When you have a ton of scripts on your website, each and every one of those scripts must load on any page where they operate. Be certain that you never deploy duplicate scripts first, and then remove anything that is not critical to your business. The performance gains will easily offset any loss of “nice to have” functionality that isn’t really helping move the needle.

While you are at it, evaluate ways to move scripts to the bottom of the page or even in the footer. That way, the page will load and be viewable first, then scripts can load in the background while users are already consuming the content.

Minify Your Code

I’ve been in countless discussions online about a topic you might find silly: whether to have one or two spaces after the end of a sentence for web copy. Many of us who learned to type on a typewriter swear by the rule of two spaces, while others swear it should be only one.

While this might seem unrelated to the idea of minifying code, it is a consideration for the same reason. The more characters you make the browser load to view a webpage, the slower it will load.

This applies to both web copy and the code itself. Use one space after a sentence for copy; remove all unneeded blank spaces in your code, whether that code be Javascript, CSS, or even HTML.

I get why there are a bunch of spaces in there – it makes it easier to audit the code or learn it if you’re new to a website. It also keeps it looking more organized for the developer. Unfortunately, it also adds overhead to the page loading process. Drop the tabs and stray spaces if you want to speed up page load time.

Optimize for Mobile Views

While you may have a great page load time in desktop browsers, it is becoming increasingly important to optimize for mobile. This not only affects the user experience on devices, but it can also influence where Google ranks you in mobile SERPs!

There are quite a few ways to optimize page load time for mobile. Here are some places to start:

Use a Responsive Theme

Those who know me are aware that I am a huge proponent of responsive web design. When done right, the benefits are many. A well-built responsive theme will take into account how the user experience should adjust for each device and screen size, and optimize what is shown dynamically. This includes reducing some of the overhead you would load in a standard browser.

Make Mobile Redirects Cacheable

For webmasters that prefer to have a separate code base for mobile, it is important to optimize how redirects to the “m.website.com” subdomain are handled. If we make those redirects cacheable, repeat visitors will be able to load the proper page faster on subsequent visits. Otherwise, they have to go through the redirect every time they access the site, which can slow down page load time.

Optimize Javascript Parsing

We already reviewed why it is important to reduce scripts. Even after doing so, you can still do further optimization of how scripts load by deferring when Javascript is parsed on mobile devices (or all devices if you like). This allows the page to render in the mobile browser faster, and only accesses some of the Javascript components when they are needed.

When All Else Fails: Upgrade Your Hosting Plan

You could do everything recommended above and still fail to get page load times under 1.5 seconds, as Google recommends. That is when you know that you are dealing with server-side issues.

If you own the server and can tweak it until it runs better, by all means do that. For those of us who choose to host our websites in the cloud, we are dependent on our web host for server response time.

Keep in mind that many hosts are operating in a virtual machine environment. This means that, although your website may be hosted on the same physical box as many other sites, it is serving up via a virtual server (a.k.a. “slice) on that same piece of hardware. There can be many virtual servers on a single hardware server.

Now imagine that someone on another “slice” has a DOS attack or gets an influx of traffic after being featured by a major media outlet. Since hardware resources are being shared, this can lead to downtime for your own site as well as an unexpected slowdown in performance. The problem will be even worse if you are hosting your website on a limited bandwidth plan, often called an “economy hosting” plan or similar.

If you care about performance, buy the most premium hosting plan you can afford. Or even better, move to a host that specializes in your CMS, for example, WPengine for WordPress sites. We use WPengine and have been ecstatic about the performance ever since moving over to them.

Conclusion: Page Load Time Optimization

Web page load time is a must if you want to do well in organic search. If you want your on-page and off-page efforts to work, prioritize optimizing page load time first. It will make a world of difference over time.


Feature Image Courtesy of Joshua Granderson (holisticmonkey) on Flickr