レスポンシブWebデザインでも重要、Google Chromeでの「ペイント」の確認方法

Google Chrome の Web Developer Tool を利用した「ペイント」の確認方法を紹介します。

まず「ペイント」は、ブラウザが表示領域に要素（画像やテキストなど）を配置することです。なので「ペイント」自体は普通のことで何ら悪いことではありませんし、どのグラフィカルなブラウザでも行われていることです。
しかし、スクロール時やスクロールしていない時に「ペイント」が何度も発生する「ペイントストーム」はパフォーマンス上の大きな問題です。

前回は、allWebクリエイター塾のウェブサイトを元に「ペイントストーム」がレンダリングの障害になることを理由に改善方法を説明しました。

Google Web Developer Tool での「ペイント」表示設定手順

ここからは実際にallWebクリエイター塾のサイトを題材にGoogle ChromeのDeveloper Toolで「ペイント」を表示する方法を設定を紹介しましょう。

利用したブラウザはMacのChrome 34です。

Google Web Developer Tool を起動

Google Chrome Developer Toolを右クリックから起動させましょう

コンソールを表示

Chrome Developer Toolの右側部分の赤枠

赤枠の囲み内のマークをクリックします

「Show paint rectangles」へチェック

下記のように5つのチェックボックスが表示されます。一番上の「Show paint rectangles」のチェックボックスをオンにしましょう。

赤枠の「Show paint rectangles」へチェック

「ペイント」の表示の確認

あとは薄緑色のエリアが表示されるようになります。スクロールして薄緑色の「ペイント」が表示されれば、そのエリアは「ペイント」が発生しています。

allWebクリエイター塾の場合はナビゲーション部分に薄緑色の「ペイント」が発生しています。

スクロールしなくてもペイントは発生する

動画のallWebクリエイター塾のサイトはスクロールがしなくても丸い白いオブジェクトが生成される度に「ペイント」が発生しています。これは、スタイルシートでanimationを指定したのが理由です。

まとめ

allWebクリエイター塾のレスポンシブWebデザイン講座の内容から今回は少しだけパフォーマンス部分のトピックの紹介でした。

みなさんも、レスポンシブWebデザイン にかぎらずウェブサイトを構築する場合は、「ペイントストーム」に関して下記の点を注意して、ユーザーが心地よく利用できるウェブサイトを作成しましょう。

確認内容

• スクロールの度にペイントストームが発生していないか
• 何もしていないのにペイントが発生していないか