wordpress

ブログ高速化の方法と重要性!【wordpress初心者】

2020年6月24日

affinger5-speedup-ic

 

 

まろ
ブログの表示速度が遅いよ~どうしらたいいの?

 

テーマをaffinger5に変えましたが、モバイルの速度が良くありませんでした。

何でなの?

と思いひたすら1週間くらい調べまくってみました。

そして、とりあえずある程度速度を改善することができたので、その報告と改善方法をご紹介したいと思います。

引き続き、モバイルも90点台まで行けるよう改善はしていきたいと思っていますのでそちらは続報でご報告できればと思います

 

この記事でわかる事
表示速度(速度スコア)の調べ方
速度改善方法
なぜ速度改善が必要なのか

 

 

1.表示速度(速度スコア)の調べ方

page speed lnsights

 

PageSpeed Insights

サーチコンソールを使っている人は知っているかと思いますが、簡単に表示速度を調べられるツールがあります

PageSpeed Insights

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

 

サイトのURLを入力して分析をクリックすると直ぐにスコアと改善レポートが出てきます

 

これは改善前のスコアです!

改善前モバイルモバイル

改善前PCPC

 

モバイルはさすがにヤバイですね

ポイント

改善できる項目とされたもの

  • 使用していない JavaScript の削除
  • キーリクエストのプリロード
  • 適切なサイズの画像
  • レンダリングを妨げるリソースの除外

 

改善項目が解りましたので、これを徹底的に修正していきます

 

POINT現状のスコアとどんな改善項目があるのか確認しましょう!改善項目は監査合格のヒントになります!

 

始める前に!

カスタマイズする前には必ずバックアップを取って不具合が生じた場合復旧できるように対策しましょう!

なお、wordpressのバックアップと復元をする方法『【初心者も超簡単】wordpressバックアップ&復元する方法!』についてはこちらの記事をどうぞ

 

 

 

2.速度改善方法

こちらは改善後のスコアです!

改善後モバイルモバイル

改善後PCPC

モバイルはまだ改善できそうなスコアですが、とりあえず初心者の私にできそうな改善は全てやってみました。今後勉強してからコードの修正などやってみたいと思います。

 

高速化のために行った事

チェック項目

  1. PHPのバージョンアップ
  2. キーリクエストのプリロード改善
  3. プラグインの見直し
  4. 広告の遅延読み込み

 

私が改善をやった順番は、プラグインの見直し広告の遅延読み込みPHPのバージョンアップでしたが、一番有効なのはPHPのバージョンアップだと思うのでこちらから解説していきたいと思います

 

PHPのバージョンアップ

まず、最初にこれを確認してみましょう!契約したサーバーからPHPバージョンアップのお知らせが来ていませんでしたか?私の場合これに気付く前にプラグインの見直しなど試行錯誤しましたが、結局このバージョンアップだけで使用していない JavaScript の削除の項目はクリアとなりました。

 

PHPのバージョンアップ手順

エックスサーバーの方はこちらの手順で確認してみて下さい。

エックスサーバーへ

 

手順①
エックスサーバーログインサーバーパネルへ
 

エックスサーバーPHP変更

 

 

手順②
IDとパスワードを入力します
※IDとパスワードは契約した時に送られてきたメール『サーバーアカウント設定完了のお知らせ
』に記載されています
 

エックスサーバーPHP変更

 

手順③
PHP Ver.切替をクリック
 

エックスサーバーPHP変更

 

手順④
ドメイン名を確認して右の選択するをクリック
 

エックスサーバーPHP変更

 

手順⑤
右側の変更後のバージョンのプルダウンをクリックし、現在のバージョンより新しいもので推奨とされているものがあれば変更しましょう!
私の場合、7.2.29のままだったので7.3.16へ変更しました!
 

エックスサーバーPHP変更

 

手順⑥
変更をクリックし『PHPバージョンを「PHP7.3.16」に変更しました。』と表示されれば完了です

 

 

スピードテストをしてみよう!この変更だけでどのくらいスコアが変化したか、残った改善項目は何か確認してみましょう

私の場合、これだけで悩みに悩んでいた使用していない JavaScript の削除が合格となりました!

 

 

キー リクエストのプリロード

キーリクエストのプリロード1

 

これが真っ赤で何のことか解りませんでしたが、とりあえず『キーリクエストのプリロード』でググって対処法を見つけたのでご紹介します

 

対処方法

`<link rel=preload>` を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。

ざっくり言うと読み込みの順番を変えましょう!って意味です。

 

<head></head>内に下のコードを記述します

 
<link rel="preload" as="font" type="font/woff" href="○○" crossorigin>
○○には指摘されたURLを指定する)

 

コードを記述する場所<head></head>とは?外観テーマエディターテーマヘッダー(header.php)の<head>と</head>の間

 

