Skip to content

Spike: Split application.scss into 4 parts

David Pisek requested to merge rfc-92-poc-startup-css-split into master

What does this MR do and why?

Science as part of gitlab-org/frontend/rfcs#92 (closed)

Add a query param no_startup_css which removes startup CSS, instead splitting application.css into 4 pieces. This is some science to determine if we can get better performance gains without the current startup CSS setup. Some prior discussion in this thread on the Epic.

The goal of this is optimizing our most frequent page views (when assets are cached), compared to our current strategy which prioritises uncached first contentful paint.

Screenshots or screen recordings

Initial measurement just a lighthouse trace before/after as I am lazy. Measured using dev build, so don't mind the huge numbers. First paint and total blocking time are longer (the latter is concerning..)

with startup no startup css
Screen_Shot_2021-09-27_at_2.22.46_pm Screen_Shot_2021-09-27_at_2.22.35_pm

How to set up and validate locally

  1. Add ?use_startup_css=true to URL query params to test the split files and no startup_css stuff.

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