【検証企画】阿部寛のホームページは、何であんなに爆速なのか？徹底的に比較検証してみた。

【検証企画】阿部寛のホームページは、何であんなに爆速なのか？徹底的に比較検証してみた。

皆さんどうもこんにちは。セキュリティ大学の霊夢です。 魔理沙だぜ。 さあ、今回は安倍ひのホームページ。なんであんなに爆速なのか検証してみた。 [音楽] おお。 ということで東大生の皆さんこんにちは。今回は爆速読み込みで知られている安倍浩のホームページの謎を解明していきます。 てか、その安倍ひのホームページって爆足って聞くけど、どれぐらい爆速なんだ? ネットの情報を見ていると通信制限でも余裕で見れたとか、ま瞬きしてる間にページが開いてたなんて声がありますね。 [音楽] 相当爆速なんだな。 まあ、事実がどうなのかは実際に見てみた方が早いでしょう。ということで早速やってみましょう。 [音楽] おう、頼んだぜ。 ということで早速見ていきたいんですが、まずは比較のため [音楽] NEND 堂の公式サイトを見てみましょう。 早速ログインしてみるとはい、ページが表示されましたね。 [音楽] これでも十分早くないか?まあ、確かに早いですね。ただ安倍ひのホームページはこんなもんじゃありません。実際に見てみましょう。ということで、安倍ひのホームページに行ってみます。先ほどと同じように [音楽] URL を貼って飛んでいくとはい、開きました。 爆速すぎ。わろた。 はい、このようにマジで爆速で読み込まれます。見逃した人のためにもう [音楽] 1 度リプレイです。リンクを貼って検索するとはい、読み込まれます。 何回見てもマジで早すぎるんだが。実際どれぐらいの速さでこのページは読み込まれてるんだ? [音楽] では次はWeb ページの読み込み時間を分析するサイトで詳しく見ていきましょう。ということで、こちらは Web の読み込み時間をスコアで出してくれるサイトです。まずは先ほども見た任天堂の公式サイトを見てみましょう。 [音楽] はい、結果が表示されました。このかこ LCP と書かれているのがユーザーがページを見れると実感するまでの時間です。 任天堂のサイトは2.2 秒ほどかかってるんだな。 ちなみにユーザーの快適差こページ読み込みの速さを点数化したものなんかも載っていたりします。 100点満点なんですが任天堂のサイトは 32点となっていました。 まあいろんな画像とかソフトの情報とかも載ってるし仕方ないんだぜ。 では、安倍ひのホームページはどのようになっているのでしょうか?こちらも分析してみましょう。はい、それでは安倍ひのホームページについて分析を開始します。読み込み速度を見るとはい、 0.5秒となっていますね。 1 秒もかかってないのか。 さすがの速さといったところでしょうか。そして気になる点数なんですが。はい。もう当たり前のように [音楽] 100点を叩き出してきました。 バカほど高くてわろた。 ちなみにパフォーマンス以外の部分は障害を持つユーザーにとって使いやすいかやなページであるか検索エンジンの最適化がされているかなどを点数化したものなので読み込みの速さには関係しません。 つまり読み込み速度はパフォーマンスの点数を見れば分かるってことだな。 はい、その通りです。ですので安倍浩のホームページはこの点数からも超絶爆速だと分かるでしょう。 だって満点だもんな。 では、どのようにしてこの読み込み速度を 実現しているのでしょうか?ここからは 読み込み速度が早い理由を解明していき たいと思います。 実際に開発者ツールを使ってウェブページ の構成を見てみましょう。実際にHTML の構成を見てみるとかなりシンプルな構成 をしています。ちょっと見づらいので コードの部分を拡大してみてみましょう。 この中で画像が使われている部分を探して みます。すると1箇所だけ画像が使われて いるようですね。はい。これはホーム ページを開いたと同時に出てくる安倍ひし の顔写真のようです。この写真以外には ホーム画面には画像が使われていないよう です。外部リンクやスクリプトを確認し ましたがページ内にそういった外部 リクエストは全然ありませんでした。また CSSはスタイルタグないに全て直書きさ れておりのない非常にシンプルなホーム ページでした。ちなみにこちらが安倍ひ さんのホームページのソースを表示した際 の画面になります。この画面をよく覚えて おいてください。次に任天堂 公式サイトのページのソースを見てみましょう。はい、こちらが任天堂のものになりますね。 [音楽] もはやページの分量が違いすぎるんだぜ。 これを見れば安倍ひのホームページがいかにシンプルな作りをしているかが分かるでしょう。 確かに安倍ひさんのホームページとは全然違うんだぜ。 このシンプルなページ構成があの速度を生み出しているんですね。 その他にもポントが標準であったり背景に無駄な装飾がなかったり、上下スクロールもほぼ不要であったりとかなり洗礼されたデザインとなっています。この飾り気がなく無駄なものは全て省いたホームページはむしろ男らしく感じてきますね。 [音楽] 確かに書かれている内容で勝負してる感じが素晴らしいんだぜ。 ということで今回は安倍浩のホームページが爆速な理由を検証していきました。 あの速度を実現できるのはシンプルなページ構成のおかげだったんだな。 そうですね。 ウェブページを作る際には是非参考にしたいですね。ということで今回の動画はここまでです。最後は安倍ひさんのホームページを開いて終わりとしましょうか。行きます。 バイバイ。なんだこの終わり方。 [音楽] 最後までご視聴いただきありがとうございました。 是非高評価とチャンネル登録をしてくれよな。 よかったら気軽にコメントもしていってくださいね。それでは良いエンジニアライフを [音楽] バイバイ。 [音楽]

ご視聴ありがとうございます。
他の動画もぜひご覧になっていってくださいね！

—————————————————————————————
■Twitter(現在準備中)

素材提供(一部抜粋)

・効果音ラボ→https://soundeffect-lab.info/
・イラストAC→https://www.ac-illust.com/
・DOVA-SYNDROME→https://dova-s.jp/
・イラストや→https://www.irasutoya.com/
・FREE BGM DOVA-SYNDROME →https://dova-s.jp/

※この動画は【東方project】を基にした二次創作です。
東方Projectの二次創作ガイドライン
https://touhou-project.news/guideline/

———————————————
#阿部寛
#阿部寛のホームページ
#セキュリティー
#itパスポート