June 1, 2012

Performance Tuning Web Pages

Yesterday I had a problem with a web based system that was not very responsive. After some effort I later found out it was certain javascript that was slow and these javascript were hosted by another company on another server. After some researching I found out that if I moved the script from the header html tag to the end of the file before the closing body html tag, the page was rendering directly in the client browser, and the slow javascript was afterwards loaded in the background. In this way the slow javascript was not stopping the user from interacting with the web system, but of course will not the javascript be run until it is downloaded.

Before:
<html>
    <head>
        <script src="some_url" type="text/javascript"></script>
        <script type="text/javascript">
            // maybe call some script
        </script>
    </head>
    <body>
    </body>
</html>
After:
<html>
    <head>
    </head>
    <body>
        <script src="some_url" type="text/javascript"></script>
        <script type="text/javascript">
            // maybe call some script
        </script>    
    </body>
</html>

No comments: