{"id":147151,"date":"2018-10-15T05:35:56","date_gmt":"2018-10-15T05:35:56","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=147151"},"modified":"2018-10-15T05:57:14","modified_gmt":"2018-10-15T05:57:14","slug":"how-reduce-page-loading-time","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-reduce-page-loading-time\/","title":{"rendered":"How Reduce Page Loading Time"},"content":{"rendered":"

What is Page loading time<\/strong> \u2013<\/p>\n

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

Now, how to reduce page loading time using different techniques depending upon the web page<\/p>\n

1- Web Page has lots of Images –<\/strong><\/p>\n

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

For image Web page we do not show directly to HTML <img> tag instead of we use Jquery\/Javascript to show image inside the\u00a0window.load();<\/p>\n

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\u00a0so, in this case, image loading time is reduced from Page loading time.<\/p>\n

Now, the first method image show inside the window<\/em>.load\u00a0function.<\/p>\n

<script>\r\nwindow.load(function() { \r\n<?php foreach($products as $key=>$product) { ?>\r\n $('#image-<?php echo $key; ?>').append('<img src=\"<?php echo $product['image]; ?>\"\/>');\r\n<?php } ?>\r\n});\r\n<\/script>\r\n<\/head>\r\n<body>\r\n <!-- Let we have a $products variable comming from server side having descriptions and images -->\r\n <!-- multidimensional array containing all image information and image index of array have image src information -->\r\n  <?php foreach($products as $key=>$product) { ?>\r\n   <div class=\"product-description\">\r\n     <p><?php echo $product['description']; ?> <\/p>\r\n   <\/div>\r\n   <div id=\"image-<?php echo $key; ?>\">\r\n   \r\n  <\/div>\r\n  <?php } ?><\/pre>\n
 <\/p>\n
Now, the Second method we show image\u00a0Simple <img> tag. This method takes\u00a0more Page Loading time comparison\u00a0to the first method.<\/p>\n
  <?php\r\n  \/\/suppose $images multidimensional array containing all image information and img index of array have image src information\r\n   foreach($products as $product){ ?>\r\n    <div class=\"product-description\"> \r\n      <p><?php echo $product['description']; ?>\r\n      <\/p>\r\n    <\/div>\r\n    <div>\r\n     <img src=\"<?php echo $product['image']; ?>\" \/>\r\n    <\/div>\r\n <?php } ?><\/pre>\n
2- Minify CSS\/Javascript\u00a0 –<\/strong><\/p>\n
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.<\/p>\n
3- Utilize Cache Browse –<\/strong><\/p>\n
The cache used temporary storage of the web page to reduce bandwidth and increase the performance of loading time.<\/p>\n
4- Avoid HTTP Request –<\/strong><\/p>\n
Most of the Page Loading\u00a0Time 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\u00a0request then loading time will be faster.<\/p>\n
\"\"<\/p>\n
5-\u00a0 Some Simple\u00a0 Techniques You Must Follow-<\/strong><\/p>\n