チャレンジして成長したい人のための

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

WEBサイトの高速化テクニック
スポンサーリンク

 

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

 

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

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

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

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

 

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

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

 

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

 

意外と小さい?

これってどうでしょう?

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

 

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

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

 

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

 

iPhoneカメラの場合

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

 

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

 

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

具体的には手元のiPhoneSEで(動画でなく)写真を撮影したところ、4032×3024でした。(ちなみに、縦横比がぴったり4:3

 

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

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

 

スポンサーリンク

 

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

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

iPhone写真_縦横4分の1

 

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

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

 

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

元はiPhoneSEで撮影してるので4032×3024の写真ですが、およそ寸法比8分の1の大きさしかないです(面積比だと64分の1です)。

 

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

 

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

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

 

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

 

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

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

 

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

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

 

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

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

 

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

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

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

ちなみに、1MBと1KBで約1000倍の差があります(厳密には1024倍)。

 

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

iPhone写真_縦横4分の1

 

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

写真のサイズ ファイルのサイズ
iPhoneSEカメラのオリジナルサイズ 4032×3024 約3.3MB(3300KB)
iPhoneSEカメラの縦横を半分 2016×1512 約1.1MB(1100KB)
iPhoneSEカメラの縦横を4分の1 1008×756 約0.3MB(300KB)
iPhoneSEカメラの縦横を8分の1 504×378 約0.085MB(85KB)

 

ファイルサイズの確認証拠のスクショ

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

iPhone写真_縦横8分の1

 

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

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

 

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

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

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

 

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

 

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

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

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

 

Macの場合

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

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

Macで画像のサイズを調整

 

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

縦横比は固定なので、縦と横をそれぞれ4分の1(25%)にするということですね。

画像サイズを変更する画面

 

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

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

 

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

画像を複数選択

 

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

うん、簡単!

 

Windowsの場合

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

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

 

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

 

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

 

動画の場合は?

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

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

 

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

 

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

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

 

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

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

 

埋め込み動画や、Thetaの360度画像も同じですね!

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

 

まとめ

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

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

 

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

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

 

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

たかだか200万画素とか、100万画素くらいで十分だと思えるからです。

 

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

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

\小学生向けタブレット勉強アプリといえば!/
関連コンテンツ

ikki(イッキ)のプロフィールはこちら。大企業からベンチャー企業に転職系。30代の子育て世代です。明日がもっとスタイリッシュな生活になるように、今日も貪欲に何かを求めていきましょう。他人に伝えられる事って自分が実際にやった事だけ。まずは何でもチャレンジしてやってみる事が大事!湘南暮らしリモートワーカーのプログラマー。RubyやPython書いてます。器械体操・トランポリンジャグリングも大好きです。