Last Updated on April 1, 2023
Commonly, there are many ways to increase website speed. One of them is to optimize the web page file size. These files such as images, CSS, Javascript, HTML, and other supporting files. The smaller the file size of a web page, the better. If you use WordPress, almost all of the optimizations in this article have generally been provided by the cache plugin.
Benefits of the file size reduction
Why do we need to reduce the file size? The short answer, so that any access to web pages is much cheaper and faster.
Impact on visitors
The larger the file size of a web page, the longer the loading time on the visitor browser. Then, when the loading of your web page is more than 2-5, the visitor would leaving you. They will look for another similar website.
On the other side, did you know that visitors who open any web pages will cost them internet services? Moreover, it will increase the visitor waiting time.
Impact on the server
Now apart from the visitor side, the site owner also incurs costs to provide content to visitors. Every time a visitor requests a page, the site server must work to process the page, send the files, etc. So the larger the file size requested, the more work the server has to do. Even more, if visitors per day reach tens to more than hundreds of thousands, the server would reach its capacity. If the server is no longer able to handle page requests, the server specifications must be increased, and that costs a lot of money.
It is also clear that the smaller the size of a web page, the faster its loading time. So it is very important to make all file sizes as small as possible.
1. Minification and Beautification
In the development phase of a website, the code written must be in accordance with code writing standards. This includes neatness and readability. In other words, indents, spaces, comment blocks, string documentation, etc. can be used to improve its readability. As a result, the code will be easier to understand and modify. But it makes the file size becomes larger as the code increases.
Minification
In the production or release phase of a website, the site must be able to load quickly and responsively. Generally, visitors will not care how the codes work to display a web page.
Therefore, the unnecessary content in the code can be deleted, without affecting the logic or flow of the code — for example indentations, spaces, comment blocks, and documentation strings. This removing process can be called “Minification”. In addition, minification can be done by changing the name of the variable or function to be shorter.[1]
We could minify a web page files such as HTML, CSS, and Javascript. Many online sites can help you to minify your web page files. For example, to minify HTML, you can use code beautify, and to minify CSS / JS you can use the site minifier.org. The “code beautify” sites actually have features to minify the HTML, CSS, and Javascript.
To understand minification, here is a sample code during the development phase:[2]
<html>
<head>
<style>
/* container class used in landing page */
.container { width: 80% }
.container { font-size: 104% }
</style>
</head>
<body>
<!-- content of container : BEGIN-->
<div class="container">…</div>
<!-- content of container : END-->
<script>
displayAnalytics(); // conversion metric function
</script>
</body>
</html>Note that the code above has three different types of content, which are HTML, CSS, and Javascript. Each type of content has different rules. Then each type of content should be minified differently. Things that done in the minification process such as:
- It appears that comments in the code are important things in the development, but visitors will not see them. So, CSS (
/ * ... * /), HTML (<! - ... ->), or JavaScript (// ...) comments can be removed, which impacts on reducing the total file size of a web page. - In some case of CSS, the container class can actually be put together without changing the final result. But there are some exception when there are any overwrite rules. So, a good CSS minification application can do this, which in turn can significantly reduce CSS file sizes.
- In addition, whitespace (spaces and tabs) are also needed only in the development phase of HTML, CSS, and JavaScript. So we can delete it without worrying about changing the flow of the programs.
So, the code above will result in shorter code, and smaller file size, after minified, as follows:
<html><head><style>.container{width:80%;font-size:104%}</style></head><body><div class="container">…</div><script>displayAnalytics();
</script></body></html>Beautification
Beautification is the opposite of minification. It will revert the code from the minification result. It gives an indentation or whitespace to the code so that it can be read again. If the above minification code is beautified, it will be as follows:
<html>
<head>
<style>
.container{width: 80%; font-size: 104%}
</style>
</head>
<body>
<div class="container">…</div>
<script>
displayAnalytics();
</script>
</body>
</html>With beautification, the code can be easy to read again (by people other than the developer). But we can see that beautification cannot return the comments or the code removed by the minification.
2. Combine files
Combine CSS and JS files
A web page generally has many CSS and Javascript files. The CSS and Javascript files need to be loaded so that the page can be rendered perfectly. However, every file that needs to be loaded, requires many process and time, which can be seen in Figure 1.
Only to get one file, the paths needed are starting from DNS resolution, connecting, managing TLS, waiting for the server, and finally receiving the file. After receiving the file, then the file could be used.
Imagine what happens, if there are so many files when loading web pages. Surely visitors will wait a long time to load a web page.
So, by combining these files, we got many benefits. One of them is that it can reduce the number of file requests to the server.[3] If a page has 10 CSS and 3 JS, and combined into a CSS file and a JS file, then the requests are reduced from 13 files to only 2 files. Moreover, because the file request is reduced, it will automatically have an impact on increasing the speed in loading a web page. You can see the illustration of combining CSS and JS files Figure 2.
Do we need to combine CSS and JS files?
Whether we need to combine CSS and JS files or not, this is a long debate. Of those who disagree, they have several reasons such as:[4]
- Combining CSS and JS will slow down and increase the server load. Especially there is an HTTP/2 feature, which can send many CSS and JS files at once.
- Combining CSS and JS sometimes will break the layout of the web pages.
- Add unnecessary files on several pages.
- Slow loading pages when the cache has not been created.
- etc
Note: Simply put, HTTP/2 is an HTTP protocol that allows the server to send many files at once before requested. However, these are files that are needed by the browser in rendering the web page.[5]
Before agreeing and disagreeing, my advice is, you need to try them out in your website. I do not guarantee that combining CSS and JS will speed up your website loading. Because on this Indowhiz website, the use of combines actually speeds up page loading.
In Figure 3, an experiment is carried out by combining CSS and JS. Pay attention to files number 2 through 5, where there are only 4 CSS and JS files.
On the other hand, Figure 4 shows the results of loading a page without combining CSS and JS. Note that files number 2 to 22, with a total of 20 CSS and JS files, are also sent simultaneously.
Both of the experiments above already use HTTP/2, so CSS and JS files can be sent simultaneously.
However, on this Indowhiz website, the page loading time is even faster by combining CSS and JS. Pay attention and compare between Figure 5 and Figure 6.
So, the conclusion is, with a blog type like Indowhiz, where there isn’t much difference between CSS and JS on each page, combining CSS and JS is able to speed up page loading.
However, it should be noted that the statement “combining CSS and JS will break the layout of the site pages” is sometimes true. Because I’ve already experienced it. Therefore, it is necessary to test one by one, when combining CSS and JS files. Any CSS and JS files that don’t work/error after combining can be excluded.
CSS Sprite
If you have a lot of small images such as logos, icons, buttons, etc. on a site page, CSS sprites are very important. The CSS sprite is a method that can help speed up the loading of a web page. This method combines small images, which have the same dimensions or resolution, into one large image. Then, this large image is called a sprite sheet or tile set.[6]
Simply put, when designing a web page, each image is stored in a file, as in Figure 7 (b). So, when visitors open a web page, then many files must be requested by the browser to the server. Eventually, this will reduce the loading speed of a web page. In contrast, if all those small images combined into a sprite sheet, as in Figure 7 (a), then the browser only requests a combined file. Later, we can select only the necessary parts.
When the sprite sheet has been loaded, then the part of the image that you want to display can be arranged using CSS. For example, suppose that each section in Figure 8, is 128 x 128 pixels. So, if you want to use an icon of a person, the CSS code is:
background: url('icon_sprites.png');
background-position: 0 0;
width: 128px;
height: 128px;The code above indicates that the image to be taken is 128 x 128 pixels. Then from the icon_sprites.png file, parts are taken from the position of 0 pixels left and 0 pixels top.
Another example, if you want to take an icon of a phone, then just change to background-position: 0 -128px;. This is because we want to take pictures starting from the position of 0 pixels left and 128 pixels down. -128 pixels in computer interpretation means the image is offset padding by -128px. Other than that, if you want to take an icon of a house, then we can use background-position: -128px -128px;, and so on.
3. File compression
HTTP compression
One method to reduce the file size is using HTTP compression. Currently, there are many types of HTTP compression that can be used on a website.[7] There are gzip, deflate, compress, br (brotli), and so on.[8]
In the web page header, this type of HTTP compression is commonly written as content-encoding. Initially, the browser sends the types of compression it supports. Generally, we can see it from the request header sent by the browser, for example:
Host: www.indowhiz.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0
Accept: text/css,*/*;q=0.1
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, brFrom the example above, the Accept-Encoding information shows that the browser can recognize gzip, deflate, or br (brotli) compression. So, the files sent from the server can use one of the compressions that the browser recognizes. For example, the response from the server contained in the response header is:
HTTP/1.0 200 OK
cache-control: public, max-age=2592000
expires: Tue, 26 May 2020 01:18:29 GMT
content-encoding: brFor example, The compression used by the server, in the header above is br (brotli). But keep in mind, that the server has no obligation to use any compression method. Because it depends on the server settings and the desires of the website owner.
If the server did not use any compression recognized by the browser, the files will be sent without compression, where the response sent will be “content-encoding: identity“.[9]
If you are a website owner, it is recommended to use one type of HTTP compression on your site. Besides speeding up the page loading, compression can reduce the bandwidth load. Commonly, the compression used on a site is gzip or deflate.
But currently, the brotli compression released by Google starting in 2013,[10] has begun to be commonly used. This compression is claimed to be faster and results in smaller files than using gzip, where Javascript files are 14% smaller, HTML files 21% smaller, and CSS files 17% smaller.[11]
Image compression
Image compression can be a long topic to discuss. Many people often misunderstand the types of image compression. Because using the right type of image compression can make a significant difference to your website. Choosing wrong image compression can have some impacts on the images that look less good, or the file size becomes larger than expected.[12]
One method of compression is lossless and lossy. Lossless is a compression method that keeps all the data from the original file. Otherwise, with the lossy compression method, there are some data deleted from the image, in order to reduce the image size significantly.[13]
However, many people feel that they need to use high-resolution images and with lossless compression on their website. As a result, their images have a very large size. This will directly increase the loading time of a web page. The impact might reduce visitors because of the long loading time of a web page.
In general, how to compress images can be seen in our article on general guidelines for increasing website speed.
References
- [1]Google Developers, “Minify Resources (HTML, CSS, and JavaScript),” Google Developers: PageSpeed Tools – Insight, Dec. 14, 2018. https://developers.google.com/speed/docs/insights/MinifyResources (accessed Apr. 23, 2020).
- [2]I. Grigorik, “Optimizing Encoding and Transfer Size of Text-Based Assets,” Google Developers: Web Fundamentals, Feb. 12, 2019. https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer (accessed Apr. 24, 2020).
- [3]Research Hubs, “Combine JavaScript and CSS,” Research Hubs, 2015. http://researchhubs.com/post/computing/web-application/combine-js-and-css.html (accessed Apr. 25, 2020).
- [4]J. Nguyen, “Why You SHOULDN’T Combine CSS & JS (Performance Reasons),” WP Johnny, Jun. 04, 2018. https://wpjohnny.com/why-you-shouldnt-combine-css-js-performance-reasons/ (accessed Apr. 25, 2020).
- [5]I. Grigorik and S. Surma, “Introduction to HTTP/2,” Google Developers: Web Fundamentals, Sep. 03, 2019. https://developers.google.com/web/fundamentals/performance/http2 (accessed Apr. 26, 2020).
- [6]edureka, “How to Implement CSS Sprites to Enhance Web-Pages,” edureka!, Aug. 29, 2019. https://www.edureka.co/blog/css-sprites/ (accessed Apr. 26, 2020).
- [7]M. Cerdas, “Gzipping vs Minification: What the heck?,” Medium, Jan. 16, 2017. https://medium.com/@manuelro/gzipping-vs-minification-what-the-heck-ba698fa6037c (accessed Apr. 26, 2020).
- [8]IANA, “Hypertext Transfer Protocol (HTTP) Parameters,” Internet Assigned Numbers Authority (IANA), Jan. 22, 2020. http://www.iana.org/assignments/http-parameters/http-parameters.xhtml (accessed Apr. 26, 2020).
- [9]Mozilla, “Content-Encoding,” MDN web docs: Web technology for developers, Oct. 20, 2019. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding (accessed Apr. 26, 2020).
- [10]J. Alakuijala, E. Kliuchnikov, Z. Szabadka, and L. Vandevenne, “Comparison of Brotli, Deflate, Zopfli, LZMA, LZHAMand Bzip2 Compression Algorithms,” The Comprehensive R Archive Network, Sep. 2015. Accessed: Apr. 26, 2020. [Online]. Available: https://cran.r-project.org/web/packages/brotli/vignettes/brotli-2015-09-22.pdf.
- [11]M. Mike, “You can’t use Brotli for dynamic content,” Expedited Security Blog, Jun. 25, 2018. https://expeditedsecurity.com/blog/nginx-brotli/ (accessed Apr. 26, 2020).
- [12]C. Chapman , “Everything You Need to Know About Image Compression,” JotForm Blog, Feb. 03, 2010. https://www.jotform.com/blog/everything-you-need-to-know-about-image-compression/ (accessed Apr. 26, 2020).
- [13]A. Orru, “When Less Is (Really) More: How To Compress Your Images And Reduce Their File Size,” WP Rocket Blog, Feb. 12, 2020. https://wp-rocket.me/blog/compress-image-for-web/ (accessed Apr. 26, 2020).
Feature image by pikisuperstar on Freepik
Figure 2 modified from Freepik
Figure 7 modified from Freepik
