こんにちは、わえ（@wae_lib）です！
「SWELLを導入したけど、モバイルの速度が遅い。高速化したい」
この記事ではこのような悩みにお答えします。
ウェブサイトの速度などのパフォーマンスを測定する「PageSpeed Insights」で、このサイトの速度を測定したところ、モバイルのパフォーマンススコアは３３でした。パソコンの方は９４です。
モバイルの方のスコアが、パソコンの方のスコアよりずっと低くなっていることがわかります。
ここから高速化のための設定を見ていきましょう。
SWELL固有の高速化設定
記事スライダーの除去
記事スライダーはサイトの処理速度低下の原因となります。特に除いても問題ない場合は取り除きましょう。
このサイトで記事スライダーを除いた場合、PageSpeed Insightsでのモバイルのスコアが３３から４４になりました。
サイトフォントの見直し
サイトフォントも処理速度に影響します。
このサイトでは「ヒラギノゴシック＞メイリオ」を採用していますが、試しに「游ゴシック」にしてみると、PageSpeed Insightsでのモバイルスコアが４４から３９に低下しました。
このサイトでは引き続き「ヒラギノゴシック＞メイリオ」を採用することにします。
「SWELL設定」→「高速化」の設定の変更
WordPressの管理画面で「SWELL設定」を選択すると、以下の画面の「高速化」というタブがあります。
このタブでは以下４つについての設定ができます。
- キャッシュ機能
- 遅延読み込み機能
- ファイルの読み込み
- ページ遷移高速化
それぞれ見ていきましょう。
キャッシュ機能
ここではキャッシュに関する設定をします。キャッシュを利用することで、サイトの高速化ができます。
デフォルトの設定では「動的なCSSをキャッシュする」「外部リンクのブログカードをキャッシュする」の２つのみチェックが付いています。
特にチェックしない理由がないので、他の項目も全てチェックを入れます。
遅延読み込み機能
記事下コンテンツやフッター、画像を遅延して読み込むかどうかを設定できます。
ページを読み込んだときに全てのコンテンツを読み込もうとすると時間がかかります。遅延読み込み機能は、画面に表示されている部分のコンテンツから順に読み込むようにし、画面に表示されていない部分は表示されたら読むようにする機能です。
遅延読み込み機能を使うことで、サイトを高速化できます。
ここでは「記事下コンテンツを遅延読み込みさせる」と「フッターを遅延読み込みさせる」にチェックを入れます。
ファイルの読み込み
「SWELLのCSSをインラインで読み込む」かどうかを設定できます。これもチェックを入れます。
ページ遷移高速化
ページ遷移の高速化に関する設定ができます。「Prefetch」を選択します。
すべての設定を終えた後に「変更を保存」を押し、PageSpeed Insightsでモバイルスコアを測定すると、５８に上昇しました。
一般的な高速化設定
EWWW Image Optimizerによる画像の最適化
「EWWW Image Optimizer」は、サイトの画像の最適化をするためのプラグインです。
このプラグインを導入するためには、「プラグイン」→「新規追加」からEWWW Image Optimizerをインストールして有効化します。
有効化したら、「プラグイン」のEWWW Image Optimizerの「設定」に移動します。
以下のような画面が表示されます。
「基本」タブで、わたしは以下の画像のように設定しました。
- JPG品質レベルを82にする
- 画像のリサイズの幅の上限を1024にする
- 遅延読み込みのチェックを入れる
- WebP変換にチェックを入れる
設定が終わったら「変更を保存」を押します。
WebPの配信の有効化
WebPの配信を有効化するためには、さらに作業が必要になります。
WebPの配信方法にあるソースコード（以下の画像）を、サイトで使用しているサーバーの.htaccessに記入します。
たとえばわたしの使っているXserverの場合、まずXserverにログイン後、「サーバー管理」を押します。
次の画面で、「ホームページ」の「.htaccess編集」を押します。
サイトで使用しているドメインの「選択する」を押します。
「.htaccess編集」のタブを押し、ソースコードの一番下に、先ほどの「WebPの配信方法」にあったコードを挿入します。
編集が終わったら、「確認画面へ進む」を押し、「実行する」を押します。
完了すると、先ほどの「WebPの配信方法」の赤色のPNGが緑色のWEBPに変化します。
過去にアップした画像の最適化
EWWW Image Optimizerの設定が終わった後にアップロードした画像は自動的に最適化されますが、設定前にアップロードした画像は最適化されていません。
過去の画像を最適化するためには、「一括最適化」機能を使います。
一括最適化を実行するために、WordPressの管理画面で「メディア」→「一括最適化」と進みます。
「最適化されていない画像をスキャンする」を押して、次の画面で「○○点の画像を最適化」を押します。
しばらくすると、一括最適化が完了します。
わたしのサイトの場合、画像を最適化してもPageSpeed Insightsのモバイルのスコアは改善されませんでした。
画像の量がまだ多くなかったのが理由かなと思います。
画像の最適化は、画像が大量にあるサイトでは効果を発揮すると考えられます。
SNSタイムラインやブログランキングの削除
ツイッターのタイムラインのウィジェットを削除すると、PageSpeed Insightsのモバイルのスコアが５８から７６に上がりました。
また、にほんブログ村のランキングウィジェットを削除すると、さらにスコアが８２まで上がりました。
わえにほんブログ村については、バナー（ボタン）とパーツ（ランキング）両方を消してみて速度を測定しました。
まとめ：高速化の設定でモバイルのスコアが３３から８２まで上昇した
最後までお読みいただき、ありがとうございます。
この記事では、サイトの速度を上げるための設定方法を紹介しました。
紹介した高速化の設定方法は以下のとおりです。
SWELL固有の高速化設定
・記事スライダーの削除
・サイトフォントの見直し
・「SWELL設定」→「高速化」の設定の変更
一般的な高速化設定
・EWWW Image Optimizerによる画像の最適化
・SNSタイムラインやブログランキングの削除
わたしのサイトの最終的なPageSpeed Insightsのスコアは以下のようになりました。
モバイルでは３３から８２に、パソコンでは９４から９８に上昇しました。
サイトを高速化して、読者に快適なサイト訪問体験を与えましょう！
コメント