Editor's Note: Kara Whitaker is an author with Ghergich & Co. She joins us today to discuss the dangers of page latency, and what you can do to fix a slow website. A version of this article first appeared at AppDynamics.
The internet is a tremendous resource with lots of competition. Unless you have the right combination of search terms, appealing graphics and interesting information, it's easy to get passed by with nary a click. But once you have all of these elements, there's still a simple danger that webmasters and marketers tend to overlook: poor loading time.
According to statistics, the first few seconds can be the most important factor in your website's visitor retention and bounce rate:
- Decreasing your load time by 1 second can increase conversion rates by 27%
- More than 50% of visitors with mobile browsers will abandon pages that take more than three seconds to load
- 1 in 5 users who leave your website will never come back
The moments that pass after a prospect hits enter and before your website appears are absolutely invaluable, and as a result, optimizing pages so they load faster is imperative for any viable web presence.
Why Visitors Leave (And Never Return!)
Think about the last time you abandoned a web page; more than likely you were underwhelmed by how quickly the page loaded. Your patience tested, you decided to leave and spend your precious time somewhere else.
Almost every time this happens, one culprit is to blame: too much page weight. Page weight is a measure of all the elements required to render a webpage in a browser. A client's computer, phone or tablet has to download images, scripts, custom fonts, text and more before everything is correctly loaded.
As we have shown, the more seconds you make visitors wait, the more you risk them leaving your site for good. By following bad design methods or hiring a developer on the cheap, it's easy to fill your site with bloat that it doesn't need. If you don’t fix your page weight, you might enter the pantheon of sites that consumers abandon by a rate of one in five.
In order to evaluate where your page weight should be and how it can be improved, you should evaluate where you currently are. There are a number of different tools that can help you do that before taking steps to fixing the problem.
To help you along the way, we have prepared a simple infographic for reference. Here are the main points first:
Fix Hefty Images
Audio-visual content is usually the most hefty element of any website in terms of bandwidth and filesize. When uploading images to your site, make sure of the following:
- Don't use larger images than you need to; a button that appears as 100 x 100 pixels doesn't need to be stored as 500 x 500. If you are worried about losing resolution when you need it down the road, store larger images locally, and keep the smaller ones on your site.
- Use good compression methods to cut down the filesize of images by orders of magnitude. Most modern photo editing software - including Photoshop - has a way to do this, and there are also free tools like Image Optimizer.
- Compression can even be built into your website so that files can be sent in a smaller size, and expanded on the client side of things. Enable gzip on your server if you haven't already.
Reduce HTTP Requests
Every time a client's browser has to download a new resource with a new link, this adds loading time. Over the long run, the lag can build to unacceptable levels - there are a few ways to mitigate this problem:
- Avoid pages with redirects; keep links on your website up to date so clients can access any page - especially the landing page - directly. If their browser has to jump somewhere else, this doubles the time it takes for the final page to load.
- Concatenate CSS files - CSS is the code your website uses to load styles and formatting. Many websites have multiple CSS files for different purposes, but this is poor practice since it adds more elements that a browser has to access before a page loads. By concatenating CSS scripts, your website will only need one large CSS file to load all your style elements.
- Use image sprites - much like CSS, many websites store separate images when they can actually be included in one file. This generally won't work for large, important images; but by using a single sprite that includes all of your web icons, you can cut down on the number of files a browser has to load.
Optimize Your Network
Sometimes loading times are bad for the simple reason that your clients are separated from your website by thousands of miles, and their devices just aren't good enough to access your site quickly. There are some simple fixes -
- Use a content delivery system that will stripe your website's heaviest elements across servers around the world. This will ensure that clients are always close enough to load them quickly, without the added burden of latency.
- Trim page weight for mobile users - a very important market segment - by using responsive web design; make sure that your website has a mobile version at the very least so visitors with smaller, weaker devices are not hampered by a website designed for desktops computers.
- Use browser caching so that when visitors navigate to different parts of your site, they will not have to reload the same elements again. This will also ensure that repeat visitors have a much faster load time, depending on how long their browser cache lasts.
With that said, here's a simple infographic with the most important information and resources you need to get started. Feel free to download and share with colleagues or friends -
Learn more with these related OMI classes:
Convert More Website Visitors into Customers: Best Practices for Usability and Analytics
Landing Page Optimization for B2B Marketing
Engaging with Mobile Marketing: Create Responsive Designs
Visit the Online Marketing Institute to browse over 400 classes in the digital and social media market