WordPress

【WordPress】重いページを(超)簡単に高速化、「たった2つ」の簡単な方法!




ページをリクエストしてから、ページを操作できるようになるまでなぜか時間がかかる(重い)と思いつつ、自分のページだとつい慣れてしまうのですが、たった2個の改善(方法)で表示スピードが劇的に改善します。


  • 方法1:画像を遅延ロードする( [Lazy Load by WP Rocket] プラグイン )
  • 方法2:画像を圧縮する ( [EWWW Image Optimizer] プラグイン )

しかも無料です!ここ大事(笑)


ページの表示スピードの確認方法


ページのスピードを計測するサイト( PageSpeed Insights ) がありますので、こちらで確認します。



[モバイル] は相当ヤバイ数値だったのですが(笑)、[パソコン] は 49 でした。

数字は49ですが、実際にページを表示すると、ページを操作できるようになるまで数秒固まります!、これは直帰率にかかわりますので、できる限り改善したいと思います。


方法1:画像を遅延ロードする


ページを表示する際、実際に画面内に表示されていない画像は 後から必要に応じてロードすればよいので、画像を遅延ロードさせることがとても効果的です。



[Lazy Load by WP Rocket] プラグイン を利用して遅延ロードを実現します。


step
1
Lazy Load by WP Rocket プラグインをインストールする


[Lazy Load by WP Rocket] プラグインは WordPress のプラグインの新規追加で検索すると出てきます。

確認して有効化します。



step
2
設定する


WordPress の [設定] → [LazyLoad] をポイントして、設定画面を表示します。



Images にチェックをして、設定を保存します。


完了です。


仮に、後述する [画像を圧縮する] を行わなくても、この 遅延ロード だけでも十分な高速化になりますので、ここまで設定したらページを操作してスピードの向上を体感してみてください!


「やべぇ!早ぇ!」と言ったら、もはや、僕の術中です(笑)


いやいやいやいや、プラグインの実力です(笑)


方法2:画像を圧縮する


単純にページ内も最も 大きなサイズのリソース は [画像] ですので、画像を圧縮して、できる限りサイズを小さくします。


[EWWW Image Optimizer] プラグイン を利用して画像を自動圧縮します。


step
1
EWWW Image Optimizer プラグインをインストールする


[EWWW Image Optimizer] プラグインは WordPress のプラグインの新規追加で検索すると出てきます。

確認して有効化します。



step
2
設定する


WordPress の [設定] → [EWWW Image Optimizer] をポイントして、設定画面を表示します。



[基本] タブで [メタデータを削除] のチェックが付いていることを確認します。

※ 初期設定でチェックがついていますが、もしついていない場合は、チェックをつけて保存します。


ポイント

[WebP] タブで設定を入れることで、次世代画像フォーマット(WebP 形式)にすることも可能です。

※ 必須ではありません。


step
3
新しくアップする画像は自動で圧縮される


プラグインインストール(有効化)後に新しくアップする画像は自動で圧縮されるので特に何もする必要はありません。


step
4
過去にアップした画像を一括圧縮する


WordPress の [メディア] → [一括最適化] をポイントし、画面の [青いボタン] の手順に従って、画像を一括で最適化します。



step
5
圧縮結果を確認する


WordPress の [メディアライブラリ] で画像の一覧を確認します。



右側に圧縮結果を示す列が表示され、各画像がどのように圧縮されたかの結果を確認できます。


完了です!


まとめ


ページのスピードを計測するサイト( PageSpeed Insights ) で、再確認します。



評価「49」を、「75」に改善できました!

※ モバイルのほうは、まだまだボロボロなんですけどね(笑)


WordPress で作成したページの高速化は、次の2方法が効果的です。


方法1:画像を遅延ロードする( [Lazy Load by WP Rocket] プラグイン )

方法2:画像を圧縮する ( [EWWW Image Optimizer] プラグイン )


しかも無料!(笑)


Enjoy!めざせ!スピード狂(笑)




WordPress の情報、テクニック一覧はこちらをクリック!









Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