◆当ページにはプロモーションが含まれています

お役立ち情報

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

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

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

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

現状を知る: Google PageSpeed Insights

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

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

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

じ..16…だと…

改善策を読んでいくと、

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

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

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

Lazy Load プラグイン

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

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

使用画像の軽量化

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

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

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

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

結果

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

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

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

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です