FirefoxのuserContent.cssでYouTubeを軽くする

Posted: 2026-05-20

FirefoxのuserContent.cssでYouTubeを軽くする

4GB RAM 級の古い PC や小型 tablet で YouTube を開くと、動画そのものより周辺 UI の重さが気になることがある。

広告、コメント、関連動画、Shorts、棚 UI、アニメーションなどを CSS で非表示にすると、JavaScript の実行自体は止められないが、描画負荷と見た目の密度は下げられる。

このメモでは、Stylus のような拡張機能ではなく Firefox 標準の userContent.css を使ってみた時のメモ。

方針

• JavaScript は使わない
• 外部 URL、@import、url(...) は使わない
• CSS は YouTube domain に限定する
• Firefox の policy で userContent.css を有効化する
• profile が snap 版と deb 版で分かれることを前提にする

CSS の外形は次のようになる。

@-moz-document domain("youtube.com") {
  ytd-rich-section-renderer,
  ytd-reel-shelf-renderer,
  ytd-rich-shelf-renderer[is-shorts],
  ytd-comments,
  #comments {
    display: none !important;
  }
}

実際には YouTube の DOM 変更に備え、Shorts 系、棚 UI、コメント、関連 UI を複数 selector で押さえる。

userContent.cssを使う理由

Stylus のような extension を使うと管理は楽だが、低メモリ端末では extension 自体も増やしたくないことがある。

userContent.css なら、Firefox profile 配下の file と Firefox policy だけで管理できる。

軽量化のためなら、まず CSS だけで消せるものを消すのが単純である。

Firefox側の有効化

Firefox では userContent.css を読むために次の preference が必要になる。

toolkit.legacyUserProfileCustomizations.stylesheets=true

Linux desktop では system-wide policy で lock できる。

{
  "policies": {
    "Preferences": {
      "toolkit.legacyUserProfileCustomizations.stylesheets": {
        "Value": true,
        "Status": "locked"
      }
    }
  }
}

配置先は distribution や package 形態で変わる。

Ansible で配布するなら、deb と snap の両方の profile root を見て、既存 profile があればそこへ chrome/userContent.css を置く。profile が無い場合は、管理用の default profile を作る程度に留める。

CSSで消す対象

低メモリ端末では、動画再生に直接必要ない領域から消す。

• Shorts
• コメント
• 関連動画の一部
• home feed の棚 UI
• live chat
• promotional banner
• animation や backdrop

Shorts は DOM が変わりやすいため、ytd-reel-*、ytd-shorts*、/shorts/ link を持つ card container など複数系統を見る必要がある。

ただし、過剰に消すと検索結果や channel page が壊れる。watch page、search page、home feed、subscription feed を別々に確認する。

禁止するCSSパターン

固定 CSS として配るなら、外部参照は入れない。

rg -n '@import|url\\(|https?://|chrome://|moz-extension://' userContent.css

この scan に引っかかるものは、原則として削る。

理由は次の通り。

• 外部 CSS を読むと再現性が下がる
• profile ごとに extension URL が変わる
• privacy / tracking の説明が増える
• 低メモリ端末で余計な fetch や decode を増やしたくない

確認方法

Firefox 側では次を見る。

• about:policies の Active に Preferences が出る
• about:config で toolkit.legacyUserProfileCustomizations.stylesheets=true
• profile 配下に chrome/userContent.css がある

shell では次のように確認できる。

find ~/.mozilla/firefox ~/snap/firefox/common/.mozilla/firefox \
  -maxdepth 3 -path '*/chrome/userContent.css' -print

CSS 反映後は Firefox を再起動する。起動中に file を更新しても、完全には再読込されないことがある。

限界

userContent.css は表示を消すだけで、YouTube の JavaScript 実行そのものは止めない。

したがって、CPU/RAM 削減効果は次に左右される。

• login 状態
• 広告の有無
• codec
• video resolution
• hardware acceleration
• window size
• YouTube の DOM 変更

それでも、低メモリ端末では「見ない UI を描画しない」だけで体感が変わることがある。browser extension を増やす前に試す価値はある。