Web page size is an important factor in determining how well optimized your site is. Search engines like MSN, Yahoo and Google are considering load time to be more and more important when it comes to both search engine optimization and PPC quality scores, and file size certainly effects your website’s load time. However, many web developers have a hard time determining which page sizes and file sizes are ideal for making sure that their website loads quickly. In this article, we’ll be looking at some data which has been gathered about the average size of HTML web pages, image files and other components of a website. This will help web developers to determine a solid guideline for their page sizes and file sizes.
Data on Average Web Page and File Sizes
The following data was gathered from a report titled "The Portrait of a Common HTML Web Page" which was gathered using an HTML rendering engine they call WebSeer:
Average HTML Size (iframes included): 25k
Average Image File Sizes
- JPEG: 11.9k
- GIF: 2.9k
- PNG: 14.5k
- SWF: 32k
Average size of external scripts: 11.2k
Average size of external style size: 17k
Average size of total web page, including HTML, image files, flash, scripts and styles: 130k
While considering this data, the creators of “The Portrait of a Common HTML Web Page" report warn that components such as CSS images, framed pages (with the exception of internal frames), media objects which did not use embed tags were not taken into consideration in this analysis. There are some other things to take into account when considering the use of this data as a guideline for creating your web pages and image files…
Page Compression Makes a Big Difference
GZIP compression and deflation are techniques which can be used to help “heavier” pages to load faster into the web user’s browser. This type of page compression was not turned on when performing the report mentioned above and so pages larger than 130k can still have an efficient load time if compression is used properly. In fact, file compression can reduce the size of web pages by as much as 70%. This way, the lighter version of the web page can be delivered to the web user’s browser quickly, and then expanded again so that the user can get the full experience of the higher quality images and other features of the web page.
This all takes place without the web user being aware of what’s happening, and so GZIP compression and deflation can be a discreet solution for keep the size of your web pages from being a hindrance to your loading times.
Things to Consider About Average Image File Sizes
Many of the numbers in regard to average image files were due to how image files are normally used by web developers. For example, GIF images had the smallest average file size, most likely due to them being used for flat-color icons and spacers. The second smallest image file size was the JPEG, which are mainly used for photographs, product images and other images which have a smoother tone. Finally, PNG and SWF images had the largest average file size, but are considered to be more efficient because PNG retains a higher quality, and through the use of file compression they can be delivered quite quickly.
Although external CSS and Java script files were not considered as a part of the average web page measurement, they were found to have an average uncompressed size of 28.7k. Many web developers use external CSS files for the sake of being able to make design changes more efficiently, and the loading of the CSS files happens at the same time as the loading of the HTML page which the CSS is attached to. This is why file compression is important for keeping both HTML and CSS pages lean and helping them to load quickly.
Something to Consider for the Future: The Role of Technology
At the time of this writing, the above statistics represent the average size of HTML, CSS and image files and thus provide a good guideline for determining the size of your web pages. However, as web browser and internet server technologies become more advanced, it’s likely that larger file sizes and web pages will be able to be efficiently delivered. The best approach for any web developer is to test their web pages in difference browsers and with slower internet speeds which are currently on the market. This way, they can create web pages which will load efficiently for the wide variety of users who land on their website.
This data can be used as a guide for building web pages which will load quickly and which will thus help you to optimize your website for the search engines. For more information about creating efficiently sized web pages, see our article on GZIP compression and deflation.
Join us in our daily discussions on Facebook!