アパレルのセール時やYahoo!砲、グノシー砲のために、同時アクセス対策として画像軽量化＆CDN化しておこう

瞬間的な同時アクセスは予知できないこともあるので、アベレージではなく同時アクセスに耐えられるようにしておくことが重要です

アイデアマンズ株式会社 2018/7/31 14:09 サイト制作／デザイン | 解説／ノウハウ

11 6 0

※この記事は読者によって投稿されたユーザー投稿です：

編集部の見解や意向と異なる内容の場合があります
編集部は内容について正確性を保証できません
画像が表示されない場合、編集部では対応できません
内容の追加・修正も編集部では対応できません

「セールが始まったタイミングでアクセスしたら、なかなかページが表示されない」「ニュースサイトからページ遷移したら、ページがまっしろ」「アクセスが集中しすぎて、クレームがきた」

こんな経験がある方もいるのではないでしょうか。ウェブサイトを訪れたユーザーは「表示されなくてイライラする」という場合もあるでしょうし、ウェブサイトの運営側は「アクセスが多すぎて、サーバが限界！」という状況にあると思います。

これらに共通しているのは、「同時アクセスへの対策が不十分」ということ。

同時アクセスってなに？

あまり聞き慣れない言葉ですが、Webサーバはシステムですので、処理できる限界値があります。なかでも、「同時に処理できる数」というのがとても重要です。少し例えてみましょう。

※行列や荷物が重いイメージ

自動改札の数(処理数を増やす)

JR新宿駅の出口が一つしかなく、しかも自動改札が１機しかなかったら、長蛇の列ができてしまうでしょう。これは同時に処理できる数が「１」しかないため、その「１」以外の人は待つしかありません。この同時に処理できる数を増やすためには「自動改札機を増やす」ことで同時に処理できる数を増やすことができます。

荷物を減らす(不要なものはなくす)

スーツケースを１つもって、大きなリュックを背負う。しかも手にはお土産の袋がたくさんある。これでは、スイカのカードを取り出したり、切符を出すのも大変です。自動改札を通るのに時間がかかってしまうでしょう。スーツケースや手荷物などは最小限にしておけば、すんなりと自動改札を通ることができます。

このように、「不要なものをなくす」＋「処理の数を増やす」ことで、同時にアクセスされた場合でも、ページが真っ白にならない（待たさない）ようにすることができます。

同時アクセス対策しよう

去年から、ウェブサイトの表示高速化が話題です。処理時間を短くすることで、より多くのアクセスに耐えられるようになります。インフラ担当者やネットワークエンジニアなどでは当たり前の対策ですが、表示高速化に詳しいエンジニアがいない場合、同時アクセス対策がされていないケースが多いのです。

ここでは、詳細な対策内容ではなく、大まかな対策として記載していきます。

※荷物が軽く、流れるイメージ

対策する順番

対策には順番があります。順番を逆にすることは可能ですが、おすすめな順番を記載します。

１回のアクセスを処理する時間を短くする
可能な処理数を増やす

まずは、処理時間を短くします。今まで１０秒かかっていたものを５秒にする、３秒にする、といった具体です。

その次に、処理できる数を増やします。サーバのスペックアップやチューニング、CDN(Contents Delivery Network)を利用するなどでチューニングしていきます。

一回のアクセスに対する処理時間を短くする

近くのコンビニに行くのに、荷物を全部持っていく必要はありません。必要最低限の物があれば十分なのです。できるだけ荷物をなくせば、軽くて動きやすいですよね。ウェブページの表示も、不要のファイルの読み込みや、重たい画像・動画データ、不要な処理などが多くあります。
ページの表示に「必要なものだけ」が読み込まれるようにしておきましょう。

実施検討する内容

画像軽量化
動画軽量化
フォント軽量化
ソースコードの最適化

可能な処理数を増やす

自動改札機の処理時間が、一人あたり１０秒かかっていたら、改札には多くの人が待つことになります。そのため、自動改札機は高速な処理が求められます。なお、Suicaの自動改札機にはFelicaが利用されており、一回の処理時間はわずか０．２秒しかかからないそうです。

実施検討する内容

WebサーバやDBサーバなど、インフラのスペックアップを行う
インフラの設定や構成を見直し、配信の最適化を行う
CDNを導入する

これだけは抑えておきたい！

最後に、「結局どうすればいいの？」という内容を記載しておきます。同時アクセス対策は、実は非常に難易度が高く、広範囲な知識と技術が必要です。そのため、なかなか解決まで至らないということもあるので「どこまでやるか」を決めて実施するのがおすすめです。

画像軽量化
フォント軽量化
CDNの導入

上記３つを抑えておくことで、ある程度の高速化は実現されます。「画像」と「フォント」は容量が肥大しがち。これらをしっかりと軽量化することで、表示速度は一気に向上します。
そして、CDNを導入することで情報の配信を高速化することができます。CDN導入も、今はだいぶ料金も下がっているので、是非検討してみましょう。

ソースコードの見直しやフロントエンド技術の見直しなども、もちろん有効です。しかし、その結果レイアウトが崩れたり、全体の表示テスト・動作テストをするとなると、「かんたんにできること」にはなりません。

同時アクセス対策や表示高速化は、「効果が高く、かんたんに導入できる」ものから実施していきましょう。

Google Lighthouseを利用した、Webパフォーマンス改善の内容を記載したブログ記事もぜひ。読み込み時間の大幅な短縮を実現しています。