Saturday, 2 May 2015

Tips for fast loading of web pages

1] Reduce page weight:

Reducing page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and CSS into external files, can improve download performance with minimal need for other changes in the page structure.

By reducing the number of files that are referenced within a web page, you reduce the time required for these requests to be sent, and for their responses to be received.

2] Specify sizes for images and tables

3] Use async and defer, if possible
Use async whenever possible, specially if you have multiple script tags.
Eg: <script src="demo_async.js" async></script>

<script async>
async downloads the file(script) during HTML parsing and will pause the HTML parser to execute it(script) after it has finished downloading the script file.

<script defer>
 defer downloads the file(script) during HTML parsing and will only execute script after the parser has completed. defer scripts are also guaranteed to execute in the order that they appear in the document.

Eg: <script src="demo_defer.js" defer></script>  

For <script> without any attributes, the HTML file will be parsed until the script file is hit, at that point parsing will stop and a request will be made to fetch the file (if it’s external). The script will then be executed before parsing is resumed. Here HTML parser is stopped until script is downloaded and executed.

4] Reduce the number of inline scripts

Note: Even though these attributes do help a lot for the first time a page is loaded, you should use them but not rely that it will work in all browsers. If you follow all guidelines to make good JavaScript code, there is no need to change your code.