お役立ち情報

【WordPress】Webのパフォーマンスを向上 その1 画像の仕様を見直そう!【お役立ちサイト・プラグイン】

皆さんこんにちは。どんぶラッコです。

ある日突然、Googleからサイトのパフォーマンスに関するメールが届きました。

要するに、サイトのパフォーマンスがすごぶる悪いので、なんとかせえよというメールです。

現状を知る: Google PageSpeed Insights

まずはGoogleが提供するツールであるGoogle PageSpeed Insights でパフォーマンスを検証します。

使い方は簡単、調べたいURLを入力するだけです!

ちなみに弊社HPのモバイル表示におけるスコアがこちら。

じ..16…だと…

改善策を読んでいくと、

  • 使用している画像の表示方法・サイズ
  • CSS, JSの使い方

を見直すことで改善されそう。

ということで、今回は画像に絞った対応策をご紹介します!

Lazy Load プラグイン

LazyLoadとは、とりあえず文字情報を表示して、画像は後から読み込ませる方式のことです。

今回はこちらを使いました。

使用画像の軽量化

次に、使用している画像をPNGのまんまアップロードしていたので、画像サイズの減量を図ります。

今回使ったのはこちらのサイト。

大幅に減量できましたね!

ついでに、ファイル名も英数字に変更しておきます。

結果

この2つを実行するだけで、読み込みスコアが14ポイント改善されました!

これ以上スコアを改善するためには、現在使っているWordpressのテーマ自体をいじらねばならないため、ここで打ち止め。

WordPressのテーマを内製化したらまたその結果を書き込みますね♪