Web Performance 101: Page Size Optimization

Does it really matter? Do we really need to invest the time and effort into optimizing our website performance?

If this is something you’re still debating, let us help you see the truth: Website optimization translates directly into improved website speed and performance, which means lower bounce rates and better conversions. So yes, website optimization is important, especially if you’re looking to improve returns from your website.

Optimization can only be effective if you have identified bottlenecks and other potential issues on the website. This can be done easily by implementing monitoring tools. There are a number of factors/metrics to consider while measuring performance, and we discussed one of the major players (page size) in a previous post. This article deals with the best practices to follow during Front End development to help cut down the total page size and improve the overall site performance.

Content Matters

The building blocks of a page should be the focal point when trying to reduce page size. There is a pattern in the type and size of content that most of the slow websites use – this includes multiple CSS files, scripts, heavy images, third-party plugins, and a number of marketing/tracking tags. There are three main points to consider when trying to minimize page size:

• What are the different types of content?
• What is the size of each of the requested content?
• How is the content delivered?

Understanding each of the above questions will give you an insight of all the elements on the page that we can optimize. The next step would be to verify if the best practices are being followed for each type of content. The following are some of the basics that we must implement on any website.

1. Optimizing CSS and JS

The lines and lines of code that make up JavaScript files and stylesheets can add to the load time of the page. Minification removes unwanted characters and lines (white space, block delimiters, comments etc.) from the script and CSS files. The size of the resulting file is smaller than the original and the resource is downloaded faster. Using CSS sprites is another great way to optimize stylesheets.

1. Gzip Compression

It is important to enable Gzip compression as it cuts down the size of the requested resource by almost 90%. This can free up a lot of bandwidth allowing more elements to be downloaded without any latency. The graph below was generated from a recent monitoring test for the website of one of the leaders in sound/video technology.

We compared two versions of the same page, one with compression enabled (blue line) and the other without (green line). The compression technique greatly reduced the total downloaded bytes (page size) and improved the website performance by a significant margin.

1. Optimize Images


Images are an essential part of a webpage. Based on recent studies, images contribute to 64% of the total page size. Let us compare the data from two of the top 50 Internet Retailer websites, Website1 ranks the best on almost all performance metrics while Website2 ranks among the low performing websites. We can see that the number of images is more or less proportional to the render start and webpage response time.

Image compression is key to minimizing load time without compromising the quality of the image itself. In addition to compression, removing image metadata such as geo information will also reduce the overhead.

1. Browser Caching

Enabling browser caching is another technique that allows pages to render faster. Using the cached data helps avoid the need to request or download the resource again. This reduces the load on the server and frees up enough bandwidth to download newer content which in turn nulls the effect page size has on load time.

1. Web Font Performance

Custom web fonts have gained popularity in web design. The disadvantage of using web fonts is that not all browsers support it and the fonts will have to be downloaded as an external resource along with CSS and other scripts. This demands additional HTTP requests to be established and also adds to the total downloaded bytes. When using custom fonts, it is best to host it locally or the page should prefetch the resource.

Page size is just one of the metrics that help analyze end user performance. But it can make a major difference to the overall page speed. When troubleshooting a slow website, it is important to look at the points mentioned above since more often than not, it is one of the elements on the page that is causing the slow load time.