jQuery scripts runs very slow

Question

I have a big problem. I've created site, using jQuery, but it runs very slowly. On mobile phones it's terrible! And I don't know, what's wrong... Someone can help me?

Links doesn't works yet, because I want use CMS on this layout, but before I want to little optimise these scripts.

Here's test site: http://wm.pawelgorastudio.pl

And here are the scripts:

    <script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="js/picturefill.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.color.plus-names-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.min.js"></script> 

<!-- jQuery carouFredSel JS file -->
<script src="js/jquery.carouFredSel-6.2.1-packed.js"></script> 

<!--Adobe TypeKit fonts - https://typekit.com-->
<script type="text/javascript" src="//use.typekit.net/eiz5mrm.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<!-- Preloader -->
<script type='text/javascript'>
    $(window).load(function() {
        $(".preloader").delay(100).fadeOut(1000);
    })
</script>

<!-- Image viewer -->
<script type='text/javascript'>
    $(document).ready(function() {
        $('.image-link').magnificPopup({type:'image'});
    }); 
</script>

<!-- All div links engine for Internet Explorer -->
<script type='text/javascript'>
    $(document).ready(function(){
        $(".mainmenu1 a, .mainmenu2 a, .rowclients a").click(function(event) {
            event.preventDefault(); window.location = $(this).attr("href");
        });
    });
</script>

<!-- Top menu links hover animation -->
<script type='text/javascript'>
    $(document).ready(function(){  
        $(".topmenu2 .topContact a").hover(
            function() {  
                $(this).stop().animate({"color": "#B2B2B2"}, 250);  
            },
            function() {  
                $(this).stop().animate({"color": "#666666"}, 250);  
            }
        );  
    });
</script>

<script type='text/javascript'>
    $(document).ready(function(){  
        $(".topmenu2 #ENDesk a, .topmenu2 #ENMobile a").hover(
            function() {  
                $(this).stop().animate({"color": "#FF6400"}, 250);  
            },
            function() {  
                $(this).stop().animate({"color": "#CCCCCC"}, 250);  
            }
        );  
    });
</script>

<!-- Main menu links animation -->
<script type='text/javascript'>
    $(document).ready(function anime(){
        setInterval(function(){
            $(".A1b").delay(0).animate({"opacity": "1"}, 500, "swing");
            $(".A1b").animate({"opacity": "0"}, 1000, "swing");
            $(".A3b").delay(250).animate({"opacity": "1"}, 500, "swing");
            $(".A3b").animate({"opacity": "0"}, 1000, "swing");
            $(".A4b").delay(500).animate({"opacity": "1"}, 500, "swing");
            $(".A4b").animate({"opacity": "0"}, 1000, "swing");
            $(".A6b").delay(750).animate({"opacity": "1"}, 500, "swing");
            $(".A6b").animate({"opacity": "0"}, 1000, "swing");
            $(".A8b").delay(1000).animate({"opacity": "1"}, 500, "swing");
            $(".A8b").animate({"opacity": "0"}, 1000, "swing");
            $(".A9b").delay(1250).animate({"opacity": "1"}, 500, "swing");
            $(".A9b").animate({"opacity": "0"}, 1000, "swing");
            $(".anime-2img").delay(1500).animate({left: "195px", top: "100px"}, 700, "swing");
            $(".anime-5img").delay(1500).animate({left: "181px", top: "97px"}, 700, "swing");
            $(".anime-7img").delay(1500).animate({left: "1px", top: "7px"}, 700, "swing");
            $(".anime-3img").delay(1600).animate({left: "80px"}, 500, "swing");
            $(".anime-3txt").delay(1600).animate({left: "80px"}, 500, "swing");
            $(".anime-4img").delay(1600).animate({top: "30px"}, 500, "swing");
            $(".anime-4txt").delay(1600).animate({top: "30px"}, 500, "swing");
            $(".A1b").delay(3000).animate({"opacity": "1"}, 500, "swing");
            $(".A1b").animate({"opacity": "0"}, 1000, "swing");
            $(".A3b").delay(3250).animate({"opacity": "1"}, 500, "swing");
            $(".A3b").animate({"opacity": "0"}, 1000, "swing");
            $(".A4b").delay(3500).animate({"opacity": "1"}, 500, "swing");
            $(".A4b").animate({"opacity": "0"}, 1000, "swing");
            $(".A6b").delay(3750).animate({"opacity": "1"}, 500, "swing");
            $(".A6b").animate({"opacity": "0"}, 1000, "swing");
            $(".A8b").delay(4000).animate({"opacity": "1"}, 500, "swing");
            $(".A8b").animate({"opacity": "0"}, 1000, "swing");
            $(".A9b").delay(4250).animate({"opacity": "1"}, 500, "swing");
            $(".A9b").animate({"opacity": "0"}, 1000, "swing");
            $(".anime-2img").delay(4500).animate({left: "51px", top: "12px"}, 700, "swing");
            $(".anime-5img").delay(4500).animate({left: "1px", top: "7px"}, 700, "swing");
            $(".anime-7img").delay(4500).animate({left: "181px", top: "97px"}, 700, "swing");
            $(".anime-3img").delay(4600).animate({left: "100px"}, 500, "swing");
            $(".anime-3txt").delay(4600).animate({left: "100px"}, 500, "swing");
            $(".anime-4img").delay(4600).animate({top: "43px"}, 500, "swing");
            $(".anime-4txt").delay(4600).animate({top: "43px"}, 500, "swing");
        }, 10000);
    });
