プログラミング未経験者の備忘録

ノンプログラマーが社内SEになったのでイチからプログラミングを勉強し始めました!

WordPressの表示速度改善にはプラグインで簡単に対応

先日から作っているポータルサイトWordPressで構築しています。

長期的な運用となるので先にサイトのバックグラウンドのシステム面だけはしっかりと今から作って行こうと思い、いくつか設定してました。

f:id:su3se:20190609093846p:plain

今の段階だとコンテンツも少ないのでそこまで重いなって感じにはなってませんが、表示速度を「PageSpeed Insights」で計測してみたところこのような結果になりました。

WordPress最適化の結果について

今回行った方法による結果を先に出しておきます。

最適化前

f:id:su3se:20190609094320p:plain

最適化後

f:id:su3se:20190609094342p:plain

このように約30%ほど改善しています。

ちなみに残りの4%はおそらくレンタルサーバーの性能です。

f:id:su3se:20190609094542p:plain

何とは言わないけど激安のクソ鯖だwww

今回行った改善策について

2つのプラグインでほとんどが改善しました。

Autoptimize

BJ Lazy Load

 

HTML・CSSJavaScriptを圧縮する「Autoptimize」プラグイン

Autoptimizeはソースコードをごにょごにょしてくれるプラグインです。

WordPressの表示は毎回ソースコードと画像を読み込んで表示されていきます。この時にソースコードをくっつけたり不要な物を削ってくれたりして圧縮して読み込みやすく最適化するのを手助けしてくれるプラグインだと思っておけば良いと思います。

f:id:su3se:20190609100054p:plain

これらを最適化出来ます

片っ端からチェックして全機能ONとかにするとWordPressのテーマや他のプラグインなどの相性によっては表示がおかしくなったりもするので先にバックアップを取ったり

1つずつ表示を確認しながらチェックをしていくなどして一番最適な設定をそれぞれのサイトで探していくと良いと思います。

画像を表示されているところ以外を遅延させる「BJ Lazy Load」

通常であればページに設定されている画像をすべて読み込んでページ移換完了となりますが、画像パーツが増えて行くとすべて読み込まれるまで待っているとそれだけで表示速度が遅くなってしまいます。かといって画像を一切使わないサイトというのも味気ないですから画像コンテンツは絶対使う部分ですよね。この画像に関して操作するプラグインで、はじめに表示されている部分だけ画像を呼び出し、それ以外の部分の画像パーツの読み込みを後回しにしてページ移換を完了させるようにしてくれるのが「BJ Lazy Load」というWordPressのオフィシャルプラグインです。

f:id:su3se:20190609101410p:plain

今回追加したタイミングではWordPressの最新バージョンとの互換性の整合が取れて内容で警告が出ていましたが大丈夫でした。

(2019.06.09時点:WordPress 5.1.1:最新Var.5.2.1)

片っ端からYESにしておけばOK!

f:id:su3se:20190609101805p:plain

まとめ

今回測定したサイトに関して、表示速度の計測では二つのプラグインだけで30%ほど改善しています。しかし今後、長期間運営して行った際には、もっと改善するポイントが出てくるのでゴミの処理だったりデータベース系の内容やソースを直でイジっていたりもしています。それについてはまた改めて記事を書いていこうと思っています。

久しぶりにWordPressを触りましたがWordPressプラグインのバージョンも把握している時よりもかなり上がっていたり新しいプラグインも有ったりして沢山新しい発見もありました。WordPressはテーマやプラグインごとに相性があるし、バージョン間でうまくいったりいかなかったり結構めんどくさいヤツなので半分はワクワクドキドキ、もう半分はおっかなびっくりしながら色々試しています。

 

PS.

コンテンツ管理システムとしては優秀なツールだと思うんですけど長期的な保守に関してはぶっちゃけめんどくさいですよね。セキュリティも結構貧弱で注意していないと簡単にやられるしwww