WordPressを使い始めるとキャッチ画像などを毎回設定したり、分かり安くするために画像多めの記事を作ってみたりと、気づかない内に画像を多用してしまいます。それ自体は良いとしても、画像をそのままWordPressにアップロードしてしまうと表示速度の低下という問題が発生してしまいます。今回は、WordPressサイトの表示が遅い場合の対処法を紹介します。
表示速度を測定してみる
自分のサイトが遅いかどうかは客観的な数字で判断するしかありません。感覚的に遅いなと思うことはありますが、それが個人の感覚なのか、一般的な感覚なのか分からないからです。
今回はGoogleのPageSpeed Insightsを使って客観的な表示速度を見てみることにしましょう。
このブログの表示速度はどうでしょうか？
結果はなかなか厳しい数字が出てしまいました。モバイルの表示速度はまあまあだとしても、パソコンの表示速度は明らかに致命的な遅さだと分かります。正直自分でもこのブログは遅いと思っていたので納得の結果です。
WordPressプラグイン「Imsanity」を用いた対処法
それでは、表示速度を改善していきましょう。
PageSpeed Insightsの分析結果によると、大きい画像が多数含まれていることが大きな原因として挙げられていました。
そこで、画像のサイズ変更に適したWordPressのプラグイン「Imsanity」を使って画像サイズを最適化していきます。このプラグインは設定すると、今後アップロードした画像を全て指定したサイズに自動的に変更してくれます。加えて、一括変換機能を使うことで、過去にアップロードした画像のサイズ変更も行えます。
まずは「Imsanity」をWordPressにインストールして有効化して下さい。
次に、設定画面から「固定ページ/投稿でアップロードされた画像」を最適なサイズに変更します。私のブログの場合は横幅600pxで収まるレイアウトになっているので、「最大の幅」を「600」に、「最大の高さ」を「0」に設定しました。
これで、今後アップロードした画像はこのサイズに自動的に変更されるようになりました。
これはこれで便利ですが、今回の目的はすでにアップロードした画像を縮小することです。同じ設定画面の下の方を見ると、一括設定の場所がありますので、「画像を検索」を実行してみましょう。
すると、今までアップロードした画像一覧が表示されます。後は、サイズを変更したい画像を選んでチェックを付けましょう。
そこまで終わったら、「選択した画像のサイズを変更する」をクリックすると、選択した全ての画像の画像サイズが変更されていきます。
「リサイズの完了」が表示されれば、終了です。
注意点として、この一括変換は、変換された画像は後で元に戻せません。なので、心配な人はバックアップを取ったり、最小限の画像だけ選択するなりして、安全に行って下さい。
結果
それでは、画像サイズを小さくしたことで表示速度が改善されているか確認してみましょう。
結果は、モバイルは80点で十分な表示速度だと評価されています。問題だったパソコンの表示速度は、完璧では無いですが、致命的な遅さからほどほどの表示速度に改善されたことが分かります。
その他の対処法
今回はすでに実施済みでしたが、WordPressのメモリ上限を上げることで表示速度は改善します。必要な方は以下の記事を参考にして下さい。
最後に
いかがでしたか？よくこのブログに遊びに来てくださる方々は、表示速度が改善されていることに気づいたのでは無いでしょうか？明らかに速くなりましたからね。表示速度を改善したい方は参考にしてみて下さい。
最新記事 by Keid (全て見る)
- FormikでReactのフォームを華麗に扱う方法 - 2019年4月12日
- React Hooksを試してみよう！(useStateとuseEffect編) - 2019年4月5日
- GatsbyJSをWordPressのHeadless CMSのREST APIと連携する方法(JWT認証編) - 2019年3月11日
関連記事
コメントを残す