avoid loading jquery multiple times

Go To StackoverFlow.com

2

using Google Page Speed I can see it seems that Jquery UI and Jquery and other js-libraries are loaded multiple times even though I only include them once in my page: enter image description here

How can I avoid this ?

UPDATE

My code looks like this (I have removed the main part of the html leaving all the javascript stuff):

<!doctype html>
<html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml" >
<head id="hdHead"><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>
    My Page
</title>
    <!--Utils-->
    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Mysite" /><meta name="viewport" content="width=980,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes" />
    <!-- For iPhone 4 with high-resolution Retina display: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/css/touch/gfx/hs-icons/h/apple-touch-icon.png" />
    <!-- For first-generation iPad: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/css/touch/gfx/hs-icons/m/apple-touch-icon.png" />
    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
    <link rel="apple-touch-icon-precomposed" href="/css/touch/gfx/hs-icons/l/apple-touch-icon-precomposed.png" />
    <!-- For nokia devices: -->
    <link rel="shortcut icon" href="/css/touch/gfx/hs-icons/l/apple-touch-icon.png" /><link rel="shortcut icon" href="/css/gfx/favicon.ico" />
    <!-- W3C way of 2005 for XHTML1.0 http://www.w3.org/2005/10/howto-favicon -->
    <link rel="icon" type="image/png" href="/css/gfx/myspot.ico" />
    <!--Styles-->
    <link href="/plugins/jqueryui/css/custom-theme/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="/css/desktop/myspot.min.css?v=2803" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="/css/desktop/myspotoldie.css?v=0114" />
    <![endif]-->
    <!--[if IE]>
    <link rel="stylesheet" href="/css/desktop/myspotie.css?v=0114" />
    <![endif]-->
    <!--scripts (more in page bottom-->
    <script src="/scripts/libs/modernizr-1.7.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        if (typeof jQuery == 'undefined') {
            console.log("no jquery");
            document.write(unescape('%3Cscript src="/scripts/libs/jquery-1.7.min.js"%3E%3C/script%3E'));
        }
        if (typeof jQuery.ui == 'undefined') {
            console.log("no jquery ui");
            document.write(unescape('%3Cscript src="plugins/jqueryui/jquery-ui-1.8.11.min.js"%3E%3C/script%3E'));
        }
        var defText = 'Restaurant ved åen...';
    </script>
    <script src="/scripts/desktop/behavior.min.js?v=2803" type="text/javascript"></script>
    <script type="text/javascript" src="/scripts/libs/jquery.cookie.js"></script>

    <!--do not move recordOutboundLink to bottom -->
    <script type='text/javascript'>
        var googletag = googletag || {};
        googletag.cmd = googletag.cmd || [];
        (function () {
            var gads = document.createElement('script');
            gads.async = true;
            gads.type = 'text/javascript';
            var useSSL = 'https:' == document.location.protocol;
            gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
            var node = document.getElementsByTagName('script')[0];
            node.parentNode.insertBefore(gads, node);
        })();
</script>

<script type='text/javascript'>
    googletag.cmd.push(function () {
        googletag.defineSlot('/1025597/Place_main_bottom', [468, 60], 'div-gpt-ad-1328824112752-0').addService(googletag.pubads());
        googletag.defineSlot('/1025597/Place_sidebar_bottom', [160, 600], 'div-gpt-ad-1328824112752-1').addService(googletag.pubads());
        googletag.defineSlot('/1025597/Place_sidebar_middle', [234, 60], 'div-gpt-ad-1328824112752-2').addService(googletag.pubads());
        googletag.defineSlot('/1025597/Search_main_bottom', [468, 60], 'div-gpt-ad-1328824112752-3').addService(googletag.pubads());
        googletag.defineSlot('/1025597/Search_sidebar_1', [234, 60], 'div-gpt-ad-1328824112752-4').addService(googletag.pubads());
        googletag.defineSlot('/1025597/Search_sidebar_2', [234, 60], 'div-gpt-ad-1328824112752-5').addService(googletag.pubads());
        googletag.defineSlot('/1025597/Search_sidebar_3', [234, 60], 'div-gpt-ad-1328824112752-6').addService(googletag.pubads());
        googletag.defineSlot('/1025597/Search_sidebar_4', [234, 60], 'div-gpt-ad-1328824112752-7').addService(googletag.pubads());
        googletag.defineSlot('/1025597/Search_sidebar_5', [234, 60], 'div-gpt-ad-1328824112752-8').addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
    });
</script>


    <script type="text/javascript">
        //Tabs
        jQuery(document).ready(function () {
            jTabs = jQuery("#tabs").tabs({

                select: function (event, ui) {
                    try {
                        var newhasharr = ui.tab.toString().split("#");
                        window.location.hash = newhasharr[1];
                    }
                    catch (err) {
                    }
                }
            });
            LoadTabFromHash();
            function LoadTabFromHash() {
                try {
                    var hash = window.location.hash.replace('#', '');
                    if (hash != '') {
                        jTabs.tabs("select", hash);
                    }
                }
                catch (err) {
                }
            }
            jQuery(".jclickatab").click(function (ev) {
                ev.preventDefault();
                var hash = jQuery(this).attr("href").replace("#", "");
                if (hash != '') {
                    jTabs.tabs("select", hash)
                }
            });
        });
    </script>

        <script type="text/javascript" src="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>
