My previous article about reducing bounce rate focused on design issues. Keeping your text legible against its background (especially images), not hijacking your user’s preferences, and keeping your pages focused– both in terms of content and layout. These are all about the presentation of your web pages, and how to keep them appealing to site visitors. However, some bounces happen before the content finishes loading, and these are the worst. If your website is jumbled, that’s one thing– a determined visitor can figure out how to get what they want anyway. But a website that loads poorly turns a user off before they even glance at what you have to offer.
I recently came across a webmaster’s plea for help about a near-100% bounce rate. He wasn’t getting exclusively spambot hits, these were real hits. A very short investigation revealed that his website had a twenty second load time. No one wants to wait twenty seconds for a web page to load, especially in the age of near-ubiquitous high speed connections. Bam, 100% bounce rate.
Here are some tips to keep that from happening to you.
Streamline Your Image Files
Every modern web page loads three things: the HTML that structures the content on the page, the CSS that styles that content, and any media featured on the page. Streamlining these files can reduce the load time, sometimes reducing load time by 90%.
The potentially “heaviest” files are images, videos, and any other media you might have on the page. Images are the most common, and are still sometimes not optimized for where they appear on web sites. A 5mb file may look pretty, but it will load slowly. And if it’s not sized correctly, it will load at full size before the styling shrinks it to its intended size. This is very unattractive.
So the first step is to optimize the file for web use. This means 1) saving it in a format appropriate for web usage (usually .gif, .jpg, or .png), and 2) reducing its resolution or color profile in order to reduce file size. Desktop photo manipulation tools, like Adobe Photoshop and GIMP have these features built in. A number of web-based resources can be found with a quick Google search, as well.
But wait! Before you save that file, figure out how large you need it to be in every place it will appear. A banner image on one page, and a thumbnail on another needn’t be saved as the same size. Save a “banner” version at the size you need (say, 1000px or 1300px wide), and a “thumbnail” version of it (400px or 600px wide), and use each one in its appropriate spot. This keeps the thumbnail image from loading at the banner size, speeding up your page’s loading.
Minify & Concatenate Your CSS & JS Files
CSS styles your website, giving it color, borders, shadows, and all the things that help to make it approachable and effective. JavaScript (JS) runs most or all of the interactivity on your web pages, from password validation to dropdown menus. Depending on the size of your site, its complexity, and whether or not it’s responsive, these files may run in the hundreds or thousands (or tens of thousands) of lines long. Every line gets parsed by the browser while it loads your pages.
To reduce the load time for these resources, link to a minified version. Minifying a CSS or JS file removes all whitespace and any unnecessary characters, reducing those thousands of lines to a fraction of their former number. Google has some suggested resources for optimal minifying of your files.
Another speedy practice is to concatenate (combine) your CSS and JS files into a single file of each type. Loading your custom CSS file, a FontAwesome CSS file, and any custom CSS from plugins on your site sends out a request every time, which has to be responded to by the remote server. Only after the response is received can the browser load each resource. By combining all of your CSS into a single file, you reduce this to one request, reducing wait time significantly. In fact, the more numerous your CSS files, the more you’ll gain by concatenating your CSS files!
Finally, consider removing unused classes from your CSS files. If you’re not using them, you don’t have to load them. So don’t! This can be especially useful if your site is built on a framework (e.g., Bootstrap, Materialize, Foundation) or using a robust CMS theme (like most of the popular WordPress themes), but don’t take advantage of the full styling offerings.
Load Your Linked Resources in the Proper Order
Browsers load files as they get them, which is the order in which they’re requested, which is the order in which they appear on each page, from top to bottom. All the pretty stuff that JavaScript does to your page does not matter if the user can’t see any of the content on the page. So load the CSS first! This way, your page appears as you designed it to, then the JS extras come into play. And if, for some reason, you need some JS functionality to run first, break those off into a separate file and load that before the CSS, then the CSS, and then the JS that can wait until later.
Google has a whole ton of best practice resources when it comes to web development (though the current state of Google usability is more than a little hit or miss, in my opinion), and performance optimization in particular. If you want to really deliver the best experience you can to your users, this is a great place to start.