{"id":2060,"date":"2020-05-03T05:30:00","date_gmt":"2020-05-02T22:30:00","guid":{"rendered":"https:\/\/www.indowhiz.com\/articles\/?p=2060"},"modified":"2023-04-01T13:16:01","modified_gmt":"2023-04-01T06:16:01","slug":"terms-in-file-size-reduction","status":"publish","type":"post","link":"https:\/\/www.indowhiz.com\/articles\/en\/terms-in-file-size-reduction\/","title":{"rendered":"Terms in the File Size Reduction of a Web Page"},"content":{"rendered":"\n

Commonly, there are many ways to increase website speed<\/a>. 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.<\/p>\n\n\n\n\n\n\n\n

Benefits of the file size reduction<\/h2>\n\n\n\n

Why do we need to reduce the file size?<\/em> The short answer, so that any access to web pages is much cheaper and faster.<\/p>\n\n\n\n

Impact on visitors<\/h3>\n\n\n\n

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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Impact on the server<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

1. Minification and Beautification<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Minification<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Therefore, the unnecessary content in the code can be deleted, without affecting the logic or flow of the code \u2014 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.\u200b[1]\u200b<\/span><\/p>\n\n\n\n

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<\/a>, and to minify CSS \/ JS you can use the site minifier.org<\/a>. The “code beautify<\/em>” sites actually have features to minify the HTML, CSS, and Javascript.<\/p>\n\n\n\n

To understand minification, here is a sample code during the development phase:\u200b[2]\u200b<\/span><\/p>\n\n\n\n

<html>\n  <head>\n    <style>\n       \/* container class used in landing page *\/\n       .container { width: 80% }\n       .container { font-size: 104% }\n    <\/style>\n <\/head>\n\n <body>\n   <!-- content of container : BEGIN-->\n   <div class=\"container\">\u2026<\/div>\n   <!-- content of container : END-->\n\n   <script>\n     displayAnalytics(); \/\/ conversion metric function\n   <\/script>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
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:<\/p>\n\n\n\n