english

ブログ

2018.08.24

リリース前に必ずチェック! webサイト高速化には欠かせないGoogle PageSpeed Insightsでサイトチェックしてみよー
リリース前に必ずチェック! webサイト高速化には欠かせないGoogle PageSpeed Insightsでサイトチェックしてみよー

Web制作ホームページ制作関連

webサイトの高速表示が叫ばれて久しいですが、便利なツールを紹介します。

そうです。みなさんご存知のGoogle PageSpeed Insightsです。

今回はそんな便利なツールGoogle PageSpeed Insightsを使ったサイト最適化を複数回に分けてご紹介します。

 

まずはGoogle PageSpeed Insightsでサイトをチェックしてみましょう。

 

「サイトができた!バリデートもオールクリア!よっしゃ、リリースするぞ!」

いや、ちょっと待って、表示スピードは確認しました?

ちょっとこれで確認してみて↓

Google PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/?hl=ja

あらら。。。モバイルの方はともかく、PCの方は赤いの出てますね。
100点中17点ですか。これはいけません。

Google PageSpeed Insightsはこんな風に、URLを打ち込むだけで、ページ速度のスコアを評価してくれます。

それだけでなく、最適化するにはここを直したほうがいいよーって色々提案してくれます。

 

主な修正項目

(1)画像を最適化する

(2)圧縮を有効にする

(3)ブラウザのキャッシュを活用する

(4)スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

(5)CSS を縮小する

(6)サーバーの応答時間を短縮する

(7)JavaScript を縮小する

(8)HTML を縮小する

 

それでは順を追って提案内容をみていきましょう。

 

(1)画像を最適化する

「修正方法を表示」をクリックすると、最適化すべき画像がずらずら〜っと表示され、最適化を行うとどれだけのサイズが削減できるかを表示してくれます。

今回の場合は最適化する事で2.6Mの削減ができるようです。

しかもご丁寧に、最適化された画像をまとめてダウンロードする事ができます。

結果画面の下の方「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」のリンク部分をクリックすると、、、、。

最適化されたファイルがひとまとめに格納された圧縮ファイルがダウンロードできるのです。便利!

ただし、分析対象の画面の画像がimagesフォルダに全て格納されているので、コンテンツごとにイメージフォルダがある場合などは、自分で画像の最適化をしたほうが効率がいいかもしれません。

 

今回の例のように、画像を最適化するをするだけで、かなりの効果が得られます。

他の提案は正直気休め程度の場合が多いです。せいぜい100kb以下の圧縮であったり、gzip や deflate を使用してリソースを圧縮するのですが、それをする手間とリスクを考えるとあまり効率的とはいい難いです。

 

色々と提案してくれていますが、まずはファーストステップとして画像の最適化をして、スピードテストをしてみましょう。

WEBコンサルティング

最適化・最大化させる。

制作、集客、解析、改善、検証まで一気通貫した完全オーダーメイドのWebコンサルティング。
お客様のビジネスゴールに向けた戦略的コンサルティングを行います。

VIEW MORE くわしく見る

ホームページ制作

キレイなだけじゃない。

競合分析・サイト設計から更新・運用までトータルサポート。
Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。

VIEW MORE くわしく見る

ネット集客・広告

来てほしい人が来てくれる。

御社にとっての最適解は、本当にリスティング広告で集客することですか?
リスティング運用者全員がWebコンサルタントのアクシスでは、そこから話を始めます。

VIEW MORE くわしく見る

解析・分析・改善

あなたのサイトを丸裸に。

Webサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。
“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。

VIEW MORE くわしく見る

お問い合わせ

メールフォームからの
お問い合わせ