</head>

<body>

    <form method="post" action="/mypage" onsubmit="javascript:return WebForm_OnSubmit();" id="Form1">
<div class="aspNetHidden">
</div>

<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
ChangeColourOfInvalidControls();
return true;
}
//]]>
</script>

    <div id="fb-root">
    </div>
    <script type="text/javascript">
    window.fbAsyncInit = function () {
        FB.init({
            appId: '139505527456',
            channelUrl: '//www.myspot.dk/channel.html',
            status: true,
            cookie: true,
            xfbml: true  
        });
    };

    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/da_DK/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));
    </script>


    <div id="container" class="placepage">

            <!-- AddThis Buttons BEGIN -->
            <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
                <a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:width="105">
                </a>
            </div>
            <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
                <a class="addthis_button_google_plusone"></a>
            </div>
            <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=myspot"></script>
            <!-- AddThis Buttons END -->
        </div>
<script>
    jQuery(document).ready(function () {
        TidyUpPlaceImages();

        jQuery(".mainplacepix a").fancybox({
            'type': 'image',
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 600,
            'speedOut': 200,
            'titlePosition': 'over',
            'overlayShow': false,
            'showNavArrows': true
        });
    });
    function TidyUpPlaceImages() {
        var mainImageHeight = jQuery(".mainplacepix a:first").height();
        var thumbsHeight = 0;
        jQuery(".mainplacepix a:gt(0)").each(function (index) {
            thumbsHeight += jQuery(this).height();
            if (thumbsHeight <= mainImageHeight) {
                jQuery(this).show();
            }
            else {
                return;
            }
        });
    }
</script>

<script type="text/javascript">

jQuery(document).ready(function () {
    jQuery('#txtReviewBody').keyup(function(event) {
        if(jQuery(this).val().length>50 && !jQuery('#reviewparametercontainer').is(":visible")) {
            jQuery('#reviewparametercontainer').slideDown();
            _gaq.push(['_trackEvent', 'Reviews', 'LenghtAbove50', 'empty']);
        }
    }).blur(function() {
        if(jQuery(this).val().trim().length<1) {
            jQuery('#reviewparametercontainer').slideUp();
            _gaq.push(['_trackEvent', 'Reviews', 'BlurWithoutWriting', 'empty']);
        }
    });
    jQuery(".writeReviewDatePicker").datepicker(
    {
    maxDate: new Date()
    });
})

</script>

<script type="text/javascript">
    var reviewErrorMess = 'Some error';
    var ratingErrorMess = 'Some error';
    var reviewScriptErrorMess = 'Some error';
    function validateReviewForm() {
        var imValid = true;
        var reviewlength = jQuery('#txtReviewBody').val().length;
        var myspotrating = jQuery('#rating input[type="hidden"]').val().length;
        if (reviewlength < 2) {
            setErrorFeedbackToTheRight(jQuery('#txtReviewBody'), reviewErrorMess);
            imValid = false;
        }
        else {
            if (jQuery('#txtReviewBody').val().indexOf('<') > -1) {
                setErrorFeedbackToTheRight(jQuery('#txtReviewBody'), reviewScriptErrorMess);
                imValid = false;
            }
        }
        if (rating < 1) {
            setErrorFeedbackToTheRight(jQuery('#rating'), ratingErrorMess);
            imValid = false;
        }

        return imValid;
    }
    jQuery(document).ready(function () {
        jQuery('#ratingmyspot.error').live('click', function () {
            removeErrorFeedback(jQuery(this));
        });
        jQuery('textarea.error').live('keyup', function () {
            removeErrorFeedback(jQuery(this));
        });
        jQuery('#ddlTypes').change(function (ev) {
            FilterReviewParams(jQuery(this).val());
        });
        FilterReviewParams(jQuery('#ddlTypes').val());
    });
    function FilterReviewParams(categoryId) {
        var selector = '#reviewParameters .ratingcontrol.' + categoryId;
        var jAll = jQuery('#reviewParameters .ratingcontrol:visible');
        if (jAll.length > 0) {
            jAll.hide({
                duration: 1000,
                complete: function () {
                    jQuery(selector).show(1000);
                }
            });
        }
        else {
            jQuery(selector).show(1000);
        }

    }
</script>



<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#listOfOffers input[type="submit"]').button();
        if (jQuery(".offersFromDateTimePicker").length > 0) {
            jQuery(".offersFromDateTimePicker").datetimepicker({
                onSelect: function (selectedDate, sender) {
                    setMinDateTime(selectedDate, ".offersEndDateTimePicker");
                }
            });
            var minDate = jQuery(".offersFromDateTimePicker").val();
            jQuery(".offersEndDateTimePicker").datetimepicker({
                minDate: minDate
            });
        }
    });
