こんにちは、アウラの河野です。

ここ最近Webサイトでは「表示速度」が重要視されている傾向にあります。
表示が遅いとサイトの離脱率も増え、検索順位も悪くなると言われています。

そんな中、去年あたりにTwitter界隈で騒がれていたのが、
「dev.to」と呼ばれる世界一表示速度の速いサイト。

「爆速すぎて笑う」
「早すぎて逆に不安になる」

っと、言った逸話があります。
実際にそのサイトを見たところ、本当に驚くような速さ。
画像の表示速度から、ページ遷移まで、どうなってんだ！？というような速さ。

dev.toとは

そもそも、dev.toとは、2016年に米国で登場したサイト。
プログラマーが情報交換をしたりするコミュニティサイトです。
日本ではQiitaのような感じが一番近い気がします。

ネット上での騒がれように、サイトの創設者ハルパーンさんが、
表示速度が速い理由を記事にて説明いたしました。

爆速のdev.to！その方法は3点

その記事によれば、
・CDNの利用
・レンダリングの時間を短縮する工夫
・画像をCDNで高速配信

この3つが大まかに言うと速度を上げる秘訣らしいです。

１．CDNの利用方法について

まず、米Fastlyが提供するCDNを利用しています。
CDNとは「Content Delivery Network」の略称。
同一のコンテンツを、 多くの配布先、例えば多くのユーザーの端末に効率的に配布するために使われる仕組みです。

米FastlyのCDNは独自システムと高スペックインフラによる瞬時のキャッシュ消去や更新で、
従来のCDNでは実現が難しいと言われていた動的コンテンツをキャッシュできることが主な特長になります。
FastlyのCDNは世界中にキャッシュサーバを分散配置し、ユーザーに最も近いサーバにキャッシュした画像や動画などのコンテンツを配信する仕組みです。

まあ、とにかく、小難しいことは置いといて、キャッシュを残すことでページ速度を上げています。

２．レンダリングの時間短縮

レンダリングとはHTMLファイルの記述を読み込み、そのままの文字としてではなく画像などを表示させることを言います。
ファイル数が多いと、読み込み数が多くなり、レンダリングが遅くなります。
そんな中で、dev.toは、外部CSSリクエストや、カスタムフォント、JavaScriptなどのレンダリングをブロックしているものを完全削除。

dev.toでは共通箇所のCSSをHTMLの中に直接記載しています。
そうすることにより、レンダリングブロックをする外部CSSがないため、即座にレンダリングができる仕組みです。
追加のCSSはファーストビュー表示後に取得されるような仕組みです。

JavaScriptも同様に、
「async」で同期通信を行い、ライブラリなどは極力使わずにjsを記載しています。
こちらもCSS同様に、ファーストビューかそれ以外で表示順を分けて記載されています。

３．画像を高速配信

画像管理のクラウドサービス「Cloudinary」を使い、圧縮や自動での最適化、
ブラウザ別に画像をCDNで高速配信しているようです。
Cloudinaryでは、アップロードした画像のリサイズ、http2配信、ブラウザごとに最適な拡張子（webp/jpeg）の選択などをオンデマンドで行ってくれます。

それにより、dev.to内での画像表示速度が、異常なほど速いのです。

どのサイトもこの方法で速くなるのか？

それでは、dev.toのように高速なサイトを、
どんなサイトにも取り入れることはできるのか？と言われれば、それは違います。
サイトの創設者ハルパーンさん曰く、ブログ、メディア、ECサイトなどは不向きのようです。
それは、動的に変化するコンテンツが少ないサイトほどキャッシュが有効になるかららしいです。

これからページ速度をあげたい人がまずやることは？

今回紹介したdev.toのサイトを参考に、
「じゃ、自分のサイトも爆速にするか！」と言われても、
そうそう簡単にできることではありません。

まずは簡単な方法をいくつかご紹介します。

１．画像の圧縮

なんと言ってもWebサイトが遅くなる理由のひとつが画像。
これを圧縮することで、少しはサイトが早くなります。

ブラウザ上で簡単に画像圧縮ができる一番有名なサイトはこちら
https://tinyjpg.com/

２．CSSも圧縮

CSSファイルも圧縮することが可能です。
例えば多く改行を入れていたり、コメントアウトをしていたり、
行数が長くなればなるほど、遅くなるとも言われています。
https://syncer.jp/css-minifier
こちらでは、簡単にCSSを縮小・圧縮ができます。

ただ、問題点としては、改修作業などをする際に、
CSSを圧縮してしまうと非常にやり辛いです。バランスが大事になります。

３．レンダリングを少し意識しよう！

外部CSSファイルや、JSファイルの読み込みを、とりあえずHTMLの上の方に記載している方もいると思います。
HTMLは上から順番に読み込まれるので、外部ファイルを上の方に置くと、レンダリングが遅くなります。
body閉じタグの前や、順番などを変えるだけで少しは変化されます。
レンダリングがどのように行われ、何がボトルネックになっているのか調査するのも1つの方法です。

dev.toよりも速いとされる日本のサイトがあった！（小ネタ）

実は、世界中で速いと言われるdev.toよりも
日本の某俳優の公式Webサイトの方が速いのでは！？という論争がネット上でおきました。

結果、dev.toよりも速いということがわかり、
コレを機に、dev.toの技術を某俳優のサイトでも取り入れてみよう!と実践をした猛者もいるとか。

見れば、早さの理由が分かります。(笑)
なによりも、ちゃんと更新されているのがすごいです。
http://abehiroshi.la.coocan.jp/

まとめ

静的サイト強し！！