• Hi,
    I’m trying to speed up our company website. (www.centurionsystems.com) When I tested it earlier today it took 24 seconds(!) to load one page. I know for a fact that one of the main reasons the site is so slow is because all my scripts are at the top in my head, when I moved my scripts to the bottom of my body tag it cut my load time to 5 seconds the problem is I’m using several plugins that use javascript, as a result, when I move my scripts to the bottom, it breaks the plugin scripts obviously because now I’m calling a function before it’s been defined or vice versa. My question is, how can I move the scripts for my plugin down to the bottom of my body tag?

    I have tried a couple of hacks to find all scripts and css files, compress them and create one file so I have fewer server requests, all attempts at this failed.

    Any suggestions would be greatly appreciated.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • AFAIK the plugin has to be written that way.

    If I look at the code for your website, and use ySlow to view it I see the following load:

    13 javascripts
    1 MB of photos, mostly in a slider plugin
    9 CSS files

    You have Google analytics installed twice, once at the bottom, and again at the top in a plugin. Remove the one at the top

    You have the js for the nextgen gallery installed twice. Remove one.

    You are linking to your own copy of jQuery. Try linking to the Google API copy instead.

    You are calling in 1MB of photos, but you don’t have a photo slider on that page.

    Fix those things first, then try moving each js that’s left to the bottom of the page, one by one.

    Thread Starter synchole

    (@synchole)

    Hi,
    Thanks so much for your response.
    These are the scripts that I’m linking to in my header:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="wp-content/themes/centurion/style/js/loopedslider.min.js"></script>
    <script type="text/javascript" src="wp-content/themes/centurion/style/js/functions.js"></script>
    <script type="text/javascript">
     function unhide(more_details) {
     var item = document.getElementById(more_details);
     if (item) {
     item.className=(item.className=='hidden')?'unhidden':'hidden';
     }
     }
     </script>

    I can’t see how the js for the next gen gallery is installed twice, also I thought I was linking to the Google API copy and not my own. The loopedslider script is for the picture slider in my sidebar which is using 8 photos which when uploaded were only 655kb.
    The plugins that I’m using are:
    Smooth Slider (for the content slider on the home page)
    NextGen Gallery (To allow each product to have its only gallery)
    NextGen Galleryview (To style the gallery slider for each product)
    I would love to not have to use any of these plugins, but sadly with my limited javascript knowledge I don’t know how to get all the features I need. The only script I can move to the bottom right now is my hidden div script which doesn’t really make a difference to the speed.

    Shannon Smith

    (@cafenoirdesign)

    You’ve removed the extra Google Analytics script. That’s good.

    You’re still calling jQuery twice though. You need to modify your template to remove one. Make sure the Google one is the one you keep, and keep it at the top like it is now.

    Next, try to reduce the size of the images in the sidebar slider. 655kb is a lot, and it’s possible it’s being loaded when the javascript loads, before the rest of the page. Those are quite small photos, so you can probably resize them.

    In a perfect world the page weight (the size in kb of everything making up your site including photos, css, js, files, etc) would be 150kb. That’s hard to do and a bit arbitrary, but it’s a good goal to have.

    You still have 12 javascripts in the head of your document though (11 when the extra jQuery is removed).

    The NextGen Gallery doesn’t need to load on the homepage. Put its js links into the template file that is being used for product pages, and not on every page.

    Test the page using ySlow before you do all of this, and then again afterwards and see what happens.

    Thread Starter synchole

    (@synchole)

    Thanks again for taking the time to look at my site.
    I still don’t see where this extra script is coming from, when I look at yslow it shows that I only have 11 scripts in my head none of which are duplicates.
    The only code I have for my slideshows on each page is a shortcode calling the gallery [galleryview id=#] That’s it, and only within each post. So I have no idea how to stop it from loading all those scripts on my front page as smooth slider, the content slider I’m using, is not reliant on NextGen gallery.
    I was able to reduce the 8 images in my slider down to 168kb, which I can live with because any lower and I see the quality being effected by the compression.
    The ultimate reason why our site is so slow (the backend is also incredibly slow as well) is because we’re on a shared server, we are switching over to a virtual server this week, I just wanted to make the site as clean and efficient as I could.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Moving plugin javascript to bottom of body’ is closed to new replies.