最近、画像を使い過ぎている記事の読み込み時間が気になっていました。
一つ一つの作業や設定について懇切丁寧にご説明したいという想いでこれまで記事を書いてきましたが、そうなるとどうしても画像が多くなってしまい、親切のつもりが逆に迷惑を掛けるという結果に繋がっていたかと思います。
確認のため、日々自分でこのサイトを見て、読み込み時間をチェックをしていますが、正直＜イラっ！＞とすることが間々ありました(笑)
都度、面倒くさがらずに画像のサイズを小さくすれば良いだけのことですが、そこまでまめまめしくないもので・・・(笑)
先達の方々のご説明だと、サイトに画像が表示される際、表示サイズとしては適正化されていますが、サーバーから読み込む元データが大きいと表示に時間が掛かるということのようなので、やはり元の画像サイズ自体を小さく必要があるようです。読み込みが速くなることで「離脱率」を下げることができ、結果としてPVが伸びることにも繋がるとのこと！
分かりました～ということで、さて、どうしたものかと調べてみたところ、画像をアップロードする際に自動でリサイズしてくれる「Resize At Upload Plus」なる便利なプラグインがあるとのこと？！
よしよしどれどれということで、早速導入して使ってみることにしました。
プラグインの導入方法は至極簡単です。
ダッシュボードの「プラグイン」→「新規追加」で「プラグインを追加」の画面に進み、
画面右上のキーワード入力欄に「Resize At Upload Plus」と入力して「Enter」を押すと検索結果に同プラグインが表示されるので、プラグイン名右横の「今すぐインストール」をクリックして下さい。
するとインストールが開始され、直ぐに完了するため、完了後に画面に表示されている「プラグインを有効化」をクリックして有効化させて下さい。
プラグインを有効化するとダッシュボードの「設定」項目内に「Resize At Upload Plus」が表示されるようになりますので、これをクリックし、設定画面を開いて下さい。
上が設定画面です。横幅基準で画像をリサイズしたい場合は「Max width」に希望の値を入力し、「Max height」の方に「0」と入力して下さい。（「0」と入力した側の基準は無効となります）
逆に縦側基準で画像をリサイズしたい場合は「Max height」に希望の値を入力し、「Max width」の方に「0」と入力して下さい。
これで設定は完了です。
尚、このブログのテーマ「Affinger」の場合、横幅基準が600でピッタリの設定になります。
さてさて、どの程度読み込みが早くなるんだ～？と思いまして、確認を行ってみました。
検証したのは下記の記事です。
wordpressにおける内部ＳＥＯ対策済み無料テーマ［Stinger5］ヘッダー画像設定方法（初心者でも超簡単）
何と！16枚もの画像を使っています。
＜当初画像サイズ→リサイズ後の画像サイズ（データ量）＞
①911×866（＝788,926） → 600×570（＝342,000）
②890×63（＝56,070）→ 600×42（＝25,200）
③1,280×994（＝1,272,320）→ 600×465（＝279,000）
④1,275×607（＝773,925）→ 600×285（＝171,000）
⑤1,276×824（＝1,051,424）→ 600×387（＝232,200）
⑥1,275×604（＝770,100）→ 600×284（＝170,400）
⑦889×62（＝55,118）→ 600×41（＝24,600）
⑧1,280×994（＝1,272,320）→ 600×465（＝279,000）
⑨1,237×896（＝1,108,352）→ 600×434（＝260,400）
⑩1,259×895（＝1,126,805）→ 600×426（＝255,600）
⑪1,257×890（＝1,118,730）→ 600×424（＝254,400）
⑫1,243×873（＝1,085,139）→ 600×421（＝252,600）
⑬1,234×899（＝1,109,366）→ 600×437（＝262,200）
⑭764×882（＝673,848）→ 600×692（＝415,200）
⑮1,280×994（＝1,272,320）→ 600×465（＝279,000）
⑯1,276×601（766,876）→ 600×282（＝169,200）
合計データ量（14,301,639） → （3,672,000）
ということで、リサイズ後はデータ量が何と！26％にまで小さくなりました～！
凄いですよね！
読み込み時間については、画面の更新時間で比較を行ってみました。
◇PCの場合：ビフォアー3.5秒 → アフター2秒
◇スマホの場合：ビフォアー10秒 → アフター8～9秒
PCでは約1.5秒縮まりました。秒数にすればほんの僅かではありますが、この1.5秒があるかないかで比較すると、人間の感覚としてまったく異なるものでした。ビフォアーは「よいしょ」と一呼吸置く感覚であるのに対して、アフターは「サクっ」っという感覚でした。
スマホでは、記事全てのデータ読み込みが完了するまでの秒数で比較した場合、思った程の効果は得られませんでしたが、一つ一つの画像に関しては上から順にかなり早く表示されるようになったので、読み込み完了前に記事を「読み始められる」スタートのタイミングとしては、上記の秒数比よりも効果が出ていました。
最後に大事なご忠告です！
このプラグインの導入をお考えの方は可能な限り早く導入下さい！
遅くなればなる程、大変なことになります！
僕、この際なので全ての記事の画像をリサイズしようと取りかかったのはいいのですが、一週間経っても未だに終わっていません・・・もの凄く面倒です(笑)
未だの方は今直ぐにもインストールして使い始めた方がよろしいです！！
コメント