みなさん、こんにちは!
ストレスフリーでやりがいのある仕事を探して、WebマーケティンをはじめたSHIORIです。
ブログの投稿が増えてきて、なんだかページが重たいので原因を調べてみたら、画像が重いことが判明しました!
1つずつ画像を圧縮するなんてめんどくさいと思った方!
はい!私もその一人です。
WordPressで簡単に5分でできる方法があったので、ご紹介します。
・サイトが重いから対策をしたい方
・画像の圧縮をすればSEO的にいいって聞いたけど、どうすればいいか分からない方
・1つずつやるのが面倒だから、ラクして一括でできる方法を知りたい方
そんな方の悩みを解決します。
WordPressの画面を圧縮して軽量化する方法
WordPressの画像を圧縮して軽量化する方法は、2種類あります。
Webp(ウェッピー)で画像の軽量化
1つ目の方法として、Googleが推奨しているWebp(ウェッピー)を使用することです。
こちらを使用することで、従来のファイル形式よりだいぶ軽量化できます。
従来の gif や jpg、png よりも軽量化することができますが、1画像ずつやらなければいけないので、手間と時間がかかってしまいます。
WordPress内で画像の軽量化
2つ目の方法として、WordPress内にプラグインを入れて軽量化する方法があります。
1画像ずつ圧縮する手間が省けたり、過去にアップした画像を一括で最適化出来たり、メリットが多いです。
しかし、ブログを始めたばかりだったり、設定したりしなければいけないので、初心者には難易度が少し高いという印象を持たれてしまうことが多いのです。
画像を軽量化するメリット
画像を軽量化するメリットとして、ページの読み込みスピードが早くなるとSEOの順位が上がりやすくなります。
SEO対策としては、ユーザーファーストの記事を書くことが条件です。
サイト内でページの読み込み速度が速い方がより、ユーザーファーストにも繋がります。
実際に、「ページの表示速度が3秒に落ちると32%、5秒に落ちると90%の読者が離脱する」というデータがあるように、どんなに良い記事を書いても見てもらえない可能性があるということです。
さらに、Googleは2018年に「ページの読み込み速度をモバイル検索の順位要素に使用する」という発表をしました。
それくらい、ページの表示速度は読者の満足度やGoogleの検索順位にも重要な要素になります。
なので、画像の軽量化はとても大事な項目です。
WordPressで簡単に写真を圧縮するプラグイン紹介
WordPressで利用できる写真を圧縮できるプラグインを紹介します。
- EWWWW Image Optimizer
- Tiny PNG
- Imagify
- Converter for Media
- Smush
どのプラグインも無料で使用できますが、WebP形式への変換も出来て利用者数も100万人以上と圧倒的に多い「EWWWW Image Optimizer」をご紹介します。
こちらは、インストールするだけで、プラグイン有効化以降にメディアにアップロードする画像だけではなく、既にWordPressのメディアにある画像の圧縮してくれます。
他のプラグインでは、圧縮可能な枚数が決まっていたり、既にあるメディアの画像は圧縮できなかったりするので、こちらのプラグインがおススメです。
→過去にアップした記事の画面圧縮方法を知りたい方はこちら
簡単5分でできるインストールから初期設定
インストール方法
それでは、「EWWWW Image Optimizer」のインストロールを行っていきましょう。
まずはWordPressのダッジュボードから、
「プラグイン」→「新規追加」とクリックしていきます。
右上の検索窓に「EWWW Image Optimizer」と入力すると上記のようにプラグインがヒットするはずです。
こちらの「今すぐインストール」をクリックしてプラグインをインストールします。
「EWWW Image Optimizer」と検索すると、「EWWW Image Optimizer Cloud」というのがヒットする場合があります。
Cloudの方は英語版で、低負荷に特化したプラグインです。
こちらは設定が英語版ですし、機能としては「EWWW Image Optimizer」で充分なので、こちらを説明していきます。
インストールが完了すると、上記のように有効化ボタンが表示されます。
有効化ボタンを押して、「EWWW Image Optimizer」を有効化にしましょう。
こちらでインストールは終了です。
初期設定方法
「EWWW Image Optimizer」はインストールして有効化するだけで画像圧縮機能が有効化されます。
しかし初期設定として、
- フロー形式の初期設定(「メタデータ削除」欄の確認)
- 「コンバージョンリンクを非表示」にチェックを入れる
この2点を行うことで、より画像サイズの低下に繋がります。
EWWW Image Optimizerの初期設定を行う(「メタデータ削除」欄の確認)
ダッシュボードの左メニューの、
「設定」→「EWWW Image Optimizer」とクリックしていきます。
すると上記のような画面に移動します。
ここではどのような形で初期設定を行うのか、フロー形式で回答して初期設定していくことになります。
「サイトの高速化」(Speed up your site)
にチェックを入れ
「今は無料モードのままにする」(Stick eith free mode for now)
を選択し、「次」をクリックします。
上記のような設定画面に移動するので、
幅と高さの上限を「0」に設定して「設定を保存」をクリックします。
他の項目は、そのままでOKです。
一応画面内の「メタデータを削除」にチェックが入っているか確認します。
もしチェックが入っていないのであればチェックを入れ、画面左下の「設定を保存」をクリックしてください。
こちらの「メタデータの削除」にチャックが入っていると、画面のメタデータを削除してくれます。
その結果、画面のファイルサイズをさらに小さくすることができるのです。
画面に付随しているデータのことなのだ!
「保存を完了」を押すと、上記のような画面に移動します。
「完了」をクリックすると、フロー型初期設定は完了です。
「コンバージョンリンクを非表示にする」にチェックを入れる
もう1度ダッシュボード左メニューの
「設定」→「EWWW Image Optimizer」
とクリックしていきます。
すると、上記のような設定画面に移行します。
ここで、「Enable Ludicrous Mode」クリックします。
その後、変換タブをクリックすると、上記画面に移動します。
ここで「変換リンクを非表示」にチェックを入れ、「変更を保存」をクリックします。
「変換リンクを非表示」にチェックを入れておかないと、画像の拡張子を勝手に変更する可能性があります。
その結果画像の質が勝手に下がるというデメリットがあるので、忘れずチェックを入れましょう。
アップロード済の画像を一括最適化する方法
WordPressのダッシュボードから
「メディア」→「一括最適化」
とクリックします。
「最適化されていない画像をスキャンする」をクリックして、最適化すべき画像を見つけ出します。
スキャンが完了すると、上記のような画面になるので、
「〇点の画像を最適化」
をクリックします。
一括最適化が完了すると、画面上部に「完了」と表示されます。
これで画面の一括最適化は完了です。
時間があるときにやるのがおススメです!
画像を変更する前と後との比較
ページの速さを実際に PageSpeed Insights を使ってスコアを測定してみました。
画像を圧縮するだけで、こんなに変わりました!
ぜひ、「Enable Ludicrous Mode」のプラグインを入れて、画像を圧縮してみてください。
まとめ
WordPressの無料プラグイン「EWWW Image Optimizer」を利用すれば、画像のファイルサイズを小さくできます。
その結果サイトの読み込み速度の向上に期待ができます。
「サイト速度を改善したい!」と考えるかたは、ぜひ入れてみてください。
それでも、携帯のスコアが悪い方は、こちらの記事参考にしてください。
【モバイルデータ速度改善】PageSpeed Insightsのモバイル数値を爆上げする方法