【WordPress高速化】3倍速く「Jetpack削除」WebPまだ不要

高速化で試行錯誤した

得られた結論は3つ。
・Jpeg⇒WebP化はまだ早いかも
・Jetpackを削除したら大幅に速度改善
・サムネイルの再生成は重要だった

PageSpeed Insightsでモバイルのスコアが
悪かったのでいろいろやってみた結果を示す。

オレは試行錯誤やら画像生成・削除やら
バックアップの復元やらで2日無駄にした。
この記事を読んだ皆さんが
無駄な時間を使わずに済めば、幸いである。

WebPを導入


PageSpeed Insightsで測定。
モバイルのスコアが悪い……
(PCの方は70くらいで悪くない)

Google先生によると、
PageSpeed Insightsは「モバイルに厳しい」らしい。

自分のスマホでサイトを確認しても、
そんなに遅くは感じないが、
なんだか気分がスッキリしない。

もうちょっと良いスコアが欲しい。
原因は何だろうか?


改善項目にて、
「次世代フォーマットでの画像の配信」が必要らしい。
Jpeg画像の次世代規格といえば、「WebP」である。

そこで、
サイトの画像をWebP化することにした。

WebP(ウェッピー)とは?

Googleが開発した次世代の画像規格であり、
ファイルの拡張子は「.webp」である。

トラフィック量軽減と表示速度短縮を目的に
開発されている。
Webページの画像読み込みを向上させるので、
モバイルに強い。

要するに、Jpegより「軽い」画像になる。

EWWW Image Optimizer


プラグインを使って、
今あるJpegからWebPを生成する。
オリジナル画像だけでなく、
サムネイル画像にもすべてWebPが生成される。

サムネイルを含めると何万枚も画像があるので、
EWWWで1時間以上かかった。

おかげで、
画像の数が2倍近くになってしまった。

LiteSpeed Cache


プラグインでお手軽に
Webp対応ブラウザ、非対応ブラウザに合わせて
Jpeg・WebPを切り替えられる。
高度なオプションを表示して
メディアタブの「WebP画像への置換」をオンするだけ。

これで.htaccessが編集され、
WebP対応ブラウザのみ反映する設定になる。

自分で.htaacessを編集してもいいが、
もともとこのプラグインを入れている人は
この方がラク。

WebP反映を確認


ちゃんとWebPに切り替わっているのか
わかりにくい。

Chrome(WebP対応ブラウザ)で
自分のサイトを表示する。
ドラッグドロップでデスクトップに
画像をコピーした。

サイトに反映されている画像が
Jpegでなく、WebPであることを確認した。

速度測定をしてみよう。
次世代規格の威力を見せてもらおう!

PageSpeed Insights


ほとんど効果なし……

おまけに、
画像の軽量化も大したことない。
10~20%軽くなっただけ。
1枚25KBの画像が20KBになっても
あまりアリガタ味を感じない。

当然、WebP化すれば、
Jpegと同じ数だけ画像が増えてしまう。
ワードプレスのバックアップの容量が
1.7倍くらい大きくなってしまった。

オレのサイトは画像が多いので、
これは痛い……

まだWebP化は不要

まだ対応ブラウザが少ない。
Chrome ・ Opera・火狐だけ。
肝心のIEとsafariがまだ未対応。

ということは、
相変わらずJpegは必要であり、
画像の数が2倍になってしまう。

「最適化したJpeg」と「WebP」では、
ほぼ読み込み速度に変化なかった。
現時点では、「あまり効果ない」と感じた。

まったく効果がないわけではなさそうだが、
画像の数を倍にしてまでやる価値を感じなかった。

1枚1MB・2MBするような大きな画像を
そのままアップしまくるサイトならば、
多少の効果はあるかもしれないが……
そんな人はよほどの初心者か、
逆にあえてそれをやる上級者か、
いずれにせよ少数派であろう。

Webp化は見送り

せっかく生成したWebPだが、
全削除することにした。

ほぼすべてのブラウザがWebP対応して、
Jpegを全削除してもいい状態になったら
WebP化することとする。

他に手はないものか……

プラグインをいじる

改善項目二番手の
「オフスクリーン画像の遅延読み込み」を改善してみる。
lazy loadをa3 lazy laodに変えたり、
いろいろ設定を変えたりした。

さらに、
いろいろなプラグインを停止したり
設定を変えたりしたが、ほとんど効果なし。
もはや打つ手ナシ。

しかも追い討ちをかけるように、
ナゾの不具合発生。
もう最悪……

