HTML5 クリエイティブとは一般に、HTML、CSS、JavaScript で作成された広告のことを指します。HTML5 クリエイティブのファイルはさまざまな方法で圧縮できます。ここで説明する方法の多くは 15 分ほどで実装できます。
この記事の内容:
Google Web Designer を使用する
Google Web Designer は、HTML5 で開発したアセットを、スタジオやアセット ライブラリにシームレスに統合できるウェブ アプリケーションです。また、画像やコードの圧縮、Google ウェブフォント、SVG、CSS アニメーションに対応するなど、幅広い機能が組み込まれています。
ぜひ一度、Google Web Designer をお試しください。
ファイルサイズを確認する
ファイルサイズを減らす前に、現在のファイルサイズを確認しましょう。以下に示すガイドラインや条件に沿って確認してください。
未処理のファイルサイズと圧縮後のファイルサイズ
未処理のファイルサイズを確認するには:
- スタジオでは、スタジオ クリエイティブ ワークフローの「ファイルの管理」ステップで、「合計ファイルサイズ」を確認します。
- Google Web Designer では、[パブリッシュ] > [ローカルにパブリッシュ] をクリックし、パブリッシュ ダイアログで [合計サイズ（未処理）] を確認します。現在のファイルサイズは [広告検証ツール] パネルでも確認できます。
Google Web Designer では、無料のソフトウェア gzip を使用してクリエイティブを圧縮します。Google Web Designer を使用していない場合は、gzip を無料でダウンロードし、ローカルの作業領域でクリエイティブを圧縮してファイルサイズを検証できます。
ファイルサイズの基準値
クリエイティブを作成する前に、パブリッシャーの広告配信仕様を把握しておく必要があります。ただし、パブリッシャーの多くは、IAB が推奨する初期読み込みのサイズ 200 KB（圧縮済み）と合計サイズ 300 KB または 500 KB を遵守しています（どちらかはフォーマットによって異なります）。初期読み込みのサイズとは、最初の広告表示のためにブラウザに配信されるすべてのクリエイティブ アセットの圧縮後の合計サイズです。これには、画像、HTML、CSS、JavaScript など、すべてのファイルが含まれます。
イネーブラーのファイルサイズ
スタジオ クリエイティブには必ずイネーブラーを含めますが、すべてのスタジオ クリエイティブで同じスクリプトを読み込む必要がないよう、ウェブブラウザにイネーブラー スクリプトのコピーがキャッシュされます。イネーブラー スクリプトのサイズは、圧縮時 25 KB、未処理時 75 KB です。
詳細については、IAB およびスタジオのガイドラインをご覧ください。
- IAB の HTML5 ガイドライン（PDF 形式、4～6 ページを参照）
- スタジオのクリエイティブ ガイドライン
Chrome の Heavy Ad Intervention について
- クリエイティブに画像、動画、アニメーション、3D オブジェクトが多く含まれる場合は、Chrome のガイドラインに沿ってクリエイティブをテストし、読み込みが解除されないことを確認します。
- Chrome の Heavy Ad Intervention のデモを使用して、クリエイティブがブロックされるかどうかをテストします。
ポライトロードとパブリッシャーの仕様
ポライトロードとは、パブリッシャーのページが読み込まれるまで、追加のアセット（画像、動画など）の読み込みを遅らせる読み込み方法のことです。これは初期読み込みのサイズとは異なります。初期読み込みのサイズは、最初の広告表示のためにブラウザに配信されるすべてのクリエイティブ アセットの圧縮後の合計サイズのことです。ポライトロードは一部のパブリッシャーで必須になっていますが、必須でない場合でも設定しておくことをおすすめします。ポライトロードを設定する方法をご覧ください。
パブリッシャーの HTML5 リッチメディアの仕様を確認してください。パブリッシャーのファイルサイズの計算は、gzip 形式で圧縮したファイルをベースにしている場合と、未処理のファイルをベースにしている場合があります。個別のパブリッシャーの仕様は、使用するプレースメントや広告タイプなどによって IAB 仕様とは異なる場合があります。アニメーションや動画の再生時間についても、制限がないかどうか確認してください。
画像サイズを減らす
画像のサイズを減らす前に、まず画像が必要かどうかを検討してください。一部の画像要素は CSS スタイルで代替できるかもしれません。以下では、クリエイティブ内の画像の数を減らしたり、必要な画像を最適化したりする際のおすすめの方法とリソースを紹介します。
CSS を使って色やグラデーションを表現するGIF、JPG、PNG の画像はピクセルベース（「ラスタ」）であるためサイズが大きくなります。SVG は点間ベースのグラフィックス（「ベクタ」）ですので、ファイルサイズをかなり減らすことができます。
SVG に関するリソース（リンク先はすべて英語）
W3School の SVG チュートリアル
SVG の使用方法
SVG の圧縮
アイコンをたくさん使用している場合は、アイコン フォントの使用を検討してください。アイコン フォントは、標準フォントとまったく同じように使えるレギュラー フォントです。その多くはベクタベースですのでファイルサイズを減らすことが可能です。同じアイコンを何度も使用する場合は、独自のアイコン フォントを作成するとよいでしょう。
アイコン フォントに関するリソース（リンク先はすべて英語）
Icomoon アイコン フォント生成ツール
NounProject CSS アイコン
FontAwesome CSS アイコン
スプライト シートとは、小さなグラフィックをタイル状に並べたもので、1 つの画像として一度に読み込まれます。CSS では、画像全体の各タイルが個別に表示されます。スプライト シートを使用すると、HTTP リクエストの数を減らすことができ、クリエイティブの読み込みも速くなります。ただしその場合も、使用するスプライト シートに最適な圧縮を見つけられるかどうかが重要です。
スプライト シートに関するリソース（リンク先はすべて英語）
W3Schools の CSS 画像スプライトの概要
Stitches のスプライト シート オンライン生成ツール
どうしてもピクセルベースの画像を使用する必要がある場合は、画質を維持しながらできる限り圧縮してください。Photoshop の「Web 用に保存」機能が有名ですが、その他にも高度な圧縮機能を備えたオンライン ツールが存在します。
CSS によるアニメーション
JavaScript の代わりに、CSS3 アニメーションを使用して遷移や変形を表現することを検討してください。CSS による変形アニメーションのレンダリングには CPU ではなく GPU が使われるため、パフォーマンスが改善するとともに JavaScript のファイルサイズを減らすことができます。
より複雑なアニメーション（パーティクル アニメーションを含む）の場合は、GreenSock の JavaScript アニメーション ライブラリ（GSAP）の使用を検討してください。GreenSock を使用することで、複数のアニメーションのタイミング調整、変形プロパティの個別アニメーションなど、CSS アニメーションの面倒な処理を簡素化できます。
アニメーションには、JavaScript の setInterval メソッドを使用するライブラリやフレームワークは使用しないでください。また、手動でコーディングする際に、setInterval メソッドは使用しないでください。setInterval がブラウザのリソースを使い果たしてパフォーマンスが悪化するおそれがあるほか、コーディングも複雑になります。JavaScript によるアニメーションがどうしても必要な場合は、アニメーション専用に設計されている requestAnimationFrame メソッドの使用を検討してください。
アニメーションのパフォーマンスを最適化する方法
requestAnimationFrame の使用（英語）
CSS 対 JavaScript のアニメーション
スタジオに CSS ファイルをアップロードする前に、CSS Minifier（英語）で CSS を縮小しておいてください。
JavaScript のファイルサイズを減らす
ここでは、JavaScript のファイルサイズを減らす際の注意点について説明します。
jQuery を使用しないクリエイティブで JavaScript ライブラリをアップロードする代わりに、共通の JavaScript ライブラリへの参照をすべてスタジオがホストする URL に置き換えます。こうしたライブラリは、配信中の広告と同様に、同じドメインでホストされます。
スタジオと IAB の連携により、さまざまなクリエイティブでこうしたリソースが共有、キャッシュされ、広告の初期読み込みから除外されるようになります。
キャンペーンのターゲットとするブラウザやデバイスを決めることで、必要になる時間やコードを減らします。サポート対象外のブラウザやデバイスのためのコードは追加しません。これはテスト時間の短縮にもつながります。
ブラウザのサポートに関するリソーススタジオに対応しているブラウザとデバイス
Can I Use: JS や CSS のプロパティのブラウザ サポート最新情報（英語）
JavaScript を結合して圧縮する
複数の JavaScript ファイルがある場合は 1 つに結合します。作成した JavaScript からコメントや余分なスペースを削除するツールも使用してください。
- 今後の更新に備え、圧縮前のコピーを保存しておいてください。
- スタジオでは、JavaScript ファイルの拡張子が
.min.jsではなく.jsでなければなりません。 - JavaScript ファイルを縮小した後では、トラッキングの追加が難しくなります。トラッキングを追加してから JavaScript ファイルを縮小してください。
フォントを最適化する
標準のウェブフォント以外のフォントを使用する場合は、Google Fonts の使用を検討してください。Google Fonts は、無料のフォントを集めた大きなライブラリです。ファイルサイズを減らすため、書体全体をリクエストするのではなく、必要な文字のみをリクエストするようにしてください。
ただし、ブラウザによって絶対 URL のみがキャッシュされるようにすることも重要です。http://fonts.googleapis.com/css?family=Philosopher&text=Hello は特定のクリエイティブにとって最小サイズとなりますが、http://fonts.googleapis.com/css?family=Philosopher&subset=latin がすでにブラウザの履歴にキャッシュされていたとしても、それとは別のリクエストと見なされます。可能な限りキャッシュを利用することで、クリエイティブの読み込みが速くなります。
ウェブフォントの詳細
Google ウェブフォントのフォント リクエストを最適化する
Typekit のフォント サブセットとウェブフォントのセルフ ホスティング