This site provides users with the information about html: make web page load faster, how to make webpage with javascript load fast, delay javascript loading, load javascript after all page loaded, defer javascript loading, load javascript last, use onload in body, speed up web page loading, improve web page loading time, accelerate page Loading, guide, example, tips, and more.
If you think that this site is helpful, please recommend your friends to visit our site.
How to make webpage with javascript load faster in html?
Web page load time is directly related to your web traffic. Your visitors will leave your site if your page is loading slowly and Google also takes the page loading time seriously to rank a website. So you should do your best to speed up your page loading.
One of the main problems for webpage slow loading is the javascript, especially the external javascript that is not from your own web server and you cannot control it. The reason why the web page gets slower when it comes with javascript is that when the web broswers come to read or download the contents of the javascript, it stops further reading until finishing reading the contents of the javascript. If the web server where you use the javascript to connect to gets hacked and responds very slowly, the webbrowsers will take longer time to read and as a result, your web page will be shown incompletely or just blank page, which depends on the design of your web page. There are several ways that you can better this situation. Now let's have a look at them one after another in the following:
1. Insert javascript just before the tag, < /body> as follows:
--------------------------------------------------------------------------------
< html>
< body>
< h1>designed by www.edusoftmax.com< /h1>
< p>designed by www.edusoftmax.com< /p>
< SCRIPT LANGUAGE="JavaScript" SRC="http://www.edusoftmax.com/">< /SCRIPT>
< /body>
< /html>
--------------------------------------------------------------------------------
2. Use defer = "defer" attribute as follows:
--------------------------------------------------------------------------------
< script type="text/javascript" src="http://www.edusoftmax.com/" defer="defer">
< /script>
--------------------------------------------------------------------------------
Note:
The "defer" attribute delays the downloading of the contents of the javascript until the whole html contents downloaded completely. You should also note that "defer" attribute works both inline and external javascript.
3. Add javascript in an html file and use iframe to display it. Let's look at it in the following:
--------------------------------------------------------------------------------
< html>
< body>
< h1>designed by www.edusoftmax.com< /h1>
< p>designed by www.edusoftmax.com< /p>
< IFRAME src="http://www.edusoftmax.com/reference.html" name="inside_frame"
width="500" height="300" SCROLLING=NO SCROLLING=NO frameborder="0">
< /IFRAME>
< /body>
< /html>
--------------------------------------------------------------------------------
Note:
You add the javascript in the first example above
--------------------------------------------------------------------------------
< SCRIPT LANGUAGE="JavaScript" SRC="http://www.edusoftmax.com/">< /SCRIPT>
--------------------------------------------------------------------------------
into the file, "reference.html"
4. Use onload in < body> tag. Let's look at it in the following:
--------------------------------------------------------------------------------
< html>
< head>
< script type="text/javascript">
function myJavascript(){
var t=setTimeout("delayfunction()",3000);
}
function delayfunction(){
var urlsrc=document.createElement('script');
urlsrc.src="http://www.edusoftmax.com/";
document.getElementsByTagName('head')[0].appendChild(urlsrc);
}
< /script>
< /head>
< body onload="myJavascript()">
< /body>
< /html>
--------------------------------------------------------------------------------
Other tips on making web page loading fast
1. Use fast web hosting server.
2. Reduce image size by using software or specifying image dimensions. If possible, use fewer images.
3. Reduce using flash file.
4. Use CSS.
5. Avoid using nested tables.
6. Using fewer javascripts.
7. Avoid using redirects.
Final note:
After using the above techniques and your page still shows blank or partially displayed, it is very important for you to add a text "Page is loading" at the top so that the visitors may wait for a while.
