Frontend performance improvements
What does this MR do and why?
Minor adjustments to improve frontend performance, as audited in #405 (closed).
- Set dimensions on images and Vue apps to minimize layout shift
- Switch from gzip to Brotli compression
- Optimize SVGs in the theme (using https://www.npmjs.com/package/svgo)
- Fix HTML validation errors (not really performance improvements, but these came up while auditing)
Closes #405 (closed)
Screenshots, screen recordings, or links to review app
No visual changes.
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Configure a local GitLab Docs environment.
- Check out this branch.
- Check for layout shift in the header and search results page
- This MR: https://docs.gitlab.com/review-mr-1042/search/?q=git&page=1
- Redesign branch: https://docs.gitlab.com/review-mr-828/search/?q=git&page=1
- Check HTML validator results:
- This MR: https://validator.w3.org/nu/?doc=https%3A%2F%2Fdocs.gitlab.com%2Freview-mr-1042%2Fadministration%2Fsettings%2F (no errors)
- Redesign branch: https://validator.w3.org/nu/?doc=https%3A%2F%2Fdocs.gitlab.com%2Freview-mr-828%2Fadministration%2Fsettings%2F (a few errors)
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.
Edited by Sarah German