
ホームページをPagespeed Insightsで計測したんだけど、改善策が書いてあってもどうやって改善したらいいのか分からないわ・・・・・
今回はこういった、ホームページの表示速度を高速化したいけども、どうしたらいいのか悩んでいる人に添いたいと思います。
Pagespeed Insightsでホームページの表示速度をテストすることができます。URLを入力すれば、表示速度の点数と改善策を提示するので、便利なサービスです。でも、ホームページ作成上級者じゃないと、改善策が何言っているのか、ちょっとわからない。
そこで、とにかく表示速度を改善したい人向けにホームページの種類によって速くする方法を紹介します。
WordPressを使っている人はAutoptimizeプラグインを使う

Autoptimizeとは
プラグインのAutoptimizeとはJava ScriptやCSS、HTML、画像を最適化してくれるプラグインです。
Pagespeed Insightsに下記のように書かれた項目に効果があります。

- レンダリングを妨げるリソースの除外
- 使用していないJava Scriptの削除
- オフスクリーン画像の遅延読み込み
- 適切なサイズの画像
- 使用していないCSSを削除してください
Autoptimizeを入れた結果

それほどPagespeed Insightsでは変化がありません。スコアは赤いゾーンのままです。でも、体感的には変わったので、効果があったと思います。

Pagespeed Insightsでの分析は毎度スコアが変わります。また、Autoptimizeを入れたからと言って改善策がなくなることはありません。でも、Autoptimizeは入れるべきプラグインです。
Autoptimizeの設定
チェックを入れれば設定ができます。画像を参考にしてください。
Java Scriptオプションの設定

CSSオプションの設定

HTMLオプションの設定

CDNオプション設定
CDNとはキャッシュサーバを利用して、インターネット上のサービスを効率的に素早く配信するネットワークのことです。利用していない場合は設定の必要はありません。

その他オプション

画像最適化
私の場合、画像の遅延読み込みである「Lasy Loads」をチェックすると表示されない画像があったので、チェックは入れていません。

Jetpackのアクセラレータにチェックを外さないと、Autoptimizeの画像最適化が有効ができません。Jetpackを入れている方はチェックを外してくださいね。
他にも、他のプラグインとの兼ね合い・相性があると思うので、チェックは様子を見ながら行ってみてくださいね。
レンタルサーバーとテーマ選びも重要
正直なところ、レンタルサーバー選びは大切です。私はさくらインターネットとコアサーバー
を利用しています。どちらもサーバーの仕様や機能は同じように思います。同じホームページの内容ではないので、比べられませんが、さくらインターネットの方が速く感じます。
なので、格安サーバーでの高速化はあまり期待しない方がいいと思います。まだ、使用したことがないので実感をもってオススメできませんが、余裕があったらwpX Speed、エックスサーバー
やカゴヤ・ジャパン
を試したいと思っています。口コミサイトをみると速いと定評がありますよ。
また、テーマ選びも重要です。必ず表示速度が速いテーマを選びましょう。オススメはこのブログでも利用しているCocoonと【THE THOR(ザ・トール)】です。ザ・トールはPagespeed Insightsのスコアが90点以上です。
Webビルダーを利用している人は画像サイズに気をつける
ペライチやジンドゥー
などのWebビルダーを利用している方は、ほぼ運営会社任せで大丈夫です。
ただ、アップロードする画像がサイズに気をつけてください。サイズは大きさ、解像度によってサイズが重くなるので適切なサイズでアップロードします。
適切なサイズはマニュアルに書かれていると思うので確認して見てくださいね。1MBまでアップロード出来る場合でも、なるべく100KB以下を目安にします。
また、保存するファイルの種類も適切な種類にしましょう。
Photoshopなど画像編集ソフトで、画像が粗いと感じないギリギリを狙うと画像のサイズを小さく(圧縮)できますよ。
シンプルなHTMLのホームページの人は
シンプルなHTMLだけのホームページの方は表示速度は速いと思います。もし遅い場合はレンタルサーバー、画像サイズ、ソースコードを見直します。
WordPressを使っている人のところでも書きましたが、レンタルサーバーによって表示速度は変わります。本当に表示速度を変えたい人はサーバー選びから見直すといいと思います。
画像サイズは、ホームページの横幅より超えない大きさにカットします。その上で、画像編集ソフトで解像度を下げてください。
ソースコードの確認は、ホームページ作成ソフトで行います。ホームページ・ビルダークラシックで「ページ/ソース」で確認します。「ページ編集」でおかしなところが反応する場合は、無駄なタグが隠れています。余計な行や空白、無駄なタグ、欠けたタグなどを削除します。
最後に
自分のパソコンで作業しているときは、あまりページスピード(表示速度)を感じません。なので、時々は別のパソコンやモバイルで、ホームページにアクセスして表示速度や表示のずれがないか確認するといいと思いますよ。