ResourceLoader

WMF engineering activity

ResourceLoader

A feature to improve the load times for JavaScript and CSS in MediaWiki.

Group:	Features
Start:	2010-06
End:
Management:	Terry Chay
Team:	Roan Kattouw, Timo Tijhof

ResourceLoader is the delivery system in MediaWiki for the optimized loading and managing of modules. Modules consist of JavaScript, CSS and interface messages. ResourceLoader was first released in MediaWiki 1.17. Its purpose is to improve MediaWiki's front-end performance and the experience by making use of strong caching while still allowing near-instant deployment of new code that all clients start using within 5 minutes.

Extension Developers: Please migrate your extension to use ResourceLoader for front-end resources as soon as possible. While extensions that do not use ResourceLoader should continue to work in MediaWiki 1.17, there may be some side-effects (read the migration guide to learn how to fix them or migrate to ResourceLoader entirely).

• [edit status] • [add new]
  2012-04-monthly: The team is working on deploying ResourceLoader2's gadget manager on Wikimedia Labs. They also completed a number of tasks, and are preparing for a ResourceLoader tutorial at the June Berlin hackathon.

About ResourceLoader

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 too much to summarize in a simple list, the major improvements for client-side performance are gained by:

• 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".

Documentation

Presentations

Low-hanging fruit vs. micro-optimization
@OSCON 2011
(video • slides • slides + notes)

Introduction to ResourceLoader
@Wikimania 2011
(video • slides • submission abstract)

Gadgets 2.0 (Dutch)
@Wikimedia Conferentie Nederland 2011
(slides)

Manuals

• Migration guide (users)
• Migration guide for extension developers – a guide to making extensions to work with ResourceLoader.
• Developing with ResourceLoader – notes on configuring your development environment and on switching ResourceLoader between development and production modes.
• Default modules – an overview of all default modules and their methods, supported with documentation and examples.
• Vocabulary – the vocabulary used in ResourceLoader (such as Loader, Module, Requirement, etc.)
• Requirements – requirements gathered from a variety of sources during the planning stage.
• JavaScript Deprecations – JavaScript features that are planned to be replaced with modern equivalents.

Project documents

• Version 1 Design Specification – the design specifications developed and maintained throughout the development process.
• Version 2 Design Specification – the design specifications begin developed for the next version.
• "Javascript loaders" - Google Docs, comparing various loading frameworks

Todo and tasks

• Tasks - Random uncategorized todo list
• Task management (V1) – tracking bug for V1
• Task management (V2) – tracking bug for V2
• /status