</script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#placepageevents input[type="submit"]').button();

        if (jQuery(".eventsFromDateTimePicker").length > 0) {
            jQuery(".eventsFromDateTimePicker").datetimepicker({
                onSelect: function (selectedDate, sender) {
                    setMinDateTime(selectedDate, ".eventsEndDateTimePicker");
                }
            });
            var minDate = jQuery(".eventsFromDateTimePicker").val();
            jQuery(".eventsEndDateTimePicker").datetimepicker({
                minDate: minDate
            });
        }
    });
</script>
        <script type="text/javascript">
            jQuery(document).ready(function () {
                jQuery(".aboutplaceimages a").fancybox({
                    'type': 'image',
                    'transitionIn': 'elastic',
                    'transitionOut': 'elastic',
                    'speedIn': 600,
                    'speedOut': 200,
                    'titlePosition': 'over',
                    'overlayShow': false,
                    'showNavArrows': true
                });
            });
        </script>
        </footer>


    <script src="/scripts/libs/jquery.highlightFade.js" type="text/javascript"></script>
    <script src="/plugins/jqueryui/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="/scripts/desktop/mygmap.js"></script>
    <script type="text/javascript" src="/scripts/desktop/place.min.js?v=0310a"></script>


    </script>
     <script type='text/javascript'>
        jQuery.ajax({
            url: 'http://demo.easyrec.org:8080/api-js/easyrec.js',
            dataType: "script",
            success: function () {
                if (typeof (easyrec_sendAction) != "undefined") {
                    easyrec_sendAction("view",
                    {
                        itemId: "48863",
                        itemUrl: "/mypage",
                        itemDescription: "Mypage",
                    });
                }
            }
        }); 
    </script>

    <link rel="stylesheet" href="/plugins/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css"
    type="text/css" media="screen" />
    <script src="/plugins/jqueryui/jquery.ui.datepicker-da.js"     type="text/javascript"></script>
             <script type="text/javascript" src="/scripts/libs/jquery.lazyload.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery("img.lazy").lazyload();
        });

</script>



<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['Form1'];
if (!theForm) {
    theForm = document.Form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


</form>
</body>
</html>

thanks,

Thomas

2012-04-04 07:26
by ThomasD
Can you please add your html code? Maybe you are using various other JS frameworks as well - powerMicha 2012-04-04 07:27
are you doing ajax requests including snippet of HTML - fcalderan 2012-04-04 07:28
Make sure that this is not webkit bug. Try firebug in firefox, or check server log. I've run into similar problem few months ago while using chrome dev version - Marakoss 2012-04-04 07:43
@powerMicha I added an extract of my code to my question. Hope this gives some clue - ThomasD 2012-04-04 09:12


1

Search your solution for the Jquery.min.js file and ensure it is not getting referenced twice. If you are using a master page or a template, ensure it is not defined on that page and also on the page you are currently viewing.

2012-04-04 07:30
by Darren
searching in jquery.min.js will be very hard because it's the minimized version of jquery. But i am very sure it does not reference itsel - powerMicha 2012-04-04 07:50


1

Obviously you are using/loading multiple versions of jquery, jquery-ui, etc. which is definitely suboptimal

For example:

  • jquery-1.7.min.js
  • jquery.min.js (Version 1.7.1)
  • jquery-ui.min.js (Version 1.8.11)
  • ...

Also the following block seems to be obsolete, so try to remove it and load the js files from your server instead from google.

<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        console.log("no jquery");
        document.write(unescape('%3Cscript src="/scripts/libs/jquery-1.7.min.js"%3E%3C/script%3E'));
    }
    if (typeof jQuery.ui == 'undefined') {
        console.log("no jquery ui");
        document.write(unescape('%3Cscript src="plugins/jqueryui/jquery-ui-1.8.11.min.js"%3E%3C/script%3E'));
    }
    var defText = 'Restaurant ved åen...';
</script>

You are using many 3rd party libraries, so I cannot guarantee, that they load jquery as well

2012-04-04 13:23
by powerMicha
Hi. I can't find the multiple references to jquery in the source code (besides in devtools of Google Page Speed as shown in my screenshot in my question). Have you found them or am I missing something ? Regarding the obsolete loading, it is just a fallback if for some reason we cannot reach Google's servers to load the jquery from (see http://snipplr.com/view/16397/conditional-jquery-implementation/). Your help is much appreciated - ThomasD 2012-04-04 21:24
I just had a look into chrome's dev tools -> resources and saw that the above jquery files were listed. What's the advantage of loading the js files from google instead of loading them from your server? I think replacing them would increase performance as wel - powerMicha 2012-04-05 06:10
Loading from Google should actually increase performance http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you - ThomasD 2012-04-05 22:07
Ads