When you visit a website, how long are you willing to wait for the page to load?
If you’re like most users, 3 seconds seems to be the point of frustration.
Page speed tolerance does depend on a couple things like who the user is, what the intent of the visit is, what the industry is, and a lot more. But, on average, its 3 seconds before the visitor to your website leaves your site.
Not convinced? The folks over at Section.io found out that an increase in page speed load time from 3 seconds to 4 seconds will increase the bounce rate for that page by over 75%!
Amazon did a study on how page speed impacts their sales and they found estimates that showed a 1% drop in sales for every 100ms delay in page speed. Now, I realize that you’re not Amazon, but you’re also probably not getting 197Million visitors every day, either. That means that you’re less able to sustain a loss of users. If Amazon has 197M visitors every day and they lose, let’s say 1,000,000 of them they won’t notice that as much as if you lose 20 visits to your site every day.
What’s Your Page Speed?
Since page speed is so important, are you curious what the homepage on your site is? Here’s a link to Pingdom’s page speed test. Just put in your website’s domain name and they’ll run a report on how fast your homepage is.
So, if you’ve run the report on your site, what did you find? Is your site loading quickly, within 3 seconds? If it is, Congratulations! Now check all of the most important pages of your site to make sure that they are loading quickly, too.
If your pages aren’t loading within 3 seconds you have some work to do.
Optimize Your Images
Biggest Drain On Speed: Images are the first place to look for slow load speeds. Images are really important to getting people to engage with the content on your website’s pages. However, all too often people will just upload an image that they have and put it into the page without optimizing the image for size.
Optimizing an image means making it a size that keeps the image crisp and easy to see, but small enough that the visitor doesn’t have to download unnecessary data, because data = time. Now, I don’t want to get into the weeds on data transfer, but there is a basic concept that you have to understand if you want to speed up your website
Page load time comes down to how fast your user can “download” your page. Someone on a cell phone is going to have a slower connection than someone on a desktop with a cable connection.
- According to Verizon “Verizon 4G LTE wireless broadband is 10 times faster than 3G—able to handle download speeds between 5 and 12 Mbps (Megabits per second)”.
- According to Comcast their slowest internet connectivity speed is 15 Mbps. Considerably faster than Verizon’s slowest speed and still faster than Verizon’s fastest 4G speed.
Now that we have that information, let’s put it to use on a typical webpage download. If you have 2 images on one of your website pages and each of those images (unoptimized) has a file size of 1.2 megabits then someone on a 4G cell network at, let’s say at 9 megabits per second, is going to have to wait 2.33 seconds just for those 2 images. That’s 77% of the way towards their maximum wait tolerance of 3 seconds! As you can see, the image file size is important to getting your page to load as fast as possible.
So, now you’re probably asking yourself “What makes up an image’s file size?”. Good question! Unfortunately, there is no easy answer.
First Step To Image Optimization
The file size of an image is a result of a number of things. The file type (typically either GIF, JPG, or PNG), the image size (width x height dimensions), and the depth of the image’s colors (from 256 colors to 16 million colors).
- GIF: This is the oldest image format that can be used on the web and it still has some benefits today, but it also has some limitations. The benefits of a GIF format is that it can have a transparent background, it’s generally a small sized file (because of the limit of 256 colors), and works really well for icons and vector graphics.The cons of a GIF file is that, again because of it’s limited color capacity, if you save a picture as a GIF, it’s not going to look very good on your site.
- JPG: Images are typically saved in the JPG format. The JPG format can handle 16 million colors making it a good format for photos. However, if you were to save a vector graphics as a JPG format you’re building in excessive size to the file that you don’t need.The con to JPG images is that they don’t don’t transparency. Let’s say that you wanted to display something like a logo on your webpage but you wanted the background of the logo to be the color of the page that you’re putting it on. In this case you’d have to save the logo file to a different format than JPG.
- PNG: This format and the JPG format are really close in terms of benefits and disadvantages. The benefit of the PNG format is that, like the JPG format, PNG can handle 16 million colors. The added benefit of PNG over JPG is that PNG can handle transparencies.
So, that’s the first step in optimizing your images, decide which format will be best for what you’re trying to accomplish with the image.
Second Step To Image Optimization
To decide on this, you have to think about where on your web page you’re going to put the image. If you’re going to optimize a picture as a hero image (also called banner image) for your page, you’ll probably want the image to be as wide as your web page.
There’s a lot of opinions to how wide to make a web page. One of the determining factors has to do with screen sizes, today. For desktops, the average width of a monitor screen’s resolution is 1366 x 768. So, assuming that your web page is built for the average screen size and you want your picture to fill up the width of your page then the width dimension for your image should be 1366 pixels.
If you have an image that you want to insert into the text of your website page and you’d like to make that image about 1/3 of the width of the page, then you want to make the image about 455 pixels wide.
The next best thing that you can do to optimize your images is to reduce the pixels per inch (PPI) dimension to be not more than 72ppi. 72PPI is the web standard for image optimization and will reduce a lot of file size from your images. There is a lot of debate in the web design community about the proper ppi to optimize to. In the end it comes down to a combination of file size vs image appearance. If optimizing your image down to 72ppi keeps the image looking sharp and crisp, great. If not, optimize it down to the point just before it looses crispness.
Get A Better Host
For the most part, people view website hosting as a commodity. The cheapest hosting package is generally the one that wins. Nowhere is the adage You get what you pay for more true than when it comes to hosting packages. Our fees are $540 annually to host a website on our servers. There are a lot of places that you can get hosting packages for under $120 a year. As you can imagine, there are a lot of differences between our hosting service and the cut-rate hosting packages out there and speed is just one of the differences.
Think about how hosing works. There is a server that your website’s files are on. That server is connected to the internet for your visitors to get to. There are a couple of things about the server that will impact how fast it can deliver your website’s pages; the amount of memory in the server and the size of the processor that is in the machine, and the number of websites that are on a server. Let’s look at these three components:
- Memory: I don’t want to get overly technical about this but it’s important to understand the basics. Memory is a “temporary” storage system that stores files that are getting used on a regular basis. If the server that your website is on has a small amount of memory it can’t store as many files (pages) at one time and has to make more reads and writes to the hard drive of the server.Accessing the hard drive is a very slow process as opposed to just pulling a file from the memory. Worse yet is if you are on a server with a low amount of memory and there are a lot of websites on that machine. Now you’re faced with limited capacity for holding files (web pages) in the memory and because there are a lot of sites, there are a lot of people hitting that server. That combination is deadly when it comes to website speed.
- Processor: Again, I’m not trying to get into the weeds on this but here is the basic thought on why processor is important. The processor executes instructions. That means it performs the tasks that are required to display your website to the people visiting it.Years ago when website pages were simply html code, there was very very little load placed on the processors. Today, with e-commerce, content management systems, videos and all of the latest technologies, the demands on a server’s processor is much higher than it’s ever been.Just like the issue with memory, a cheap hosting solution that has either too slow of a processor, too many websites on the server, or many times, both too slow and too many sites will spell doom for your site’s speed.
Ok, first a quick explanation of caching.
Remember when you were in 3rd grade and learned how to add numbers? Remember writing out the equation 3+3 and then pondering the equation until you figured out that the answer was 6. As time went on you didn’t have to write out the formula any longer, you just knew (and hopefully still know) that 3+3=6. The answer to that equation is “cached” in your memory.
This is kind of how caching your website pages works. When a page is loaded for the first time, all of the parts of that page, the images, the content, the css code, the html code, etc, load for the user and if caching is setup on your site, a copy of the parts for that page are stored in the cache. Now the next time that someone lands on that page in your website, the page is delivered from the cache instead of the server having to assemble all of the parts and send it to the visitor on your site.
There are two different ways that caching can be setup; server side and browser side.
- Server Side: This method uses an intermediary between the server and the visitor’s browser. This intermediary holds a certain quantity of pages from your site. When it be comes full, the oldest page will be cycled out by the newest page coming in. Again, this server side caching is exponentially faster than the visitor’s browser having to wait for your server to send all of the pieces of a page to the browser.
- Browser Side: Today’s browsers have the capability to cache pages that have been displayed within it. Then, when you go back to a page that you have visited before the browser can pull that page from it’s cache and display it, once again, to you.There is a bit of a difference with browser caching, though. Because browser’s caching size is much more limited in comparison to a server browser caching will typically save favicons, content, images, and CSS code. Everything else still has to be sent to the browser from the server.Browser side caching isn’t as fast as server side, but it is still faster than no caching.
There are a lot more things that can be done to speed up a website. What we’ve covered here are the most common and simple steps to speeding up your site.
The speed of your site is one of the most important components to online success for a couple of reasons. First, and most important is that your visitors are not going to wait for your website’s page to load. They’re just not going to do it. So if they leave before your page loads, you’d be further ahead if they’d never come to your site in the first place.
Second, Google has told us that a website’s page load speed is a ranking factor for SEO. And, who doesn’t want to rank as high as possible?!