WordPress.org

Make WordPress Core

Opened 15 years ago

Closed 6 years ago

#3372 closed feature request (maybelater)

Consolidated JavaScript/CSS Plugin API

Reported by: robertaccettura Owned by:
Milestone: Priority: lowest
Severity: normal Version: 2.1
Component: Script Loader Keywords:
Focuses: Cc:

Description

WordPress plugins are great, they really are. One problem with them is they often include their own styles and scripts. The problem here is that several plugins with useful features mean a browser needs to download 10+ javascripts and stylesheets. This isn't good for page load. It's awful. See:
http://www.die.net/musings/page_load_time/

My suggestion would be an API that allows all plugin/css to be included in 1 PHP generated CSS and Javascript. This would drastically consolidate requests. For performance reasons it should ideally be cached so that it's only regenerated when a plugin is loaded/reloaded.

This is becoming a bigger issue as plugins become more common and useful. I hope a solution is found that gives plugin authors the freedom they need, and blog owners the performance they want, without having to sacrifice features. I think channeling all the requests into 1 JS and 1 CSS file would achieve that. They could use a numerical ranking system to calculate position in the file (to avoid conflicts) similar to how (iirc) filter work.

Attachments (1)

combine.php (2.4 KB) - added by DD32 13 years ago.

Download all attachments as: .zip

Change History (45)

#1 @Viper007Bond
15 years ago

  • Milestone set to 2.2
  • Priority changed from normal to low
  • Severity changed from normal to minor
  • Version set to 2.1

Not a bad idea IMO, but large changes such as this are best discussed via the wp-hackers mailing list first. Much easier to discuss, propose solutions, etc. :)

#2 follow-up: @RuddO
15 years ago

This is a GREAT idea!

And it would also free plugin writers from having to do the wp-content/plugins/plugin_basename(FILE) chicanery.

All that's needed, in my opinion, would be functions "plugin_add_css", "plugin_add_js", and then on wp_head() WP can inject an URL that points to an internal file which releases the added CSS and JS. This function could be loaded as part of the plugin initialization trigger (can't recall its name right now).

This has definitive advantages to feeding JS and CSS inline on wp_head() directly.

Note that, due to the nature of the requests, it's impossible to make distinctions based on which page the reader is visiting, because the custom CSS and JS is released to the browser separately from the original request.

#3 @foolswisdom
15 years ago

robertaccettura, thanks for participating in WordPress! I love what you have done with Mozilla particularly Report a Website.

Viper007Bond suggestion is a good one, variations of this topic have come up before, but like Mozilla's Bugzilla having an enhancement ticket seldom moves the idea into implementation, so please don't let that frustrate you or leave it at that.

#4 @ryan
15 years ago

2.1 has a script loader API.

http://trac.wordpress.org/browser/trunk/wp-includes/script-loader.php

It doesn't group scripts into one big script, however. Extending it to do that probably wouldn't be too hard, though, if someone wants to take a crack at it.

#5 in reply to: ↑ 2 @robertaccettura
15 years ago

Replying to RuddO:

Note that, due to the nature of the requests, it's impossible to make distinctions
based on which page the reader is visiting, because the custom CSS and JS is released
to the browser separately from the original request.

Ah but you can. i.e.

<script type="text/javascript" src="/wp-javascript.php?path=/archives/2006/11/22/monkey-love/"></script>

<script type="text/javascript" src="/wp-javascript.php?path=/"></script>

#6 @foolswisdom
15 years ago

  • Milestone changed from 2.2 to 2.4

#7 @darkdragon
14 years ago

  • Keywords hunted-sendnext added

Suggest candidate for next release.

#8 @lloydbudd
14 years ago

  • Keywords hunted-sendnext removed
  • Milestone changed from 2.4 to 2.6

#9 @jacobsantos
13 years ago

  • Milestone changed from 2.7 to 2.8

You know, it would be nice.

#10 @DD32
13 years ago

