PageSpeed Insightsで高得点を出す方法。初心者もOK

PageSpeed Insightsで高得点を出す方法。初心者もOK

PageSpeed Insights (ページスピードインサイト)とは、モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認することができます

つまりサイトがサクサク見れるのか見れないかを具体的に数字で表してくれます

 

このサイトも記事が増えていくにつれて、表示速度が気になるようになってきました

今回、PageSpeed Insightsを試してみましたので、具体的にやったことをまとめておきます

 

「実際にやってみたけど、具体的な改善方法が分からない。」

「初心者だから、変なことになりそうで不安」

本記事では、同じ初心者のわたしがやったことをまとめてありますので、具体的かつ分かりやすいやり方で説明していきたいと思います

 

2018.11.13

PageSpeed Insightsがリニューアルされました。本記事は以前の表記等となります

リニューアルしたPageSpeed Insightsで速度スコアを再チェック!

Advertisement

PageSpeed Insightsの点数(改善前)

webページのアイコン

早速このサイトで試してみたところ、結果がこちらです

モバイル

モバイルの結果1

パソコン

パソコンの結果1

モバイルが、44点!Low(遅い)

パソコンも76点のMediumで、どちらも微妙な結果です

 

結果に合わせた表示スピードを速くするための「最適化についての提案」をしてくれるのですが、正直いって、ちんぷんかんぷんです

  • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  • サーバーの応答時間を短縮する
  • 表示可能コンテンツの優先順位を決定する
  • 画像を最適化する
  • ブラウザのキャッシュを活用する

え~~~

何言ってるのか全く分かりませんよね~~~

 

ひとまず、ネットで調べた情報から、初心者でもできそうなものを試してみることにしました

高得点を出すための改善策

lightのアイコン

画像を最適化する

唯一文字だけを見てこれだけは理解できました!

サイトで利用している画像を圧縮して、再度掲載するだけです

難易度C

 

今まで記事を書いていて、挿入する画像のサイズは気にしたことなかったですし、まだ記事数が少なかったので、早めに気づけて良かったです

プラグインを利用するのが一番手っ取り早いとは思ったのですが、少しでもリスクを増やしたくはないという初心者あるある

結果、地道にコツコツと置き換えました

>>画像圧縮に利用したサイト

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

最適化についての提案の全てをできるとは思えず、先に他ブログの表示速度を調べてみました

すると、このブログとの違いがハッキリと分かったんです!!!!

 

サーバーの応答時間を短縮するの項目です

Google のテストでは、お使いのサーバーは0.50で応答しました

他ブログ(高速)と比較すると、明らかにサーバーが応答した秒数に差がありました

わたしが1.5秒なので、モバイルがLowとなっている原因はサーバーにあると目星をつけます

サーバーでの手続き

PHPのバージョンをチェック

PHPとはプログラム言語のことで…

すいません。説明できません!!正直に言ったので勘弁してください

どうしても詳細が知りたい方は是非検索してくださいね

内容が分からなくてもさほど問題はありません

 

ここからはサーバーでの手続きです

ちなみにロリポップユーザーなので、他のサーバーの方は全く参考にならないかも??

 

結論からいうと、PHPのバージョンを上げれば、サイトの表示速度は速くなります

 

ロリポップにログイン

→サーバーの管理・設定

→PHP設定

 

わたしの現時点でのPHPバージョンは5.6(CGI版)

下にも書いてありますが、モジュール版にすれば、レスポンスが高速になります

しかし、わたしの利用しているプランはライトプランのためモジュール版の利用ができません。

ですので現在利用しているCGI版のバージョンを上げる作業になります

※その後ラスタンダードプランにバージョンアップしました

【ロリポップ】ライトプランからスタンダードプランへ変更してみた!表示速度はどうなる?

 

めちゃくちゃ簡単です

バージョンを7.1(CGI版)に変更するだけです

 

反映されるまでは20分くらいかかるようなので、それまではサイトをいじらず大人しく待ちました。

コンテンツキャッシュの設定

コンテンツキャッシュの説明

追加でもう一つ

コンテンツキャッシュ機能を利用するだけで、表示速度が24倍もupする可能性があります

 

サーバーの管理・設定

→PHP設定

→コンテンツキャッシュ

 

わたしはワードプレスを利用しているので、WPを選ぶだけの作業

コンテンツキャッシュの設定をする前

↑これを

↓こう

コンテンツキャッシュの設定をした後

PageSpeed Insightsの点数(改善後)

モバイル

モバイルの結果2

パソコン

パソコンの結果2

 

モバイルは+30点!LowからMediumに!!!

パソコンは+6点!MediumからGoodに!!!

 

改善の結果、モバイルを驚異的に早くすることに成功しました

贅沢をいうなら、どちらもGOODにしたいです

ですが、今のわたしの知識ではこれが精いっぱい

これ以上サイトをいじったりするのはちょっと…

 

これからもちょくちょく確認していこうと思います!

また、もう少し知識をつけて、いつかは100点を目指したい!!

ブログ運営カテゴリの最新記事