How Reduce Page Loading Time
What is Page loading time –
The Time has taken to download and display entire content of web page called Page Loading time. The page loading time is measured in second.
Now, how to reduce page loading time using different techniques depending upon the web page
1- Web Page has lots of Images –
Suppose any web page has so many images and we put image simple HTML <img> tag for showing the image in this case Page loading time is the maximum comparison to the only content web page so how you reduce loading time in case web page has an image.
For image Web page we do not show directly to HTML <img> tag instead of we use Jquery/Javascript to show image inside the window.load();
window.load() event fires when the DOM(Document Object Model) and all the content on the page are fully loaded like CSS, images, and frames that means when Page loading time calculated completely after that image is load so, in this case, image loading time is reduced from Page loading time.
Now, the first method image show inside the window.load function.
<script>
window.load(function() {
<?php foreach($products as $key=>$product) { ?>
$('#image-<?php echo $key; ?>').append('<img src="<?php echo $product['image]; ?>"/>');
<?php } ?>
});
</script>
</head>
<body>
<!-- Let we have a $products variable comming from server side having descriptions and images -->
<!-- multidimensional array containing all image information and image index of array have image src information -->
<?php foreach($products as $key=>$product) { ?>
<div class="product-description">
<p><?php echo $product['description']; ?> </p>
</div>
<div id="image-<?php echo $key; ?>">
</div>
<?php } ?>
Now, the Second method we show image Simple <img> tag. This method takes more Page Loading time comparison to the first method.
<?php
//suppose $images multidimensional array containing all image information and img index of array have image src information
foreach($products as $product){ ?>
<div class="product-description">
<p><?php echo $product['description']; ?>
</p>
</div>
<div>
<img src="<?php echo $product['image']; ?>" />
</div>
<?php } ?>
2- Minify CSS/Javascript –
The benefit of minified CSS/JavaScript code is allowing a client to download fewer bytes(size is less), so the page to load faster. We can also use for security purpose.
3- Utilize Cache Browse –
The cache used temporary storage of the web page to reduce bandwidth and increase the performance of loading time.
4- Avoid HTTP Request –
Most of the Page Loading Time is spent downloading components of that page. The components can be described as images, CSS files, and JavaScript/JS files. If we can avoid the HTTP request then loading time will be faster.
5- Some Simple Techniques You Must Follow-
- If you are accessing a database looked at optimizing your queries, for example, specify only the fields that you need in a SELECT query rather than using SELECT *.
- Should be analysis and reduce the data fetching time using the index, reduce subqueries, temptable etc.
- Pagination most common and popular techniques to reduce Page Loading time.
- The code should reusability and some basic code technique decrease the Page loading time
Example-
In case you have any Query then feel free to ask in the comment section below.