WordPressが重たい原因とその改善方法：画像遅延ロード編
ハロー！ 継続の錬金術士なおキーヌです。
WordPressが重たいと感じたことはないでしょうか？
もしくは最初は快適だったのに最近ブログが重たいと感じてきてはないでしょうか。
御託はいいから早く教えてくれ！って人のために先に原因と解決法をリスト化しました。
WordPressのブログが重たくなる主な原因は以下のリストになります。
- 画像ファイルのファイルサイズが無駄に大きい
- HTTP通信回数が多い
- プラグインを入れ過ぎている
- キャッシュ機能が働いてないので毎回全部読み込んでる
- サーバーの応答が遅い
そして、これらのWordpressを重たくしている原因を解決するのが以下にリストになります。
- 画像ファイルサイズを圧縮する
- ソースコードを圧縮したりメディアファイルの遅延読込を行う
- 余計なプラグインを減らして機能を自力で実装する
- サーバーかプラグインによるキャッシュ機能を使う
- WordPressの速度が速いレンタルサーバーに乗り換える
これらの改善を行うだけであなたのWordPressは劇的に軽くなります。
実はサーバー乗り換え以外は全部プラグインで出来てしまいます。
現時点でWordpressが重たくないのであればそのままでもいいでしょうが、
プラグインを入れまくるとWordpressが結局重たくなってしまうので、
プラグインに頼らない方法でブログを軽くしていきましょう。
全部一気に書いてしまうとすさまじく長くなってしまうので
今回はとにかく一番ロード時間を短縮できる「画像遅延読み込み」の方法をご紹介します。
- まずは今のブログの重さを計測してみよう
- 画像遅延読込のjavascriptライブラリをブログで読み込む
- 画像に属性を与えて遅延読込の効果を与える
- もう一度ブログの読み込みスピードを計測してみる
- 画像でSEOをかけている人は注意！
まずは今のブログの重さを計測してみよう
人間というのは思った以上に我慢できない生物で、読み込みに時間がかかればかかるほど
そのサイトからユーザーが離脱します。あなたのサイトは何秒で全部表示されるでしょうか？
下記のサイトで自分のブログのローディングスピードを測ってみましょう。
https://developers.google.com/speed/pagespeed/insights/
どうでしたか？
ちなみに私のブログは下記のようになりました。
2019/03/07の時点ではスマホ版で93点。PC版で94点。
イマイチですね。少なくとも97点はめざしたいです。
画像サイズの最適化をまだしていないのが主な原因でした。
ですが、点数が緑色になっていたら軽いサイトという判定なので問題有りません。
これ以上は自己満足の世界になりますので、あまり時間をかけすぎないようにしましょう。
黄色になっていたら、警告を受けている部分を直せば緑になります。
出来れば直した方がいいでしょう。大抵は画像の遅延読込で改善します。
赤色になっていたらアウトです。貴方のサイトは激重です。
即刻重たい原因をつぶしてブログを軽くしてください。
黄色の人は少し努力すればサイトが軽くなりますので頑張って見てください。
今回対象なのは赤色の人です。
Wordpressを導入してすぐの人は黄色か緑になるでしょう。
なにもないから軽いってだけですけども。
Webページローディングスピードが赤色の人は即刻改善しましょう。
画像遅延読込のjavascriptライブラリをブログで読み込む
WordPressのソースコードをいじる作業をする際は
かならずファイルのバックアップをとるようにしてください。
画像遅延の機能を付けるにはjavascriptライブラリを読み込んで使うか、自力で実装する方法があります。
自力での遅延読込実装はあまりにも非効率且つ車輪の再発明になるのでやめましょう。
ライブラリを使えばプラグインを使うよりも無駄がなく実装出来ます。
プラグインが重くなる原因は、余計なものまでついてくるのでそれの積み重ねで重たくなるのです。
それではWordpressのテーマのbody閉めタグがある手前にjavascriptファイル読み込みのコードを記述します。
以下のように記載してください。
テーマによってはタグの記載場所が変わるので探してみてください。
大体は「footer.php」の最後の方に記載されてると思います。
<body>
~~~~ <!-- 閉めタグまで省略 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.5/lazysizes.min.js" async=""></script>
</body>これでFTPにアップされているテーマのファイルを更新してください。
え？スクリプト用のファイルを落としてこなくても大丈夫なの？
CDNってなんじゃ？と思われる方に少しだけ説明すると
CDNとは「Content Delivery Network」の略です。
なんのこっちゃわからんでホンマ。って方はぶっちゃけあまり気にしなくてもいいです。
CDNを使うメリットとしては、例えば同じCDNアドレスを使っている人のサイトを読み込めば
データがキャッシュとして保存されるので、他のサイトでも使っている人がいれば読み込みが早くなります。
詳しく知りたい方は「CDNとは」で検索すればいっぱい出てきますのでそちらをご覧ください。
それでは読み込み設定は完了したので実際にスクリプトを書いて呼び出してみましょう。
遅延読込をするために画像タグに属性を追加
画像読み込みをするimgタグに画像遅延用のクラスとsrc属性ではなく、data-src属性に
画像のファイルパスを記載します。下記のように変更してください。
スクリプトの読み込みさえできていればどこの画像でもOKです。
<img src="image_address.jpg">上記の記述から下記の記述に変更してください。
コピペしてdawta-srcの部分だけ書き換えてもOKです。
画像のファイルパスは各自のファイルパスに変更してください。
<img class="lazyload" data-src="image_address.jpg">これで画像遅延読込の設定は完了です。
1つだけだとあまり変わらないかもしれないので
出来ればすべての画像に適用してください。
正規表現を使えば簡単に置換できますが
慣れていない人は時間がかかりますが手動でやりましょう。
画像以外もOK
外部から読み込んでくるタイプのメディアファイルなら
youtube等も遅延読込が可能になります。
もう一度ブログの読み込みスピードを計測してみる
全ての画像に適用したら、もう一度サイトのスピードを計測してみましょう。
キャッシュが残っている場合は変化が無いので、ブログのキャッシュプラグイン等を利用している場合はOFFにしてみましょう。
どうでしたか？
画像をいっぱい使っている人ほど、効果が発揮します。
逆に画像があまり多くない人は全然変化がないかもしれません。
画像が少ないのに点数が低すぎる場合はサイトの構造が悪いか
サーバー自体が激重の可能性が大です。
もしくはプラグインの入れ過ぎだと思います。
画像以外のスピードアップ方法は後日公開いたします。
画像でSEOをかけている人は注意！
Googleのクローラーは読み込みが完了するとサイト内をクロールします。
画像の遅延読込は、読み込み完了までの時間を短縮する分画像がクロールされないようです。
画像遅延をしてもクロールされるやり方はあるようなのですが
私は特に問題ないのでまだ検証していません。
もし画像ファイルでSEOをかけているような画像系ブログの場合は
遅延読込に関しては少し気を付けたほうがいいかもしれません。
──ブログ毎日更新は67日目。
技術系は結構考えて頭の中を整理して書かなきゃいけないので時間がかかりますね。
啓発系やその日あったことは勢いで書いていっているので技術系は何日かに分けて書いていくのがよさそうです。
後から見返したらこの言い回しはわかりづらいっていうのもわかりますから良い感じです。
それでは。
