Page MenuHomePhabricator

Improve CSS performance / reduce size of Laika skin
Open, Needs TriagePublic2 Story Points

Description

The unzipped Laika skin CSS of the fundraising application is relatively large and on SpeedCurve we're also seeing that the performance is not the best. The reasons for that are likely in the redundancy we have with Bulma and Buefy but I also see that we have a lot of CSS rules utilizing the data selectors. This likely comes from our usage of "scoped" CSS in some places and we are seeing large selectors like this one:

.button[data-v-7db58c14]:focus, .input[data-v-7db58c14]:focus, .taginput .taginput-container.is-focusable[data-v-7db58c14]:focus, .textarea[data-v-7db58c14]:focus, .select select[data-v-7db58c14]:focus, .file-cta[data-v-7db58c14]:focus,
  .file-name[data-v-7db58c14]:focus, .pagination-previous[data-v-7db58c14]:focus,
  .pagination-next[data-v-7db58c14]:focus,
  .pagination-link[data-v-7db58c14]:focus,
  .pagination-ellipsis[data-v-7db58c14]:focus, .is-focused.button[data-v-7db58c14], .is-focused.input[data-v-7db58c14], .taginput .is-focused.taginput-container.is-focusable[data-v-7db58c14], .is-focused.textarea[data-v-7db58c14], .select select.is-focused[data-v-7db58c14], .is-focused.file-cta[data-v-7db58c14],
  .is-focused.file-name[data-v-7db58c14], .is-focused.pagination-previous[data-v-7db58c14],
  .is-focused.pagination-next[data-v-7db58c14],
  .is-focused.pagination-link[data-v-7db58c14],
  .is-focused.pagination-ellipsis[data-v-7db58c14], .button[data-v-7db58c14]:active, .input[data-v-7db58c14]:active, .taginput .taginput-container.is-focusable[data-v-7db58c14]:active, .textarea[data-v-7db58c14]:active, .select select[data-v-7db58c14]:active, .file-cta[data-v-7db58c14]:active,
  .file-name[data-v-7db58c14]:active, .pagination-previous[data-v-7db58c14]:active,
  .pagination-next[data-v-7db58c14]:active,
  .pagination-link[data-v-7db58c14]:active,
  .pagination-ellipsis[data-v-7db58c14]:active, .is-active.button[data-v-7db58c14], .is-active.input[data-v-7db58c14], .taginput .is-active.taginput-container.is-focusable[data-v-7db58c14], .is-active.textarea[data-v-7db58c14], .select select.is-active[data-v-7db58c14], .is-active.file-cta[data-v-7db58c14],
  .is-active.file-name[data-v-7db58c14], .is-active.pagination-previous[data-v-7db58c14],
  .is-active.pagination-next[data-v-7db58c14],
  .is-active.pagination-link[data-v-7db58c14],
  .is-active.pagination-ellipsis[data-v-7db58c14] {
    outline: none;
}

As part of this ticket, we should see if we can sensibly optimize our CSS performance by removing scoped selectors and see if there are any optimizations we can make in the area of Bulma and Buefy.

Event Timeline

Tim_WMDE created this task.Wed, Jul 31, 1:31 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptWed, Jul 31, 1:31 PM
Tim_WMDE set the point value for this task to 2.

https://github.com/wmde/FundraisingFrontend/pull/1582

The uncompressed CSS file size was reduced from 2.6 Megabytes to 450 Kilobytes by removing all scoped slots. Some of the blocks were actually not needed at all and the others could be refactored by simply using CSS selectors with classes from the parent elements.