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

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

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

【コンテンツ】

  1. 拡張機能「PageSpeed Insights」の追加
  2. 分析の実施
  3. 提案内容の解説と解決方法

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

拡張機能「PageSpeed Insights」の追加

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

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

PageSpeed Insightsパネル

分析の実施

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

分析結果の表示画面

提案内容の解説と解決方法

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

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

提案の詳細画面

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

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

スポンサーリンク

特集記事

  • jQuery Mobile Image

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

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