AMPのCSS制限に対応するための機能を追加しました。
＼お得なキャンペーン実施中！／
AMPのCSS制限
AMPには、CSSサイズは50,000Byte（約50KB）までという厳しい制限があります。
Cocoon本体では、50,000Byte（約50KB）より結構控え目なサイズとなるようにCSSが書かれています。これは、子テーマのstyle.cssでカスタマイズしても問題ないように、ある程度余裕を持たせています。
それらに加えて、スキンのCSSサイズもう追加されると、以下のようなAMPエラーが出る可能性もあります。
タグ「style amp-custom」で指定されている作成者のスタイルシートが長すぎます。ドキュメントは XXXXXX バイトありますが、上限は 50000 バイトです。
Cocoonでは、なるべく上限を超えないようにCSSを指定してはいます。
けれど、超えてしまった場合は、どうしようもありません。
これまでは、以下の方法で対応するしかありませんでした。
- スキンを利用している場合は外す
- 子テーマでのCSSカスタマイズコードを削減する
Cocoon 1.4.2から、手軽にAMPページでCSSサイズを削減できる機能を追加しました。
AMPページのCSSを削減する方法
新しいCocoonでは、以下の2通りの方法でAMPページのCSSサイズを削減出来るようにしました。
- AMPページではスキンのCSSを利用しない
- AMPページでは子テーマのCSSカスタマイズを利用しない
AMPページでスキンを適用しない方法
AMPページでスキンCSSを適用させないようにするには、Cocoon設定の「AMP」タブにある「スキンのスタイルを有効にする」のチェックを外してください。
こうすることで、凝ったスキンを利用していたとしても、AMPページのみではスキンが適用されません。
AMPページで子テーマのスタイルを適用しない方法
子テーマのstyle.cssで凝ったCSSカスタマイズをしている場合もAMPサイズ制限エラーが出る可能性があります。
その場合は、「子テーマのCSSを適用させない」という対策も出来るようになりました。
設定を行うには、Cocoon設定の「AMP」タブにある「子テーマのスタイルを有効にする」のチェックを外してください。
こうすることで、親テーマのみのスタイルで表示されるようになります。
必ずしも設定する必要ない
これらの設定は、Google Search Console等のAMPエラーなどで以下のように表示されていない限りは設定する必要ありません。
タグ「style amp-custom」で指定されている作成者のスタイルシートが長すぎます。ドキュメントは XXXXXX バイトありますが、上限は 50000 バイトです。
これらは設定を行うとその分CSS量が減るという利点の半面、AMPページでの表示が簡素になるという難点もあります。
ただ、個人的に「表示が簡素になること」は、あまり気にする必要ないような気がします。
というのも、AMPページに訪れる訪問者のほぼほぼ100％がモバイル端末からだからです。
スマホなどから見た場合、凝ったCSSを使用していようがいまいが、そこまで問題ないような気がします。スマホで見ると、違いなんてほとんど分からないので。
それよりも大事なのは、内容です。なのでAMPのサイズエラーが頻発する場合は、「AMPページは内容さえしっかり見てもらえれば良い」と割り切って利用するのもありかと思います。
