2022.05.09 2023.02.12

WordPressで作ったブログを軽量化したい！PageSpeed Indightsのスコアをあげたときの備忘録

アオリンゴ（管理人）

記事内に商品プロモーションを含む場合があります

こんにちは、アオリンゴ（@mama_aoringo）です。
せっかくWordpressでブログを作っても、読み込みが重いとユーザー離脱につながってしまったりストレスが多いためできるだけ表示が速くなるようにする必要があります。

今回、別で運営してるブログになりますが軽量化に挑戦してみたのでその備忘録になります。

現在のサイト表示速度を測定してみる

Googleが提供しているサービス「PageSpeed Insight」で計測した結果以下のようなスコアとなりました。

まだまだ問題点がありそうです。
何が表示を妨げているのかアドバイスもくれるので、それに従って改善をしていきます。

改善１）Google Site Kitを停止・削除

まずはWordPressプラグイン「Google SiteKit」を停止することにしました。ダッシュボードでGoogle各サービスとかんたんに連携できるしアクセスもざっくり確認できて、すごく便利なプラグインで残念すぎるんですが…そして再度計測してみました。

これだけで一気にモバイルの数値が＋20も高くなりました！

プラグイン「Google SiteKit」を停止したら、Googleアナリティクスとサーチコンソールは自分で再設定することを忘れてはいけません。

→Googleアナリティクスの設定方法はこちらで解説しています。

改善２）画像を軽くしてからアップロード

使ってる画像の多い・少ないに関わらず画像の軽量化は重要です。
まずは、使用しているjpg・png・gif画像自体のサイズを可能な限り軽量化してからアップロードして使用すること。その次に次世代メディア形式を利用することです。

私がこれまでに利用してきたことのある画像軽量化関連の方法を紹介します。

アップ前に画像サイズをダイエット

ご存知の方も多いサービスかと思いますが、Web上でかんたんに画像サイズを軽量化してくれるサービス「Tiny PNG」で画像を軽量化してからアップロードします。

スクリーンショットなど、わざわざPhotoshopなどの画像アプリケーションを開くまでもないような画像をアップしたいときに、1MB以上あるような画像でも一気にWeb仕様に変換されるので便利です。ちなみに、上のスクリーンショットを軽量化してみた結果が↓です。

一度アップロードして再度ダウンロードしないといけないので、少し手間はかかりますがPhotoshopのWeb用に保存した画像でもさらに軽くなるのでおすすめです。

改善３）すでにアップロードしている画像を軽量化

これからアップする画像を軽くすることはできました。
では、それまでにアップした記事やテーマに使用しているヘッダー画像やサイトロゴ画像も軽くします。

方法１：プラグイン「TinyPNG JPEG, PNG & WebP image compression」を使う

これは私が以前に利用していた方法です。
上記でも紹介したパンダのサービスの、Wordpressプラグインバージョンになります。

こちらをインストールして有効化。
これまでにアップしている画像をまとめてサイズダウンしてくれます。フリーで使えるのですが、1ヶ月にサイズダウンできる枚数が決まっています。そのため、すでに多くの記事があって画像が多い場合はかなり時間がかかる場合もあります。

また、これから画像をアップロード場合も、最適化してアップしてくれるのでとても便利で愛用していました。このプラグインの詳しい使い方は以下の記事をはじめ、いろいろあるので検索してみてください。（基本的に人任せで恐縮です…）[blogcard url=”https://junpei-sugiyama.com/tinypng-plugin/” target=”_blank”]

方法２：WebP画像に変換する

私のブログでは、現在はこちらの方法を利用しています。

WebPとは？

WebPとは、Googleが開発している画像フォーマットであり下記のような特徴があります。

非可逆圧縮（jpegと同じ）
画像の圧縮率が高い（超軽量）
背景透過に対応
アニメーション（gif等）に対応

導入方法

私は「WebP Converter for Media」というプラグインを利用しています。

インストールして有効化、かんたんな設定のあと、一気にすでにアップしてる画像を次世代形式に変換してくれます。また、WebP非対応ブラウザに対しても配慮して対応してくれる機能になってるのでとても便利！

このプラグインの設定方法や使い方につては下記の記事を参考にさせていただきました！[blogcard url=”https://tcd-theme.com/2021/04/webp-converter-for-media.html” target=”_blank”]

ちなみに、当ブログではじめて導入したときは２分ほど変換２時間がかかりましたが以下のように、41.37MBと大きくサイズダウンできたようです。

ちなみに、はじめにスコアを測定したブログでは既にこのプラグインを導入したあとだったので、数値の改善率がここで出せません、すみません(T_T)

改善３）Wordpressを超高速化プラグインを使う

私のように、Webに関して難しいことはあまりわからないスキルレベルの場合は最終的に優秀なプラグインに頼るほかありません。Wordpressを超高速化してくれる優秀プラグイン「WP Rocket」です。

このプラグインは、有料なので、わたしはまだ導入してませんが今後検討しているところです。

PageSpeed Insightsの改善項目でよくでてくる「レンダリングを妨げるリソースの除外」とかがすごく改善されるらしいのです。すごく…って素人丸出しで恥ずかしすぎるんですが、そうらしいのです。

料金は、１サイトの場合は年間49ドルです。
次の更新からは30％OFFの価格になるようです。がんがん収益めざしてるブログなら導入ありだと思うんですが、私のようになかば趣味でやってるレベルだと、ちょっと考えてしまいます。

このプラグインについては下記などいろいろ紹介されてるので、Wordpressでつくったサイトの表示スピードに悩まれている方はぜひ参考にしてみてくださいね。[blogcard url=”https://chiyo-blog.com/wp-rocket-setting/” target=”_blank”]