ブログ

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

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

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

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

・ページの表示速度はGoogleの評価に繋がる?
・ページ表示速度の計測方法
・表示速度高速化の方法4つ

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

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

記事の信憑性

 

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

表示速度スコアbeforeafter
Mobile4871
PC8796

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

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

JIN 高速化

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

速度が重要な理由

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

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

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

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

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

つまり、差をつけるチャンスです

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

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

JIN 高速化

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

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

表示速度 高速化

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

表示速度 高速化

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

表示速度 高速化

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

赤:低速
オレンジ:中速
緑:高速

ぴか
ぴか
みんなはどうだったかな?

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

解約方法

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

ページ高速化の方法

・FontAwesomeをOFFにする
・a3 Lazy Load
・EWWW Image Optimizer
・Autoptimize
・Xアクセラレーター

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

FontAwesomeをOFFにする

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

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

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

fontawesome@fontawesome.com

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

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

表示速度 高速化 表示速度 高速化

Font Awesomeのアイコンを使用している場合はソースが表示されてしまうので、別のアイコンを用意しましょう

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

a3 Lazy Load

a3 Lazy Load

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

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

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

EWWW Image Optimizer

EWWW Image Optimizer

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

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

ブログは画像を用いることが多いため、画像の容量が大きいとそれだけで読み込み速度が低下してしまいます。

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

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

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

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

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

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

EWWW Image Optimizer
ぴか
ぴか
僕は1,200枚ぐらい一気に圧縮できたよ!

Autoptimize

Autoptimize

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

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

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

Autoptimize

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

Autoptimize

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

Autoptimize

Xアクセラレーター

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

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

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

Xアクセラレーター

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

Xアクセラレーター

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

まとめ

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

表示速度が遅いとユーザーにストレスを与え、直帰率が上がり、
結果としてGoogle検索での順位が下がる可能性があります。

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

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

ページ高速化の方法

・FontAwesomeをOFFにする
・a3 Lazy Load
・EWWW Image Optimizer
・Autoptimize
・Xアクセラレーター

以上です。

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

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

本記事はワードプレステーマ『JIN』を使用して実施したものです。
他テーマで同様の効果があるかは不明です。

現代人におすすめの読書サービス知ってますか?

多忙で読書する時間がない、活字が苦手で読書ができない・・・

そんな方におすすめなのがAmazon運営の『Audible』です。
ビジネスマンの間ではスキルアップに使用している方も多くいます。

以下のリンクから申し込みをすると1ヶ月間無料です。

\今なら好きな本が1冊無料/
Amazon Audible公式HP 

クリックするとAudible公式HPに移動します
無料体験はいつ終了するかわからないのでお早めに
※30日間の無料トライアル中は一切料金がかかりません。