GadgetUsage should guide interface admins better in how they can contribute to better site performance
Open, MediumPublicBUG REPORT

Description

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

Screenshot 2024-03-15 at 2.07.12 PM.png (552×1 px, 90 KB)

    • 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;
	}

Benefits (why should this be implemented?):

  • Poor performance hurts SEO
  • Poor performance provide challenges for slower connections to access our content

Event Timeline

Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)

I think probably the priority should be "read" mode, so gadgets loading content in the two default skins at all times - and maybe just one or the other skin? That's a slightly different question than would be answered by the mockup. For example, one of those is a Timeless gadget and that seems like an exceptionally low need to optimize around.

Jdlrobson triaged this task as Medium priority.Apr 24 2024, 3:13 PM