『PageSpeed Insights』でサイトの表示速度をチェック

投稿日:2017年7月3日

サイト作成もかれこれ5ヶ月目に入り、やらなければならないことはまだまだあるはずなんですが、どうにもどこから手を付ければいいのかちょっと分からなくなりつつあります(-∀-`;)

そこで今回は、Googleの『PageSpeed Insights』を利用して、サイトの表示速度をチェックするとともに、サイトの改善点なんかも知れたら今後の目標も立てられるかな、と思った次第であります。
 

『PageSpeed Insights』で表示速度チェック

では早速『PageSpeed Insights』へアクセス。
当サイトのアドレス "gunplakibun.com" を入力。
…いや、 "www.gunplakibun.com" だったっけ?
一応両方を入力してみる。

その結果はこんな感じ。

点数に関しては今は置いとくとして、 "www." の有無で結果が変わった点が気になりますね…

もう一度両条件で分析をかけてみると、またまた違った点数が出ました。

後に調べて知ったのですが、サーバーの応答時間というのがこの点数に大きく関わっているようです。

サーバーの応答時間は、アクセスする度に多少なりとも差が出ます。
なので、この点数も調べる度に変動してしまうようですね。
 

ではその事も踏まえた上で、当サイトの点数を見ていきましょうかね。

PC表示は59点~74点。平均は65点。

モバイル表示は50点~72点。平均は60点。

”平均”という言い方は正しくないのでしょうが、これは何度か分析してみた結果、一番多く表示された点数でした。
どうも59点~74点(PC表示の場合)の間の点数が満遍なく表示されるという訳ではなく、極端に低い場合・高い場合の他は、この”平均”で挙げた点数が多く見られました。
最初の分析結果でもこの点数でした。

なので、この点数を現在の当サイトの評価として受けとめておきましょう。
 

分析結果からの課題点

赤字…いや、赤点が出てしまったのは正直ショックでしたが、問題はこの点数そのものではなく、この点数をどうやれば上げられるのかですね。

では『PageSpeed Insights』の分析結果から、「適用可能な最適化」と書かれている項目を見ていきましょう。

・サーバーの応答時間を短縮する
・画像を最適化する
・スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
・ブラウザのキャッシュを活用する
・圧縮を有効にする
・CSS を縮小する
・JavaScript を縮小する
・HTML を縮小する(※モバイル表示のみ)

この『PageSpeed Insights』を解説したサイトによると、チェック項目は10項目あるそうです。
合格した項目は下の「 適用済みの最適化」の欄に表示されてるみたいです。

……いやぁー、10項目中7~8個が修正項目ですか…
辛口評価ですね(ll゚д゚)

しかも「レンダリング」だとか「JavaScript」なんて知りませんですよ。

辛うじて解るのが「画像の最適化」ですかね。これって画像を圧縮しろってことですよね?

当サイトは写真をメインとしたブログになる予定ですので、画像の圧縮は必須中の必須となるはずなので、以前からチェックしておいてました。
とりあえずはここからですかね?

 

おわりに

では今回はこんな感じで。

特にサイト作成において進展はありませんでした。

今後の課題の洗い出しですね。

『PageSpeed Insights』で80~85点出せればいいと言われているので、これを最終目標として頑張っていこうと思います。
 

あ、今回「PCとTab左右50%」タグを使って画像を横並びにしてみました。(スマホ以外)
これは良いですね!
下に写真(画像)の説明文とか入れたりもできるのかな?

ほんじゃ、次回は画像圧縮についてです。ノシ

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.