シンプルな構成により爆速で表示されることで有名な阿部寛のホームページですが、さまざまな技術を駆使してさらに35％の高速化を実現した動画が人気です。ぜひ本家サイトでも取り入れてほしい改善策。
この動画を公開したのは、コスメティック田中さん。動画によると、阿部寛のホームページがホームページビルダーというやや古いソフトで作られているなど、近代的な技術を駆使すれば改善できる余地が見られることを発見し、高速化に乗り出したそうです。
最初に実施した高速化は、サイトの通信速度の改善から。CDNという技術で通信速度を上げる技術を使用するため、AmazonのCloudFrontにファイルをそのままアップロードして、コピーの阿部寛のホームページを作成しました。
このCDNの使用により、0.03秒ほどの高速化に成功。CDNは世界中のサーバにサイトのキャッシュを作成することで物理的な距離を短縮して海外のサイトでも早く見られるようにする技術ですが、日本にサーバがあると思われる阿部寛のホームページが速くなったのは、CloudFrontが次世代の通信を実装しているからではないかと推測しています。
続いてファイルサイズ圧縮のため、サイトトップにある阿部寛さんの写真を「.jpg」形式から次世代の「.webp」形式に変換し、背景の壁紙に使われている「ABE Hiroshi」の文字の画像を似たフォントの文字データで再現します。さらにトップページのメニューのため2つに分かれた部分を1つのファイルに結合し、ソースの改行も削除。これらの作業により、ファイルサイズを37.5キロバイトから9.5キロバイトへと約4分の1に圧縮できました。
こうしてできた改造サイトは、ただでさえ速い元のサイトと比べても体感で分かるほど読み込み速度の改善に成功。通信速度を5キロバイト/sに制限してみると、改造後のサイトの方が圧倒的に早く表示されました。計測サイトの結果によると、約35％ほど高速化できていたということです。
画像提供：コスメティック田中さん
続きを読む
Source: 芸能野次馬ヤロウ