ウェブサイトの高速化(WordPress)

エレメンターとはコーディングいらずで自由にWebサイトデザインする事が出来るワードプレスのプラグインです。

サイトのスピードチェックを行います

  • GT metrix
  • PageSpeed Insights
  • Pingdom

GT metrix

カナダに本社を置くGT.netという企業による、サイトの速度パフォーマンスを無料でテストできるサービスです。テストサーバーへ情報が行き、それが戻ってくる速度を測定してくださいます。キャッシュの関係で2度目のテスト結果は良くなります。キャッシュの削除=>
https://support.google.com/accounts/answer/32050?hl=ja&co=GENIE.Platform%3DDesktop

今回のサイト、対策前はこちらです。

PageSpeed Insights

Googleによるサイトの速度測定のサイトです。モバイル、デスクトップともにスコアを調べてもらえます。

ワードプレスの高速化対応

  • ソースコードの圧縮
  • 画像の圧縮
  • CDNサービスを使う

Autoptimize/ソースコードの圧縮

Autoptimizeのプラグインは、WordPressのソースコードを圧縮して高速化してくれます。HTML・CSS・JavaScriptから改行やスペースを削除などで表示速度を大幅に高速化できます。

こちらのサイトを拝見しながら最適化していきました。
https://blog-bootcamp.jp/start/wordpress-autoptimize/

もともとAutoptimizeのプラグインは導入していて、今回設定を変更しただけなのですが、パフォーマンスが2パーセント、ストラクチャも4%改善されました。トータルのブロッキングタイムは上がってしまいました。GTメトリックスは毎回の誤差も多いので、今回時間がかかってしまったのかもしれません。

画像を圧縮

EWWW Image Optimizerを使用していたのですが、PHPを更新していない関係で対応してもらえなくなり、別のプラグインを検討する必要がでてしまいました。クライアントのアドレスで登録するか私のアドレスで登録するかなど面倒です。結局Smashというプラグインを使用しました。無料版では一度に50枚の画像を圧縮できます

画像の圧縮は、一般的なブログに使う画像のサイズの横幅800px程度の画像であれば、40KB〜70KBくらいが目安です。

ファイル形式としては一番軽くなるのはJPEGです。ただ画質が劣化を考えて、写真の画像はJPEGで、イラストの画像はPNGで圧縮しましょう。

  • Smush
  • Compress JPEG & PNG images 要会員登録
  • Imagify (要会員登録)

Smashの使用はこちらのサイトを参考にさせていただきました。https://wordpress.vogue.tokyo/smush
今回は300枚の画像で369.7 KB圧縮できたそうです。

お!Aに戻りました。キャッシュを消してもう一度。

ぐぬぬ。GTメトリック酢の構造を見ると、Avoid chaining critical requestsに改善の余地があるようです。

CDNサービスを使う

クラウドフレアにて無料で使用することができます。

CDNサービスとは、コンテンツ・デリバリー・ネットワークの略で、キャッシュを複数のサーバーで所有し、ユーザーがページにアクセスした時は、そのユーザーにとって最も物理的な距離が近いサーバーが応答するのでアクセスによる負荷を広く分散することができます。今回はやっていません。

すぐできる!CloudFlare の設定方法
CloudFlareはWordPressサイトの表示速度の高速化に大いに役立つサービスだ。 しかも設定は簡単で次の3つを行うだけで良い。 CloudFlare 無料プランの設定 ネームサーバーの設定変更 WordPres

最終

対策をした結果、ここまで早くなりました。