AFFINGER5の場合、簡単にできてしまうので手順を説明します!

 

AFFINNGER5の対処法

手順①
AFFINGER5管理その他カスタム投稿一覧の設定コードの出力
このコードの出力に先程のコードを入力します(コピペでOK)
 

キーリクエストのプリロード2

 

 

手順②
コード内の○○に指定するURLををレポートからコピーしてくる
レポートに戻って指摘されたURLを右クリックし、リンクのアドレスをコピーをクリック
AFFINGER5管理に戻って、○○の所にコピーしたURLを貼り付ける
 

キーリクエストのプリロード4 (1)

 

手順③
下の図のようにできたら、保存をクリック
 

キーリクエストのプリロード3

 

 

再度スピードテストをしてみよう!スコアの変化、残った改善項目は何か再度確認してみましょう!

こちらも私の場合、これだけでキーリクエストのプリロードが合格となりました!

 

 

プラグインの見直し

使っていたプラグイン

  1. Autoptimize
  2. EWWW Image Optimizer
  3. Lazy Load
  4. WP Fastest Cache

 

Autoptimize

HTMLソースコードやCSS、JSファイルを最適化して、ページ表示速度を向上してくれるプラグイン

日本語化にも対応しているので、初心者の方も簡単に扱えるプラグインです

 

 

Autoptimizeの設定方法、『レンダリングを妨げるリソースの除外?Autoptimizeで簡単に解決!についてはこちらの記事をどうぞ

 

 

EWWW Image Optimizer

画像を劣化させることなく、アップ時に自動で画像サイズを圧縮してくれるプラグイン

wordpressの場合自動生成される画像が多いので入れておくと便利なプラグインです

 

 

EWWW Image Optimizerの設定方法、『EWWW Image Optimizerの設定方法!画像圧縮で高速化!についてはこちらの記事をどうぞ

 

 

 

Lazy Load

画像を遅延読み込みさせることによって表示速度をアップさせてくれるプラグイン

画像を多く使っている人はあると便利なプラグインです

 

WP Fastest Cache

サーバー上で事前にページを生成し、キャッシュとして保存しておくことで、表示速度を改善することができるプラグイン

キャッシュ系のプラグインはデザインが崩れたりなど不具合が発生する場合があるので、バックアップをとって安全に利用しましょう!

 

 

プラグインの変更

この中からWP Fastest CacheをW3 Total Cacheに変えてみました

変更した理由

  • WP Fastest Cacheは、無料版ではモバイルでのページキャッシュ生成などができないため

 

モバイルの速度が遅かったのでこれが原因なのかと思い、変更してみました

特に変化はありませんでした。それもそのはず

レスポンシブ対応のテーマを使用している場合は、それぞれに最適化したページを表示できるため、そもそもこの機能がなくても問題ありません。

とありました・・・

 

 

 

 

広告の遅延読み込み

使用していない JavaScript の削除の項目にアドセンスの広告らしきURLがあったので、これが原因かもと思いググってみました

しかし

この項目は、PHPのバージョンアップでクリアとなったため、最終的に行いませんでした。今後、発生したらやるつもりです。

こちらの対処法はヨッシーさんの記事で詳しく記載されています

 

 

3.速度改善が必要な理由

 

離脱率回避

 

ウェブページが表示されるまでに 10 秒以上かかる場合、49% の人がそのサイトを去るというのです。ほかにモバイルサイトを閲覧する際、最もイライラする要素を聞いた調査3では、46% もの人がページの表示が遅い点を挙げています

引用:Google モバイルサイト表示速度の重要性と高速化の方法

 

 

皆さんもご自身で感じているのではないでしょうか?表示速度が遅いので

もういいや!

となって閲覧をやめた経験があるのではないでしょうか?

 

 

表示速度が遅いために発生するデメリット

  1. ページビュー減少
  2. コンバージョン率減少
  3. 顧客満足度減少

その結果、アフィリエイトをしている人は売り上げが減少し、検索順位も降下してしまう可能性があります

致命的な結果に陥る前に高速化を目指しましょう!

 

 

まとめ

 

今回は、サイトの表示速度の調べ方と改善方法について解説しました

 

表示速度が遅い事によるデメリット
  1. ページビュー減少
  2. コンバージョン率減少
  3. 顧客満足度減少

アフィリエイトや検索順位にも影響が出る可能性があります

 

高速化の見直し項目
  1. PHPのバージョンアップ
  2. キーリクエストのプリロード改善
  3. プラグインの見直し
  4. 広告の遅延読み込み

PageSpeed Insightsを使って自分のサイトスコアを確認し、改善をしてみましょう!

 

 

-wordpress
-

© 2020 maroroblog