We are nearing feature-completion for Special:MediaSearch, so now is a good time to look at various performance optimizations and improvements that can be made to ensure the experience is as streamlined as possible.
There will inevitably be some compromises because we are trying to support two separate UI modes: JS-enabled and PHP fallback, and we don't (yet) have infrastructure available for server-side rendering of Vue.js components.
Related: https://phabricator.wikimedia.org/T246792
Here's what Google's [[ https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FSpecial%3AMediaSearch%3Ftype%3Dbitmap%26q%3Ddesert&tab=desktop | PageSpeed Insights report ]] says about Special:MediaSearch. Measurements include a server-generated query ("desert"), not just the empty UI.
**Desktop**
{F33998217}
**Mobile**
{F33998232}
**Recommendations from Google**
- **Reduce Server response time**: work is already being done to improve the MediaSearch back-end, so we can set this aside for now
- **Remove unused JavaScript**: Some 200KB of unused JS are loaded
- **Serve images in next-gen formats**: does MediaWiki support better ways to generate thumbnails than what we are doing now?
- **Properly size images**: panoramas in particular seem to be a problem here
- **Eliminate render-blocking resources**: This is less of an issue, only 0.2s or so of savings here. Does MediaWiki provide any way to inline critical path CSS/JS?