ナゾの不具合が……

カルーセルやランキング画像が
所々歯抜けになってしまった。

設定はすべて元に戻したはずなんだが……
原因がわからん。
困った……

しかし、
この現象で逆に救われることになる。

Jetpackを削除


ネットでいろいろ調べたら
どうやらJetpackが悪さをしているらしい。
停止したら、歯抜けが改善した。
よかったよかった。

Jetpackは多機能すぎて、
よくわからないプラグインであった。
いろんなサイトで勧められていたから
なんとなく導入していた。
ソッコーでプラグイン削除。

なんとなく速度を測定したみたら……
思わぬ効果が表れた!

PageSpeed Insights


モバイルのスコアが大幅にマシになった!
これは想定外のうれしい効果。

Jetpackによって何かが遅くなっていたらしい。
コイツのせいで画像は歯抜けになるし……
やっぱりプラグインは「明確な目的」が
あるものだけに絞ったほうがいい。

Search Console


クロールの統計を見る。
ページのダウンロード時間(ミリ秒)で確認。
読み込み時間が約半分まで減少した。
効果はテキメンである。

サムネイル削除

まだ速くなるだろうか?
画像の数が数万もあるのが影響しているのだろうか?

WordPressはサムネイルがなくとも、
代替で画像を表示するらしいので、
欲張ってサムネイルを全削除してみた。

吉と出るか、凶と出るか……

DNUIプラグインを導入


使っていない画像を選択・削除できるプラグイン。
最終更新が2年前とやや不安だが
思い切って使ってみる。


1つのオリジナル画像に
7つのサムネイルが生成されている。
これが全部「not used」となっている。

思い切って全部削除してみよう。
だいぶスッキリするはず!

何時間もかかったが、頑張って削除した。
ところが……

また遅くなってしまった


ページのダウンロード時間(ミリ秒)が
倍くらいに増加してしまった。
要するに、
元に戻ってしまった。

実際にサイトを表示させてみると、
なんかモッサリしている。
サムネイルの代替画像を表示するのに
モタついているようだ。

いちいち大きさを変えて表示するのは
時間を食うようだ。
考えてみれば、当たり前のこと。

さらに、また不具合が……

また歯抜けに!

今度は4コマ画像が歯抜けになってしまった……
いちいち全記事を確認するのは膨大な時間がかかる。
完全にオワッタ。
もう手の施しようがない。

一体どこが「not used」なのか……
このプラグインで全削除すると、
ロクなことがない。

でも、まったく焦る必要はない。

Broken Link Checker

リンクエラーになるので把握することは可能。
ただし、検出後は手作業で修正が大変である。

リストア

バックアップのリストアをして復活させた。
バックアップの重要性がわかる瞬間だ。
リストアに1時間くらいかかるが、
仕込んで昼メシでも食いに行けばいい。

せっかくだから、WebP化前の状態に戻す。
これで余分なWebPファイルも消えた。
バックアップファイルが元通りに軽くなった。

その分、WebP化後の作業が無駄になってしまった。
2日分の作業を、やり直さないといけない。
でも元ファイルは手元にある。
面倒くさいけど、まぁいいや。

元にもどった


Jetpack削除直後の速度に改善された。

テーマを変更したときに
Regenerate Thumbnailsで1時間以上かけて
サムネイルの再生成をしたのを思い出す。
あの時は画像の数が「ケタ違いに」増えて
大丈夫か?と思ったが……
その効果を今、実感した。

PageSpeed Insights

深刻なほど悪くないが、
まだ改善余地がありそうなスコアである。

サーバー応答時間


「サーバーの応答時間の短縮」が課題である。

今使ってるサーバーは古いらしいので、
高スペックの新サーバー移行を申し込んだ。

新サーバーへ


クロールの統計によると、
目に見えて改善されている。

Jetpack削除前と比べて、
ページのダウンロード時間は
1200⇒400に短縮した。

およそ3倍の速度になった計算だ。

PageSpeed Insights

PCスコアは伸びたが、
モバイルがパッとしない……

サーバーの応答時間は改善された。
特に問題を感じないので、
このまま様子を見ることにした。

感覚的には同じ

実際にスマホを手に取って
ブラウザでページを読んでみる。

新サーバーになったから、
スコアが改善されたから、といっても
読み込み速度に感覚的な変化を感じない。
3倍速くなったとも感じない。

PageSpeed Insightsは
モバイルに厳しいらしいので、
神経質になる必要はなさそうだ。

 



コメント

error:Content is protected !!