Your website could be the most beautiful site in the world but it does you no good if it takes forever to load. Let’s face it. People are impatient and a slow website prevents potential customers from completing their purchase.
When I go online shopping, I expect pages to load at worst within 5-10 seconds. Any longer than that and I get antsy or I leave the store altogether.
Sure, some people may be more patient than I am but why take the chance? Play it safe and make your business website as fast as possible.
Photo By Meddygarnet
Before you begin however, the first thing you need to determine is how fast is fast enough? This extent of your website optimizations largely depends on the analytics and demographics of your web visitors.
For example, 3 years ago when my wife and I first launched our online store, over 35% of our customers were using dialup. As a result, we had to make drastic cutbacks with our website design in order provide a brisk shopping experience assuming only a 56K download rate.
Today, only 2% of our customers are using dialup (thank goodness!) so we can safely add more multimedia content without affecting the user experience.
To determine the maximum size of any given page, I usually multiply 5 seconds by the weighted average bandwidth of my web visitors. For example, if most of my visitors are using DSL, I might assume a 1Mbit download speed and decide that 5Mbits is the maximum size any given webpage should be.
This isn’t an exact science. Ultimately, you need to decide for yourself how fast your website needs to be.
In all cases however, faster is always better. As I alluded to in my last post, website speed isn’t always a function of your webhost. In fact most of the time, the webmaster is to blame for a sluggish website and not a slow server. This article will describe some tips on how to speed things up.
Decide What Is Most Important And Reorder The Loading
Making your website faster is not always about cutting out images and content. Sometimes, you might like your site exactly the way it is and you don’t really feel like changing anything.
If this is the case and your website is slow, then often times you can get away with simply prioritizing the way your page loads.
What do you want the user to see first? In most cases, your visitors won’t mind a slower site as long as the important stuff loads first and the fluff finishes later.
For example with MyWifeQuitHerJob.com, I always make sure that all of the juicy content pops up first before the advertisements do. That way if the ads are a bit slow to load, it doesn’t drag down the entire blog.
Webpages always load in sequential order, so you should always place the stuff that you want loaded first at the top of your page and the least important stuff at the end of your html document.
In the case of elements that must appear in a specific position on the page, you can either use javascript or css to control the load order.
For example, even though my 728×90 leaderboard ad appears at the very top of my MyWifeQuitHerJob.com, I make sure it loads last by performing the following steps.
- I create an empty <div id=”banner728″> where the ad should be and I set it’s id to “banner728”. This effectively creates a blank placeholder which I can later load using javascript
- At the very end of the page, I include the following javascript snippet
<script type=”text/javascript”>
document.getElementById(“banner728”).innerHTML = “desired ad banner code”;
</script>
This code finds the placeholder “banner728” that I set above and inserts the ad banner into the <div>. Because this script is at the very end of the file, it loads last after everything else.
Don’t Use HTML Image Resizing
A common mistake I see that many newbies make is to rely on html to shrink and resize images. While this technique works and seems harmless, it will absolutely kill the performance of your website.
The reason is because the entire original image must be loaded before it is displayed even though you are only showing a much smaller image.
To prevent yourself from falling into this trap, make sure you take the time to shrink the image to the desired dimensions before displaying it on your site. Don’t just pull images straight off of your digital camera.
Optimize Your Images
The human eye is much more forgiving of image quality when looking at a standalone image on a computer monitor. Therefore, you can get away with much lower quality images for your website.
Make sure you optimize and shrink your images as much as you can before displaying them on your page. I often choose a JPEG quality of 50 percent or less using Photoshop with the images on my sites.
If you are using GIFS, make sure you are not using a larger color palette than you really need. If you can get away with only 16 colors, then choose your GIF with only a 16 color palette.
Analyze all of your GIFS to make sure that none of the color slots are being wasted by duplicates.
Host Video And Large Images With A 3rd Party
Unless you are hosting your website on a beefy set of servers, rich multimedia content will slow down your site to a crawl. In general, it is much more economical to host your videos and larger files on a third party service with a more robust infrastructure that better supports streaming.
For example instead of hosting videos on your own server, why not use YouTube or Vimeo? If you want to own the content that you produce, you can also pay and use a service like Amazon’s S3. Leave the high bandwidth content for the big boys.
Avoid Using Third Party Code Or Hotlinked Images
Whenever you hotlink an image or leverage code that is hosted on another server, you are putting the speed of your website at risk. If the third party server is slow or down, it could also take down your own website as well so it is important to minimize the use of 3rd party code.
In addition, every time your site accesses a third party server, a DNS lookup must be made which can take quite a bit of time depending on network congestion.
A few hundred milliseconds of delay may not seem like much but if you are pulling code from 10 different servers, these lookups can add up to several seconds of latency.
Take Advantage Of Caching And Compression
The bulk of most websites are text and text compresses extremely well. That is why if you enable compression on your server, you can reduce download times by up to 75%.
Unfortunately, not all shared webhosts have compression enabled on their servers. If your website is on a shared webhost, be sure to ask them if their servers support mod_deflate or mod_gzip.
If compression is supported by your server, make sure you enable it on your website by following the steps outlined in this article. If you are using WordPress, the WP-SuperCache plugin already handles compression for you.
In addition to compression, you can speed up your site by caching commonly accessed pages on your website. For our online store, I actually take this one step further and create static pages for heavily trafficked webpages that do not change very often.
Speed Matters
Chances are, someone out there is probably viewing your website on a much slower connection than your own. And you always need to account for the lowest common denominator in order to maximize the profit potential of your online business.
I was pretty shocked to see that our online store still has dialup customers! If I still have them then you might too.
Ready To Get Serious About Starting An Online Business?
If you are really considering starting your own online business, then you have to check out my free mini course on How To Create A Niche Online Store In 5 Easy Steps.
In this 6 day mini course, I reveal the steps that my wife and I took to earn 100 thousand dollars in the span of just a year. Best of all, it's free and you'll receive weekly ecommerce tips and strategies!
Related Posts In Content Creation
- How To Prevent Spam Email Signups And Cut Your Email Marketing Costs By 30%
- Every Tool And Plugin I Use To Run My 7 Figure Blog, Podcast And Online Course Membership Site
- Klaviyo Vs Drip – Why I Use Different Email Providers For Ecommerce And Blogging
- 2017 Income Report: How My Blog Performed As A Business
- Why Your WordPress Site Is So Slow And A Handy Guide To Speeding Things Up
Steve Chou is a highly recognized influencer in the ecommerce space and has taught thousands of students how to effectively sell physical products online over at ProfitableOnlineStore.com.
His blog, MyWifeQuitHerJob.com, has been featured in Forbes, Inc, The New York Times, Entrepreneur and MSNBC.
He's also a contributing author for BigCommerce, Klaviyo, ManyChat, Printful, Privy, CXL, Ecommerce Fuel, GlockApps, Privy, Social Media Examiner, Web Designer Depot, Sumo and other leading business publications.
In addition, he runs a popular ecommerce podcast, My Wife Quit Her Job, which is a top 25 marketing show on all of Apple Podcasts.
To stay up to date with all of the latest ecommerce trends, Steve runs a 7 figure ecommerce store, BumblebeeLinens.com, with his wife and puts on an annual ecommerce conference called The Sellers Summit.
Steve carries both a bachelors and a masters degree in electrical engineering from Stanford University. Despite majoring in electrical engineering, he spent a good portion of his graduate education studying entrepreneurship and the mechanics of running small businesses.
Great info Steve. With googles new attention toward load speed, none of us can afford to ignore these pointers. We have all been on sites that take forever to load. It’s not something we enjoy, so why would we ever want to put our valuable readers through it?
@jonathan
I’ll have to ask my buddies at Google how much weight that are actually to going to place on webpage load speed. If it’s going to make a big difference, I might have to remove some of the javascript on my site.
Great article Steve, it’s amazing that Google have put emphasis on this and if you are linking to a slow website using PPC traffic your ad cost will actually be higher. I’ve often clicked away from sites that take forever to load, so it’s not a good user experience at all.
@Steven
Same here. I don’t even bother staying on websites if I have to wait more than a few seconds for text to appear. I’m curious as to what Google’s thresholds will be for slow loading pages.
Hi Steve,
Do you use JavaScript on your site? What if people have it turned off?
Another issue is caching. Many sites are dynamically generated, but that generation normally does not need to happen when the customer requests a page. It can happen before, and the results cached in memory on the server. There are different techniques used to make this happen, but all the dynamic stuff should happen before the person requests a page.
That’s one of the awesome things about WordPress. A simple plugin handles the caching.
George
@George
Yes, I use javascript in 2 cases on my blog. One, I use it so that large adsense ads only get shown to search engine visitors. Two, I use it to make the banner ads display last on the page. If the user has javascript turned off, then they just won’t get any ads. No big deal.
timely article, as I have been hearing that Google will be scoring websites more on overall speed on the downloading site.
Owner College Lamps & Lighting
Nice one Steve, like the tip with the JavaScript.
I guess another is making sure your web host offers a good speed. A slugish bandwidth can kill the best site. Just wondering how you see the actual geo location of a site.
We are an Australian company and our site is hosted in Oz. However we want to attrack more coaches and clients from the US, do you think we should find a US based hosting company?
That’s one more reason to use WordPress. I try to stay away from Flash. It makes sense on a few sites, but don’t over do it. It makes loading sooo slow.
Awesome tips!
Another word on images: Note that image types often matter as well. If you’re pulling pictures off the web it’s *usually* okay….but file types such as .pngs can hold tons and tons of extra data in layers and colors. It’s probably a good rule of thumb to keep all your images below 200k, and if you can put the effort in, every image below 100k or as small as possible.
Keeping your images small is easily the quickest way to cut down on loading time. Loading time also impacts search engine optimization too!
That is a great piece of advice. I follow some of them, mainly wp-super cache gzip for themes. I will use it speed up my website
Hey Steve,
which CDN are you using? I see that you talk a bit about Amazon S3, which is more of a multimedia hosting account than a real CDN, does Bumble Bee runs off a CDN?
Nope,
We don’t use a CDN for our store. May consider it if we ever decide to go international.
Hi Steve,
first thanks for this useful blog – much learned this morning – bookmarked the site.
a few things to add:
“Reorder The Loading” – always load CSS first and JS at the end, otherwise JS is blocking the rendering of the page until fully executed.
“Optimize Your Images” – also think about using PNG formats
“Speed Matters” – although you mention compression, it is advisable to minify your CSS and JS code (reducing file size by eleminating comments, line breaks & too many spaces – helps a lot 🙂
A good resource for finding out where you can improve loadtime and save bandwidth is zoompf com (not affiliated) which offers a free check of your site.
Hope this helps.
Tom
Wow, it 100% works! Thank you very much.
It’s been a long time since I try to browse on the web about how to speed up the loading of my website, but it’s not targeted to my website cause it has been optimized before. Now I try to speed up the ads banner that use JavaScript to load faster on my website, and I applied this tricks. Finally done.