More than 5 years have passed since last update.

阿部寛のサイトを高速化する

Last updated at 2017-11-19Posted at 2017-11-17

ちまたで阿部寛のサイトが早いと話題になってます。

阿部寛のサイトはベストを尽くしてるのか？
それを調べるために、阿部寛のサイトを高速化させてみたいと思います。

目指すべきスピード

最速はローカルのファイルへのアクセスだと思うのでこれを目指したいと思います。
file:///C:/abe_hiroshi/index.html

ChromeのDeveloper Toolでレンダリング完了が「173ms」でした。
まぁここまでは無理だな…

速度はwebpagetest.orgで測ってみます。

レンダリング完了時間は「359ms」です。はえーな

サーバーを立てるほどでもないので、S3でWebホスティングしてそこにhtmlと画像を置いてみます。

レンダリング完了時間が「698ms」なんで、まだまだ遅いです。

続いてS3のオブジェクトをCloudFrontでキャッシュしてみる。

レンダリング完了時間が「379ms」になりました。
やはりCDNは効果絶大です。

dev.toではCloudinaryという画像ホスティングサイトを使用しており
画像をアップロードすると様々なフォーマットで利用できるようになります。

dev.toでも使用している「Webp」というJPG/PNGよりも圧縮に優れたフォーマットで
大幅なサイズ削減を実現してくれます。
サイズ削減できれば高速化できるはず。早速試してみます。

画像の変換作業は、Cloudinaryでこんな感じの画面で行えます。

cloudinaryのURLをhtmlに埋め込んで計測してみます。

はい、全部Aになりました。
しかし、レンダリング完了時間が「1.337s」と遅くなった…なぜでしょう？

このページではHTTP2が有効になってます。
同一ドメインでないと余計なコネクションが発生してしまうのではないかと推測し、
同一ドメインに画像を置いてみることにします。（間違えてたらご指摘おねがいします）

ということでCloudinaryから直接画像を読み込むのではなく、WebpをダウンロードしてS3に配置してみます。

お、「328ms」になりました。
また読み込みバイト数も「70KB」から「18KB」になりました。
これはいい感じですね。

これで阿部寛サイトを超えることができました！

以下の技術を使用すれば既存の阿部寛サイトを凌駕することが出来ました。

ここまでしないと超えられない既存サイト…恐ろしい。
Service Workerも使ってみたかったですが、それは今度の機会に。

では！

405