WordPress・SANGO高速化のためにしたこと

このブログとは別のブログで、スピードテストが「モバイル90・パソコン99」という非常に良いスコアが出せた。

ラボデータ詳細に関して、スコア90の別サイトは下記のようになりオールグリーン。

スピードテストのスコアが低すぎる当ブログ

ひるがえって当ブログは、散々なスコア。モバイル14・パソコン45。別サイトでスコア改善ができたので、当ブログも放置せず高速化に取り組んだ際の実践記録。

当ブログの詳細データは、レッド多数。

別のスピード計測サイト「GTmetrix」でも確認したが、散々な結果。Eランク。

WordPressテーマSANGOでの高速化

このブログではWordPressのテーマとして「SANGO」を使っている。

高速化について調べていくと、SANGOに特化した高速化について書かれている記事を見つけた。

[sanko href="https://blog.oldno07.com/wordpress-sango-speed/" title="【爆速サンゴ計画】SANGOを高速化するカスタマイズ" site="マサオカブログラボ" target="_blank"]

別サイトでスピードテストのスコアが上げられたのも、この記事を見ながら順番に淡々と作業をしていったことで、徐々にスコアが上がっていった。

SANGOにはAllinONESEOpackを入れてはいけない

詳細は上記記事にあるが、OGPをSANGOで出力しているので、AllinONESEOpackでもOGP設定をしてしまうと重複して遅延の原因になるとのこと。

さっそくAllinONESEOpackを削除。サイトマップは「Google XML Sitemaps」プラグインで出力するように変更。GAのアナリティクスコードはSANGOのカスタマイズ設定内に登録するように変更。

以下、１つ施策を実施するごとに、PageSpeedInsightとGTmetrixでの計測結果を記載していく。

WPプラグイン「Autoptimize」をインストール

HTML・CSS・Javascriptのリソースを圧縮する。PageSpeedInsightの「使用していないCSSを削除・CSSの最小化・使用していないJavascriptの削除」あたりに効くものだと思われる。

３つにチェックを入れて、他はさわらず保存。

プラグイン「WP Fastest Cache」をインストール

ブラウザのキャッシュ活用で読み込みスピードを早くすることを狙う。

このページの上記にチェックを入れて保存。

WPプラグイン「Scripts To Footer」をインストール

レンダリングの邪魔になるhead内にあるものをフッターに持っていってくれる。

この３つのプラグインを入れることで、別サイトではみるみるうちにスコアが上がっていったが、当サイトはそうはいかなかった。

2011年から運営しているので、過去の残骸が邪魔している可能性が高い。

読み込みに時間が掛かっているのは画像データ

改めてPageSpeedInsightの下部にある対処法を確認。

画像の読み込みに時間が掛かっている。過去にあまり気にせずにアップした重い画像がひしめきあっている。

EWWW Image Optimizerの設定方法

画像圧縮するプラグイン EWWW Image Optimizer はインストール済だが設定の見直しを実施。

[sanko href="https://tabi-z.com/gazo-assuku-plugin" title="Compress JPEG & PNG imagesとEWWW Image Optimizerを比較！画像圧縮プラグインはどちらがおすすめ？" site="たびすた" target="_blank"]

この記事によると、リサイズ＞幅の上限「720」を入力。これを入れないと、ほぼ圧縮されない。

「リサイズ＞リサイズを無効化」にて、1枚の画像から複数サイズのリサイズ画像が生成されてしまっていることを再認識した。必要以上に生成されている。

過去に入れていたプラグイン「Simple Image Sizes」によって、複数サイズが出力されていたのでプラグインを無効化。

「設定＞メディア」の設定を変更

中サイズ：380　大サイズ：720。高さの上限は0にしておくことで、幅に合わせて可変になる。

サムネイルを0×0にしているが、テーマ「SANGO」で自動的にサムネイル160×160が自動生成されているので問題ない。

そして再度、この画面で不要な画像にチェックを入れて、無効化した。（これは今後アップする画像に適用される設定なので、過去の画像軽量化とは無関係だが、今後のためにしておく）

thumb-520、thumb-160は、SANGOによって自動生成されている画像。thumb-520がブログ記事一覧のサムネイル。thumb-160が、ウィジェットで新着記事を表示するときの小さなサムネイル。

リサイズ設定が終わり、EWWW Image Optimizerのトップに戻ると、データ収集をOKにすると「プレミアム圧縮化」が使えると案内が出ていた。試しに圧縮してみたいので、「無料のトライアルキーを取得します」をクリックした。

試しに圧縮してみたいので、「許可する」を押したが何も起こらない。よく見ると「無料のトライアルキーを取得します」と表示されていたのでクリックしたら、メールアドレスの入力と、よくわからない英文が出てきた。

「What is 5 plus seven ?」の意味がつかめなかったが、試しに「あ」と入力したら「incorrect answer」と出てきたのでピンときた。

なるほど、「５プラス７は？」と聞かれているのか。スパム防止のための質問だ。５＋７＝「１２」と入力したら、無事完了した。

直後にEWWW imageからメールでAPI Keyが届いて入力すると、成功と出た。

300画像だけプレミアム圧縮できるとあった。

「最適化されていない画像をスキャンする」をクリック。300画像しか圧縮できないが、833画像が最適化（圧縮）の対象と出た。不足しているが最適化はスタートできた。

と思ったら、300で止まった。

「クレジットが残っていない場合は購入してください」と出ていたので価格を確認してみる。

1画像につき0.002ドル。あと533画像なので、 1.066ドルでいい。だったら買おう。面倒だが登録を済ませて、

