エレメンターとはコーディングいらずで自由に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のプラグインは導入していて、今回設定を変更しただけなのですが、パフォーマンスが２パーセント、ストラクチャも４％改善されました。トータルのブロッキングタイムは上がってしまいました。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サービスとは、コンテンツ・デリバリー・ネットワークの略で、キャッシュを複数のサーバーで所有し、ユーザーがページにアクセスした時は、そのユーザーにとって最も物理的な距離が近いサーバーが応答するのでアクセスによる負荷を広く分散することができます。今回はやっていません。
最終
対策をした結果、ここまで早くなりました。
