User:Guaka/Frontend performance

MediaWiki could be considerably improved in terms of frontend performance.

This would lead to a nicer user experience on tons of wikis (including Wikipedia).

Tools:
 * YSlow is a great Firefox/Firebug extension to see what can be improved.
 * Google's online Pagespeed tool is also great.

Aggregation of CSS and JS
Every HTTP request makes the page slower on the frontend.

Inspiration: http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_build_css_cache/6

minification of CSS and JS
Fewer bytes passing the pipes.


 * Aren't these pretty much covered by ResourceLoader ? Krinkle 19:42, 10 May 2011 (UTC)

Apache configuration
Easy:


 * FileETag None - see e.g. http://www.askapache.com/htaccess/apache-speed-etags.html - this can even go to your .htaccess

MW CSS aggregration
CSS files/HTTP requests:
 * 2 screen
 * 2 print
 * 1 screen RTL
 * 2 more files
 * Forgetting the IE specific files for a moment

Questions:
 * Can the RTL file be ditched on LTR languages? Possibly an option that can and will save 1 request on most wikis.
 * Can the screen and normal stuff be bundled? Same for print and normal stuff?
 * Can print css be ditched, optionally?

Guaka wrote some code for a proof of concept, at Cultwiki. It will need some tweaking though. Here's the gist:

LocalSettings.php $wgAggregateCSS = true; $wgAggregateCacheDir = "$IP/css_cache"; $wgAggregateCacheURL = "w/css_cache";

public function buildCssLinks { global $wgAggregateCSS; if ($wgAggregateCSS) { return $this->buildCssLinksNEW; } else {

public function buildCssLinksNEW { global $wgAggregateCacheDir, $wgAggregateCacheURL; if (!file_exists($wgAggregateCacheDir)) { mkdir($wgAggregateCacheDir); }         $filename = '/css_qwiejqeijqwiejwe.css'; #. md5(serialize($types) . $query_string) $css_contents = ''; foreach($this->styles as $file => $options) { // ditch some unused stuff, for now if (!$options['condition'] && $options['media'] != 'print' && $options['dir'] != 'rtl') { if (!strstr($file, '?')) { $css_contents .= file_get_contents('skins/'.$file); } else { $css_contents .= file_get_contents('http://cultwiki.org/' . $file); }           }          }          file_put_contents($wgAggregateCacheDir . '/' . $filename, $css_contents); $link = $this->styleLink( 'http://cultwiki.org/' . $wgAggregateCacheURL . '/'. $filename, array ); return $link; }