ブログ・WEBサイトのページ表示速度を改善するためのたった１つのコツ

ブロガーでもWEBサイトの管理者でも、サイトを運営しているからにはPV数だとか、コンバージョンなど何かしらのアクションが欲しいですよね。

一般的な情報として、サイトを見ているときにページが表示されるまでの時間が長くなると、ユーザーは離脱する確率がドンと上がるという話があります。

これはユーザー目線で考えると肌感覚としても分かると思います。

なので、WEBサイトは高速に表示できるように気をつけて、優れたユーザーエクスペリエンス（UX）を実現できるようにしましょう！

今回は、初心者がやりがちなポイントとして「無駄にデカい写真」問題に焦点を当てて書いていきます。

ブログやサイトに何気なく使われているスマホの写真を軽量化できれば、アクセス速度は簡単に２倍以上になるって話です。

関連記事＞＞＞アナリティクスの使い方を基本から学びたいあなたにUdemyの動画講座を！

普段どんな大きさの画像を見てる？

最近は各種SNSで画像やら動画を見てる人がたくさんいますが、改めてそのサイズ感を確かめてみましょう。

比較しないと分かりにくいので、とりあえず基準を決めたいと思います。

エイやーで決めますが、今回はこれ！

FHD（フルハイビジョン）の動画の大きさ（解像度）である「1920×1080」としましょう。

基準という割には、地デジ化以降のテレビでも採用されているキレイな方かと思います。

この数値は、横幅が1920px（ピクセル）で縦が1080pxということを表します。

今後の比較のために画素数を計算すると、1920×1080=2073600ということで、ざっくり２００万画素です。

関連記事＞＞＞江の島観光？いや、観光スポットを散歩して適当に撮った写真をアップするよ！

意外と小さい？

これってどうでしょう？

キレイなフルHDかと思いきや、意外にもたったの２００万画素。

仮に「２００万画素のデジカメ」とか言ったら、おもちゃか！とつっこまれそうです。

最近のデジカメだと１０００万画素はおろか、３０００万画素とかもありますもんね。

でも、そんなもんなんです、というのが今回のWEBサイト軽量化のミソです。

iPhoneカメラの場合

フルHDの大きさに続き、日本人が大好きなiPhoneのカメラに注目してみます。

最近のiPhoneでは12MPのカメラとして仕様に書いてありました。

iPhone - モデルを比較する

Apple（日本）

 

49 Tweets

3635 Shares

250 Users

328 Pockets

MPはメガピクセルの意味なので、つまり１２００万画素ですね。

具体的には手元のiPhoneSEで（動画でなく）写真を撮影したところ、4032×3024でした。（ちなみに、縦横比がぴったり４：３）

そして、その画像ファイルとしてのサイズは約3.3MBくらいでいした（写真の対象によって変わります）。

数字が何種類か出てきて紛らわしいですね。すみません。

で、このブログでの写真例

このブログ「スタイリッシュ生活日記」では、基本的にこれくらいのサイズの画像を載せるようにしています。

パッと見て、どうですかね？

キレイですか？それとも、見えづらいですか？

私は個人的にはこのサイズで十分わかると考えているのですが、これが横幅480px・縦360pxです。

元はiPhoneSEで撮影してるので4032×3024の写真ですが、およそ寸法比８分の１の大きさしかないです（面積比だと６４分の１です）。

写真をワードプレスに「アップロード」してメディアに追加した時点では1008×756ですが、そこからさらに小さく表示しています。

何で小さく表示してるの？

小さくした画像をアップロードして表示してるかの理由ですが、パソコンでもスマホでも、そんなに大きな写真を普段表示させないからです。

このブログをパソコンで見ていただいている方は文字の折り返しの幅がたかだか600pxくらいかと思います。

そして、スマホで見ていただいている方は、スマホ自体の横幅なのでせいぜい300pxだと思います。

iPhoneXクラスのスマホの横持ちでやっと1000pxくらいですかね。

これを考えていけばiPhone標準の横幅約4000pxの写真がいかにデカ過ぎるか分かりますよね。

半分にしてもまだ大きいくらい。

この辺りが、ブログの表示速度に密接に関わってきます。

あ、ちなみにこのブログの「モバイルユーザビリティ」はずっと前から最高スコアです！

写真サイズとファイルサイズ

