PageSpeed Insightsで分析！パフォーマンスの改善でSEO対策。
photo credit: Alien escape via photopin (license)
ブログの読み込みが遅い。
いろいろCSSやスクリプトをつかっているので 原因はいっぱいありそうなのですが、 なにが１番なのかがわからない。
そこで、みなさん御用達PageSpeed Insightsをつかって このブログを分析してみました。
昔はSEOにページの読み込みは影響しなかったようですが、 最近はSEOにも影響があるみたいですし。 なにより私自身ページの表示が遅いサイトは嫌ですしね。
PageSpeed Insights - 読み込みスピードの分析
PageSpeed Insightsは読み込みスピードについて分析してくれるツールです。 分析された結果を元に何が悪いのかを具体的に指摘してくれます。
分析結果
GoogleSpeed Insightsの分析結果は３段階にわけて出力されます。
- 修正が必要
- 修正を考慮
- ルールに合格
「合格」になっているのは特に修正不要ですが、
「修正が必要」、「修正を考慮」は修正が必要な項目です。
が、「修正を考慮」のものはみる限り大きな影響はなさそうなので、後回しでも問題なさそう。
修正方法
「修正が必要」に分類されている一番上にあった以下の項目を見てみます。
→スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
こちらはJavascriptやCSSの読み込みを待たないと記事の内容が読み込まれないようになっており、 結果としてサイトの読み込みが遅くなっている、と注意されています。
まずは下の修正方法を開いてみます。
すると、開かれた項目に原因となっているファイルが記載されています。 ファイル名の上にあるリンクをクリックすると･･･
Google先生がオススメする修正方法を教えてくれます。
あとは修正方法にしたがって直すだけ。
修正の限界
ただし、１点。
あたりまえかもしれませんが、利用している外部のJavascriptやCSSが原因となってパフォーマンスが下がっている場合は修正ができません。
当ブログの「はてなブログ」でも既に多くの外部ファイルを読み込んでおり、そのファイルが原因となって一部パフォーマンスが下がってしまっています…。
上記で指摘されているファイルもその例。上から、はてなブログのCSS、適用しているテーマのCSS、私が追加した外部のCSS。 修正するとなれば使うのをやめるか、自分で一から作るかしか無いですが、 どちらも困難なため、改善できそうにありませんでした…。
外部ファイルに頼ると自分で作らなくていい反面、こういう悪い面もあります。
「ブログの読み込みは速くなくちゃ！」という方はサーバ含めて設定できるWordPress等で作ったほうがいいのかも。
当ブログでの課題
さて、分析内容をよくよく見ると１つ改善できそうな内容がこのブログにはありました。 それは…
「画像を最適化する」
コレはブログに貼っている画像のデータサイズが大きく、重いぜこんちくしょー、 との指摘です。
当ブログの結果
当ブログの以下の焼き芋の記事を例に分析したスコアを見せると… gourmecco-panda.hatenablog.com
モバイルのスピードは39/100。
パソコンのスピードは13/100。
・・・
激重です。 ってか、パソコンのほう3MB改善できるって…汗
おうちでの焼き芋のおいしさなんとかお伝えすべく、写真をペタペタ貼った結果がこれですorz
マジやばいっす。
これはなんとかせねば！と対策したので、次回その内容を書きたいと思います。
ではでは・・・グルメコ！
- 作者: 瀧内賢
- 出版社/メーカー: 技術評論社
- 発売日: 2012/10/11
- メディア: 単行本（ソフトカバー）
- 購入: 3人 クリック: 21回
- この商品を含むブログ (20件) を見る
