あまり知られていない、レスポンシブWebデザイン で使える！Google開発者のパフォーマンス改善の超裏ワザ（Part 1）

レスポンシブWebデザインの弱点の1つにパフォーマンスがあります。allWebクリエイター塾のウェブサイトもレスポンシブWebデザインで作成されています。ページ下部に配置しているナビゲーションに「スクロールパフォーマンス」という問題がありました。

「スクロールパフォーマンス」とはスクロールした際の「垂直方向の画面の動きのスムーズさ」を意味します。スクロールパフォーマンスが悪いとユーザーはスクロールした際に画面がひっかかったような印象うけ、ユーザー・エクスペリエンスを損ないます。

今回、リサーチをして検証した結果「スクロールパフォーマンス」が改善できたのでご紹介します。

allWebクリエイター塾のナビゲーションの問題

allWebクリエイター塾のWebサイトは、ナビゲーションを画面の最下部に配置しています。これは、タブレットでユーザーがナビゲーションボタンを押しやすいという理由からです

赤い枠がグローバルナビゲーション

しかし、このナビゲーションを画面下部に配置するレイアウトには「レンダリング（表示）が遅くなる」という決定的な弱点があります。なぜなら、ブラウザがナビゲーションを画面下部に配置するために要素の高さと幅を計算し領域（ペイント）を確保します。このペイントが何度も発生する状態を「ペイントストーム」と呼びます。

「ペイントストーム」によってブラウザは描画（レンダリング）が遅くなりスクロールパフォーマンスを損ないます。

ペイントストームの原因

ペイントストームが発生する原因はいくつかありますが、レイアウトを固定してしまう下記のようなスタイルシートの記述が代表的な原因です。

position:fixed

ペイントストームの改善

ペイントストームを解消しパフォーマンスを向上させる裏ワザをGoogle のPaul Lewisという人が提案しました。ペイントストームが発生している箇所に以下の記述を指定するだけで改善されます。

-webkit-transform:translateZ(0) 

この指定はデバイスのGPUというレンダリングの頭脳部分を早く計算するように働きかけます。その結果ペイントストームを解消しスクロールパフォーマンスを向上します。従来のソースコードをチューニングしてブラウザの計算の負担を減らすのではなく、ブラウザをパワーアップさせ計算を早くする逆転の発想です。
これはBlinkベースのブラウザ、ChromeとOperaのBlinkのバージョンで動きます。

検証

実際にどのように挙動が変わるのかを検証した動画を用意しました。

Mac Book Air で Chrome34 を利用し、allwebクリエイター塾のナビゲーションの部分(.page-nav)に、Chrome Developer Toolを利用して、「-webkit-transform:translateZ(0) 」を指定し、-webkit-transform:translateZ(0);を有効にした場合と無効にした場合のブラウザの「ペイントストーム」の発生の変化を計測しました。また、体感でも感じられるかを検証しました。（後述の動画を参照）

該当のスタイルシート

.page-nav {
position: fixed;
z-index: 2000000;
bottom: 0;
right: 0;
left: 0;
background: hsla(114, 32%, 39%, 0.975);
border: 0;
border-top: 1px solid hsla(28, 13%, 80%, 0.9);
-webkit-transform: translateZ(0);/*該当部分*/}
 

検証結果

動画の前半は指定が無効、後半は指定が有効でした。指定が無効の時はナビゲーション部分に薄緑色の「ペイントストーム」が何度もナビゲーション部分に発生しました。ところが指定を有効にした場合は、薄緑色のペイントは全くみられなくなりました。また、体感としてもスクロールが非常にスムーズになりました。

パララックスやtransformでも利用可能！！

パララックスも実はallWebクリエイター塾のナビゲーションのように、スクロールするたびに要素が上下左右に動いたりすることで「ペイントストーム」が発生します。なので、パララックスのサイトやtransformなどでも効果があるはずです。ただし、「*{-webkit-transform:translateZ(0)}」というような、全要素にこの指定をすることはやめましょう。百害あって一利なしです。

デメリット

-webkit-transform:transformZ(0)という指定は、GPUという部分を動かしますが、デバイスにも大きな負担を加えることになります。特にバッテリーの消費を大きくする可能性もあります。
あくまで正攻法ではありませんので、なんでもかんでも、この方法に頼ることは避けましょう。

注意：HiDPiディスプレイ等の場合は、この指定をしなくてもブラウザのGPUが起動するので効果を感じられない可能性があります。検証するときはHiDPi以外のスクリーンで検証してください。

参考リンク

• http://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
• http://addyosmani.com/blog/be-careful-when-using-null-transform-hacks-to-force-gpu-acceleration/

他のブログなどで本記事を掲載する場合は、必ず引用元を記載してください。無断転載禁止です