阿部寛のホームページをさらに高速化した猛者現る　35％の高速化に成功し速度制限未満でも一瞬で表示可能に

　シンプルな構成により爆速で表示されることで有名な阿部寛のホームページですが、さまざまな技術を駆使してさらに35％の高速化を実現した動画が人気です。ぜひ本家サイトでも取り入れてほしい改善策。

まだ高速化の余地が……!?

　この動画を公開したのは、コスメティック田中さん（YouTube／Twitter）。動画によると、阿部寛のホームページがホームページビルダーというやや古いソフトで作られているなど、近代的な技術を駆使すれば改善できる余地が見られることを発見し、高速化に乗り出したそうです。

今回実施する高速化

この2点を改善していきます

　最初に実施した高速化は、サイトの通信速度の改善から。CDNという技術で通信速度を上げる技術を使用するため、AmazonのCloudFrontにファイルをそのままアップロードして、コピーの阿部寛のホームページを作成しました。

ファイルをアップロードします

　このCDNの使用により、0.03秒ほどの高速化に成功。CDNは世界中のサーバにサイトのキャッシュを作成することで物理的な距離を短縮して海外のサイトでも早く見られるようにする技術ですが、日本にサーバがあると思われる阿部寛のホームページが速くなったのは、CloudFrontが次世代の通信を実装しているからではないかと推測しています。

高速化に成功

　続いてファイルサイズ圧縮のため、サイトトップにある阿部寛さんの写真を「.jpg」形式から次世代の「.webp」形式に変換し、背景の壁紙に使われている「ABE Hiroshi」の文字の画像を似たフォントの文字データで再現します。さらにトップページのメニューのため2つに分かれた部分を1つのファイルに結合し、ソースの改行も削除。これらの作業により、ファイルサイズを37.5キロバイトから9.5キロバイトへと約4分の1に圧縮できました。

画像ファイルを画質を損なわない程度に圧縮していきます

　こうしてできた改造サイトは、ただでさえ速い元のサイトと比べても体感で分かるほど読み込み速度の改善に成功。通信速度を5キロバイト/sに制限してみると、改造後のサイトの方が圧倒的に早く表示されました。計測サイトの結果によると、約35％ほど高速化できていたということです。

見事高速化に成功

画像提供：コスメティック田中さん（YouTube／Twitter）