このような疑問をお持ちの方に向けて書いています。
僕のブログもWordPressで構築されていて、以前は重くて悩んでいましたが、いくつかの改善で高速化に成功しました。すべての人に当てはまらないかもしれませんが参考になれば嬉しいです。
- WordPressが重くて悩んでいる人
- PageSpeed Insightsの速度が遅く改善したい人
この記事は、上のような点を解説していきます。興味があるという方は最後までご覧になってみてください。
この記事を書いた人
特別何か持っているわけではない普通の人が未経験からエンジニアに転職し、10年以上経験を積みフリーランスエンジニアになり、単価80万〜140万の案件に参画し稼げるように。プログラミングを始めた頃は、「プログラミング向いていないかも」、「自分のスキルレベル低い」と感じ悩んだ経験がある。
- 元プログラミングスクール運営企業の社員のためプログラミングの学習に詳しい
- 自分と同じように悩んでいる初心者へのアドバイスが得意。
速度改善前のWordPressの状況
速度改善する前に僕のWordPressがどのような状況でどんなテーマで作られているのかという点から紹介していきます。
WordPressの環境
僕のWordPressは、人気の高速サーバーと評判のエックスサーバー
に設置しています。他にも高速サーバーと呼ばれるレンタルサーバーはたくさんあると思うので個人的には、海外の安いレンタルサーバーとかでなければいいと思っています。
レンタルサーバーが原因でWordPressが遅いというのは、考えにくいのでここは自分で調べてください笑
使用しているWordPressのテーマ
このWordPressに使われているテーマは、ブロガーで有名なマナブ氏の有料テーマです。有料テーマのほとんどは導入前であれば高速と言われるものが多いです。このテーマも初期の速度はそこそこでした。
他の有名なWordPressテーマより機能が少ない点や機能改善がかからない売り切りのテーマなので素人の人にはおすすめしないです。かといってWordPressに理解があってカスタマイズが可能であっても面倒なのでおすすめはしないです笑
有料であれば、購入後でもメンテナンスがされているテーマの購入をおすすめします。個人的には昔、賢威というテーマを使っていたのでいいと思います。「沈黙のWebライティング」という本の著者です。これも読みましたw
WordPressの運用状況
速度改善前は以下のような状況で、運用していました。気を使っていたのは画像のサイズくらいでした。JavaScriptも見た目を良くするために使っていました。
このような状況で運用していたWordPressをどのように改善していったか紹介していきます。
- プラグインをそこそこ入れていた
- 自分で実装したJavaScriptを使っていた
- 画像はある程度、サイズを落としたものを使っていた
WordPressを改善した点
Google PageSpeed Insightsで調べる人が多いと思いますが、現在のブログのスピードは下のような感じです。状況によって少し数値は変動しますが、いい感じのスピードを維持できています。
改善前は、モバイルが30、PCが50とかでした。さすがにちょっと重いと考えて改善しました。
では実際にWordPressに手を入れて改善した方法を順番に解説していきます。
AdSenseの広告が重くなるため改善した
最初AdSenseやめようかと考えたくらいでしたが、こちらのサイトの改善方法を試したところ、スピードがかなり上がりました。
このページでは何をしているかというと、ユーザーがマウスを動かすとイベントが発生してアドセンスを読込み始めます。そのため初期ロード時にユーザが何もしなければ待機状態になっているということです。
この対策で初期のロードの重さを改善することができます。感謝です。
画像に「loading="lazy"」を追加した
<!-- 以前の画像の設置 --> <img src="https://○○.com" alt=""> <!-- 改善後 --> <img loading="lazy" src="https://○○.com" alt="">
Webページは、画面ロード時に表示されていない部分（下の方にある画像も）取得しています。それが画面ロード時に重くなる原因となっているため、画面を表示する直前に読み込むことで少し改善されます。
注意点があり、この方法だとすべてのブラウザが対応できていないため、効果がないブラウザもあるという点です。
上の動画では、スクロールすると画像ファイルが読み込まれていくのが分かりますね。これで初期ロード時の重さを少し改善できました。
ブラウザキャッシュを利用
「.htaccess」にブラウザのキャッシュ時間を設定できます。変更が少ないファイルのキャッシュ時間を長めに設定しました。
WordPressの速度改善による影響はあるか
実際に上記の3つの改善だけでもかなりスコアが改善されています。その他、気になる細かい修正も加えていますが、例えばJavaScriptのファイルの読み込みをfooterに移動したり。
これくらいの改善でも効果があったと感じたことがありました。
画面の表示速度がアップしたのでストレスが減った
速度改善前は、表示に時間がかかっていて特にモバイルでストレスになっていた。自分のブログを確認する時も遅いと感じていたため、ユーザーも同じように感じていたと思うと改善して良かったと思います。
ブログアクセスはモバイルが増加しているので、特にモバイルの表示速度はチェックが必要かと思いました。
離脱率が減る、Google先生の評価が上がるといったメリットがあると言われますが、どうでしょう。それほどしっかりとチェックしていないのでわからないですが。
プラグインに頼らない改善をする習慣がついた
WordPressのおすすめプラグインというサイトを見ると、画像関連のプラグインがたくさん入っていますが、個人的にはプラグインを入れて改善するより自分で何とかする方がいいと考えています。
例えば、画像の圧縮であれば、「TinyPNG」 のようなサイトを使うことで、プラグイン消せるので、僕は画像関連のプラグインは入れていません。
まとめ
WordPressの速度改善は、少し手を加えるだけで効果があるので面倒と思わずチャレンジするのがおすすめです。
WordPressの案件を受ける人も何でもプラグインで対応せずに、後々のことも考え実装することをおすすめします。
副業やフリーランスでWeb制作する人は、WordPressの知識は必須かと思います。WordPressをもっと学習してスキルアップしたいと考えているのであれば、以下の記事もご覧になってみてください。