One of the problems with consolodating everything (particually styles) is that they're not all unique, In the sense that some styles conflict between stylesheets..

Theres also Conditionals which need to be taken into consideration for styles, Then theres styles which are only registered if they're needed on a page.

Then theres the extra load on the webserver having to load all of WordPress's files, where before it could mearly load half a dozen static files (Which load incredibly fast compared to PHP).

Scripts are a bit easier to combine, But still can have conflicts.

If you wish to have the files compressed, Most webservers come with modules/functions to automatically compress the static files with gzip.

Theres also Gears which is caching scripts and styles locally for users..

And now theres this plugin i just wrote up to do the job.. It doesnt support ltr styles, It breaks the CSS on every page, and most Javascript refuse to load, and it doesnt compress (unless PHP is set to auto-compress), It was mearly to see what can be done, and as a base for someone else to work off potentially. (See Attachment)

@DD32
13 years ago

#11 @xenlab
13 years ago

This is a great idea. On other systems that I've done this with, the bandwidth and HTTP request savings were ENORMOUS! For high traffic sites (1M+ per day) you'd be silly not to do this, since saving those extra requests mean you can serve more traffic with the same hardware stack. I've seen it. It really is amazing.

With the evangelizing aside, I want to address a couple of comments, and then add my own two cents...

First styles never conflict, they cascade. The order the files are added should be something that is respected. I believe this is already being taken into account. If you are using conditionals, they will probably go under the aggregated file and pick up the cascade (applying only to IE) after the fact, to fix IE's lovely bugs.

If scripts are conflicting, then there is a problem long before the aggregation takes hold. All this should do is concatenate the files, one after the other, into one 'super' file, so that is only one file to be served up.

This shouldn't be done dynamically on each page load. The file should be created and cached to disk. This way the file can be pre-generated on the first request, but fetched from disk on all other requests.

While there would be a little processing overhead upfront, I think it should md5 the file contents and use this hash as the file name. This way if new files are added, they could be checked against the hash and regen'd as needed. This has the added benefit of always serving a fresh aggregate file if the contents have changed, forcing user agents to update their local cache because the md5 hash file name would change. Speed tests would need to be performed as this may be more trouble than its worth, but md5'ing at least the original file names would be a good way to come up with a naming convention.

In addition you should include a way to for scripts to be able to 'target' wp_head or wp_footer. This way you can add some scripts in the header if that's whats needed but put the majority of scripts near the footer so that they fire after the page has loaded. This could be easily accomplished with a paramater to the add_js function.

And last but not least, we should be gziping the file that's output.

#12 @projct
13 years ago

I've been continuing some work on this based on DD32's plugin - http://gist.github.com/32236

#13 @jacobsantos
13 years ago

There are two more plugins, WP Speedy and mine, when I get it up.

I think this is really Plugin material, but it would be nice if WordPress made it easier to do in plugins.

#14 @jacobsantos
13 years ago

  • Keywords needs-patch added

#15 @jacobsantos
13 years ago

  • Type changed from enhancement to feature request

#16 @djr
13 years ago

  • Cc djr added

