(Redirected from Resource loader)
Jump to navigation Jump to search
To migrate a Gadget to ResourceLoader, read Migration guide. MediaWiki 1.26 removed support for legacy gadgets.

ResourceLoader is the delivery system in MediaWiki for JavaScript, CSS, interface icons, and localisation strings. ResourceLoader was created in 2010 by Roan Kattouw, Trevor Parscal, and Timo Tijhof. It was first deployed to Wikipedia in 2011 and released later that year as part of MediaWiki 1.17.

It is responsible for MediaWiki's low-cost high-performant front end, built on three principles that enable quick deployment of new code seen by Web clients on all pages in less than 5 minutes.

About ResourceLoader[edit]

Overview of the entire resource loading process of MediaWiki
→ See ResourceLoader/Architecture to learn about the systems's principles and overall design.

On Wikimedia wikis, every page view includes hundreds of kilobytes of JavaScript. In many cases, some or all of this code goes unused due to lack of browser support or because users do not make use of the features on the page. In these cases, bandwidth, and loading time spent on downloading, parsing and executing JavaScript code is wasted. This is especially true when users visit MediaWiki sites using older browsers like Internet Explorer 6, where almost all features are unsupported, and parsing and executing JavaScript is extremely slow.

ResourceLoader solves this problem by loading resources on-demand and only for browsers that can run them. Although there is much more to it, the overall flow for client-side performance can be summarized by these 3 points:

  • Minifying and concatenating
    → which reduces the code's size and parsing/download time
    Both JavaScript files, CSS files and interface messages are loaded in a single special formatted "ResourceLoader Implement" server response.
  • Batch loading
    → which reduces the number of requests made
    The server response for module loading supports loading multiple modules so that a single response contains multiple ResourceLoader Implements, which in itself contain the minified and concatenated result of multiple javascript/css files.
  • Data URI embedding
    → which further reduces the number of requests, response time and bandwidth
    Optionally images referenced in stylesheets can be embedded as data URIs. Together with the gzipping of the server response, those embedded images, together, function as a "super sprite".




These presentations detail the purpose and results of ResourceLoader.

ResourceLoader LCA2012.pdf

Creative Techniques for Loading Web Pages Faster
Event: Linux Conf Australia 2012 (2012-01-17)
Duration: 00:47:01
Links: videoslides

ResourceLoader OSCON 2011.pdf

Low-hanging fruit vs. micro-optimization
Event: OSCON 2011 (2011-07-29)
Duration: 00:35:26
Links: videoslidesslides + notes

A very complete presentation of why, how and what ResourceLoader does.


These presentations go more in-depth towards developers already familiar with MediaWiki development.

ResourceLoader Wikimania 2011.pdf

Introduction to ResourceLoader
Event: Wikimania 2011 (2011-08-05)
Duration: 00:22:40
Links: videoslidessubmission abstract

A walk through ResourceLoader's features and how to develop with it in a MediaWiki extension.

Code stewardship[edit]