Bron Thulke - Web Developer
Keep Your Website Page Size Under Control
How long does your website take to load?
According to statistics on the HTTP Archive (an online resource for website performance and technology information), the since late 2010 the average page size for major web sites has grown from a generous 750KB, to an oversized 2.1MB!
Considering that in Australia our use of sites over mobile devices (using more costly mobile data) has more than tripled in that time (ref: ACMA), website developers need to ensure that we keep the page sizes down, or else we the risk losing our site visitors to faster-loading, less data-indulgent competitor websites.
The size of a page can affect not only visitor retention, but also importantly it can have a large impact on your performance in search engines, as page load time is an important factor in ranking pages.
One other important reason to keep your page sizes down is that most hosting services come with limits on bandwidth (i.e., the amount of data that is uploaded and downloaded), so reducing the amount of data being transferred every time someone visits a page on your site can reduce your hosting requirements for both storage and bandwidth.
If you maintain your own site, you need to keep in mind your page sizes as you publish new content. Here are a few things to keep in mind. I’ve prefaced a couple as [Techie Alert] to indicate that these points are more for the web developers among us, so if you just look after your content, you may like to refer your trusty “web guru” to this article, as well.
Be aware of the size of images being included
When you add a picture to a page, even if you resize it within your CMS editor (e.g. by using the “crosshairs” to reduce it), the majority of CMSs will still end up loading the full image when you visit the page, and the browser will reduce it down in size on-screen.
(caveat: some CMS’s are intelligent enough to only serve up the image at the size that it sees you specify, which does help, but you should be sure that your CMS is doing this right before assuming it is).
If you wish to include a larger version of the image, use something like a “light box” plugin (for example, we use this particular lightbox often, and find it works well in responsive sites) to open the full version of the image on clicking the smaller/thumbnail version.
Turn off unnecessary plugins
If you are using a third party CMS such as WordPress or Joomla, limit the number of “plugins” that are activated to only those you really need.
Particularly during the initial build of your site especially, often the site developer may use extra plugins to assist in migrating data and performing work that is not required post-launch.
If you are not sure whether a particular plugin is required, contact the person who originally built the site as ask them if it is save to remove it.
Utilize Caching for Your Site
This is a little bit technical, but if you are using a third party CMS and have confidence in installing plugins for it, you’ll most likely be right to tackle this one. In the context of a website, the term caching refers to the use of temporary storage to save pages and content (images, HTML, CSS file etc.), reducing the time taken to produce the same content on subsequent loads. Turning on caching can speed up page load times and reduce the bandwidth used by your site (both at your server side and a’lient’s browser side).
Although turning on caching won’t reduce your page size on the initial load, the idea is that on subsequent loads it will take less time and less requests to display the same content. So you should still optimize the page size for that initial load, but this will then assist in page sizes being reduced for other pages on your site that need the same files.
If your site utilises WordPress, you may like to look at using one of the popular plugins to simplify the process of turning on caching. These include W3 Total Cache and WP Super Cache, but there are many more so have a look around for the one that will suit your needs best.
Turn on GZIP Compression
[Techie Alert! Refer your web developer to this part if you’re not sure about it]
GZIP compression is a server setting that allows your content to be reduced in size during the transfer from the hosting server to the client’s browser. It is supported by all modern browsers, so there is unlikely to be any reason why your site couldn’t be using it these days.
If you are unsure of whether this is turned on ask your website developer to check for you. Most hosts will have it turned on by default, but you may need to set it specifically for your site.
Don’t Include JavaScript Libraries Unnecessarily
[Techie Alert! Refer your web developer to this part if you’re not sure about it]
“Don’t Reinvent the Wheel”. We have this drilled into our brains from early on in life, and in programming the same theory is the basis of many methodologies. As a result, when we want to do anything “new” on a site, often the first thing we do is search to see if someone has already done it, and if so if we can use their code. With the rise in the uptake of open source technology over the last 10 years, I admit myself that I rarely write UI code in JavaScript, as most of the time I can already find it has been done by someone else.’n’t recall the last time I wrote my own JavaScript Carousel (and when I think back to the pain of handling all the corner use-cases, I honestly’I’d rather not ever have to return to it!).
The problem is, often developers will grab a third party’s library and dump it into their own site without reviewing what is actually being included. It’s worthwhile running your eyes over the code quickly just to ensure nothing sneaky is being done, but more to the point to ensure it’s not including a heap of extra code that you don’t need.
Consider your specific needs before including extra JavaScript and/or CSS libraries, to ensure they won’t end up just bloating your page size.
[Techie Alert!] Use the Minified Versions of JavaScript and CSS Files
[Techie Alert! Refer your web developer to this part if you’re not sure about it]
On production sites, there is no excuse these days for not using minified versions of all JavaScript and CSS files. These can also be bundled up to reduce the number of HTTP requests needed to display the page. I could write a whole article on this (perhaps I will soon!), but for now, just know that there ARE ways to do this and your site SHOULD be doing it i’217;s in production.
Wrapping It Up
So in summary, we need to make more of an effort to ensure website page sizes remain as small as possible, not only to ensure fast page load times and less bandwidth usage, but also to help improve the performance of your site in search engines.
Whenever you make a change to your site, whether it’s a new page, updated content or a whole new section, keep these things in mind to ensure your site doesn’t grow in size unnecessarily.