Edited at

爆速で有名な阿部寛さんのサイトを真面目に分析してみた。


はじめに

日頃からサイトの高速化などは常々心がけて、サイトの作成などを行っているのですが、初めて阿部寛さんのホームページを開いた時度肝を抜かれました。

感覚的にはリンクをクリックする前にページが表示されるような感じで、少し感動にも似た感情を抱いたことを覚えています。

そんな阿部寛さんのサイトが大好きな私が、『阿部寛さんのサイトがなぜそんなに早いのか』を分析してみました。

まだ阿部寛さんのホームページをご覧になったことがない方はリンクよりどうぞ。(マジで早いです。)

阿部寛さんホームページ


早い理由その1:画像が圧倒的に少ない。

まず特筆すべきは画像の少なさです。その数、たったの2枚。背景画像と阿部寛さんの自画像のみでした。

それも画像サイズが小さいため画像読み込みにかかる時間は(10ms)程度でした。

恐るべし。

image2.png


早い理由その2:TTFBは~20msで完了!

TTFB とはサーバーにリクエストを送って、最初の応答が返ってくるまでの経過時間ですが、阿部寛さんのサイトの場合、静的な HTML のみの応答のため、およそ10~20msで応答が返ってきています。笑

ttfb.png


早い理由その3:リクエスト数が極端に少ない

阿部寛さんのサイトの場合、画像リクエストを含めて合計で6本しかサーバーとの接続が発生しておらず、 サーバーとの接続で生まれる遅延が限りなく少ないことが分かります。

Screen Shot 2019-02-20 at 16.16.36.png


早い理由その4:JavaScript が存在しない。

阿部寛さんのサイトにはJavaScript がありません!これはWeb開発をやっている人からしたら結構驚くと思います。(そうでもないのかな?) JavaScriptはブラウザのレンダリングを阻害することで有名なので、 JavaScript 自体を配置しないことでブラウザの描写が超高速になっています。


早い理由その5:CSSがない!?

ついでに外部CSS読み込みのリンクタグも存在しません。最小限のスタイルは直接タグに定義してあります。これによりComposite Layers(レイヤーの構築), Update Layers(レイアーの更新)などのレンダリング系はμsの領域ですべて完了しています。

こんなに早く完了するサイトを見たことがないです。す、すごい。


早い理由その6:レンダリング系の実測値

Composite Layers: ~400μs

Update Layer Tree: ~800μs

Paint: ~500μs

parse HTML: ~10ms

ここまで早いと笑いがこみ上げてきます。

parsehtml.png

補足)阿部寛さんのサイトの場合二つの静的な HTML (メニューとメインコンテンツ)をインクルードしておりこの数値はその合計値です。


最後に

阿部寛さんのサイトは極限まで無駄を省くことで超高速なサイトとなっていることがわかりました。

私個人としてはサイトリニューアルなどせず、このまま素敵なサイトで運営していただきたいな〜と思っています。


余談

ちなみに阿部寛さんのサイトではSEOで重要なmeta descriptionタグを設定していませんが、『阿部寛』の検索ワードではもちろん一位でした。

阿部寛さんくらいになると速度の最適化とかSEO最適化とか関係ないんですね。笑

では、また〜

〜2019/2/22 追記〜

皆様にたくさん読んでいただき、うれしく思います。

別で、阿部寛さんのサイトのSEO関連、主にトラフィックに関する記事を書いてみたので、興味のある方は見てみてください。

阿部寛さんのサイトのSEO関連を調べてみた。

では、また〜

twitter:@LeapIn_JP