【JIN高速化】表示速度のスコアを96まで上げた方法

【JIN高速化】表示速度のスコアを96まで上げた方法

ぴか

ページの表示速度を高速化する方法ってあるの？
もし、方法があるなら具体的に知りたい

こういった疑問にお答えします。

上記を知りたい方におすすめの記事です。

すぐに高速化したい方はこちらをクリック。

記事の信憑性

https://twitter.com/pikamemo_0707/status/1241343385333403648

本記事で紹介している方法を当ブログで実施したところ以下のような結果となりました。

表示速度が早いとされている『AFFINGER』を使用しているサイトより高速です。
※記事を読むのに5分、行動に15分程度要します。

ページの表示速度はGoogleの評価に繋がる？

Googleサーチコンソールのヘルプに、下記の記載がありました。

速度が重要な理由

ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には:
ページの読み込み時間が 1 秒から 3 秒に増加すると、直帰率は 32% 増加します。
ページの読み込み時間が 1 秒から 6 秒に増加すると、直帰率は 106% 増加する。
遅いと判断されたページは、Google 検索での順位が下がる可能性がある。
ケーススタディをご覧ください。

簡単にいうと、表示速度が遅いとユーザーにストレスを与え、直帰率が上がり、

結果としてGoogle検索での順位が下がる可能性があるということです。

さらっと書かれていますが、ブログを運営されている方々にとっては冷や汗ものではないでしょうか。

しかし、同時にチャンスも感じました。
自分のサイトはもちろんですが、他ブログのスコアも確認したところ・・・
以外に表示速度の対策を行なっていない方が多く存在しました。

ぴか

表示速度が遅くてページバックした経験みんなもあるよね

ページ表示速度の計測方法

まずは、自分が運営しているサイトの表示速度スコアを計測します。

Googleサーチコンソールの画面左部の「速度（試験運用版）」をクリック。

以下の画面が表示されたら画面中央の「PageSpeed Insights を試す」をクリック
※モバイルとPCで別れていますが、遷移後はタブ切り替えできるのできにしなくて大丈夫です。

以下のような画面が表示されスコアが表示されます。
モバイルはタブ切り替えで確認できます。

カラーによって速度がtierのようになっています。

ぴか

みんなはどうだったかな？

表示速度高速化の方法5つ

表示速度を高速化する方法は以下の5つです。

ひとつひとつ説明していきます。

FontAwesomeをOFFにする

１つ目は「FontAwesome5」をOFFにします。

『JIN』はバージョン2.0から「FontAwesome5」をOFFにできるようになりました。

FontAwesomeとは、以下のようなアイコンを使用できる機能です。

＠fontawesome.com

Font Awesomeを読み込むと表示速度が遅くなってしまいます。

ワードプレスのメニューバーから「外観」➡︎「カスタマイズ」➡︎「その他の設定」から「Font Awesomeを読み込まない」にチェックを入れましょう。

ぴか

JINが用意しているオリジナルアイコンを使用するのがおすすめ

a3 Lazy Load

２つ目は高速化用のプライグイン「a3 Lazy Load」を導入します。

これまでは、ページアクセス時に全ての画像を読み込んでいましたが、「BJ Lazy Load」を導入することで最初に全ての画像を読み込むのではなく、画面に表示されている部分だけを読み込むに変更してくれます。

細かな設定は必要なく、有効かだけしましょう。

EWWW Image Optimizer

３つ目は画像圧縮用のプラグイン「EWWW Image Optimizer」を導入します。

「EWWW Image Optimizer」は有効化しておくだけで、アップロード時に画像の圧縮を自動で行なってくれます。

「EWWW Image Optimizer」を有効化することで画像の軽量化は行えますが、
ベストは自身で画像を圧縮した後に、プラグインの恩恵を受けて更に圧縮を行うことです。

画像圧縮方法がわからない方は「Compressor.io」がおすすめです。

画質を保ったまま無料で最大90％のファイル削減が可能です。
※圧縮したい画像名に記号が含まれていると失敗することがあるためリネームがおすすめ

当ブログも「Compressor.io」と「EWWW Image Optimizer」を両方使用していますが、画質の低下は気になりません。

「EWWW Image Optimizer」はアップロード時だけではなく、既にアップロードされている画像も一括で圧縮することができます。

ワードプレスメニューバーから「メディア」➡︎「一括最適化」で行います。

ぴか

僕は1,200枚ぐらい一気に圧縮できたよ！

Autoptimize

４つ目はプログラミング言語を圧縮してくれるプラグイン「Autoptimize」を導入します。

「Autoptimize」は多少設定が必要です、以下の通りに設定しましょう。

「JavaScriptコードの最適化」にチェック

「CSSコードを最適化」にチェック

「HTMLコード最適化」にチェック

Xアクセラレーター

５つ目はXSERVERの表示高速化機能「Xアクセラレーター」を使用します。

まずは、XSERVERのサーバーパネルにログイン。

画面右下にある「高速化」メニューから「Xアクセラレーター」をクリック。

適応したいドメインから「選択する」をクリックしてXエクセラレーターを設定して完了。
※最初は現在の設定が「OFF」になっています。

【JIN高速化】表示速度のスコアを96まで上げた方法　まとめ

本記事の内容をまとめます。

表示速度はスコアで確認することができ、低速・中速・高速の3つに分類されます。
>>実際にスコアを確認する

当ブログがスコア96/100を取るまでに行なった表示速度を高速化する方法は以下の5つ。

以上です。

スコアはもちろんですが、実施前と後では明らかな表示速度の差を体験し、
今では高速化してよかったと強く感じています。

全体の作業時間は15分程度なので、高速化を行なっていないのであれば対応してみてはいかがでしょうか。