Startup.CSS
What does this MR do?
Test for running startup.css/critical CSS inline to improve performance. The actual CSS is automatically extracted and copied over into the GitLab repo (Interim Solution). Target is to have in the critical CSS all CSS for already rendering the top + left menu while the main application.css is loaded.
Currently the application.css has an content size of 1.4MB which need to be parsed and the inlined CSS extracts the minimum which is in the first test around 32KB that is needed to render.
This is now a test version "hidden" behind a querystring parameter (so we can test side by side the same pages) and a cookie to test global navigating with it activated.
Activation by adding ?startup_css=true to any page or setting a cookie startup_css with the value true.
It is very hard to test locally, and we still need to figure out if this really improves performance with our current setup or not (as it adds 32KB to every basic page load). Especially in non cache situations I saw big improvements for the First Paint, see below, which is one of the main things for sitespeed and other statistics especially search engines, etc.
Screenshots
Local Sitespeed runs
Left is current rendering and on the right with startup_css activated.
Does this MR meet the acceptance criteria?
Conformity
- Changelog entry
- Documentation (if required)
- Code review guidelines
- Merge request performance guidelines
- Style guides
- Database guides
- Separation of EE specific content
Availability and Testing
- Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
- Tested in all supported browsers
- Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention
@gitlab-com/gl-security/appsec - The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
- Security reports checked/validated by a reviewer from the AppSec team