突如本題ですが
webサイトの表示速度の改善のお話です。
表示速度については
これまでも何回か触れています。
↑タイトルそのまんま
表示速度が速いといいよ、ということと
遅い場合の改善情報を得る方法
↑これを書いた後に状況がだいぶ変わって
僕のサイトはもう1位に出てきていませんが
当時1位だったのは速度の影響だと思うな〜
とある工務店さんのwebサイトで
内容もデザインもよくできているけれど
あえて言えば表示速度が遅い
そんなサイトがありました。
僕が感じるだけでなくて
お客様からも
ページがなかなか表示されない
なんていうお話をいただいていたそうで
(言ってくれるお客様は貴重ですね！
大抵は黙って去ってしまう)
「なんとかなりませんか？」と。
自分で作ったサイトではないのですが
色々あってお引き受けさせていただきました。
工務店のサイトにもよく使われる
wordpressで作られているサイトで
問題点は大きくは2つ
画像のファイルサイズが大きい
フル画面で綺麗な写真を使う場合
ある程度やむを得ないところはあります。
ですが、写真が増えれば増えただけ
どんどんページの表示が遅くなってしまいます。
サーバーが遅い
ここはぼやかしても仕方ないので
はっきり書いちゃうと
「さくらインターネット」に収容されていました。
さくらは大手レンタルサーバーですが
どうも外れサーバーが多い印象で
外れに当たると表示速度がかなり遅くなります。
サーバー移転するのが
一番効果がありそうなのですが
時間も手間もかかってしまうので
今回はサーバーはそのままにして
画像を早く表示させる対処をしました。
手をつけたのは大きく分けて2点
画像のWebP(ウェッピー)化
と
キャッシュの導入
WebPというのは
jpg、pngのような画像フォーマットの一つです。
jpg以上にファイルサイズを小さくできて
劣化もあまりありません。
ただ、古〜いブラウザだと対応していません。
ですので、その辺りの処理もしてあげる必要があります。
ここでは詳しく触れませんが
今回のケースではすでに
「EWWW Image Optimizer」というプラグインが
導入されていたので、これを利用しました。
このプラグインは
アップロードした画像の解像度を揃えてくれたり
(無駄にデカい画像をちょうどいい大きさにできる)
EXIF情報を削除してくれるので位置情報の漏洩が防げたり
と便利なのですが
さらに、jpgなどの画像をWebPに変換して
表示する機能もついています。
元の画像にもよりますが元のjpgより
3割〜4割ぐらいファイルサイズが小さくなります。
昨今は大きい画像をたくさん使うサイトも多く
そうなると3割小さい、というだけで
だいぶ読み込みが速くなりました。
もう一点、キャッシュの導入ですが
これは結構危険を伴います。
キャッシュというのは
いちいちサーバーからデータを取り出さず
どこかに溜まっている情報を見ることで
表示速度を速くする仕掛けですが
更新された情報を取り損ねて
古いままの情報が出てしまったりとか
他にもおかしな挙動をすることがあります。
ですので、これは慎重に導入しないといけません。
今回のケースでは「WP Fastest Cache」を使いました。
キャッシュプラグインなど
使わずに済めばそれに越したことはないですが
今回のケースではサーバーの速度が遅いこともあり
導入しました。
おかげさまで表示速度は
まずまず改善されたようで
めでたしめでたし
と言いたいところですが
実はとんでもないトラブルが
待ち構えていたのです…
というのはまた改めて
キャッシュの方はデメリットが上回る場合もあるので
一概に言えませんが
WebP化は現時点ではメリットの方が大きい
と判断しています。
なんかサイトが遅いなあ〜という場合で
画像のWebP化をしていない場合は
ぜひ実施することをお勧めします。
(web制作会社に言えば大抵はやってくれるはず)
大切なのは中身の方ですが
遅いより速い方が絶対いいので！
