Feature summary (what you would like to be able to do and where):
The special page https://en.m.wikipedia.org/wiki/Special:GadgetUsage should show the bytes associated with each gadget and inform interface admins what this means for site performance. Right now, gadgets on certain projects contribute to poor site performance and poor SEO which hurts the movement. In most cases this seems to be due to a lack of understanding of the impact of "default" gadgets on these key metrics (see T340705 for examples)
To provide better guidance and tooling for our gadget developers to make the right decisions it would be useful if the GadgetUsage tool could be used to help make these decisions.
Requirements
- Show a note which documents the amount of kb for CSS and JS for a page view in the default skin
- Update the table to show the size of each module so that admins can sort modules by largest.
Design
- Implementation notes **
- For Calculating the size of modules you can use this function:
/** * Calculates the size of a module * * @param string $moduleName * @param string $skinName * * @return float|int * @throws \Wikimedia\RequestTimeout\TimeoutException * @throws MediaWiki\Config\ConfigException */ protected function getContentTransferSize( $moduleName, $skinName ) { // Calculate Size $resourceLoader = $this->getServiceContainer()->getResourceLoader(); $resourceLoader->setDependencyStore( new KeyValueDependencyStore( new HashBagOStuff() ) ); $request = new FauxRequest( [ 'lang' => 'en', 'modules' => $moduleName, 'skin' => $skinName, ] ); $context = new Context( $resourceLoader, $request ); $module = $resourceLoader->getModule( $moduleName ); $contentContext = new \MediaWiki\ResourceLoader\DerivativeContext( $context ); $contentContext->setOnly( $module->getType() === Module::LOAD_STYLES ? Module::TYPE_STYLES : Module::TYPE_COMBINED ); // Create a module response for the given module and calculate the size $content = $resourceLoader->makeModuleResponse( $contentContext, [ $moduleName => $module ] ); $contentTransferSize = strlen( gzencode( $content, 9 ) ); // Adjustments for core modules [T343407] $contentTransferSize -= 17; return $contentTransferSize; }
- For rendering the notice you can use https://doc.wikimedia.org/codex/latest/components/demos/message.html#css-only-version
- "These guidelines" should be linkable to a wikipage on the subject that is configurable by a MediaWiki message. By default it can link to https://wikitech.wikimedia.org/wiki/MediaWiki_Engineering/Guides/Frontend_performance_practices
Benefits (why should this be implemented?):
- Poor performance hurts SEO
- Poor performance provide challenges for slower connections to access our content