重いサイトを軽くする！表示速度を改善し、離脱率下げる必殺技
スポンサードサーチ
重いサイトを軽くする！表示速度を改善し、離脱率下げる必殺技とは！？
意識はしていないけど、誰でも思うことだと思います。
実際どうしていいかわからない。
重い画像べたべた貼らない方がいいとか、その程度しかわからない。
自分でサイト見るときも、重かったら離脱しますわな。
そんなことで、備忘録がてら、
私の本業のweb制作の仕事中に得たノウハウと注意点を記したいと思います。
・iPhoneで撮影した画像、ブログアップとかだったら、リサイズと圧縮で容量1/8以上小さくなって見栄え変わらず。
・ワードプレスなら容量圧縮するプラグインとかもあるけど、プラグインあんま入れたくない。
・サムネみたいに関連記事で表示される画像が注意。
・画像容量気にしてなかったら、後々膨大な重さになるという恐怖がある。
ユーザーは重いサイトでイライラ【スマホの速度制限でも見れる】を意識
スマホを持っていない人はいない時代と言っても過言であはありません。
ギガ不足って言い方おかしいけど（笑）速度制限でのイライラしている人が大勢います。
私も、Wi-Fi環境外での動画視聴はやめました。
サイトの遅れ：見るのやめる。
ゲームの遅れ：親に黙ってデータ容量買う。
データ通信節約時代に、表示速度が遅いサイトは見られることもないということですね。
音楽や動画などもありますが、ネット検索ユーザーも根強く存在しています。
基本的にブロガーさんはすべてのページの表示速度を意識するべきと言えるでしょう。
スポンサードサーチ
重いサイトを軽くするには、まず画像を軽くする【画像で説明】
一番イメージしやすいのは、画像や動画が重いと遅いから、画像や動画を軽くしたいということだと思います。
それだけでも方法を抑えましょう。
iPhoneで撮影した画像（重い画像）を軽くする！
例を兼ねてiPhoneの撮影画像について調べてみました。
iPhoneで撮影した画像は、画素数がとてつもなく高いので、容量も大きいだろうなと思って調べました。
下の画像は、iPhoneで撮影したとんかつ屋さんの画像です。
撮影したままだと、857.1KBです。ただサイトに載せると考えたら、なかなか大きいと考えてください。
Windowsのデフォルトソフトの「ペイント」でサイズを50%にしてみました。
すると、271KBまで小さくなりました。
サイズを50%にすると、容量は約1/4になるってことですね。
※画像はサイズを節約していますので、多少荒くなっています。
スポンサードサーチ
重いサイト軽くする鉄板！TinyPNGというサイトで画像を圧縮！その使い方！
tinypngというサイトで無料で画像圧縮ができます。ページはこちらから。
このトラウマ系パンダちゃんが、超優秀です。
【使い方】
①下の画像の、赤矢印のところに圧縮した画像をドラッグ＆ドロップする。複数可。ファイルの容量は5MBまでという制限までです。
②すると、どのぐらい圧縮されたか表示されます。英語のサイトなのに単純明快でわかりやすいですね。下の画像を見たらわかると思います。
そしてダウンロードボタンをクリックすると、zipファイルで保存されます。
それだけ。
ブックマークしましょう。
tinypng：https://tinypng.com
ちなみに、上のとんかつの画像
50％にリサイズと圧縮で、857.1KBから107.9KBまで小さくできました。ブログ記事は写真コンテストでもないし、リサイズするデメリットは面倒なぐらいで、メリットしかないってことですね。
むしろ徹底すべきですね。iPhoneで撮影した画像の容量の1/8にまで小さくできて、見栄えはそんな変わらないってことですね。
PageSpeed Insightsの使い方をマスターし改善する
あとは、ブロガーさんとかだとgoogleアナリティクスの設定などをしていると思います。
アナリティクスから「PageSpeed Insights」という文字通りページスピードを診れるツールを使えますので、その使い方をほんの少し。
下の画像の赤矢印の通り、まずアナリティクスのホームから、
行動＞サイドの速度＞速度についての提案＞PageSpeedの提案のところの合計５個をクリック
自分のサイトのページビューが多いサイトからチェックできるところがいいです。自分の自信のあるページをどんどん良質にできます。
PageSpeedの提案のところの合計５個のところをクリックすると、PageSpeed Insightsが起動し診断結果を出してくれます。
それが下の画像。
一旦、おおざっぱに、画像真ん中の赤、黄、緑のステータスで見るのがわかりやすいかもです。とにかく緑を目指すって感じで、深くは調べられてないです。
ちなみに画像例はとても悪いので、具体的に何がわるいかチェックしてみました。
とても丁寧に、改善できる項目という項目があるので助かります。
それが下の画像。
また、下の画像の様に、容量を減らせる画像を表示されます。表示される画像の容量を減らしていくという作業になってくると思います。
- PageSpeed Insightsの私的なポイント
- 画像容量が大きいと表示されたのは容量圧縮する。
- サムネイルは思いっきり容量圧縮する。（サムネはトップページや関連記事とかで何枚も表示されるから）
- ブログトップページで記事の表示数を減らす
スポンサードサーチ
ごめん！重いサイトを軽くするために、私は【これだけ】やっております【結論】
パンダのサイトより「Bulk Resize Photos」ってサイトが使いやすいと個人的に思ったので、こちらばかり使っております。
しかも、後で見つけたサイトなので、「Bulk Resize Photos」については、こちらで詳しく書いてます
興味がある方はご覧ください。
画像枚数制限もないし、
容量を具体的に決めれる。
そして操作も簡単。
最強系、独占系という感じです。
まとめ。表示速度と容量について思うこと
・サムネイルなど関連で表示される画像は特に容量カットする。
・日々容量を小さくしていないと、後々相当な大きな容量になり、サイト自体が重くなる。
ぴよさく
それよりコンテンツの質を気にしましょう。
最近はそう感じており、サムネとか本気で作って、載せちゃっております。
しかし、容量を小さくするスキルがつきます。
サムネは最高でも50kbぐらいにしていますよ～