Skip to content

Add feature flag to remove startup CSS

Simon Knox requested to merge psimyn-master-patch-18203 into master

What does this MR do and why?

Add feature flag to disable startup CSS.
From discussion on Evaluate need for Startup CSS (gitlab-org/frontend/rfcs#92 - closed)

Benefits:

  1. startup-css-check jobs can cause confusing failures, and/or extra effort when making CSS changes
  2. Potentially decreased performance of user with stylesheets already cached (loading a bunch of inline styles we don't use)
  3. Prevents issues like flickering unstyled new nav while loading:
before after
Screen_Recording_2023-04-13_at_17.34.27 Screen_Recording_2023-04-13_at_17.35.24

From my testing with the ?no_startup_css query param, there was not a meaningful load time difference (especially when CSS is cached). Feature flag allows some larger scale testing, if sitespeed stats are not noticeably affected we can remove.

How to set up and validate locally

  1. Enable the feature flag 
    Feature.enable(:remove_startup_css)
  2. Load a page
  3. Check your <head>, there should be one fewer <style> blocks – document.querySelectorAll('style').length
    There are still maybe a few from some rogue Vue styles
    Check the length of the first one with document.querySelector('style').innerText.length, startupcss one is around 63000

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Simon Knox

Merge request reports