サイトの読み込みスピードを速くするには
僕がサイトスピードを改善するためにしたことは、誰でもできる簡単なことだけです。
ですがこれだけで驚くほどパフォーマンスが向上したのです。
具体的にはこう。
プラグインでしたこと
- 画像の圧縮
- 画像の遅延表示
- cssなどコードの最適化
php編集でしたこと
- 余計な文字の取り込みを改善
これだけです。
僕の場合は特に「画像表示の遅延」と「cssコードの最適化」をすることで数値を改善することができました！
「phpの編集」ですが、ほんの少しの底上げにしかならないので、多少知識のある人が実験程度にやるぐらいでいいと思います。
それよりも「プラグイン」でほとんど解決できてしまので、そっちを進めていきましょう。
画像を圧縮
まずは画像の圧縮化ですね。
これ、やるかやらないかでかなり変わります。
記事を書く時ほとんどの人が画像を使うと思うんですけど、意外とサイズが大きいままだったりします。
そこで、画像圧縮プラグイン「EWWW image optimizer」を使います。
使い方
- 「EWWW image optimizer」をインストール
- ワードプレスの左「メディア」→「一括最適化」
画像の遅延
次に画像の遅延です。
どういうことかわかりづらいと思うので説明します。
画像は圧縮されてもまだある程度サイズが大きいんです。
なのでサイトを開いたとき「画像の読み込みだけを遅らせる」ことができればいいですよね？
それを可能にするのが、「A3 Lazy Load」というプラグインです。
使い方
- 「A5 Lazy Load」をインストール
- 「プラグイン」→「A5 Lazy Loadのsetting」→「Image Load Threshold」の数値を400へ変更
cssなどのコード最適化
最後にコードの最適化についてです。
最適化していないと「不要なコードや重複しているコード」によって読み込みが遅くなってしまうということです。
そこで、不要なコードを自動で書き換えてくれるプラグイン「Autoptimize」を使います。
使い方は簡単で、
こんな感じでセッティングをしています。
真ん中あたりにある「java scriptのオプション」にチェックを入れてないのは、先ほど紹介した「a3 lazy load」と相性が悪かったからです。
ここにチェックを入れたまま遅延読み込みプラグイン使うと、「画像」が表示されなくなってしまったんですよね。
なのでここはoffにしていますが、サイトスピードに影響はありませんでしした。（僕のワードプレスでは）
function.php
ここでは主に、「無駄な文字の読み込み」と「無駄な動きの読み込み」をさせないように、function phpをいじりました。
この方の記事を参考にしました。