amp容量削減の戦い

この記事は食べログアドベントカレンダー2021の19日目の記事です。

12/19（日）担当、WEBデザイナーの @nanzou です！

AdventCalendarには初めて参加させていただきます。
今日は自身の担当業務の一つであるAMPのCSS容量番人！
「AMP容量」 VS 「コンテンツ追加要望」の戦いの日々について記事を書かせていただきます。

まず、ご存知の通りAMP.CSSは最大75000バイトまでしか記載できません。
上限を超えるとエラーとなりコンテンツが表示されなくなりますが、
やりたいことはいっぱい、コンテンツは増やしたい...

【会話例】

Aさん　2週間位バナーのA,Bテスト実施したいんだけど容量大丈夫ですか？
Bさん　はい、今のところ大丈夫です。
Aさん　2週間後バナー下げるけど、また次の週に別パターンで試すので！

要するに常に容量を空けておいてっていう話ですね...これは、はい。
何度も上限近くまで容量が増え、その度に工夫をして減らしてきましたので
その方法をいくつか以下に記載したいと思います。

ただやってることは簡単なことをチマチマと行い、チリ積で容量を減らす感じになってます...

モジュール化による削減

共通部分を予めモジュール化しview側で捌くことで、CSS記述を減らします。使えば使うほど元をとれる感じですね。

| glyph（webフォント）

上記のアイコン箇所など再現するのにbeforeやafter要素にてglyph（webフォント）を使用しています。
一箇所だけなら良いのですが、さまざまなアイコンを各箇所でいれるたびに以下のような記述が必要になってしまいます。

.className::before {
  color: #86b5e3;
  font-family: "Glyph";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  content: "\f62a";
}

なので共通部分をモジュール化（.amp-gly）しておきカスタム部分(.className)だけ付け足す実装にしてます。

html

<p class="amp-gly className">
  定期的な換気
</p>

CSS

.amp-gly::before {
  font: normal normal normal 1.4rem/1.4 "Glyph";
  -webkit-font-smoothing: antialiased;
  speak: none;
}

.className::before {
  color: #86b5e3;
  content: "\f62a";
}

| 太字

こちらもよく使うものなので、クラス単位でのfont-type指定はやめ、strongやemタグを使用します。

html

<strong>太字にしたい</strong>

CSS

strong {
  font-weight: bold;
}

文字数(byte数)にこだわる

少しでも文字数(byte数)を少なくして容量を減らせるよう、以下のようなチマチマ作業してます。
1byteされど1byte...

| 単位

食べログではremを採用しているんですが、AMP上では1画面だけなので画面表示に影響しなければpxを使用し少しでも減らすようしてます。

pxに直した時に6byteの差が生まれる。たかが6byteですが、なにか...?

rem

.className {
  padding: 1.3rem 1.4rem 2.2rem;
}

px

.className {
  padding: 13px 14px 22px;
}

| 命名短縮

■class名の短縮
1byteでも少なくなれば良し！ って感じです。

.amp-restaurant  →　.amp-rst
.amp-banner      →　.amp-bnr
.amp-appli       →　.amp-app

■画像フォルダの短縮
SPと共通になっていたものを振り分けてます。

background-image: url(smartphone/icon/image.png);
 ↓
background-image: url(amp/icon/image.png);

| ショートハンド

.className {
  background-image: url(amp/icon/image.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}

↓↓↓

.className {
  background: url(amp/icon/image.png) no-repeat 0 0 / 100% auto;
}

その他

| 画像で表現

モーダルなど記述量が増えるものは・・・
「overlay箇所」,「コンテンツ箇所」の大きく2つに分け
コンテンツ箇所全体をリンクエリアとして画像の一枚絵にしてしまうことで大幅に削減してます。

| text-indentで飛ばさない

アイコン表現時にbefore要素など使う場合、タグの中にテキストを挿入しますが、aria-labelに記述することで、タグ内テキストを非表示にさせる為のCSSの削減してます。

html

<span>
  Tabelog Reviewer Award受賞者
</span>
↓↓↓
<span aria-label="Tabelog Reviewer Award受賞者"></span>

削減できるCSS

.className {
  overflow: hidden;
  text-indent: -9999px;
}

まとめ

今後もコンテンツが増え続けると思います。
もちろん企画の方も考慮してコンテンツが増える分、「こっちを減らそう」など検討いただけるのですが、まぁ増えていくのは避けられないと思います。

もしまた上限近くまで増えていった場合、検討しているのが・・・
Utilityを多用して表現し、CSS記述を抑える感じです。(上記モジュール箇所の極限verです)
現在食べログではAMP以外でも以下のようなutilityを使っています。

.u-align-center {
  text-align: center;
}
.u-mb {
  margin-bottom: 10px;
}
.u-text-attention {
  color: #cc3300；
}

これを多用しfont-sizeやmarginの値などを以下のように需要が多いものを予め用意し、viewでさばいていく方法です。

.f10 {
  font-size: 10px;
}
.f11 {
  font-size: 11px;
}
.f12 {
  font-size: 12px;
}

.u-mb10 {
  margin-bottom: 10px;
}
.u-mb15 {
  margin-bottom: 15px;
}
.u-mb20 {
  margin-bottom: 20px;
}

これはOOCSS, SMACSS, BEMを取り入れる前の食べログが採用していた手法で、
AMPだけならこの手法を採用するのも良いかと思っています。

最後に

明日はエンジニア @hokutonikukyu さんの 「【Android】Jetpack Composeでよく使うプロパティをまとめてみた」です。お楽しみに！