Generally, we have seen most of the time when the web page is loading at a slow speed due to spending time downloading the cookies & assets such as images, stylesheets, and scripts, etc, which in turn reduces the overall user experience along with the traffic in the site. This problem can be resolved by optimizing the web page that not only provide efficient performance but also helps to make the site responsive, along with reducing the load on the web servers and Internet connection. Thus, optimizing the website can help in Search Engine Optimization (SEO) that will improve the ranking (visibility) of a website in search engines. This optimizing technique can help for the large, complex & voluminous site.
In this article, we are going to learn how to keep the small-size files by minimizing the number of files along with reducing the Domain lookups. Also, how to optimize the performance of the web page by using external CSS and JavaScript files, minifying and compressing the size of images and SVG assets & the use of <script async> and <script defer> in JavaScript.
We will discuss all the aspects for optimizing the site & understand them through the examples.
Keep the size small: Keeping the small page size can help to reduce the page weight that including eliminating the unnecessary whitespace, extra comments, usage of the external script instead of inline CSS files.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Page Title
</title>
</head>
<body>
<h2> Welcome To GFG </h2>
<p> Hello there!.
</p>
</body>
</html>
|
Writing messy code (adding many whitespaces, comments, or unnecessary elements) makes your web page performance slower. It adds extra weight to the pages and therefore they become heavier and make the website slower to load. Some tools can help you to get rid of such extraneous code, such as HTML Tidy, or check out Google’s recommended tools.
We can avoid using inline HTML attributes, which can easily be replaced by CSS properties such as:
align: This attribute has been replaced by a combination of CSS properties- text-align, float, and vertical-align.
HTML
<h2>Welcome To GFG</h2>
<p align="left">Bad code.</p>
|
This can be replaced by the following code:
HTML
<html>
<head>
<style>
.left {
text-align: left;
}
</style>
</head>
<body>
<h2>Welcome to GFG</h2>
<div class="left">
<p>
Use the text-align property
to align the text
</p>
</div>
</body>
</html>
|
bgcolor and background: Instead of using these attributes to apply background color and images, use the CSS properties- background-image and background-color.
HTML
<body bgcolor="green">
<h2>Welcome To GFG</h2>
<p>Bad code.</p>
</body>
|
The preferred code:
HTML
<html>
<head>
<style>
body {
background-color: green;
}
</style>
</head>
<body>
<h1>Welcome To GFG</h1>
<p>
Use the background-color property
to set the color of the background
</p>
</body>
</html>
|
height and width: The same result can be achieved by using CSS properties that go by the same names.
HTML
<h2>Welcome To GFG</h2>
<img src="img.jpg" alt="A picture" width="500" height="600">
<p>Bad code.</p>
|
The preferred code:
HTML
<html>
<head>
<style>
.GFG {
width: 500px;
height: 600px;
}
</style>
</head>
<body>
<h3>
Use the width and height property
to set the height and weight of an element.
</h3>
<img class="GFG" src="img.jpg">
</body>
</html>
|
border: Apply border using CSS property- border, rather than using this HTML attribute.
HTML
<h1>Welcome To GFG</h1>
<p>Bad Code</p>
<img src="img.png" alt="A Picture" border="5">
|
The preferred code:
HTML
<html>
<head>
<style>
img {
border: 5px solid #555;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
Use the border property
to add a border to an image:
</p>
<img src="img.jpg" alt="A picture">
</body>
</html>
|
Minimizing the number of files: More files means more HTTP connections are required to download a web page, therefore, it will take more time to load. For instance, if you are using too many images on your web page, every image file will need one connection to the server. That is why too many files not only increase the load size but also can choke the server by sending more than the allowed HTTP requests.
Reducing the number of images is not always possible. In that case, you can use CSS image sprites that combine multiple images into a single image file, and that reduces the number of HTTP requests. You can use it when you are using different parts of a single image just by adjusting the dimensions and positions. In the case of every background image, this trick will not work.
Example: Different parts of this single image can be used in different places. Suppose you want to use only the first symbol somewhere.
We can use the single as in the following example
HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Sprites</title>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li,
#navlist a {
height: 250px;
display: block;
}
.gfg {
width: 550px;
left: 0px;
background: url(
}
.gfg1 {
width: 60px;
left: 0px;
background: url(
}
}
</style>
</head>
<body>
<ul id="navlist">
<li class="gfg">
<a href="#"></a>
</li>
<li class="gfg1">
<a href="#"></a>
</li>
</ul>
</body>
</html>
|
Output:
Reducing domain lookups: Each separate server domain costs time in DNS lookups. The more URLs we add to our HTML file, the more additional DNA lookups will be required. We can check this using the Pingdom website speed test tool. These DNS lookups add more time to the load time as nothing else can be loaded until the DNS lookups are finished.
Remember, DNS only queries a particular domain once. So, only the unique DNS lookup times are added to the load time.
Note: When you run your website through Pingdom more than once, it caches the DNS as it already knows the IP information. So, when you test your website for the second time, you find your website faster than before.
Using External CSS and JavaScript: Whenever the browser encounters the <script> tag, it stops processing the HTML and starts an instance of JavaScript interpreter to compile the JavaScript code. It does that whenever it sees the <script> tag and only processes the HTML after finishing that. The same thing happens in the case of inline CSS, it is loaded in the <head> tag of the HTML page. So, it processes faster. However, having all the CSS displayed inline slows down the loading speed as the visitor now has to download the CSS on every pageview rather than downloading it once from the server. The best practice is to use external CSS and JavaScript and use inline scripts only when they are required.
Minifying and compressing the size of images and SVG assets: Most of the SVG drawing applications produce SVGs containing lots of unnecessary metadata. They can be removed by configuring the server and applying gzip compression. Creating a cleaner resulting SVG code also helps the page to load faster.
A High-resolution image takes a lot of time to load. Resize the images before using them on your webpage. You can use any image manipulation tool for that, such as Photoshop, GIMP, CorelDRAW, etc. Online image resizing websites are effective as well.
Using <script async> and <script defer> in JavaScript: The browser will stop parsing HTML whenever it sees a <script> tag. So, if you are using a slow server and a heavy script then this will affect the page loading speed. That is why we generally add all the scripts before the end of the body tag. This way, the browser will generate the DOM first and then all the scripts will be executed one after another.
Script defer: When we add the <script defer>, the browser will download the scripts included in the page but execute it only after the HTML parsing is completed. defer attribute ensures to execute the scripts in the same order that they appear in the document.
Script async: The async attribute is used to tell the browser that the script file can be executed asynchronously. It means that the parser does not have to stop as soon as it reaches the script tag to fetch and execute. After downloading the script, the browser can execute the script but fetching can be parallelly done with the document parsing. Once the downloading is completed, the parser is paused for the script to be executed. Async scripts are executed as soon as the script is loaded, so unlike defer, the order of the scripts may not be the same.
You can use defer when your scripts are dependent on each other and the order of the execution is important to you. For independent scripts, the async attribute can be used.
Note: If you are writing your scripts right before the body tag then you don’t have to use async or defer as there is not much parsing left to be blocked. However, for whatever reason, your scripts are placed elsewhere, you can use these attributes.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...