Techniques to Increase your Site Speed and User Engagement

Basically, before you start A/B testing, one of the things you need to ensure is running fine on your website is it’s speed. Specifically, how fast the site and it’s pages load. Site speed is one of the most important aspects of any website, and it is even more important for a business website. Site speed is one of the first things that users are sensitive to. If a page does not load in a certain amount of time, they are likely to abandon it in just a few seconds.

Another thing that was discussed in our Convert webinar is the tactics you can take to speed up your website. Yottaa‘s Lucy Orloski presented 5 techniques you can consider a quick hit, and they have been hailed as the lowest investment, highest reward steps you can take to make your website faster. What you’ll probably notice about these five techniques is that they are geared at accomplishing two things in particular:

• Reducing the number of requests your site has to make in order to load,
• Reducing the overall weight of the site.

For a website to load, we want the browser to communicate to the smallest possible number of other websites. What else we want is the overall file size that has to load for that page to be as small as possible. So conceptually, all 5 of these techniques are aimed at lowering these two numbers: reducing the number of asset requests, and reducing the overall weight of the site.

These are the big things that can be done to speed up a website:

• Error Elimination
• Image Optimization
• JavaScript Minification
• Third-party Requests
• Use CDN

“While load time isn’t a significant contributor to Google rankings, it can contribute to the rise and fall of your conversion rate. Remember that for every second you shave off of load time, you’ll tend to boost customer confidence and trust in your site. A few seconds can make all the difference!” -Sherice Jacob

Eliminate Errors

The first step you want to take when you’re looking to speed up your site is to eliminate errors. This applies to you especially if you’re running paid campaigns, and you want to ensure your page is devoid of errors and any missing assets.

Any deprecated site pages you may have, some of which might not be of your own making, flow down your website. When a user runs into a page and they try to load it and it’s not there, that will really slow down the rest of the site. To fix this problem, you could use a tool like Google Webmaster Tools to identify any page that gives you the 404 error. You will then want to 301 – redirect – them to another page that makes sense so that these kinds of pages stop slowing down your site.

As mentioned, a good place to look for common culprits here are the paid campaigns you may be running, especially paid search, to see if any of those landing pages can deprecate so quickly. So, go in and redirect the user from any non-existent pages or missing assets such as images that no longer exist or videos no longer playing. This is basically a clean-up that will help speed up your site significantly.

[Tweet “The first step you want to take when you’re looking to speed up your site is to eliminate errors.”]

Optimize Images

This is one of the easiest things you can do to optimize your site speed. With the web only getting richer and more appealing over time, the idea here is not to sacrifice images. Rather, what you can do is sacrifice the file sizes of those images. There are two primary ways or techniques used to optimize image files:

1. Lossless image compression
2. Lossy image compression

Both of these techniques do the same thing: they take a file and make it smaller by reducing the size. Lossless image compression preserves most of the picture’s quality but its downside is that it doesn’t make the files significantly smaller.

Lossy image compression, on the other hand, does a better job at knocking down the file size significantly, and it would be suffice to say that this technique is the better of the two. A user surfing the web on a standard monitor with a standard resolution doesn’t really notice the difference. Compressing images will make a huge difference in the overall weight of your site, and is a big step you can take.

“Reduce the amount of data used by your resources: HTML, CSS, and JavaScript can be minified by removing unnecessary whitespace and comments. Further optimizations may be possible through the use of tools which rename variable names in your resources; consider using CSS instead of images where possible and enable compression” -Google Developers.

Additionally, there are more technical steps you can take when it comes to optimizing your images.

a. Optimizing the assess rate – you can take a bunch of smaller images and merge them together into a single larger file. This tends to reduce the number of requests the browser has to make to be able to load the page. Rather than going out and loading five different files, the browser will go out and load one which reduces the overall number of requests and consequently, reduces the load time too.

b. Inlaying images with a data URI – this involves using tools (revealed at the end of the presentation) to ensure your images are in line with HTML or CSS files, instead of being fetched individually by their individual URL. Again, the aim here is to reduce the number of requests a browser has to make to be able to load the page.

Thus, between compressing your images using these techniques, you can make a very significant impact on your page load time just by paying attention to your images and the way you’re loading them on your site.

Minify Your JavaScript

When determining the elements that are the biggest contributors of slowing down site speed, more often than not, JavaScript is always top of the list. The reason is – it takes a while to load because there is another big request. The browser has to go meet another service like Google Analytics, or Omniture, or ClickTracks, you name it, so that it can finish loading the page correctly.

[Tweet “#JavaScript is always top of the list of the biggest contributors of slowing down site speed.”]

Lucy gave an example of a test they conducted at Yottaa to determine what impact JavaScript really has on page load speed. They took a bare site with no JavaScript on it and this one loaded in as little as 4 seconds. They proceeded to add in some JavaScript and the the load time increased to over 5 seconds. Then they optimized everything else on the site: images and other different assets and they managed to bring the load time down to 3 seconds. After that, they reduced and optimized the number of JavaScript requests, and then optimized the actual JavaScript itself. The resulting page load speed came down to 2 seconds.

The point here is, it can make the difference of as much as a second just to optimize your JavaScript. Containing and minifying it is key, and it is a big thing to think about given we all have sites full of JavaScript, and even more so for the marketers.

So, what is this JavaScript minification? Most standard JavaScript codes tend to have a lot of white space in them. The code has line breaks and lots of white space. So, when you minimize all these things and optimize your script, you’re basically cutting out the dead weight from your script code and making it lighter. In the process, you’re reducing the overall weight of the file that the website is attempting to load. That’s what minifying JavaScript means.

Third-party Requests

As a marketer, you’re bound to have a lot of third-party requests on your site. These include things like the Facebook Like button or Twitter, or any chunk of JavaScript or type of widget you put in from another site.

The first step you can take is to think about any kind of widgets on your site that aren’t strictly necessary. You can also run a test on a page and see which widgets take the longest time to load and/or stop other parts of the page from loading.

What you can then do is search for some replacements for some of the popular ones: social media sharing is by far the biggest offender among these, so try finding a replacement that’s lighter in weight, and doesn’t take as long to load.

This is particularly important for your homepage, and other areas like sub-pages and product pages. This is where you want to keep your third-party assets if yours is an ecommerce site. However, on the homepage, those pages tend to be so rich with many images and different calls to action, which translates to more JavaScript. If there’s one place you want to be frugal with respect to your third-party widgets, it is your homepage, because people are likely to bounce off before they can explore the site deeper.

There are two technical steps you can take with any third-party requests against social sharing buttons. The first is to ask your web developer or engineer to set things up so that the script for those loads asynchronously, meaning they load after everything else on the site. Otherwise what they’ll do is stop other pieces from loading and leaves the user with a semi-loaded screen.

The second tactic you can use is to basically set up your web page from a technical perspective such that it only loads the widgets or third-party assets only after the user has scrolled to the point where they are on the screen.

Use a CDN

A CDN is Content Delivery Network. It does many things such as handling traffic sites, reducing the number of actual requests to be made for a page to load, easing the pressure off an overloaded infrastructure, among many other functions. CDNs are a solution for slow back-end metrics, front-end metrics and a variety of other aspects. For clarification on these metrics, you can check out previous posts. Some of the techniques discussed in this article are front-end solutions, and they combine with CDN (a back-end solution) to form the bigger picture which is to optimize page load intervals from a user’s perspective. For the complete presentation, you can watch the webinar here.