JINのモバイルPageSpeedスコアを倍にした高速化の方法【設定を具体的に解説】
WordPressでブログ運営をしている
あなたへ。
ページの読み込み速度は速いですか？
私のブログはページの読み込み速度が
遅い、改善が必要と判定されていました。
結果、モバイルのスコアが３３→７０に！
実際にどんな手順で行ったのか？
ご紹介します。
表示速度の測定方法
表示速度の測定は簡単。
『PageSpeed Insights』
にアクセスし、計測したいサイトのURLを入力します。
私のブログは改善前、モバイルのスコアが
３３でした…
対策方法
①Webフォントを使用しない
Webフォントとはスマートフォンや
パソコンに入っているフォントではなく
Web上からフォントを読み込みます。
Webフォントのメリットは見やすい事。
デメリットは読み込み時間が遅い事です。
『サイト基本設定』から
『デフォルト(端末の標準フォント)』
を選択します。
デフォルト以外はWebフォントなので
表示速度に悪影響を与えます。
②アニメーションをオフにする
カーソルを合わせた時のアニメーションを
オフにします。
選択します。
ここまででモバイルのスコアは
３３→４４になりました！
③画像を最適化する
スマートフォンのカメラ性能向上などに
よって、画像は綺麗になりました。
しかしデータ容量は大きくなりました。
画像は文字に比べてデータ容量が桁違いに大きいので表示に時間がかかります。
表示時間を短縮するために
わざと容量を小さくする必要があります。
オススメのWordPressプラグインは
『EWWW Image Optimizer』です。
画像の劣化は最小限に
最適化してくれるプラグインです。
過去に追加した画像の一括最適化が
できます。
使い方は簡単です。
初期設定のままで使えます。
WordPressメニューの『メディア』から
『一括最適化』を選択します。
最適化ができる画像数が表示されるので
クリックして最適化します。
ここまででモバイルのスコアは
５９になりました！
④画像の読み込みを遅らせる
見ている方がすぐには表示しない
画像の読み込みを『わざと』遅らせます。
すると最初のページ表示が速くなります。
使用するプラグインは
『a3 Lazy Load』です。
使い方は簡単。
インストールして有効化するだけです。
設定の「Lazy Load Activation」内の「Enable Lazy Load」が
ONになっていることを確認しましょう。
ここまででモバイルのスコアが
６６になりました！
⑤Font Awesomeを読み込まない
Font Awesomeとは、Webサイトにアイコンフォントを簡単に表示させることができるWebサービスです。
提供されているアイコンフォントは商用利用可能で、個人のWebサイトやブログに導入できます！
アイコンフォントを表示できて便利ですがデメリットとして読み込みに時間がかかってしまいます。
使用せずに読み込み速度を優先する場合の設定方法は
カスタマイズの『その他設定』内の
『fontawesomeを読み込まない』に
チェックを入れるとFont Awesomeが
無効化されます。
⑥不要なタグを削除する
「head」というサイトの情報が書かれた
HTMLタグの一部があります。
headにはGoogleアナリティクスの計測用や、Googleアドセンスの審査用のタグなどを挿入します。
headに不要なタグがあると、ページの読み込み時間が遅くなってしまいます。
不要になる可能性があるのは
『Googleアドセンス』審査用タグです。
自動広告をオンにしている場合は必要ですが、あなた自身で広告のタグを挿入している場合は不要です。
私の場合は自動広告をオンにしているのでそのままとしました。
⑦JavaScriptやCSSを最適化する
Webサイトは文字や画像以外にもJavaScriptやCSSといったコードを使用して成り立っています。
なのでJavaScriptやCSSも最適化する必要があります。
「そんな難しそうなことできないよ…」
と思ったあなたもこのプラグインを使えば大丈夫！
『Autoptimize』という
WordPressのプラグインです。
Autoptimizeをインストール、有効化したら下記の設定にチェックが入っているか
確認します。
設定画面を開いて「JS、CSS&HTML」のタブを選択します。
- JavaScriptコードの最適化
- JSファイルを連結する
にチェックを入れます。
下にスクロールし、「CSSオプション」の下記３項目にチェックを入れます。
- CSSコードを最適化
- CSSファイルを連結する
- インラインのCSSも連結
さらに下にスクロールし、
「HTMLオプション」の「HTMLコードを最適化」のみにチェックを入れます。
さらに下にスクロールし、
「その他オプション」の下記４項目にチェックを入れます。
- 連結されたスクリプト / CSS を静的ファイルとして保存
- 除外された CSS ファイルと JS ファイルを最小化
- 404 フォールバックの使用
- ログイン状態の編集者、管理者にも最適化を行う
チェックを入れたら
「変更の保存とキャッシュの削除」を
クリックします。
⑧Async JavaScriptを使用する
『Async JavaScript』はJavaScriptを
遅れて読み込むようにしてくれるなど
JavaScriptを最適化するプラグインです。
オススメの設定は下記です。
設定画面を開き、「Settings」のタブを選択します。
「Enable Async JavaScript」に
チェックを入れます。これをすることでプラグインの機能が有効になります。
次に、「Quick Settings」の
「Apply Async」をクリックします。
最後に一番下の「Save Setting」を
クリックして設定完了です。
⑨WP Fastest Cacheを使用する
『WP Fastest Cache』はサーバー上で事前にページを生成し、キャッシュとして保存しておくことで、表示速度を改善してくれるプラグインです。
デフォルトで全ての設定項目がアンチェック状態なので、インストールしただけでは有効になりません。
オススメの設定は下記です。
- 言語を日本語に設定する
- キャッシュを有効にする
- 先読み
- ログインしたユーザー
- モバイル
- 新規投稿
- 投稿更新
- Gzip 圧縮
- ブラウザキャッシュ
最後に一番下の『変更を保存』を
クリックして設定完了です。
⑩サーバーの高速化設定(Conoha WING)
サーバーの高速化設定については、使用しているサーバーで異なります。
私はConoha WINGを使用していますので、例としてConoha WINGの高速化方法をご紹介します。
『WEXALⓇ Page Speed Technology』をONにします。
管理画面のメニュー「高速化」内の
「WEXAL」を選択し、「ON」にします。
「最適化中」と表示されますのでしばらく待ちます。
「最適化完了」と表示されたら完了です。
注意点として、サーバーのキャッシュ設定とは併用できませんが
キャッシュ設定は干渉して不具合の原因となることも多いので、プラグインに任せています。
ここまででモバイルのスコアが
７０になりました！
まとめ
Webサイトの表示速度はGoogleの
「PageSpeed Insights」で
計測できます。
WordPressテーマ「JIN」は初期設定の
ままだと表示が遅いですが、
以下の対策が有効です。
- Webフォントを使用しない
- アニメーションをオフにする
- 画像を最適化する
- 画像の読み込みを遅らせる
- Font Awesomeを読み込まない
- 不要なタグを削除する
- JavaScriptやCSSを最適化する
- Async JavaScriptを使用する
- WP Fastest Cacheを使用する
- サーバーの高速化設定(Conoha WING)
もちろんJIN以外のテーマでも有効です。
あなたの参考になれば幸いです。
アドバイスやご質問がございましたら
ぜひご連絡ください。