買おうと思ったら3ドルのパックだった。1ドルでは済まないが、まぁいいと重い購入。Paypalかクレジットカードで購入できる。

とりあえず300画像の圧縮が終わった段階を見ておこう。

結果が改善していなかったので購入したことを少し公開しながら、残り533画像の圧縮が完了。

EWWWでの画像圧縮は意味がなかったのだろうか...

PageSpeedInsightの改善すべき項目を改めて確認する。

どうやら遅延読み込みが必要なようだ。lazy load周りを確認する。

SANGOの高速化を確認して、設定にチェックを入れていなかった部分に入れる。

↓下記の設定に変更

設定＞表示設定で「1ページに表示する最大投稿数」が、なぜか「57」になっていた。多すぎるので「28」に変更。

この画面の中に、「遅延読み込みプラグイン（lazy load）」紹介ページがリンクされているので見てみた。

とりあえず、今までと違うことをしようと思い、一番上に出ている「Smush」をインストールしてみることにした。MARVELっぽい女性のイメージ画像。

「Smush – Compress, Image Optimizer, Lazy Load, WebP Images」を入れて、lazy load をONにした。

使っていないプラグインを削除する

「使用していない JavaScript を削除して、データ通信量を減らしてください」と出ている。

たしかに過去に入れたが、使っていないプラグイン・何の用途か不明なプラグインが多数あるので削除する。

まだ削除するプラグインは残っているが、いったんこの段階で計測。

短くなったのにスコアは下がった。不思議。続いて、プラグイン削除。

画像の圧縮と lazy load のプラグインに重複エラー

ここで管理画面にエラーが。

「EWWW Image Optimizer」と、先ほどlazy load のために入れた「Smush」が機能的に重複しているので正常に動かないかも知れませんよという警告メッセージが表示された（キャプチャを忘れたので画像はなし）

どちらかを外す必要がある可能性もあるので、片方ずつ外してPageSpeedInsightでスコアを確認した。

「Smush」のlazy load が効いていると考えて、「lazy load 単体」のプラグインを探した。

[sanko href="https://fukuro-press.com/best-wp-plugin-for-lazy-load/" title="画像の遅延読み込み系プラグインで一番有能なのはコレ！" site="Fukuro Press" target="_blank"]

「Lazy Loader」が一番良いという記事アリ。「a3 Lazy Load」は使わないほうが無難とも記載あり。

「Lazy Loader」は遅延読み込みする前に画像のサイズを計算し、中身がない元画像の大きさのダミー画像を作ってくれるとのことで、Cumulative Layout Shift（CLS）（位置ずれ）の影響も少なそう。

「Lazy Loader」の各項目の解説は下記記事に記載あり。

[sanko href="https://chiri-tsumo.com/lazy-loader/" title="遅延読み込みを実装し、サイトを高速化する【Lazy Loader】" site="ちりつもプレス" target="_blank"]

「Smush」を無効にして「Lazy Loader」を有効にしてみたがスコアが下がったので、もとに戻して、lazy load の役割は「Smash」に任せることに。

「EWWW Image Optimizer」と「Smush」のこの２つの組み合わせが最もスコアが高かったので、機能重複があるというエラーはそっと消しました。。

なぜか「EWWW Image Optimizer」に再度、圧縮候補が

おもむろに「EWWW Image Optimizer」を再度確認してみたら、上記で300＋533＝833画像の最適化を完了したはずなのに、再度、403枚が圧縮候補と表示されていたので実行。

合計1236画像の最適化が完了したので、スコア確認。

モバイルスコアが下がったのが不思議。パソコンスコアは50を越えた。さらには読み込み速度が大幅に短くなった。

さらにプラグインの削除を継続した結果

改めてプラグインの削除に戻り、さらに７つ削除した。

合計１４個のプラグインを削除。

YSlow Score がどんどん下がっていくので「YSlow Score」とは何なのか調べたら、YSlowというサイトのパフォーマンス計測ツールが算定したスコアのようです。

アイキャッチ画像を軽量化する

改めてPageSpeedInsightで改善できる項目を確認。「次世代フォーマットでの画像の配信」と書いてあるが、要はPNGは重い。JPGにしろ、ということだ。

思い当たるフシのあるPNGサムネイル画像を5枚、JPGに変換して、記事のアイキャッチ画像を差し替えた。

まとめ

ここまで実施したことをまとめます。

ビフォー（改善前）

最初のスコアは、こんな散々なスコアだったが、

結果としては、大幅にスコアアップできた。

アフター（改善施策後）

というわけで最初から比べると大幅に改善できたが、もう少し伸ばしたい。とはいえ、あとはGoogle Adsense関連のJavascriptのようなので、どこまで改善できるかは疑問。

ひとまず本日のWordPress・SANGO高速化は完了。

下記はメモ。必要と判断して削除せず残したプラグインリスト。

後日談：SEOが落ちたので１つ戻した

2020.8.17 に上記を実施し、数日間の経過を確認していたが、アクセスが減少した。つまり、検索順位が落ちた。

原因を探ったところ、SEO要素として影響しそうだと思い当たるのは「Table of Contents Plus」という記事の目次を表示するプラグインを消したことだ。

軽量化を優先して消してしまったが、やはりテキスト要素としても、ユーザビリティとしても「目次」はあったほうがいい。ということで、2020.8.22に、そのプラグインだけを戻した。

この状態でスピードテストをしてみたら、GTmetrixではスコアがあがっていた。

PageSpeedInsightは、パソコンだけ上がっていた。

プラグインを１つ戻したが、それほど影響がないどころか、スコアが上がっているものもあったので、良い傾向。これでアクセスも戻ってくれることを願う。