今回はブログを作るツールであるWordpressの軽量化＆高速化について書こうと思います。
ブログを書いている方は非常に多いと思いますが、一言でブログと言っても実は色々と種類があります。
「アメブロ」や「はてなブログ」は無料ということもあり使っている人も多いでしょう。
Wordpressとはそれら無料ブログとは異なり、自分でレンタルサーバーなどを用意してそこにWordpressというブログ作成用のシステムを設置することで動作するものです。
つまり少なからずお金はかかるわけですが、無料ブログとは異なり自由度は高くなります。
WordPressはそのまま使っていても非常に便利なシステムなのですが、幾つかのポイントを押さえることでサイト表示自体を軽量化し、ブラウザで閲覧した時の表示を高速化することが出来ますのでご紹介したいと思います。
(ちなみに私の環境はSimplicity2とXserverでの結果です)
まずサイトの速度を測定しよう
Googleがサイトの速度と改善点を調べることの出来るツールを公開していますので、これを使いましょう。
「PageSpeedInsights」の名前で調べればすぐに見つかるはずです。
あとはURLを入力して分析のボタンを押せば簡単にサイトのスピードについて分析してくれます。
ちなみに以下の画像は私のサイトの分析結果です。
モバイルはまだまだではありますが、パソコンサイトについては96点になってくれたのでとりあえず満足です。
格安SIMの低速モードでも表示速度は早く、問題の無いレベルなのかなとは思っています。
ところで大体の場合下記の内容でいろいろと指摘がされます。
・画像を最適化する
・ブラウザのキャッシュを活用する
・サーバーの応答時間を短縮する
・スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
・JavaScript を縮小する
・圧縮を有効にする
・CSS を縮小する
・HTML を縮小する
・リンク先ページのリダイレクトを使用しない
・表示可能コンテンツの優先順位を決定する
比較的対応が簡単なものから難しいものまで含まれていますので、プラグインを上手く使って解決していきたいと思います。
私が実際に使っているプラグインについて
・Autoptimize
CSSコードおよび JavaScript コードの連結を圧縮してくれるものです。
・EWWW Image Optimizer
画像をアップロードするときに最適化してくれます。
また既にアップロード済みの画像についても最適化することが出来ます。
・Speed Up – JavaScript To Footer
JavaScriptをフッターで読み込むようにしてくれます。
表示速度の改善が期待出来ます。
後は.htaccessを適正化することで高速表示を進めます。
参考サイト
https://thk.kanzae.net/net/itc/t2286/
画像軽量化の必要性について
EWWW Image Optimizerを設定すれば仮に大きなデータをアップロードしてもある程度自動で縮小してくれます。
しかしそれだけでは完全ではなく、多くの場合が画像を縮小するようにGoogle先生から指摘されるはずです。
そこでアップロードする前に出来るだけ画像を小さくしておくことをオススメします。
小さくし過ぎると実際に表示するときに画像が粗くなりますのでほどほどにしましょう。
軽量化に適したツールもあるので、またご紹介したいと思います。
ホームページを表示する時に時間がかかるのは画像や広告などが大きく影響しています。
メールでサイズの大きい画像をそのまま送信すると時間がかかりますが、それをイメージしていただければわかりやすいと思います。
メールでも圧縮して小さくした状態で送信するとすぐに送ることが出来ますし、相手の受信も早くなります。
画像については実際に必要なサイズまでにとどめておき、画像サイズを軽量化することでページ表示の高速化が出来ます。
サイトを軽量化する理由について
サイトを軽量化することでブラウザでページを読み込んだ時の表示速度が向上されます。
反対に重たいページではそれだけ表示されることに時間がかかるわけです。
通信環境が高速化されているのでそこまで表示が遅いとは感じないかもしれませんが、スマートフォンなどで低速状態になっているとその違いが非常にわかりやすくなります。
また高速通信状態でもサイトが軽ければそれだけ読み込みで消費する通信量も少ないことを考えるとサイトが軽ければそれだけ閲覧者に適したサイトになると言えます。
追記です。
Autoptimizeの設定で「CSSのインライン化と遅延」を有効化することでモバイルの点数を大幅に向上させることが出来ました。
(パソコン版は少し下がってしまいましたが。)
CSSをインライン化することで読み込みの瞬間レイアウトが整えられていない状態で表示されますが、まぁ一瞬なので気にするほどでもないでしょう。
