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

海賊版漫画における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"/>
<link rel="prefetch" href="page12p.html"/>

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

CDNサンプル

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

• Cloudfront(全地域サーバ(日本サーバ含む))
  • https://dv0c6rz2kcvg4.cloudfront.net/index.html
    • プリロードなし:https://dv0c6rz2kcvg4.cloudfront.net/page01.html
    • プリロードあり：https://dv0c6rz2kcvg4.cloudfront.net/page01p.html
• Cloudfront(北米・欧州サーバのみ)
  • https://d39n4l0dfkxhym.cloudfront.net/index.html
    • プリロードなし：https://d39n4l0dfkxhym.cloudfront.net/page01.html
    • プリロードあり：https://d39n4l0dfkxhym.cloudfront.net/page01p.html

計測結果と数字の意味合い

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

	CDNサーバへのRTT	htmlダウンロード	pngダウンロード
全地域(日本配信)	2.2ms	0.09秒	0.1秒
北米・欧州のみ	108.0ms	0.45秒	1.0秒

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

一方、プリロードページの場合、一般的な漫画1ページの視聴時間(数秒～10秒)以内に次ページ要素のプリロードが終わっており、ダウンロード待ち無く次のページが表示されます。

つまり、海外からの配信の場合、最初の1ページ目は少し(1.45秒)表示に待ちが出ますが、プリロードを使用すれば2ページ目以降のダウンロード待ちはありません。

補足：S3サンプル

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

• 東京
  • https://kosho-manga-tokyo.s3.ap-northeast-1.amazonaws.com/index.html
• ソウル
  • https://kosho-manga-seoul.s3.ap-northeast-2.amazonaws.com/index.html
• 米国西海岸(California)
  • https://kosho-manga-us-west.s3.us-west-1.amazonaws.com/index.html
• 米国東海岸(Virginia)
  • https://kosho-manga-us-east.s3.us-east-1.amazonaws.com/index.html