WordPress で簡単に吹き出し会話が出来るプラグイン、「WP-Speech-Balloon」のバージョン2.3をリリース致しました。
今回はかなり厳しいと言われている「AMP ルール」の中でも、CSS を使う方にとっては特に厳しい「CSS の容量制限オーバー」で発生する「AMP エラー対策」となります。
[ 追記 ]
WP-Speech-Balloon 2.4 をリリース致しました。
以下の記事から詳細をご確認頂けます。
その他「WP-Speech-Balloon」関連の記事は以下をご覧ください。
AMP の CSS 容量制限が厳しい！
AMP 対応させている方で CSS をよく使われている方は、以下のエラーを目にされた方も多いかと思います。
「style amp-custom」で指定された作成者のスタイルシートが長すぎます。上限は 50000 バイトです。
この AMP エラーを見ると、毎回「これ以上シェイプアップ出来ないよ・・・」なんて思いながら AMP用 の CSS をシェイプアップしてきました。
高機能な AMP 対応 WordPress テーマになると、その分 AMP ページで必要になる CSS も増えたりするので、デフォルトでも結構な CSS の容量になりがちです。
これに自分で書いた AMP 用の CSS が追加されると、予想を遥かに上回るほどあっさりと容量オーバーになってしまいます。
アップデート内容
AMP ページでも使えるプラグインという事は、当然「AMP ページでの CSS も必要」となってきます。
私の知る限り AMP ページでも使えるプラグインというのは現状ほぼないのですが、このようなプラグインが増えれば増えるほど AMP CSS の容量は圧迫されます。
当プラグイン「WP-Speech-Balloon」は、一応ですが AMP に対応させているプラグインなので、AMP ページでも通常ページと同じように使えるようになっています。
そして 2.2 までの WP-Speech-Balloon は「すべてのページで有効」となっていたのですが、前述した理由からこれを「WP-Speech-Balloon を記事内で使用しているページだけ有効」という仕様に変更致しました。
ちょっと上記だと説明が曖昧なのでもう少し詳しく説明すると、「AMP ページの記事内で WP-Speech-Balloon を使用している場合だけ WP-Speech-Balloon の CSS を出力」という仕様に変更し、不要なページでの CSS 容量を大幅に減らしました。
こういう方には特におすすめ！
基本的に AMP ページで CSS を使用するプラグインなどを入れている方には今回のアップデートはおすすめです。
執筆現在、公開している自作プラグインは、当プラグイン「WP-Speech-Balloon」の他に「WP-Thumbnail-and-Text」「Simple-FB-Likebox」があります。
上記はすべて AMP 対応させているので、このような AMP 対応プラグインを複数使っている場合、基本的にプラグイン用 CSS はすべて出力されるのですが、記事内で使用していないプラグインの CSS は出力されても意味はなく、AMP ページだと 単純に容量を圧迫するだけとなります。
今後「WP-Thumbnail-and-Text」も同じように出力を調整しようと思っているので、WP-Speech-Balloon と WP-Thumbnail-and-Text を両方使っている方には特におすすめです☆
[ 2019年02月12日 追記 ]
WP-Thumbnail-and-Text 2.2 をリリース致しました。
プラグインのアップデート方法
WP-Speech-Balloon のアップデート方法に付きましては以下をご覧下さい。
WP-Speech-Balloon の最新版ファイルは以下からダウンロード出来ます。
※初めてお使いになる方も以下をご覧ください。
※「WP-Speech-Balloon1.x」からお使いの方は、最新版の「WP-Speech-Balloon_bundle」をお使い下さい。
まとめ
以前から AMP の容量制限には頭を悩ませていたのですが、なかなか腰が重くてリリースに時間が掛かってしまいました。
今の所通常ページでは CSS の出し分けは行ってませんが、今後もし必要だと感じたらそちらも仕様変更しようかと思います。
今回のアップデートで当プラグインを使用していないページの CSS 容量は大幅（当プラグインの CSS 丸ごと）に削減出来たので、今後は頭を悩ませる事が減りそうです。
バグのご報告やご要望、ご質問などありましたら「お問合わせ」もしくは「Twitter」までご連絡をお願い致します。
この記事が気に入ったら
いいね ! しよう
ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