サイトスピードを改善したい…
どうやったら、画像を全てWebPにできるの…
こんな悩み・疑問を持っていないでしょうか?
結論、サイトスピードは、SEO(検索エンジン最適化)において非常に大切です。
なぜなら、サイトスピードは、ユーザビリティと密接な関係があるからです。
たとえば、あるサイトにアクセスしても、ダウンロードするのに時間がかかったら、「なげーよ!!!」とイライラしますよね?
このように、サイトスピードが長いと、それだけユーザーにストレスを与えてしまうことになるので、検索エンジンは、そのサイトの記事のランキングを下げようとするのです。
では、どうすれば、サイトスピードを上げることができるのでしょうか?
結論、サイト内の画像フォーマットをWebP(ウェッピー)に変換しましょう!
う?WebP(ウェッピー)ってなに?…
というわけで本日は、
- WebP(ウェッピー)とは
- サイトスピードを調べる方法
- EWWW Image Optimizerの登録方法と使い方
- WebP(ウェッピー)に一括最適化する方法
- EWWW Image Optimizerによるオータニの成果
というテーマでブログを執筆していこうと思います。
\\おすすめブログテーマ//
目次
WebP(ウェッピー)とは
Googleが開発した次世代の画像フォーマット
世の中には、JPEGやPNG、GIFなど様々な画像フォーマットが存在しますが、WebP(ウェッピー)は、非常に軽量化された画像フォーマットになります。
つまり、サイトスピードを上げることに貢献してくれる画像フォーマットなのです。
WebP(ウェッピー)は最強!
WebP(ウェッピー)に変換することで、JPEGだと24~35%、PNGだと26%も容量を小さくすることができます。
参照:https://developers.google.com/speed/webp/
つまり、WebP(ウェッピー)に変換することで、ダウンロードにかかる時間を省くことができるので、ユーザビリティが向上するというわけです。
WebP(ウェッピー)とブラウザの関係
WebP(ウェッピー)は、JPEGやPNGなどと比べると、比較的新しいフォーマットであったため、対応しているブラウザがあまり多くありませんでした。
ブラウザ=Chrom、Safari、Firefoxなど
つまり、ユーザーがWebP(ウェッピー)に対応していないブラウザでサイトを閲覧した場合、画像を見ることができなかったのです。
しかし、データによると、昨今ではWebP(ウェッピー)に対応したブラウザがどんどん増えているようです。
(世界のブラウザの78%がWebPに対応しているらしい)
WebP(ウェッピー)とSafari
実は、今までSafari(iPhoneのデフォルトブラウザ)は、WebP(ウェッピー)に対応していないという状況でした。
日本のスマホユーザーの60%がiPhoneユーザーなので、これは非常に深刻ですよね。。。
しかし、2020年にSafariが、WebP(ウェッピー)をサポートしたことにより、多くのサイト運営者がWebP(ウェッピー)に変換するようになりました。
つまり、今までサイト運営者は、JPEGやPNGではなく、WebP(ウェッピー)を使いたかったけど、Safariが対応していないために、使えなかったんですよね。
サイトスピードを調べる
しかし、どうやってサイトスピードを調べればいいのでしょうか?
結論:PageSpeed Insightsを使う
使い方は非常に簡単です。
まずは、検索窓にサイトのURLを入力しましょう。
すると、サイトスピードが0~100で表示されます。
- 0~49=悪い
- 50~89=良い
- 90~100=かなり良い
改善できる項目
サイトスピードを表示してから、画面を下にスクロールすると、「改善できる項目」という項目が表示されます。
その中の、「次世代フォーマットでの画像を配信」という項目があるのですが、
これはサイトに添付してある画像の容量が大きいために表示される項目です。
なので、サイト内のJPEG、PNG画像をWebP(ウェッピー)に変換して、すぐに改善しましょう。
EWWW Image Optimizerとは
質を落とすことなく、画像を圧縮してくれるプラグイン
EWWW Image Optimizerのメリット
EWWW Image Optimizerには下記の2つのメリットがあります。
- サイト内の画像容量を一括で圧縮
- 自動で、追加した画像容量を圧縮
もちろん、上記2つはメインの機能で、
サイト内の画像をWebP(ウェッピー)にしてくれたり、追加した画像を自動でWebP(ウェッピー)にしてくれる機能も搭載されてあります。
EWWW Image Optimizerさえれば、サイトの画像容量に関する悩みは全て解決します!
EWWW Image Optimizerをインストールする
インストール方法は、かなり簡単です。
この記事を読んでいる人は、WordPress初心者ではないハズなので、簡単に下に記しておきますね。
WordPressの編集画面>プラグイン>新規追加>検索窓に「EWWW Image Optimizer」と検索>今すぐインストール>有効
EWWW Image Optimizerの設定
では、インストールし終わったら、初期設定していきましょう。
設定画面へは、下記の手順でいきます。
WordPressの編集画面>設定>EWWW Image Optimizer
すると、上記のような画面に移ります。
設定項目
結論、設定する項目は2つだけです。
- 基本
- 変換
基本
「メタデータを削除」という項目にチェックを入れておきましょう。
ここにチェックが入っていると、画像に含まれるメタデータ(日時、ファイルタイプ、ファイルサイズなど)を削ぎ落として、容量を小さくしてくれます。
サイトで画像を使う際は、メタデータは必要ありませんので、ここにはチェックを入れておきましょう。
変換
変換リンクを非表示という項目にチェックを入れておきましょう。
ここにチェックが入っていないと、サイト管理者(あなた)以外のユーザーが、
たとえば、「JPEG→PNG」や「PNG→JPEG」と変換するためのリンクが表示されてしまいます。
なので、ここはチェックを入れておくことをオススメします。
以上で、EWWW Image Optimizerの基本的な設定は終わりになります!
EWWW Image Optimizerの使い方
EWWW Image Optimizerの使い方は下記の2つです。
- 追加する画像の圧縮
- サイト内の画像一括圧縮
使い方1:追加する画像の圧縮
これについては基本的に何もする必要はありません。
と言うのも、画像をサイトに追加する時に、自動的に画像を圧縮してくれるからです。
なので、EWWW Image Optimizerを有効にしていれば問題ありません。
使い方2:サイト内の画像を一括圧縮
サイト内の画像の一括圧縮は下記の手順で行います。
WordPressの編集画面>メディア>一括最適化
すると、最適化されていない画像をスキャンするというボタンが出現しますので、それをクリックします。
すると、画面が切り替わって〇〇点の画像を最適化というボタンが出現しますので、
それをクリックすれば、サイト内に存在する全ての画像が圧縮されます。
画像の数にもよりますが、最適化には時間がかかります
EWWW Image Optimizerでサイトスピードを改善する
ここまでは、「画像のサイズを小さくする方法」について解説してきました。
では、ここからは本題に入りまして、「画像ファイルをWebP(ウェッピー)に変換する方法」について解説していこうと思います。
手順1:設定
では、もう一度EWWW Image Optimizerの設定画面に移り、WebP変換という項目にチェックを入れましょう。
ここにチェックが入っていると、
WebP(ウェッピー)に対応したブラウザでは、画像をWebP(ウェッピー)で提供し、対応していないブラウザでは元の画像を提供してくれるようになります。
ここにチェックを入れたら、一旦「変更を保存」してください。
手順2:.htaccessファイルにコードを挿入する
すると、設定画面の下にコードが自動生成されます。
ここで、コード下にあるリライトルールを挿入するをクリックします。
すると、.htaccessファイルに自動で上記コードが挿入されます。
(意味が分からなかったら知る必要なし!)
リライトルールを挿入するをクリックすると右下の赤文字で「PNG」が緑色で「WebP」となります。これはブラウザとサイトがWebP(ウェッピー)に対応済みということです。
手順3:最適化する
1〜2の手順が全て終わったら、前述した一括最適化の作業を改めて行いましょう。
WordPressの編集画面>メディア>一括最適化
もしも、改めて最適化する際は、右のメニューのWebPのみという箇所にチェックを入れるようにしましょう。
まだ圧縮をしていない場合は、チェックを入れなくても大丈夫です。
画像の数にもよりますが、最適化には時間がかかります
WebP(ウェッピー)で配信されているかを確認しよう
最後は、サイト内の画像が全てWebP(ウェッピー)になっているかを確認しましょう。
不具合でJPEG、PNGのままなんてこともありますので、必ずチェクするように!
手順1:Firefoxをインストール
画像ファイルを調べる時は、Firefox(ブラウザ)を使いましょう。
というのも、非常に確認しやすいからです。
なので、まずはFirefoxをインストールしてください。
手順2:サイトを開く
Firefoxで、自分のサイトを開きましょう。
そして、下記の手順で「開発ツール」まで進んでください。
(MacBookの方は、「Command+option+I」でショートカットできます)
ツール>ウェブ開発>開発ツールを表示
手順3:画像ファイルを確認する
ネットワーク>画像>タイプ(WebPになっていたらOK)
補足
もしも、情報が出てこないようであれば、再読み込みをクリックしましょう。
すると、上記のような情報がズラズラと出現します。
疑問:サイトスピードは改善できたのか
では、ここまでやったオータニのサイトの成果をご覧ください。
成果1:改善できる項目
↓
見てもらえば分かる通り、「次世代のフォーマットでの画像の配信」がすっかり消えていますよね?
つまり、JPEGなどの画像ファイルが、しっかりWebP(ウェッピー)に変換されたということですね。
成果2:弊社サイトのスコア
↓
見てもらえば分かる通り、スコアを14も伸ばすことに成功しました。
それだけ、画像がサイト全体を圧迫していたということが言えますね。
ブログ・アフィリエイトで成功したい
ブログ・アフィリエイトを基礎からしっかり学びたい…
継続しているものの、なかなか成果が出ない…
本業とは別の副収入が欲しい…
こんな悩みを抱えていないでしょうか?
正直、GoogleやYouTubeなどを使って、ブログの知識を得て、挑戦するにもアリだとは思います。
ただ、当たり前の話ですが、そのような独学による学習では、それなりの時間がかかるということは否定できません。
だから、しっかりコーチの指導を受けて、サイト運営をすることが必要となります。
おすすめ:副業の学校
そんなあなたにオータニがオススメするのが「オンラインで副業のスキルが学べる【副業の学校】」。
【副業の学校】は、初心者でもブログ・アフィリエイトの専門的な知識をしっかり習得することができるオンラインスクールです。
なので、もしも「ブログ・アフィリエイトで成果を出したい!」「副収入が欲しい!」という方は、【副業の学校】を覗いてみてください。
\\副業の学校はこちら//
まとめ:サイトスピードを改善する方法
では最後にまとめましょう。
本日は、
- WebP(ウェッピー)とは
- サイトスピードを調べる方法
- EWWW Image Optimizerの登録方法と使い方
- WebP(ウェッピー)に一括最適化する方法
- EWWW Image Optimizerによるオータニの成果
というテーマでブログを執筆しました。
画像ファイルは、サイトスピードを低下させる大きな要因だということが分かりますね。
画像ファイルの圧縮は誰でも!簡単に!できることなので、この記事を見ながら、ぜひサイトスピードをあげていきましょう!