With the age of dial-up Internet gone by, we are now in the era of super-sonic speeds where sites take just seconds to load. Today, the average site owner loses roughly 25% of visitors if their page takes over 4 seconds to manifest on the screen.
Search engines give preference to faster sites nowadays, too. In 2010, Google announced it'd start using site speed as a ranking signal as well as give it extra weight in its mobile ranking algorithm.
So, from a number of perspectives, having a fast website is a clear win.
What is a good site load speed?
Without much theorizing and throwing data at you, allow me to say that it is generally believed in the industry that a few seconds (1 to 2 seconds or less) would be a decent site load speed.
And, even though research demonstrates that users are rather patient when it comes to mobile sites, Google says site speed is even more relevant for mobile. So, having a slow mobile site may lead to it performing poorly in mobile search results.
How can you check website speed?
As per Google’s recommendation, you can do it by logging into Webmaster Tools and heading to Labs -> Site Performance.
Previously, one could see their site's speed data right in that section, but it currently seems unavailable:
However, one is offered to proceed to PageSpeed Insights and to get recommendations from Google regarding speeding up both the desktop and the mobile version of their site:
If you'd like to know the exact time it takes Google to load your site, you can see it in Webmaster Tools under Crawl -> Crawl Stats (the results are in milliseconds):
Bing Webmaster Tools also offers a similar way of finding out how fast your site is for Bing. Just check under the SEO Analyzer section.
Besides search engine-provided site speed checkers, there are tons of third-party tools that check site speed. Plus, they show you which elements of your site take the longest to load, and what you could do to speed things up.
Among such tools are:
This tool lets you arrange site load stats in a way that's convenient to you.
This is a Google-supported service that provides a wealth of data and stats after performing a page load test. It will create graphs that show how quickly different type of content was loaded, will show you the video "evidence" of the loading process, and much more.
So, let's see which mistakes a site owner could be making that are bogging down their site’s speed and, eventually, performance.
1. A huge background image
I used to see this a lot, but not so much nowadays. Still, the problem exists on some sites I encounter. And when I do stumble upon such a site, I really feel like stumbling back.
Take TheGreatGatsbyPlay.Com, a site dedicated to a play based on the famous novel. It did seem slow, and the speed test demonstrated the following (stats provided by the Pingdom tool):
- Load time: 4,43 sec
- Page size: 1,9 Mb
Well, that's a lot! When one looks closer, it becomes obvious that what really slows down the site are the images in its background.
It’s nice to have a great background image, but it should be optimized for the Web.
One can make an image smaller by changing its format, color-richness, meta data or resolution, or all these things at once. In general, what you'd want to do is to reduce the image’s size as much as possible without sacrificing its quality.
So, here are a few tricks you can do to make the size of an image smaller:
- Strip some of its color palette
- Strip unnecessary meta data from it
- Change its quality
- Change its format
These changes can be made using any of the available image editing tools, such as:
Alternatively, you could use image optimization software that simply optimized images for the Web. Such tools make the necessary changes automatically and are a great option if you don't really know how to reduce images' color-richness or strip meta data yourself.
When you're optimizing images for the Web, it’s better to use one of the following formats: PNG, JPEG, GIF or WebP (WebP is a new format developed by Google. Unfortunately, it still isn't supported by many browsers and programs, but that may change soon).
- Always use PNG instead of GIF, unless the GIF is animated
- Always use PNG for images with a small number of colors (logos, graphics)
- Always use JPEG for photographic images (color-rich images)
- Always opt for PNG over JPEG when using alpha transparency
For more detail on why one is recommended to make these particular choices, please see the original article quoted above.
2. Resizing images the wrong way
I once ran a speed test of a friend’s site and I noticed that it had 2 images which:
- were in the same format
- had identical width and height
- had different file size
- one took much longer to load than the other.
Upon closer examination, it turned out my friend resized one of the images the wrong way. What she did was, she uploaded both images - one 4 times bigger than the other - into her content management system (CMS) and decided to make the bigger image the same size as the smaller on in the content management system itself.
What she should have done instead was shrink the images prior to the upload, because, even though changing their size in the CMS does make them look smaller on the page, their actual size of the image stays the same, and both images get loaded in full each time someone accesses the page they're located on.
3. Not optimizing your social buttons
Another friend of mine has an existentialist blog. I noticed that the biggest retarder in his site were the social buttons.
I looked further into the matter and discovered that, even though an indispensable thing on any modern website, social sharing buttons could be capable of adding up to 580 KB to one's site!
I'd recommend you to read Craig Buckler’s "The Hidden Cost of Social Sharing" for more hidden social button evilness proof.
So, what can one do instead of having those gigantic files added to the page?
What Craig Buckler recommends in this case is using URL-based sharing buttons that add much less weight to the page and are quite easy to implement.
4. Creating unnecessary redirects
One more thing that many people do and that also increases the load time of your webpages are redirects. It’s likely that you don’t really think of them in terms of site speed, but sometimes you should.
Thing is, if your site has way too many redirects (301s), en masse these could slow down its load speed significantly:
So, each time you think "What’s the heck, let me just 301 this," think about how that will affect your load time.
5. Not caching static data
It's possible that your site has files that don't change that often, such as your logo, some CSS elements, etc. (as opposed to the fresh content you add to it). So, it's always a good idea to let your static content be cached on your client's side in order to make the site load faster next time the person visits it.
However, as we know, there may be no next time, and one needs to produce a great first impression.
This is when you can use other caching methods. For instance, application-side caching: caching certain results the application produces and making them ready to grab-and-go for users.
Alternatively, you could use inner mysql caching – for instance, when you get a complex query with lots of parameters, responding to which and extracting data for which takes a lot of your resources, you can choose to cache the response for some time, in case you need to serve the same response again.
All these methods minimize the use of computing resources, bandwidth, and ultimately reduce page load time.
By the way, if you use WordPress, Joomla or any other popular content management system, there is a number of site speed optimization plugins (that mostly do caching) available for them:
- JotCache (for Joomla)
- kCache Improved (for Joomla)
- Homepage Cache (for Joomla)
- W3 Total Cache (for WordPress)
- WP Super Cache (for WordPress)
So, are you sure you're not making the above mentioned mistakes that may slow your site down?
Run a quick speed test of your site to find out!