・ページの速度を調べたらすごく遅かった…
・次世代フォーマット画像の設定方法を知りたい
そんな方に向けてサイトの高速化について解説していきます。この記事では…
- SWELLでの高速化設定
- 次世代フォーマットWebPの設定
この2つを実際に画像などを交えながら詳しく紹介していこうと思います。
高速化の結果は？
結論としてこのサイトの高速化をしたらどのくらい変わったのかを発表します。
まずは高速化前のサイトの測定値。「PageSpeed Insights」というサイトで測っています。もし自分のサイトの速度を知りたい方はアクセスして試してみてください。
※パソコンの場合
※スマホの場合
スマホはとんでもなく低い数値ですね。やはりファーストビューの画像が重いのでしょう…
そして次が高速化した後の速度になります。
※パソコンの場合
※スマホの場合
| 設定前 | 設定後 | |
| パソコン | 89 | 97 （+8） |
| スマホ | 28 | 53（+25） |
高速化するだけでこんなに数値が上がるのでやって損はありません。では早速設定方法を解説していきます。
SWELLの高速化設定
SWELL設定
まずはSWELL設定「高速化」のタブをクリック。キャッシュ機能にチェックを入れます。
ここはすべてにチェックを入れます。
ちなみにキャッシュ機能というのは、今のページの状況を記録しておき、次回見た時に高速で表示される仕組みです。
続いて遅延読み込み機能。ここにもチェックを入れ、画像等のLazyloadでは2つ目のloading=”lazy”を使用するにチェックを入れます。
外部スクリプトの遅延読み込みにもチェックを入れます。
これは初期設定で登録されているTwitterやインスタグラムの投稿を埋め込んでいると、それを遅延読み込みしてくれます。
遅延させる秒数ですがデフォルトでは3秒になっています。自分のサイトにあった秒数で調整してください。よくわからない人は私と同じにしても大丈夫です。
詳しい内容はSWELLのサイトでも解説されているので、そちらも参考にしてみてください。
続いて「ファイルの読み込み」ですがこちらはそのままで問題ありません。
ページ遷移高速化ですが、真ん中の「Prefetch」に設定しています。
少し難しいですが、こちらもSWELLの記事で解説しているので気になる方は読んでみて下さい。
最後に「変更を保存」をクリックします。
フォントの設定
外観→カスタマイズ→サイト全体設定→基本デザインからフォント設定に移動します。
現在4種類フォントを選ぶことができますが、可能であれば
・游ゴシック
・ヒラギノゴシック>メイリオ
この2つから選択してください。Noto Sans JPと明朝体はGoogle Fontsで読み込むので少し遅くなるとのこと。
ちなみに私はヒラギノゴシック>メイリオを使っています。
次世代フォーマットWebP設定
WebPって？
ページの速度を測るサイト「PageSpeed Insights」で表示される項目に次世代フォーマットでの画像の配信があります。
改善できる項目の中でも一番大きなウェイトを占めている項目。てか次世代フォーマットって何？について話をすると…
次世代フォーマットとはJPEG 2000、JPEG XR、WebPなどの新しいフォーマット画像であり、従来のJPEGやPNGなどの画像より軽いのが特徴です。
その中でもGoogleが開発しているWebPというフォーマットは、多くのブラウザに対応しており、ページの表示速度向上にも繋がるので推奨されています。
その為かあまり取り組む人が少なかったのですが、2020年にMacやiPhoneのブラウザにも対応したので、WebPに変える人も増えてきました。
残念ながらIE（インターネット・エクスプローラー）には対応していませんが、今の時代にIEで見てる人はほぼいないでしょう。
EWWW Image Optimizerでの設定方法
では本題の次世代フォーマットWebPの設定方法ですが、今回はプラグインの一つである「EWWW Image Optimizer」で設定をしていこうと思います。
まずはWordPressの管理画面から「プラグイン」→「新規追加」で「EWWW Image Optimizer」を入力してください。
そして「今すぐインストール」をクリックし、インストールが完了したら「有効化」を選択します。有効化したらプラグインの設定画面へ移動。
するとこのような画像が表示されます。
赤枠内の「サイトを高速化」と「今は無料モードのままにする」にチェックをいれたら「次」をクリック。
特にいじらなくて良いのでこのまま「設定を保存」をクリックします。
その後「完了」を押したら初期設定は終了になります。
続いてWebP画像の設定になります。左上のタブの中の「基本」という所から下の方に行くと、このような項目が表示されているかと思います。
ちなみに右下の赤いPNGという文字は、まだWebP画像に変換されてない事を意味します。
まずは「WebP変換」の項目にチェック（何もしなくてもすでにチェックされていると思います）
.htaccesファイルとはレンタルサーバーなどの項目内にあるケースが多いので、ここからは自分が契約しているレンタルサーバーのサイトにアクセスしてください。
ちなみに私はConoHaWINGを使っているので、今回はそちらで解説していきます。
ConoHaWINGにアクセスし、サイト管理→サイト設定→応用設定→.htaccess設定を開き、右にある鉛筆マークをクリックすると編集ができるようになります。
そして先程のページの文字列を項目の先頭に追加します。
先頭にしないといけないと書かれているサイトがありましたが、私は別サイトで実際に末尾に入力しましたが、特におかしくはならなかったのでどちらでも問題ないと思われます。
しかし念には念をという事で、とりあえず先頭に入力しておきましょう。
入力したら最後に「保存」をクリックして、サーバー側での設定は完了です。
再びプラグイン画面に戻り、左下の「設定を保存」をクリックすると、先程の赤い文字が緑色になっていると思います。緑色になっていればちゃんとWebP画像に変換する設定が完了したことになります。
既存の画像のWebP設定
最後に既存の画像をWebPに変換していきましょう。
管理画面から画像→一括最適化をクリックします。その中の「最適化されていない画像をスキャンする」という項目を選択。
ちなみに右側にあるWebPのみという項目を選択すると、画像の圧縮はせずWebP画像に変換する作業だけをしてくれます。
既存の画像も圧縮すればサイトの高速化にも繋がるので、少し時間はかかりますが圧縮もすると良いでしょう。
最後にライブラリから画像を見ると、右側がWebPになっているかと思います。
WebPになっていれば全ての設定が完了。高速化の設定は終了になります。
関連記事
コメント