次に、サイトの表示速度に密接に関わる「ファイルサイズ」を見てみます。

Windowsのフォルダや、MacのFinderで見られる、○MB（メガバイト）や○KB（キロバイト）です。

ちなみに、1MBと1KBで約１０００倍の差があります（厳密には１０２４倍）。

この写真を例にあげて見てみましょう。晴れた日のテラスモール湘南です。

この写真の元のサイズから小さくしてみたとき、ファイルサイズは次のようになりました。上の写真は、前述のとおり1008×756の大きさの写真を、480×360くらい（172800≒17万画素）で表示しています。

証拠のスクショ

ちなみに８分の１のサイズにしても、こんな感じです。もしこれでも上の写真と見比べて十分キレイだと思えれば、これにしましょう。

オリジナルサイズに比べて４分の１サイズの状態で、ファイルサイズは3300KBから300KBくらいに下がりましたね。

１０倍以上軽くなっています。

単純に、画像だけ表示させるスピードが１０倍になったと考えられます。

実際には他の画像や目に見えないプログラムが動いているので単純計算はできない点には注意が必要です。

普段、サイトの表示速度が遅くて困っている皆さん、どの大きさの画像を表示しているか、今すぐチェックして見ましょう。

関連記事＞＞＞光学40倍ズームの魅力！中秋の名月を撮ったらデジカメにハマりそう！

画像のサイズをどうやって変える？

と言うことで、画像のサイズを小さくするとサイトの表示速度が速くできることがわかってきました。

では、実際にはどうやって効率よく画像のサイズを変えるのでしょうか。

Macの場合

私の場合はiPhoneで撮影した写真をそのまま、AirDropで送ってMacに保存しています。

Finderから写真を開いて、「ツール」から「サイズを調整」を選択します。

その後は、「パーセント」を選んで、「幅」または「高さ」を25としています。

縦横比は固定なので、縦と横をそれぞれ４分の１（25％）にするということですね。

「調整後のサイズ」で何ピクセルになるのかと、推定のファイルサイズ（237KB）が分かります。

上の表にあるように、実際には300KBでした。

あと、複数選択しておけば、一度の入力で全部変えることができます。

小さくした後で、WordPressにアップロードしたりしています。

うん、簡単！

Windowsの場合

ウィンドウズの場合、標準の「ペイント」などを使ってもできるのですが、１枚ずつ変えないといけませんね。

単純に手間です。１００枚の画像を目の前にすると、やる気が削がれます。

なので、フリーソフトの力を借りましょう。

https://freesoft-100.com/pasokon/reduce-image.html

freesoft-100.com

 

2 Shares

9 Users

22 Pockets

「リサイズ超簡単！Pro」が使い方が簡単でオススメです。

動画の場合は？

写真・画像と同じように、動画を目にする機会もたくさんありますが、この場合はどうなのでしょう？

同じように、小さくすれば表示速度が大きく向上できるのでしょうか？

答えはほぼほぼNoですね。

画像ならいざ知らず、動画をウェブサイトにアップロードして掲載しているサイトって今時ありますかね？

大体はYoutubeなどの動画を埋め込んで使っていることだと思います。

そうなってくるとリンクを貼っているだけのような状態だと考えて差し支えないです。

そのあと、動画の表示速度はYoutubeならYoutube側の表示速度が使用されます。

埋め込み動画や、Thetaの３６０度画像も同じですね！

関連記事＞＞＞体操選手の目線になれる！Theta・GoProでユニークな写真を撮ってみた

まとめ

ということで、画像と動画について、サイトの表示速度を向上させるテクニックを紹介してきました。

つまるところ、動画はあまり気にせず、画像のサイズだけ気にしましょうということです。

無駄に大きな画像を使わずに、必要最低限の画像に気をつければ大丈夫ということです。

逆に、ここをおろそかにしていると、他のサイトで紹介されているテクニックを使っても高速化は難しいとさえ言えます。

この記事の序盤でフルHDの話をしましたが、この辺を考え始めると4K（3840×2160）だの8K（7680×4320）だのは、私は全く興味を惹かれません。

たかだか２００万画素とか、１００万画素くらいで十分だと思えるからです。

そんなことより、サイト・ブログを高速化しましょう！

以上、画像を縮小しまくって、明日はもっとスタイリッシュ生活！