Layout grid css size

Open
#85 1 comment 9 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
30/100
Issue type
Refactor
Clarity
Needs clarification
Activity status
Stale
Tech stack
css
Domain
frontend, performance

Research direction

Start by inspecting front.css and identifying which parts implement the layout grid. Measure its current size against the homepage's total CSS and JavaScript download, then determine whether the grid can be reduced without losing its intended layout behavior. Done means a smaller layout-grid stylesheet with its behavior preserved and the size improvement documented.

Written by the indexing model from the issue text.

Description

Hi - The front.css for layout grid is really big and I feel it could be made smaller.

The homepage of my personal site is 26kb. That includes all css and js (external included). The css for the layout grid is 60kb.

I know for a lot of sites the trend is to make things bigger but that's not sustainable. Performance is very important online if you want to reach the largest audience and I don't want to use a plugin that will triple the size of my homepage download.

Dominant language
JavaScript
Stars
131
Forks
18
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Automattic/block-experiments

All issues in Automattic/block-experiments

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.