Patience may be a virtue but it’s not one that your site’s visitors possess. When it comes to your site’s loading time, every nanosecond counts. And a slow loading time may cause significant damage to your bottom line, seeing as one of the leading causes of page abandonment is slow page response.
Check out the chart below and notice how the rate of page abandonment positively correlates to longer loading times.
According to an Aberdeen Group research report, a one-second delay (the blink of an eye!) “can result in a 7% reduction in conversions” plus “a 16% decrease in customer satisfaction.” And stats like this and the ones below don’t lie:
- “47% of consumers expect a web page to load in 2 seconds or less.”
- “40% of people abandon a website that takes more than 3 seconds to load.”
- “If an e-commerce site is making $100,000 per day, a 1-second page delay could potentially cost you $2.5 million in lost sales every year.”
Yikes! And you thought rush hour traffic delays were frustrating. With stakes like that, and the consequence of a single second delay amounting to losses equivalent to the world’s most expensive pile-up (“damaging eight Ferraris, three Mercedes-Benz, and a Lamborghini“), you need to make sure your site loads as fast as possible in order to prevent your company from losing out on significant revenue.
But what if your site’s loading time is more tortoise than hare?
How To Decrease Page Load Time (And Increase Conversions)
1. Simplify Your Design
Kathryn Aragon of Mirasee: “According to Yahoo, 80% of a Web page’s load time is spent downloading the different pieces-parts of the page: images, stylesheets, scripts, Flash, etc. An HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render.
That being the case, the quickest way to improve site speed is to simplify your design.
- Streamline the number of elements on your page.
- Use CSS instead of images whenever possible.
- Combine multiple style sheets into one.
- Reduce scripts and put them at the bottom of the page.
Always remember, when it comes to your website, leaner is better.”
2. Enable Gzip Compression
If you create high-quality content that includes images and video, your pages may be 100KB or more, which is on the bulky side and likely to cause download delays. However, by zipping your pages through a technique called compression, you can reduce your pages’ download time by up to 70% without compromising the quality of your images or video content.
“Compression is a simple, effective way to save bandwidth and speed up your site,” says Kalid Azad. And you can accomplish compression with a tool called Gzip.
Notice the difference in file size in the following two conversations between browser and web server.
Some web hosts have Gzip compression built into their servers while others call upon third-party modules. Older browsers, however, like Netscape 1.0 on Windows 95, may not be able to accept compressed content. But you don’t need to worry about that happening too often, seeing as 90% of today’s traffic comes through modern browsers.
Run a GIPZipTest to see if your site is already Gzipped. Or if not Armin Jalili says, “You can enable it by adding the following code to your .htaccess file:
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>
Or, use the following PHP code at the top of your HTML/PHP file:
<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>
Or, simply use plugins for your CMS (like the WP HTTP Compression plugin for WordPress).”
3. Optimize Your Images
While a picture may be worth a thousand words, if the words your pictures elicit from your visitors are akin to “This image is taking forever to load!” you may want to use an editing tool, such as one of the options below, to reduce the size of your images.
Simple Options:
Options For Your Phone:
Options For The Cloud Or Your Desktop:
Image editing tools help you achieve three main goals. First, they crop your images to the appropriate size (before you upload them) based on your page size. Second, they decrease color depth to the lowest level without sacrificing crispness. And lastly, they get rid of image comments.
The best image format to use is JPEG followed by PNG. Just be aware that older browsers may not support the latter option. Reserve using GIFs only for animated images and simple graphics, ones that are less than 10 X 10 pixels or use a color palette of three or fewer colors, and refrain from using BMP and TIFF files altogether.
Once you’ve optimized both the size and format of your images, it’s time to examine the code. Most notably, you don’t want to leave image src codes empty. The HTML code for an image includes the following:
<img src=””>
And when the quotation marks contain no source, “the browser makes a request to the directory of the page or to the actual page itself,” notes Kathryn Aragon, which “can add unnecessary traffic to your servers and even corrupt user data.” So make sure to consistently attribute the src with a valid URL.
4. Go-Go-Gadget Cache!
When visitors arrive at your site for the first time, their browsers have to download as many as thirty components, including the HTML document, stylesheets, images, and javascript files. This process can take as long as 2.4 seconds, which may not seem like much, but in the context of web-browsing, 2.4 seconds definitely has room for improvement. And that’s how enabling cache-browsing comes into play.
Once a page has been loaded, its various components are stored in your visitors’ cache. So when visitors return to your site, their browsers have to download only a few items, as opposed to thirty, thus allowing your site to load significantly faster.
According to Tenni Theurer, formerly of Yahoo, loading a page with a full cache can reduce the number of components that need to be downloaded to just three; plus, a full cache can shave off as much as 1.5 seconds from your site’s loading time (from 2.4 seconds down to .9).
Use plugins like WP Super Cache or W3 Total Cache to enable cache-browsing on your site or to learn more about how to optimize your site with HTTP caching, go here. Be aware, however, that “reducing the number of HTTP requests has the biggest impact on reducing response time” because “the percentage of page views with an empty cache is always ~20%,” states Theurer.
5. Compress Your CSS
CSS, or a cascading style sheet, is used to hold a website’s information in the correct format. And your site accesses this information either through an external file or inline in the HTML document. “In general, an external style sheet is preferable, because it reduces the size of your code and creates fewer code duplications,” notes Kathryn Aragon.
And an external file sheet that’s been optimized means your website’s information will download faster, making your pages accessible to visitors at a speedier rate.
To optimize an external file, start by analyzing your CSS to see if there’s any unnecessary code. And if there is, get rid of it. Next, remove any extra spaces from your code in order to make your file as small as possible. Below, Gregg Crystal of Inalign shares how you can minimize your CSS files.
Gregg Crystal: “First, see if your CMS already minimizes your CSS or if there’s an option for it. HubSpot, for example, already minimizes your CSS by default whereas WordPress or Joomla do not.
If your CMS does not have a minimize CSS option, you can use a free online service like csscompressor.com to minimize your files. Simply paste in your CSS and hit ‘Compress’ to see your newly minimized stylesheet.
Minimizing your resource files is a great way to knock some size off your files. Trust me—those little spaces add up quickly.”
6. Don’t Be A Plugin Hoarder
For just about any function or task you can think of, you can find a plugin that can handle it. But loading your site up with plugins is like filling your plate on Thanksgiving. The more food items you add, the harder that post-meal food coma is going to hit you, slowing you down, making you feel more lethargic.
So don’t let your site operate like you doped up on soporific holiday treats. Trim the fat and use only the plugins that are necessary. Also, try to find plugins that perform two or more functions at once.
Other Things You Can Do
- Reduce redirects
- Use a content delivery network
- Disable pingbacks and trackbacks
- Minify your files
How Speedy Is Your Site?
Page Speed Insights
According to Tyler Ellison, Conversion Fanatic’s Advertising Manager, Page Speed Insights is the most important tool you can use to assess your site’s load time.
Tyler Ellison: “[Page Speed Insights] provides a comparison between mobile and desktop including showing how the page appears visually on the device, which is vital for optimizing for mobile traffic. While it doesn’t tell you a load time specifically, it uses a grading scale and gives recommendations on what to fix and how to do so.”
Accessible through Google Labs, Page Speed Insights is available as both a web-based tool and as a Chrome extension. KISSMetrics.com provides the following example of Page Speed Insights being run on its domain, providing “an overview of high priority, medium and low priority fixes that can help increase your page speed,” reports Sherice Jacob.
Pingdom
Tyler Ellison: “In addition to Page Speed Insights, use Pingdom to tell you load times. The times will vary a bit each time you run the test, but [Pingdom] tells you how long it took for the page to load and shows a graphic of what files took the longest. This is an easy way to identify what content requires compression to speed up load times.”
Conclusion
Justin Christianson: “There have been studies that have shown that you have less than three seconds to get and keep the attention of your online visitors. If your page takes time to load, due to short attention spans, your visitors will get frustrated [and] bounce before taking any further action. A good rule of thumb is to make sure your page loads in under two seconds. Compress images, consolidate Javascript and other code, and remove unnecessary elements.”
Shaving even just a nanosecond off of your site’s loading time can mean an increase in conversion rates; plus, it will boost your visitors’ confidence in your business and make them more likely to visit your site again. Nanoseconds count. So do what you can to make your site as efficient and quick-loading as possible.
Have something to add? Leave a comment.
Be sure to like, share and subscribe.