重いサイトを軽くする!表示速度を改善し、離脱率下げる必殺技

2020年2月29日

スポンサードサーチ

SEOを意識して、または読者を意識して、表示速度を可能な限り上げたい。

意識はしていないけど、誰でも思うことだと思います。
実際どうしていいかわからない。
重い画像べたべた貼らない方がいいとか、その程度しかわからない。

自分でサイト見るときも、重かったら離脱しますわな。

そんなことで、備忘録がてら、
私の本業のweb制作の仕事中に得たノウハウと注意点を記したいと思います。

Right Caption

 

から言うと、

パンダのサイトより「Bulk Resize Photos」ってサイトがいいよ。

「Bulk Resize Photos」について詳しく書いてるから見てみてください。

・とりあえず画像を絶対圧縮しておけばいいと思う。
・iPhoneで撮影した画像、ブログアップとかだったら、リサイズと圧縮で容量1/8以上小さくなって見栄え変わらず。
・ワードプレスなら容量圧縮するプラグインとかもあるけど、プラグインあんま入れたくない。
・サムネみたいに関連記事で表示される画像が注意。
・画像容量気にしてなかったら、後々膨大な重さになるという恐怖がある。

通信速度が命!スマホの速度制限がつらい!

スマホを持っていない人はいない時代と言っても過言であはありません。

ギガ不足って言い方おかしいけど(笑)速度制限でのイライラしている人が大勢います。
私も、Wi-Fi環境外での動画視聴はやめました。

動画の遅れ:話にならない。
サイトの遅れ:見るのやめる。
ゲームの遅れ:親に黙ってデータ容量買う。

データ通信節約時代に、表示速度が遅いサイトは見られることもないということですね。

音楽や動画などもありますが、ネット検索ユーザーも根強く存在しています。

基本的にブロガーさんはすべてのページの表示速度を意識するべきと言えるでしょう。

スポンサードサーチ

画像・動画軽くしよう

一番イメージしやすいのは、画像や動画が重いと遅いから、画像や動画を軽くしたいということだと思います。
それだけでも方法を抑えましょう。

iPhoneで撮影した画像を軽くする!

例を兼ねてiPhoneの撮影画像について調べてみました。

iPhoneで撮影した画像は、画素数がとてつもなく高いので、容量も大きいだろうなと思って調べました。

下の画像は、iPhoneで撮影したとんかつ屋さんの画像です。

撮影したままだと、857.1KBです。ただサイトに載せると考えたら、なかなか大きいと考えてください。

Windowsのデフォルトソフトの「ペイント」でサイズを50%にしてみました。

すると、271KBまで小さくなりました。

サイズを50%にすると、容量は約1/4になるってことですね。

※画像はサイズを節約していますので、多少荒くなっています。

スポンサードサーチ

無料で簡単に画像圧縮。頼れるパンダちゃん

tinypngというサイトで無料で画像圧縮ができます。ページはこちらから。
このトラウマ系パンダちゃんが、超優秀です。

【使い方】
①下の画像の、赤矢印のところに圧縮した画像をドラッグ&ドロップする。複数可。ファイルの容量は5MBまでという制限までです。

②すると、どのぐらい圧縮されたか表示されます。英語のサイトなのに単純明快でわかりやすいですね。下の画像を見たらわかると思います。

そしてダウンロードボタンをクリックすると、zipファイルで保存されます。

それだけ。

ブックマークしましょう。
tinypng:https://tinypng.com

ちなみに、上のとんかつの画像
50%にリサイズと圧縮で、857.1KBから107.9KBまで小さくできました。ブログ記事は写真コンテストでもないし、リサイズするデメリットは面倒なぐらいで、メリットしかないってことですね。
むしろ徹底すべきですね。iPhoneで撮影した画像の容量の1/8にまで小さくできて、見栄えはそんな変わらないってことですね。

PageSpeed Insightsの使い方をマスターし改善する

あとは、ブロガーさんとかだとgoogleアナリティクスの設定などをしていると思います。
アナリティクスから「PageSpeed Insights」という文字通りページスピードを診れるツールを使えますので、その使い方をほんの少し。

下の画像の赤矢印の通り、まずアナリティクスのホームから、
行動>サイドの速度>速度についての提案>PageSpeedの提案のところの合計5個をクリック


自分のサイトのページビューが多いサイトからチェックできるところがいいです。自分の自信のあるページをどんどん良質にできます。

PageSpeedの提案のところの合計5個のところをクリックすると、PageSpeed Insightsが起動し診断結果を出してくれます。
それが下の画像。

一旦、おおざっぱに、画像真ん中の赤、黄、緑のステータスで見るのがわかりやすいかもです。とにかく緑を目指すって感じで、深くは調べられてないです。
ちなみに画像例はとても悪いので、具体的に何がわるいかチェックしてみました。
とても丁寧に、改善できる項目という項目があるので助かります。

それが下の画像。

また、下の画像の様に、容量を減らせる画像を表示されます。表示される画像の容量を減らしていくという作業になってくると思います。

    PageSpeed Insightsの私的なポイント

  • 画像容量が大きいと表示されたのは容量圧縮する。
  • サムネイルは思いっきり容量圧縮する。(サムネはトップページや関連記事とかで何枚も表示されるから)
  • ブログトップページで記事の表示数を減らす

スポンサードサーチ

EWWW Image Optimizerについて(WordPressプラグイン)

参考:https://bazubu.com/ewww-image-optimizer-23864.html

最適化ってのしかできないみたい。
何をもって最適化?なのかは調べられてないので、割愛します。

ただ小さくしたいなら使えないプラグインです。

まとめ。表示速度と容量について思うこと

・サムネイルなど関連で表示される画像は特に容量カットする。
・日々容量を小さくしていないと、後々相当な大きな容量になり、サイト自体が重くなる。