I Have created a flatfile based cms. PHP and jquery mostly. It is very dynamic and easy in use. I have 3 javascript includes for juery and other functions. This is for the main cms files. So that is quite allright.
But i have written multiple plugins/addons for he cms, also jquery and php, guestbook, comments, rating system, album galleries, site search,.... The problem is that each plugin has javascripts included. And i need to include all scripts in the head part of my main cms in order for the plugin to work on the cms. Now all javascripts get loaded every time the page reloads or if u click a link. That gives many http requests wich slows the cms down. About 15 javascrip files are included in the head now
Is here a way i can load only the needed javascript files and not all of them with a function of some kind.
i tried to compress all the javascript into one file, but that gives errors...
I hope my question is clear in my bad english :)
thx for any response
The tool you are looking for is called grunt.
http://gruntjs.com/
You have over 2000 packages for doing many things and one of them in concatenation and minification.
grunt-contrib-cssmin
grunt-contrib-uglify
grunt-contrib-concat
the list goes on an on, but check 'em all here.
https://github.com/gruntjs/grunt-contrib
grunt is a little confusing the first time you see it, but there are heaps of resources for it and also heaps of stackoverflow examples.
Once you go grunt you never go back!
I'd think you can merge all javascript files and then minify it. are you using double function names or do you have javascript code outside of functions? maybe that is what is throwing up your errors.
would leave you with only one request to retrieve all your javascript functions , and you would only need to minify / compress one file.
Related
I am scared to ask this question, because StackOverflow is already warning me about my question being likely to be downvoted. But I am very curious about this.
I have read that you must have at least one php file in your WordPress Plugin. Which sounds to me like you only need something like an index/entry php file.
However, I wasn't able to find much about JavaScript in WordPress Plugins by using google. Which seemed weird to me, because we're talking here about the web of 2017.
An answer would be very appreciated!
The answer is no, you cannot, as you have referenced in your question. By definition, a plugin is at the very least a "PHP file with a WordPress plugin header comment" (Wordpress Docs).
However, there is no reason a Wordpress plugin can't be primarily Javascript. You can follow this guide for some different approaches to include it in your plugin.
Since WordPress is (basically) purely php, then all its plugins will also be php. This is they way it has been set up.
In order to have a 'WordPress plugin', yes you will need at least one php file to register to WordPress and enqueue your javascript/css/what-have-you..
This means if you want something like React/Ember on your WP installation, they aren't going to be 'WordPress' plugins, they will belong to the React/Ember ecosystem. You will just have the minimum to enqueue the javascript libraries you want to use.
You can then use your javascript frontend and talk to WP's REST API, and now WP has basically become your server 'framework'.
So, no, there's no such thing as a 'JavaScript WordPress Plugin'. But you can have a plugin that includes as much fancy JS as you may want.
The following article should give you insight about this.
Your WordPress Plugin must have at least one PHP file; it could also contain JavaScript files, CSS files, image files and language files. If there are multiple files, pick a unique name for a directory and a name of your choice for the main PHP file. (This file name is often, but not essentially, the same as the directory name.) Example directory and file names could be mycompanyname-fabulous-functionality and mycompanyname-fabulous-functionality.php respectively. Put all your Plugin's files into the directory you've created and tell your Plugin users to upload the whole directory to wp-content/plugins/.
Hope this helps. But no, you can't create a Wordpress plugin with only Javascript.
I am developing in ASP.NET MVC and using multiple JavaScript files. E.g. jQuery, jQuery UI, Google Maps, my own JavaScript files, etc.
For performance, should I combine these into one? If so, how?
The reason you want to combine many files into one is so to minimize latency of setting up and tearing down http requests, the fewer you make the better. However, many newer browsers are downloading JavaScript files in parallel (still executing sequentially). The consequence is that downloading a single 1Mb file may be slower than three 350Kb files. What I've come to do is to separate my files into three bundles:
External lib files (jquery, flot, plugins)
Internal lib files (shared by multiple pages)
Page specific files (used only by that page, maybe by two pages)
This way, I get the best of both worlds: not an excessive number of http requests at startup, but also, it's not a single file that can't benefit from parallel downloads
The same applies to CSS, each page load three CSS bundles. So in total, our pages download six bundled files plus the main html file. I find this to be a good compromise. You may find that a different grouping of files works better for you, but my advice is don't create a single bundle, unless it's a one page app. if you find yourself putting the same file into different bundles a lot, it's time to re-think the bundling strategy since you're downloading the same content multiple times.
What to use? Martijn's suggestions are on the money. YUI is the most widely used from my experience, that's what we used at my previous and current jobs.
For the question of whether you should, check out the link in Shoban’s comment.
For the question of how:
Google’s Closure Compiler
Yahoo!’s YUI Compressor
If they are all going to be included on all of your pages, then it doesn't really make a difference. But if some are only relevant to certain pages, it would technically be better to keep them separated and only include the relevant ones on relevant pages.
As far as I know, you should indeed : less files means less http get, hence better performance for the user when they first load the page.
So they will save a split second they will come on your page for the first page. But after, these files are cashed, and it makes then no difference at all...
I haven't digged into the javascript engines itselves, but a function in one file will be handled in the same way if it is in a big file or a small file. So it makes no difference in the execution.
So, save your time, don't change anything as it'll cost you too much time for too little reward, especially when you'll discover that you want the latest version of jquery (a new version came out today btw), and that you have to re-concatene everything...
So I have web app with multiple JS files (jQuery, jQuery, my own JS code and more). Say I have a page named index.html. What would be the best practice to include / preload my js files? I was thinking about creating a separate JS file that will do the preloading (include all the other scripts and call jQuery.noConflict()). What do you guys suggest? Is this possible? How would you implement it?
Thanks!
In general, combine your script files into one file (and minify or compress them, or even compile them, but note that this last item is not zero-impact, there are pain points). See notes here and here. Basically, one of the first guidelines you'll see for a good fast page load is "minimize HTTP requests." So you don't want six separate script tags where you could have one.
For popular scripts, though, you may benefit from using them from Google's CDN. Google is kind enough to host most popular JavaScript libraries on their CDN for free. The advantage here being not only that the CDN will be fairly fast, but that the target user's browser may well have a cached version of the script you want to use even though they've never been to your site before.
Check out RequireJS, a smart and robust script loader for JavaScript. It's designed to work well with jQuery and comes with an optimization tool to combine all of your scripts into one.
The best way is to minimize all the js files and combine them into one script. This will cause less work for the browser, as it doesn't have to make multiple requests to the server.
If you are going to load everything up at the same time, you could put it all into a single compressed file
I'm having difficulty in deciding which approach is better in terms of site performance.
Either to have all required jQuery plugins in one file to be included on every page on the site OR split the plugins out to individual files and use the jQuery.getScript() method to load them as and when required.
Is there any real benefit in loading the scripts asynchronously over one http request?
All my Javascript will be minified and gzipped.
Thanks!
It's not so simple and depends on the distribution of javascript across your site. Have a look at this question : Which is better for JavaScript load-time: Compress all in one big file or load all asynchronously?
From my poit of view the best solution until now is controljs
Read the complete post http://www.stevesouders.com/blog/2010/12/15/controljs-part-1/
One request will be better for performance. Period. Only downside is, every time one of the files changes, the whole thing changes (and will have to be downloaded again). Plugins won't change much, so I'd put everything (as much as possible) in 1 file.
Put jQuery core in that file as well. And your custom javascripts as well. Just make sure it's in the right order :)
Try the YSlow plugin to Firefox and try your different setups.
That said, minifying your js to one file would be an easy way with great results. You will get one file, and it's often very much smaller than the sum of the parts.
i've got a site with a lot of referenced .js-Files; those are rather small files, but I want to keep my methods separated by topic/functionality.
Is it better to keep all the methods in one .js-File or is it no problem to have many (~ 20 - 30) small files all including only some lines?
By all means keep them separate for development, but you should consider bundling them together into one file for production.
There is a nice discussion at sitepoint.com
For each of these files, an HTTP
request is sent to the server, and
then the browser awaits a response
before requesting the next file.
Limits (or limitations) of the browser
generally prevent parallel downloads.
This means that for each file, you
wait for the request to reach the
server, the server to process the
request, and the reply (including the
file content itself) to reach you. Put
end to end, a few of these can make a
big difference to page load times.
Actually it's a bad idea to have so many referenced files. The basic idea for performance issues is to try to minimize HTTP Requests as much as possible (at least on your production server). Take a look at this http://developer.yahoo.com/performance/rules.html#num_http
Does anyone have a clever nant script which can do this for you? I've written a custom nant task which uses the YUI compressor to minify my css and js, but it would be useful to add combining to it. How do you guys handle this?
I don't know what framework (if any) you use on serverside, but Ruby on Rails have a script include function that depending on the settings (e.g. test or production) it can either create lots of script tags (typically test mode) or create one tag with all scripts concatenated into one (optionally compressed with some plugins) file. I'm sure many other frameworks support something like this too.
UPDATE: I just remembered:
You can allso manually compress (by stripping whitespace and comments, shortening variable names etc.) and combine javascript files and CSS files with the Yahoo! UI Library: YUI Compressor. Just be sure your JavaScript is correct before you compress it, try JSLint.