皆さんこんにちは。どんぶラッコです。
ある日突然、Googleからサイトのパフォーマンスに関するメールが届きました。
要するに、サイトのパフォーマンスがすごぶる悪いので、なんとかせえよというメールです。
現状を知る: Google PageSpeed Insights
まずはGoogleが提供するツールであるGoogle PageSpeed Insights でパフォーマンスを検証します。
使い方は簡単、調べたいURLを入力するだけです！
ちなみに弊社HPのモバイル表示におけるスコアがこちら。
じ..16…だと…
改善策を読んでいくと、
- 使用している画像の表示方法・サイズ
- CSS, JSの使い方
を見直すことで改善されそう。
ということで、今回は画像に絞った対応策をご紹介します！
Lazy Load プラグイン
LazyLoadとは、とりあえず文字情報を表示して、画像は後から読み込ませる方式のことです。
今回はこちらを使いました。
使用画像の軽量化
次に、使用している画像をPNGのまんまアップロードしていたので、画像サイズの減量を図ります。
今回使ったのはこちらのサイト。
大幅に減量できましたね！
ついでに、ファイル名も英数字に変更しておきます。
結果
この２つを実行するだけで、読み込みスコアが14ポイント改善されました！
これ以上スコアを改善するためには、現在使っているWordpressのテーマ自体をいじらねばならないため、ここで打ち止め。
WordPressのテーマを内製化したらまたその結果を書き込みますね♪