</script>

<!-- Social links hover animation and links engine for Internet Explorer -->
<script type='text/javascript'>
    $(document).ready(function(){
        $(".B1a").hover(
            function() {
                $(this).stop().animate({"opacity": "0"}, 500);
            },
            function() {
                $(this).stop().animate({"opacity": "1"}, 500);
            }

        );
        $(".fadehover a").click(function(event) {
            event.preventDefault(); window.open($(this).attr("href"));
        });
    });
</script>

<!-- Submenu links hover animation and engine for mobile menu -->
<script type='text/javascript'>
    $(document).ready(function(){
        $(".submenu#MobileMenu").fadeOut(0);
    });
</script>

<script type='text/javascript'>
    $(document).ready(function(){
        $("#EnterMenu").hover(
            function() {  
                $(".submenu#Mobile p").stop().animate({"color": "#FFFFFF"}, 250);  
                $(".M1a").stop().animate({"opacity": "0"}, 250);
            },
            function() {  
                $(".submenu#Mobile p").stop().animate({"color": "#333333"}, 250);  
                $(".M1a").stop().animate({"opacity": "1"}, 250);
            }
        );  
        $("#EnterMenu").click(function(event) {
            event.preventDefault();
            $(".submenu#MobileMenu").fadeIn(250);
            $('.submenu#MobileMenu .submenuList a').each(function(i) {
                var margins = 25 - ($(this).height()/2) + "px";
                $(this).css({"margin-top": margins, "margin-bottom": margins});
            });
        });
    });
</script>

<script type='text/javascript'>
    $(window).load(function() {
        $('.submenu#DeskMenu .submenuList').each(function(i) {
            var margins = 25 - ($(this).height()/2) + "px";
            $(this).css({"margin-top": margins, "margin-bottom": margins});
        });
    });
    $(window).resize(function() {
        $('.submenu#DeskMenu .submenuList, .submenu#MobileMenu .submenuList a').each(function(i) {
            var margins = 25 - ($(this).height()/2) + "px";
            $(this).css({"margin-top": margins, "margin-bottom": margins});
        });
    });
</script>

<script type='text/javascript'>
    $(document).ready(function(){  
        $(".submenu a").hover(
            function() {  
                $(this).stop().animate({"color": "#FFFFFF"}, 250);  
            },
            function() {  
                $(this).stop().animate({"color": "#333333"}, 250);  
            }
        );  
    });
</script>

<script type='text/javascript'>
    $(document).ready(function(){  
        $(".submenuList p").hover(
            function() {  
                $(this).stop().animate({"color": "#FFFFFF"}, 250);  
            },
            function() {  
                $(this).stop().animate({"color": "#333333"}, 250);  
            }
        );  
    });
</script>