Would love to see this, as Yslow (http://developer.yahoo.com/yslow/) is constantly complaining about too many requests.

#17 @ryan
13 years ago

  • Milestone changed from 2.8 to Future Release

Core scripts now support concatention. Doing this for plugins will require some more work. Moving to future release.

#18 @Denis-de-Bernardy
13 years ago

  • Milestone changed from Future Release to 2.9
  • Priority changed from low to high
  • Resolution set to duplicate
  • Severity changed from minor to major
  • Status changed from new to closed

let's bump the priority somewhat. this gets really annoying on sites with loads of assets.

#19 @Denis-de-Bernardy
13 years ago

  • Resolution duplicate deleted
  • Status changed from closed to reopened

woops. shouldn't be closed :P

#20 @demetris
13 years ago

  • Cc dkikizas@… added

#21 @Denis-de-Bernardy
12 years ago

  • Keywords dup added

adding keywords, I'm sure there's a dup or two of this one

#22 @Denis-de-Bernardy
12 years ago

  • Keywords dup removed

#23 @hakre
12 years ago

  • Keywords reporter-feedback added

Okay, nice Idea but this ticket is missing a working concept and a concrete implementation suggestion at least. The main description is mainly "goals" leaving the whole ticket foggy. I suggest as won't fix because the suggest code is a plugin (therefore there is no need that this goes into the core) _and_ it's not working as reported. This needs first of all reporters feedback. Suggestions to existing concepts etc. For example this can mean that WordPress should become it's own MVC implementation.

Close because of lack of traktion?

#24 @hakre
12 years ago

  • Component changed from Optimization to JavaScript
  • Priority changed from high to lowest
  • Severity changed from major to trivial

#25 follow-up: @dd32
12 years ago

  • Keywords reporter-feedback removed
  • Milestone changed from 2.9 to Future Release

The fact that the code was presented as a plugin means nothing, It was simply the easiest way to show it.

At present, This is done for core scripts and styles already. Expanding it to non-core files however isnt exactly the simplest thing to do.. But can potentially be done. I believe there -may- be another ticket elsewhere asking for that, not 100%.

I'm setting this back to Future Release pending a patch or developer/commiter actually working on it due to it being a feature request/enhancement.

#26 in reply to: ↑ 25 @hakre
12 years ago

Replying to dd32:

At present, This is done for core scripts and styles already. Expanding it to non-core files however isnt exactly the simplest thing to do.. But can potentially be done. I believe there -may- be another ticket elsewhere asking for that, not 100%.

You mean the script loader thingy? Plugin authors can add their CSS and scripts already, too. So this is actually not an issue any longer, right?

#27 @dd32
12 years ago

You mean the script loader thingy? Plugin authors can add their CSS and scripts already, too. So this is actually not an issue any longer, right?

The script loader can only compress/combine core files, Whilst plugin and theme authors are suggested to use the script loader, it'll only output an item in the head, not actually add it to the compress/combine lists (Due to the way that the script loader is a separate component, It doesnt load WordPress&Plugins so as to reduce memory footprint)

#28 @hakre
12 years ago

Well there are different paths to follow in optimization, some suggest to link a javscript file that loads larger modules only on demand then. Are such improvements in the scope of this ticket as well?

#29 @westonruter
12 years ago

  • Cc westonruter added
  • Severity changed from trivial to normal

I just submitted a plugin to the directory called “Optimize Scripts” which accomplishes most of what is discussed in this ticket, namely:

  1. Concatenates enqueued scripts together.
  2. Respects head and footer groups.
  3. Minifies code using Google's Closure Compiler.
  4. Caches the concatenated/minified code and rebuilds it only when one of its source scripts expires or changes.
  5. Filename for concatenated/minified script is the md5 of all the handles concatenated together (thus if an additional handle is provided, a new concatenated script is generated).
  6. Provides a filter to limit which scripts get concatenated (i.e. jQuery on ajax.googleapis.com should be left alone); by default, all scripts on local host are concatenated, and remote scripts are left alone.
  7. Removes the default 'ver' query parameter which WordPress adds to every script src if no version argument is supplied on wp_enqueue/register_script: this is important for Web-wide caching of scripts loaded from ajax.googleapis.com, for example. When registering new scripts, pass the filemtime in as the version so that whenever a file changes, the concatenated script will be regenerated.

And there are more options. The current alpha-version of the plugin can be found at: http://gist.github.com/233399

Once the plugin is approved for the directory, it'll be found at: http://wordpress.org/extend/plugins/optimize-scripts/

For example, consider the following code:

wp_deregister_script('jquery');	//remove locally jQuery in favor of Google's
//since no verion provided, no ver query param will be added to script@src
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js');
wp_enqueue_script(
   'myscript1', 
   get_template_directory_uri().'/myscript1.js', 
   array('jquery'), 
   filemtime(TEMPLATEPATH).'/myscript1.js',
   true //in_footer
);
…
wp_enqueue_script(
   'myscriptN', 
   get_template_directory_uri().'/myscriptN.js', 
   array('jquery'), 
   filemtime(TEMPLATEPATH).'/myscriptN.js',
   true //in_footer
);

Without this plugin, the previous code would be generated by WordPress as:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js?ver=2.8.5"></script>
<script src="http://example.com/wp-content/themes/foo/script1.js?ver=45678901"></script>
…
<script src="http://example.com/wp-content/themes/foo/scriptN.js?ver=12345678"></script>

But with this plugin enabled, the output would be as follows:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="http://example.com/wp-content/js/9e107d9d372bb6826bd81d3542a419d6.js?ver=7659098223"></script>

I'd love to get your feedback, suggestions, and contributions to make the code better so that we can boost WordPress frontend performance.

#30 @voyagerfan5761
12 years ago

  • Cc voyagerfan5761+wptrac@… added

#31 @rspindel
11 years ago

  • Cc rspindel added

#32 @abischof
11 years ago

  • Cc abischof added

#33 @azizur
11 years ago

  • Cc azizur added

#34 @dangayle
10 years ago

  • Cc dangayle@… added
  • Keywords dev-feedback added

This is still a good idea, and becoming ever more so as mobile sites require higher performance from our WP installs. I have a client with something like 4 scripts and 10 styles being enqueued, all of which are required but slow the site down a bit.

#35 @stephenh1988
10 years ago

  • Cc stephen@… added

#36 @wvega
9 years ago

  • Cc wvega added

#37 @CaptainN
9 years ago

  • Cc CaptainN added

Is there any interest in a patch for this?

My stab at the things at a minimums to address for theme side use of concatenation:

  • A new argument for wp_register_script, wp_enqueue_script, etc. at the end of the list - $allowConcat, defaulted to false. This would allow scripts to opt in to concatenation. Many (all?) of the core libs are concat safe, so they could be set to true by default.
  • unit tests.

With this data in place the existing WP_Scripts concat stuff could be used (with maybe some minor edits) to implement the rest.

#38 @jasonrhodes
9 years ago

  • Cc jason.matthew.rhodes@… added

#39 @retlehs
9 years ago

  • Cc retlehs added

#40 @joshbroton
8 years ago

While there are plugins that accomplish this, as the web moves more to mobile, it becomes increasingly important to concatenate and minify JS/CSS. We'd be helping the entire Internet by making this core functionality.

I'd love to see another parameter of the wp_enqueue_script() function: $in_concat_group, that allows the developer to specify a group that the script gets added to. WordPress could then cache that concatenated version until a script is replaced or an admin requests a re-concat.

#41 @rickalee
8 years ago

  • Cc ricka@… added

Number of JS/CSS requests in themes/plugins are simply getting out of hand.

I would love to see this worked into core as part of enqueue. Better WordPress Minify plugin does the trick if you are a diligent developer and know which files to manually exclude such as CSS files containing path references to @font-face and admin-bar from concatenation.

An additional argument to wp_register_script and wp_enqueue_script seems the most straightforward approach. Integrate best practice into Underscores functions and the community will quickly start adoption.

#42 @mboynes
8 years ago

  • Cc mboynes@… added

#43 @nacin
8 years ago

  • Component changed from JavaScript to Script Loader
  • Focuses javascript performance added

#44 @chriscct7
6 years ago

  • Focuses javascript performance removed
  • Keywords needs-patch dev-feedback removed
  • Milestone Future Release deleted
  • Resolution set to maybelater
  • Status changed from reopened to closed

No movement in almost 2 years. Closing as maybelater. Feel free to reopen when renewed interest (ideally with a patch) emerges, but this feels like plugin territory at this point

Note: See TracTickets for help on using tickets.