ワードプレスでユーザの離脱を防ぐ方法はないのかな？表示を高速化したい。
こんな疑問に答えます。
- サイト表示を高速化する必要性
- サイト表示を高速化する方法
- 画像圧縮プラグインimagifyについて
本記事を書いている私はエンジニア歴10年です。Webの開発経験も豊富で、複数サイトの表示高速化を行ってきました。
サイト表示を高速化する必要性
googleはページ速度重視しており、検索結果の表示順に表示速度が関係しています。また、googleの発表によるとサイト表示が1秒⇒3秒になると直帰率が32%増加するそうです。
そのためサイトの表示速度は非常に重要となっています。
サイト表示を高速化する方法
画像の読み込み速度は何の影響を受けるのでしょうか？それは、主に以下の2つになります。
- 画像の読み込み速度
- ページキャッシュ
本記事では画像の読み込み速度を高速化するために、画像を圧縮するプラグインimagifyについてご紹介します。
画像圧縮プラグインimagifyについて
imagifyの特徴
- 毎月25MBまで無料で圧縮ができる
- すでにアップロード済みの画像も圧縮できる
- 圧縮のやり直しができる
imagifyのインストール方法
プラグイン⇒新規追加をクリックして、「imagify」で検索し、
今すぐインストールでインストールを行ってください。
有効化を行うとインストール完了です。
imagifyの設定方法
1. Create an Account
最初にimagifyのアカウントを作成します。「SIGN UP. IT’S FREE!」をクリックしてください。
APIキーを取得するためのメールアドレスを設定し、「SIGN UP」をクリックしてください。
設定が完了下画面では「OK」をクリックしてください。
設定したメールアドレスにAPIキーが送られてくるのでコピーします。
2. Enter your API Key
次にAPIキーを設定します。「I HAVE MY API KEY」をクリックしてください。
先程コピーしたAPIキーを貼り付けて、「CONNECT ME」をクリックしてください。
3. Configure it
最後に圧縮の設定を行います。「GO TO SETTING」をクリックしてください。
フォーマットサイズは「NORMAL」「AGGRESSIVE」「ULTLA」がありますが、デフォルト設定の「AGGRESSIVE」を変更します。
「Auto-Optimize images on upload」は画像のアップロード時に圧縮するかの設定なのでチェックを入れてください。
「Backup original images」はオリジナル画像を保存しておくかの設定です。
元画像は保持しておいたほうが良いのでチェックを入れてください。
「Keep all EXIF data from your images」はEXIF情報を保持するかの設定です。EXIF情報は画像の撮影日などの設定情報なので不要です。チェックを外してください。
「Create webp version of images」はwebp形式の画像を作成するかの設定です。webpはgoogleが提唱している次世代の軽量フォーマットですが、2020年01月時点ではsafariが対応していません。そのため、今回はチェックを外します。
「File optimization」はUnselect allをクリックし、チェックを外します。
「Display Options」はチェックを入れるとWordPressのメニューにImagifyを追加できるのでチェックしておきましょう。
すべての設定が完了したら「SAVE ＆ GO TO BULK OPTIMIZER」をクリックしてください。
imagifyの使い方
imagifyの使い方は簡単です。まとめて圧縮する場合は「IMAGIF’EM ALL」をクリックしてください。
圧縮作業中は時間がかかるので、その間はImagifyを開いた状態にしておいてください。「START THE OPTIMIZATION」をクリックして圧縮を開始します。
約10分程で圧縮が完了します。
まとめ
サイト表示速度は訪問者の離脱を防ぐために非常に重要です。そのための方法として圧縮を行うImagifyをご紹介しました。本記事がWordPressライフに役立てば幸いです。
