Techniques to Increase your Site Speed and User EngagementAlways be up to Date subscribe to updates - September 14, 2015
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
- 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
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.
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:
- Lossless image compression
- 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.
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.
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.
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.