Page MenuHomePhabricator

[Epic] Performance optimizations and improvements for Special:MediaSearch
Closed, ResolvedPublic

Description

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 PageSpeed Insights report says about Special:MediaSearch. Measurements include a server-generated query ("desert"), not just the empty UI.

Desktop

Screen Shot 2021-01-13 at 1.54.21 PM.png (1×1 px, 283 KB)

Mobile

Screen Shot 2021-01-13 at 1.54.39 PM.png (1×1 px, 283 KB)

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: see T271994 and T271996
  • 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?

Event Timeline

egardner updated the task description. (Show Details)

Assuming this task is about the SDAW-MediaSearch code project, hence adding that project tag so other people who don't know or don't care about team tags can also find this task when searching via projects.

You should compare Pagespeed insights reports to a well-optimised page, like a small popular article. We don't have a perfect score in general, as some of the suggestions are tradeoffs that aren't necessarily worth building. For instance, we do serve WebP thumbnails, but only for hot enough thumbnails traffic-wise. We don't do it for all thumbnails due to current storage constraints.

Also, newer formats aside, due to the nature of our on-demand thumbnail generation, we can't afford to optimise thumbnails as much as we could, as it would make cold cache hits very slow for users who request new thumbnails. Some of the best JPG optimisers have render times one of two orders of magnitude greater than our current settings. One day we will build an async image optimiser that goes through popular thumbnails and improves them which will give us the best of both worlds, but that's a big undertaking that requires brand new technical architecture.

For CSS/JS inlining, it's a tradeoff as well: inlining means reduced caching across pages. Pagespeed Insights tends to be blind to decisions that make things better when the average user experience is browsing multiple pages. In that case, the cache reuse across pages (probably) offsets the render-blocking nature in most situations. It's a recurring issue with synthetic performance testing tools that only look at a single page load in isolation. They will take an absolutist stance in their advice that assumes cache reuse between pages isn't worth it. Because they're online analysing a single page, the one you gave to the tool.

While Pagespeed Insights gives a great starting point, I would advise against trying to achieve a perfect score at all costs.

The fact that it identified unused JS is great and that's absolutely something to pursue, avoid loading modules that aren't used.

The image size advice it might give is also ignorant of our own caching tradeoffs: a slightly bigger image, albeit of a popular size, will be on average served much faster than an image of exactly the size your container needs but which will be very likely to be requested for the first time. Despite the better fitted smaller image being more lightweight. Pagespeed Insights can't take into account the fact that not all image sizes are cached/rendered equally in our environment and will therefore look for pixel perfection.

Copying information from @Etonkovidova in T271874 which has been merged with this task:

Click on the link - https://commons.wikimedia.org/wiki/Special:MediaSearch?q=tulip&type=bitmap.
Or refresh Special:MediaSearch page with the search results displayed.

The following issues are present

  • The filters are not visible, but the tabs are visible
  • When the search icon and the clear button become visible, the grid images start loading again.

The animated gif below captures the three issues above (it's recorded with slow network connection, but the issues are visible without throttling).

img_not_loaded2.gif (650×1 px, 1 MB)

Note: I checked other pages (Special:Homepage, Special:Search, Special:RecentChanges, and Special:ContentTranslation - all of them display smoother loading (and re-loading).

Closing because the only remaining subtask is backlogged for the time being.