WEBサイトのページ表示を高速化させる方法

WEBサイトのページ表示を高速化させる方法

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

最近ふと思ったのですが、「小さい、遅い」と聞いた時よりも、「大きい、速い」と聞いた時の方がなんとなく優位に感じますよね……。
つまり「小さい、遅い」はネガティブワード、そして「大きい、速い」がポジティブワードなのではないかと。

スーパーで果物や生鮮食品などを買う時は、同じ価格なのであれば「小さい」よりも「大きい」方がトクした気分になりますよね。買い物だけでなく、仕事だって「遅い」よりも「速い」ほうが圧倒的に良いわけです。

ことインターネットに関しても、ダウンロード速度は「速い」ほうが良いに決まっているし、ゲームをしていても「30fps※」よりも「60fps」が良いというわけです。
(※「fps」……frames per second。1秒あたりの静止画像数を意味し、数が多いほど滑らかな動きとなる)

前置きが長くなりましたが、ホームページに関しても、表示速度は「遅い」よりも「速い」ほうが確実に良いということは、過去のbitWaveでも何度も記事としてご紹介いたしました。
<bitWave関連記事『HTTP/2で爆速。ブラウザ表示速度が驚異的に速くなる実験結果』>
<bitWave関連記事『DNSキャッシュでWebの表示速度は速くなるか試してみた』>
<bitWave関連記事『モバイルの表示速度を上げるTips(SEO効果も)』>
<bitWave関連記事『読み込み速度の重要性』>
<bitWave関連記事『NEED FOR SPEED|世界最速のブログを発掘!!』>

大手ECサイトや検索エンジンに関して、「高速化することで業績向上に繋がる」という調査や分析などを公表しているデータもあり、世の中的にはマイクロ秒単位でも「速く」したいというニーズはあるようです。
「Google AMP」が昨年後半に次々と発表をする中、弊社研究室でも独自にWEBページを高速に表示させること技術の追求をしてみました。
今回はその成果を本記事で発表したいと思います。

何故企業のWEBページが遅いのか

多くの企業がCDNを活用したり、質の良いWEBサーバや回線帯域を確保しているため、非常に良好なスピードを出しているケースはあります。しかし、そうした施策を行っているにも関わらず、アクセスしてから表示までが非常にスピードが遅い企業ページがあったりもします。さすがにどことは言いませんが、WEBページを閲覧した際に、「遅い!」と感じたらそれが該当ページです。

考えられる主な要因は下記のとおりです。
要因1『外部ドメインで使っているサービスが遅い』
要因2『ブラウザのブロッキング制限に引っかかって遅い』
要因3『画像や各種プログラムの容量が圧迫して遅い』

要因1『外部ドメインで使っているサービスが遅い』

とにかくブラウザのデバッグツールを見ている限りでは、かなりの確率で広告バナーなどが遅いケースが多いようです。

すべてというわけではないものの、表示まで時間がかかったり、バナーのコンテンツが容量が肥大化していたり……。非同期処理が行われていなければ、コンテンツをダウンロードするまでページの読み込みは完了しません。最悪の場合、その読み込み中の間はずっと画面が真っ白のまま……なんていうケースもしばしば見受けられました。

要因2『ブラウザのブロッキング制限に引っかかって遅い』

Chrome、IE、Firefoxなどは、ブラウザ毎にサーバから同時に読み込みができるファイル数が制限されています。しかし、そういった情報をユーザはあまり意識せずに利用しているのではないでしょうか。
さらにはこうした事実を考慮していないWEBページ制作会社も多いのかもしれません。

ちなみに本稿執筆時点(2017年4月)では……
Chrome:同時読み込み6ファイルまで(変更不可)
IE:同時読み込み2ファイルまで(変更可能)
Firefox:同時読み込み6ファイルまで(変更可能)

また、ブラウザだけではなく、サーバ側で同時接続数の設定変更も可能なので、WEBページ制作時にこうした認識を考慮した設計ができていることが重要となります。
本当に考えなければいけないことは、ブロッキングの数字を上げることでサーバ負荷が増え、ネットワーク帯域の増大にも繋がってしまいますので、こういった “副作用” さえ知っていれば、制作側での対応もできるのではないでしょうか。

要因3『画像や各種プログラムの容量が圧迫して遅い』

最近のスマートフォンや携帯電話に実装されたカメラの性能はかなり素晴らしいのは周知の事実。撮影したデータをそのままWEBページに掲載させてしまうと、1回の画像表示で数メガバイトもの容量がダウンロードされることになってしまいます。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

Adobeの2017年10の予測マーケティングトレンドを読み解く -考察編... 昨日はAdobe社が公開した『2017年10大マーケティング・トレンド』を要約という形でご案内させていただきました。 <参照:Adobe UNITE『2017年、マーケティングトレンド予測トップ10』> 続編となる今回は『考察編』と...
Adobeの2017年10の予測マーケティングトレンドを読み解く -要約編... Adobe社が今年始めに『2017年10大マーケティング・トレンド』という記事を公開しました。 これは言うまでもなく米国のトレンドであって、必ずしも日本に当てはまらないでしょう。しかし、多くのマーケティング技術が米国発である以上、少な...
株の売買のごとくゲームを低価格で遊ぶ方法... こんにちは、据え置きゲーマーのy-matsubara氏です。 去る9月16日、嫁にナイショでPlayStation4用ゲーム『ペルソナ5』を買いました。 意気揚々と自宅に戻ると、嫁からプレゼントを貰いました。 『ペルソナ5』でした...
N高校とSlackとドラゴンクエスト どうも、さむらいです。 朝はZip!しか見ません。だってほのぼのとしているのだもの。 (ネット)通信学校、N高校 少し前(4月)ですが、朝食を取りながらZip!を見ていたら「N高校がヘッドマウントディスプレイを使って入学式!」なんていう...