When it comes down to webpages, size really does matter!
Smaller webpages will typically download faster for anyone who requests them on the Internet. The size of a webpage is determined by physical file sizes and not the actual size the page appears on the screen.
Every second counts when downloading a webpage. Studies have shown that the abandonment rate of a webpage happens after only a couple of seconds of waiting time. Internet surfers are very impatient, when people click a link they expect the webpage to show almost instantaneously and they don’t hesitate to press the back button if things are too slow to try out another website.
What Makes Up A Webpage?
Webpages typically consist of these elements:
- HTML Code
- Style Sheets
- JavaScript
- Images
- Media (Video, Flash, Audio, etc.)
- Custom Fonts
If you are not familiar with how webpages work then don’t worry, the important thing is to identify where size can be reduced and then pass on the message to website developers.
What Contributes Mostly Towards A Webpage Size?
Apart from typically small HTML Code and Style Sheet Code, the file size of other elements can be very large depending on how the webpage has been developed.
JavaScript contains a lot of functions to make special features of a website happen, these can control a huge number of elements such as rotating banners, hover overs, pop-ups, form validation, etc. etc. Javascript can take up significant file size, especially for e-commerce websites which have a lot of bespoke functionality and can be a challenge to reduce in size without breaking functionality.
Images can be varied sizes depending on their size, file type and quality (see image size reduction below). Webpages without a good number of images can perform badly from a conversion point of view (who wants to see a page of plain text?), on the other hand webpages selling a luxury item or showing something in detail need quality imagery which will take up more file size.
Most forms of Media are already optimised for size, for example video encoding methods such MPEGs crunch the data down as small as possible under certain conditions. It’s important to note that many media elements on a webpage require the user to press “play” or interact with them before they download so these don’t count towards the size of the initial webpage download unless they auto-play.
Custom fonts often are around 0.5MB in size and bigger if different styles and weights are added. It is possible to take sets of characters out of custom fonts to reduce their size. Many websites just use simple common web fonts which are found on standard operating systems such as Windows or Apple’s OS.
Measuring A Webpage Size
There are some fantastic tools out there for measuring a webpage’s size, the best thing about them is that you can measure any webpage whether it’s your own page, a competitor’s page or a multi-national company’s page.
My favourite tool is the Pingdom Website Speed Testing Tool which allows you to simply enter a URL and then get results showing sizes, load order and even a load time (works best in the FireFox browser):
On the waterfall results it will show all the elements that make up the webpage, how large they are and how long they took to download. Sorting these results by file size brings the biggest issues to the top.
On the page analysis tab you can see page statistics, for example on the Hallam homepage we can see that images make up for around 60% of the webpage size which is what you would expect for a service website:
Other tools which are useful include Google’s Page Speed Plugin for Chrome and Yahoo’s YSlow Plugin for Firefox which measure a number of page speed factors within the browser and give suggestions on how to resolve issues.
Shrinking Down Image File Sizes
When a webpage is over-sized, huge images are usually the culprit. Even if a website has well sized images there is always room for improvement, below are some image optimisation tips to improve image download times:
- Only use images with the same dimensions they are displayed at – Webpages can use a gigantic image and then tell the browser to shrink it down so it looks right in the design. However big or small the image is shown on the website, the original image still must be downloaded to display it correctly so it’s important to keep the original image as small as possible. Using an image editor to resize the image to the exact dimensions it’s needed will save a lot of file size and the image will still maintain the same image quality.
- Get rid of massive background or banner images – Some website have elaborate backgrounds or huge banners at the top of the homepage. These typically tend to be wide images taking up a lot of pixels and needing a large file size to accommodate. Using plain backgrounds or removing banners can have a huge positive impact on conversion rates and is well worth split testing for to see the overall impact.
- Remove image transparency – Transparent PNG images may look amazing but they take up significantly more file size than non-transparent JPGs. If transparency isn’t really needed then you can get away with a non-transparent image by adding in the background using image editing software. Transparent GIFs are another option if you need transparency but you are limited to 256 colours and the pixel transparency within GIF images are either ON or OFF with no opacity gradients giving harsh, jagged edges.
- Choose the right image type – For webpages you have three choices of image types; JPGs, PNGs and GIFs. The basic rule is JPGs are best for complex images, PNGs are best for illustrations or simple images, and GIFs are best for small icons or images with a very limited range of colours without shading. On image editing programs such as Photoshop you can simply swap file types whilst ‘saving for web and devices’ and see what the results will look like instantly alongside the KB file size of the image if it was saved in that particular format.
- Adjust the quality of the image – When saving a JPG using an image editing program (such as the browser-friendly, free Pixlr editor) you can adjust the quality of the JPG down as far as possible until you are still happy with how it looks. Simply by reducing the quality from 100% quality down to 95% quality can save hundreds of KB’s without any noticeable difference in the image quality. PNGs can also be saved in 8 bit quality instead of 24 bit to reduce file size.
- Remove unnecessary Meta data – Images can hold lots of hidden data such as Geo-location, SLR camera settings and even thumbnail versions of the images, all of which are not needed on webpages. Removing all this hidden clutter can drastically reduce file sizes without even touching the original image, see tools such as the Exif Tag Remover to go through all images on a server and cleanse them all of hidden tags.
- Use Image Sprites or Other Domains – Browsers only choose to download 6 images simultaneously which means there can be a long queue of images if you have lots of little icons all over the page. These small images can all be combined into one big sprite, which is one big image containing a number of small images in a grid formation. If there are many large images then sub-domains or image hosting platforms (such as Amazons – AWS service) can be used to speed things up, check out the image urls on social networks or online maps for some good examples.
The Perfect Webpage Size
A few of our clients have asked us: “What’s the ideal webpage size?“, this question unfortunately is impossible to answer and even if you got close to the answer for a certain website, the answer will change over time as technology and attitudes change.
The ideal webpage size depends on what content you have to show and also what audience you have.
If the webpage showcases a new sports car for example, you would need super high quality images, videos and perhaps Flash content to show off the car’s finer features. Reducing the webpage size in this case will speed up download times but it’ll have a bigger negative effect on conversion rate, the number of visitors that convert into customers, which matters more. If a webpage is an information question & answer page then you would expect the page to be mainly HTML text which is very quick to download; most people just want to find the right information quickly on these types of pages and will not hang around long for slow loading times.
Webpage size is incredibly important for mobile phone users as many of them will be on painfully slow mobile networks or could have an unreliable WiFi signal where they are located. On a common 3G network mobile phones can take several seconds to download each Megabyte of data, a nightmare if the webpage is 2 or 3 MB in size as the user will have to wait over 10 seconds to see anything. Luckily mobile phone users on average do wait longer for webpages to download before quitting (see Kissmetric’s great Infographic) but it’s still very important to optimise for smartphones now that over 20% of website traffic on average comes from smartphones.
As technology advances with faster broadband and mobile download speeds, bigger webpages will become less of a problem. It’s worth checking out the difference statistics between desktop and mobile traffic plus split testing different versions of webpages to get the right level of conversion rate vs. retention of traffic for your most popular landing pages.
Webpage Speed & SEO
Google has said for a long time that a slow loading webpage will have a negative impact on SEO, nobody wants to wait a long time for information and if Google showed consistently slow websites in their results then it would reflect badly on them shifting searchers to Bing or Yahoo.
The speed of the webpage may not always be down to it’s physical size, it could be an issue of how far the server is and the quality of the server itself. You can see server information using tools such as who.is and Google shows you the average time it takes to download a page within Webmaster Tools once setup correctly.
Whatever slows your webpages down, it’s certainly effecting your conversion rate and it may be effecting your SEO if download times are much lower than average.
Conclusion
Webpage size and ultimately the speed in which webpages show, is incredibly important to get the most out of a webpage. Simple improvements on webpage sizes can have a huge impact on the number of visitors who wait for the webpage to download and can bring in many more conversions.
