Tipsカテゴリー

Chrome デベロッパーツールでPageSpeed Insightsを使う

公開日：2014年6月23日
最終更新日：2014年7月13日

PageSpeed Insightsは、Webページのコンテンツを分析し、ページの読み込み時間を短くする方法を提案してくれるオンラインツールです。このツールはChrome デベロッパーツールの拡張機能として組み込めますので、その方法を解説します。

なおWebページでURLを入力してのオンライン利用は、下記ページにアクセスしてください。
http://developers.google.com/speed/pagespeed/insights/

【コンテンツ】

【記事執筆時の環境】
Windows 7 Professional 32bit SP1
Google Chrome 35

Chromeウェブストアで、「PageSpeed」と検索すれば拡張機能に出てきますので追加します。
https://chrome.google.com/webstore/category/apps?hl=ja

PageSpeedタブが追加され、クリックすると下記パネルが表示されます。

PageSpeed Insightsパネル

[分析]ボタンをクリックすると分析が開始し結果が表示されます。

分析結果の表示画面

分析結果では最初、提案の概要が示されていますが、左側にある項目をクリックするとそれぞれの提案についての詳細が表示されます。

また、[詳細]をクリックすると提案内容についての解説ページがオープンされ、具体的な解決方法を知ることができます。

提案の詳細画面

提案内容は一部日本語で解説しているページもありますので、下記にアクセスしてみてください。
https://developers.google.com/speed/docs/insights/rules

提案内容解説の日本語ページ

WordPress の基礎から応用まで

Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
jQuery Mobile を基本から覚える

スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。