<script type='text/javascript'>
    $(document).ready(function(){
        $("#CloseMenu").hover(
            function() {  
                $("#Close p").stop().animate({"color": "#FFFFFF"}, 250);  
                $(".C1a").stop().animate({"opacity": "0"}, 250);
            },
            function() {  
                $("#Close p").stop().animate({"color": "#333333"}, 250);  
                $(".C1a").stop().animate({"opacity": "1"}, 250);
            }
        );  
        $("#CloseMenu").click(function(event) {
            event.preventDefault();
            $(".submenu#MobileMenu").fadeOut(250);
        });
    });
</script>

<!-- Clients list animation -->
<script type='text/javascript'>
    $(window).load(function() {
        $('.clientsImg').each(function(i) {
            var clients = $('.clientsImg');
            var index = clients.index(this);
            var next = clients[index+1];
            var prev = clients[index-1];
            $(this).css("top", 27 - ($(this).height()/2) + "px");
            if (i == 0) {
                $(this).css("left", 0);
            }
            else {
                $(this).css("left", $(prev).width() + $(prev).position().left + 40 + "px");
            }
            window.TotalWidth = 0;
            $('.clientsList').find('.clientsImg').each(function() {
                window.TotalWidth += $(this).width() + 40;
            });
            $('.clientsList').width(TotalWidth);
        });
        (function fly() {
            $('.clientsImg').animate({left: "-=1px"}, 10, "linear", function () {
                if ($(this).position().left <= 0 - $(this).width()) {
                    $(this).css("left", "+=" + TotalWidth + "px");
                }
                fly();
            });
        }());
    });
</script>

<!-- Footer list hover animation -->
<script type='text/javascript'>
    $(document).ready(function(){  
        $(".rowfooter a").hover(
            function() {  
                $(this).stop().animate({"color": "#4C4C4C"}, 250);  
            },
            function() {  
                $(this).stop().animate({"color": "#999999"}, 250);  
            }
        );  
    });
</script>

<!-- Cookies Info box animation engine for display it and set and read cookies engine -->
<script type='text/javascript'>
    $(window).load(function() {
        var cookieHeight = "-" + $(".cookiesInfo").height() + "px";
        $(".cookiesInfo").css({opacity: 0, bottom: cookieHeight});
        if ($.cookie("cookieBox") != 1) {
            var cookieHeight = "-" + $(".cookiesInfo").height() + "px";
            $(".cookiesInfo").delay(1100).animate({opacity: 1, bottom: 0}, 1000, "swing");
        }
    })
</script>

<script type='text/javascript'>
    $(document).ready(function(){
        $(".C2a").hover(
            function() {
                $(this).stop().animate({"opacity": "0"}, 500);
            },
            function() {
                $(this).stop().animate({"opacity": "1"}, 500);
            }
        );
        $(".closecookiesInfo a").click(function(event) {
            event.preventDefault();
            $.cookie("cookieBox", 1);
            var cookieHeight = "-" + $(".cookiesInfo").height() + "px";
            $(".cookiesInfo").animate({opacity: 0, bottom: cookieHeight}, 1000, "swing");
        });
    });
</script>

fix the 404 error first.. them put all libraries in one single file, one file for all the js so it is not inline js and update the link — Jorge Y. C. Rodriguez, Jul 14 '13 at 20:08
which mobile are you testing, im testing on iphone 4s 3g network 5mb up and 305kb down. and works really fast with me.. — Jorge Y. C. Rodriguez, Jul 14 '13 at 21:09
hmm... My iPhone is old (3g), but someone tested on iPhone 5, and told me, that's run very slow. I tested too on Android's Samsung Ace and it's a little faster that on my iPhone, but it's still slow. — Paweł Góra, Jul 14 '13 at 21:14

score 0 · Accepted Answer · edited May 23 '17 at 10:26

with iphone 3g / s you have to consider that they power it is really slow compare to new models and if you have time this article it has some solid points about the topic, and javascript gets interpreted slower..

even tho the site it is "small" only 64 request and 252kb of transfer and still perform poorly on mobiles so the only thing I think of it is to compress files putting it all together, reduce images either by using text with css or sprites. so the request is smaller also this is not important for performance speed wise but it is really good to handle events for mobile devices, try avoid using click if you know the device it is a mobile or it has touch capabilities. you can use jQuery mobile or JQT to handle this events such tap or double tap.

Also avoiding to use multiple:

$(document).ready(function() {

});

and

$(document).load(function() {

});

you can check this answer for reference.

jQuery scripts runs very slow

1 Answers1

Linked