マンガ閲覧(プリロードと海外からの配信)

海賊版漫画におけるCDN配信が問題になっています。一方、漫画のような連続した画像をユーザに読ませる場合、HTMLプリロードを使えば、海外サーバからの配信でもストレスなくユーザに視聴させることが可能です。

HTMLプリロード

あるHTMLページにおいて特定URLのファイルを先読みさせる機能です。記述は以下のようになります：

<a href="./page12p.html">Page 12</a> <br>
<img src = "11p.png"/>
<link rel="preload" href="12p.png" as="image"/>

この場合、漫画の11ページ目を読んでいる間に12ページ目の画像を先読みする事になります。つまり、通常、漫画1ページを読むには数秒程度必要ですが、その時間に次のイメージファイルをダウンロードさせ、ユーザの待ち時間を短縮するテクニックです。

Amazon Cloudfrontを使用し、二つの配信設定(全地域サーバ使用、北米・欧州サーバのみ使用）に対するアクセス状況をチェックします。素材は、「ブラックジャックによろしく、佐藤秀峰」をPNG化したものを使っています(https://densho810.com/free/)

CDNサーバまでのRTTとダウンロード時間(HTMLファイル(227B)、pngファイル(1MB))

北米・欧州からの配信でもページ切り替え速度(html+pngダウンロード時間)は1.45秒であり、一般的な許容範囲(2.0秒)以内には収まっています。ただし、1秒以上かかっているので「もさっと」感がある気がします。

また、プリロードページの場合、一般的な漫画1ページの視聴時間(数秒～10秒)以内に次イメージのプリロードが終わっており、htmlダウンロード時間(0.45秒)だけで次のページが表示されます。個人的には、プリロード無しと同等のQoEだと感じます。

S3を使用したサンプルサイトは以下にあります。