自社のWebサイトを爆速にしたが、あのWebサイトに勝てない




シンジです。会社のWebサイトというものは様々な役割があるなぁと思うのですが、会社立ち上げのスタートアップの場合は新規作成する法人向けの銀行口座申請の為だったりとか、クレジットカードのためだったりとか、所在確認的な意味合いしかないので、ペラ一枚で適当に作っておけば何とでもなると言うことは分かりました。が、1年も過ぎたのでリニューアルしたわけです。

なんの為にリニューアルしたのか

IT系のスタートアップって、SaaSの自社製品売り込みが多いので、ぐにょぐにょ動いたりオシャンティーにしたりするところが多いなって印象なのですが、ウチは売り物もないし別にコンテンツもないので、ぶっちゃけペラ一枚の状態でも良かったわけです。

でもある日、シンジは知ってしまうのです。
IT界隈では有名な、あの国内の爆速Webサイト、「阿部寛のホームページ」を超えることができるかもしれないということを。

技術的実験台に会社のWebを利用した

Webサイトの高速化は、閲覧するユーザーに取っては嬉しいことばかりです。サクサクで軽い、通信容量が極小、パソコンやスマホに負担がかからない、ページ遷移が速いと見やすい。阿部寛のホームページは、それをやってのける。

が、スマホで見てもレイアウトは崩れる。
つまりレスポンシブじゃない。

というわけで弊社Webの最低条件はこうなります

・ 爆速
・ レスポンシブ(画面サイズに合わせてWeb側が勝手にいい感じになる)
・ いちおう今時の時代に合わせたデザイン
・ アプリもインフラもイケてる感じで
・ セキュリティ対策は抜群に

まずは結果から

これが歴史的な阿部寛のホームページ

んでこっちが弊社のWebサイト

あと80ミリ秒ほど読み込みが速くなれば勝てる。この80ミリ秒が遠い。もう諦めた。

まずインフラ

今回採用したのはNetlifyです。裏側ではGCP(Google Cloud Platform)が動いてたりします。基本無料です。めちゃめちゃアクセス多いと課金対象になるのですが、キャンペーンサイトでもない限りそうならないので、ゆーて無料です。

独自ドメイン、もちろん使えますし、今回は名前解決にAWSのRoute53を利用していますが、Netlify単体でも可能です。
httpからhttpsへの暗号化処理についても勝手にやってくれます。リダイレクトについても同様です。

便利やん!!

そして高速化の常套手段を言われる「gz形式配信」と「CDN」を使っていません。理由は後半で記述します。

セキュリティ

外部攻撃においては、今回アップロードしているコンテンツは全て静的コンテンツなので、とあるミドルウェアの脆弱性を突いた攻撃などの可能性は皆無です。Webサイト改ざんの可能性を考えたとしても、もしそれが出来たなら、GoogleのWebを改ざんするのと同意義と言っていいはずです。

もしもシンジの落ち度でNetlifyへのアカウントログインを許してしまえばアウトです。
また、Netlifyへのデータ転送については、GitHubやGitlabを繋ぎ込んでNetlifyが読み取りに行く仕組みになっているので、元データを上げているGitHubやGitlabへのアカウントログインを許してしまえばアウトです。

それ言い出したらもう全部アウトやぞ。

アプリ

ここがキモですよ。

ユーザー側からのリクエスト数を極限まで減らす

CSSは外部ファイルにして読み込ませる方式が当たり前だと思いますが、これやるとCSSを外部から取りに行くという1アクション増えてしまうので、style属性やstyleタグに全部書きます。つまり、インラインでCSSを書くわけですが、style属性で出来る事は全部やる。

画像ファイルについても同様です。通常はxxxx.jpgとか、xxxx.gifを指定して読み込ませると思いますが、これも辞める。全ての画像はbase64もしくはSVGとしてHTMLの中に埋め込みます。

JavaScriptについては、そもそも一切使いたくなかったんですが、GDPR対応やGoogle Analytics対応が必要だったので、やむを得ずいれるも、async設定を入れて気持ち速くしてます。

1bytesでも軽量にする

HTMLの属性値を囲っているクォーテーションを削除しています

これを
<a href="/hoge/">

<a href=/hoge/>
こんな感じに

CSSも同様です

これを
.hoge {
display: block;
font-size: 14px;
}

.hoge{display:block;font-size:14px}
こんな感じに

体感速度を上げる

高度に圧縮された画像ファイル、そしてCDNを使った高速配信技術を利用していません。
ファイル容量だけで見ると最新技術を使った方が「軽量」なのですが、実際にやってみると、多少ファイルサイズが大きくなってもbase64にしてHTML内に埋め込んでしまった方が体感速度が速かったからです。

ドン!って表示された方が気持ちいい〜ってことです。

というわけで

結構泥臭くチューニングしまくりましたが、リクエスト数を減らしまくるのはかなり効果が高い模様。会社Web、せっかくリニューアルするんだからってことで適当にコンテンツも用意したのでよろしく哀愁。

株式会社クラウドネイティブ
https://cloudnative.co.jp/