wordpress jquery
Posted by Seeking Knowledge, 10-16-2012, 08:43 AM Hi there, I'm facing a problem with few plugins that I'm using with wordpress. The problem is that jquery files beeing called on the homepage and every page even when plugin is not used at the home page. Is there any function or idea how can I make jquery files appears only when needed? Best regards,
Posted by Herasil, 10-16-2012, 01:39 PM Since it's called on every page, there's probably some header file that every page uses that has the include statements for the jQuery files. Is there a specific reason that you don't want them to be called on every page? Are you trying to save some bandwidth or cut down on load time?
Posted by Seeking Knowledge, 10-16-2012, 02:53 PM Thank you Herasil for you reply, I'm trying to cut down page load time. Thanks,
Posted by Herasil, 10-16-2012, 03:11 PM I'm not exactly sure how Wordpress structures its files, but if there aren't too many pages where you utilize jQuery, then you can probably just remove the include statements for the jQuery files from the header file and then manually reinsert it into each specific page that uses jQuery. Or maybe if it's possible, modify the code in the header file to only execute the include statements on particular pages by using a conditional. It may not even be necessary to do this.. I personally haven't seen a significant load time increase from including jQuery files. Have you tried getting a load time report for your site using the Pingdom "Full Page Test" tool? (I would give you a direct link but I don't think I'm allowed to do that yet.) That will show you the total load time for the page, and individual load times for each file, such as the jQuery files. If your site is loading slowly, the problem could be something other than loading jQuery.
Posted by Seeking Knowledge, 10-16-2012, 04:00 PM I've been using pingdom. My website results at first was: load time: 10.53 s Page size: 10.30 MB Requests: 180 Now after removing few plugins and deleting few jquery files from the header. load time: 3 s page size: 2.7 MB requests: 117 EDIT: requests: 113 Do you have any url that shows how to exclude jquery file from being called in particular page if it is not needed? you mentioned "conditional" you mean " If conditional" right? any url that shows how to use it with wordpress? Last edited by Seeking Knowledge; 10-16-2012 at 04:06 PM.
Posted by Herasil, 10-16-2012, 04:32 PM Woah those are huge jQuery files!! Mine only take up 100-150KB total. Even after you removed the jQuery files, it's still pretty big.. are there big images being loaded too? I think the best way to solve this would be to cut down on your jQuery file sizes, they definitely shouldn't be that big. Making the jQuery load on only the pages that you use it on is really only a bandaid fix. Can you list the jQuery plugins that you use? The base jQuery file is only about 100KB. I think it would also be helpful if you could post a link to your website. I don't have a specific URL. Yeah, I was referring to if statements, like possibly grabbing the current page's URL and then if the URL contains particular strings (particular page file names that use the jQuery), then it would include the jQuery files. But that's probably not a very effective solution or method, just an idea. Now that I know just how big your jQuery files are, I don't recommend just not loading the files on pages that don't use them. Because when you do need to use them, it can be problematic, with 10MB of material to download.
Posted by Seeking Knowledge, 10-16-2012, 08:09 PM I've sent to you PM that contains website url. BTW. the website contains a lot of small sizes images. I can not delete them because then I've to change many things in the theme. If you have any suggestions about how can I improve speed it will be appreciated. Thanks,
Posted by Herasil, 10-16-2012, 08:21 PM I see some pretty big images at the top that can be compressed. Their actual resolution is much bigger than the thumbnail resolution, but it's still loading the original image in the thumbnail space. Create thumbnails from the original image to use in those locations.
Posted by Seeking Knowledge, 10-16-2012, 08:53 PM Oh, Thank you very much Herasil. I've used to use Imsanity plugin that changes image resolution and size automatically to 200/229 px. I've disabled it a while ago when I was tracking a problem and didn't remember to activate it again. I'll activate it now and run bulk re-size.
Posted by Herasil, 10-16-2012, 10:51 PM Good, that should take care of some of the size. But the major thing is your jQuery plugins. Can you PM me a link to a page that still has calls to the jQuery files so I can take a look at why exactly they're so big?
Posted by SimonDevise, 11-05-2012, 05:03 AM I think there is not any reason for managing this (query files appears only when needed) .
Posted by zykko, 11-10-2012, 02:47 AM if your plugins make the page grow from 2.7MB to 10MB in size and thats just plain Wordpress and not some advanced interactive web app it means you are seriously overloading the site with unneeded plugins - usually those plugins are used to perform some simple tasks that can be easily implemented with 10 rows of pure javascript each. if you cant/dont want to code load all your scripts at the very bottom of your pages (before closing body tag) to make sure your layout/content comes first and avail to a visitor before all jquery whistles loaded. remember that JS files are blocking all other files from loading until they all completely fetched by the browser. even if they come from a different domain. yet all JS files are cached by browser so they dont get downloaded again on any subsequent pages even if they "appear" in the code. so a browser fetches these files only once during a site visiting. still - 7MB of javascript is way to much..