速いと話題のdev.to について

速いと話題のdev.to について

速さの肝はCDN + ServiceWorker。

速くする

  • Fastlyをコンテンツキャッシュに使う(CDN)
  • ServiceWorkerによるブラウザキャッシュ
  • HTTP/2で並列転送
  • Resource Hint APIによる先読み
  • webpの採用
    • Google Chromeならwebp形式、Safariならjpeg形式
    • accept見てjpgかwebpか判断
  • アイコンはsvg
  • マウスオーバーでの先読み
  • Cloudinaryで画像の圧縮を自動で最適化

遅くしない(遅くなる要素を排除する)

  • レンダリングをブロックしているスタイル・スクリプトの排除
    • ソーシャルウィジェットを排除する
    • 広告を排除する
    • 初期レンダリングに使うCSSは<style>内に記述する
    • JavaScriptは同期的に実行しない
  • Webフォント使わない

測定する

速くすることに徹底していて驚くがそれでもまだ速くできると色々と試行錯誤しているのがBenのPostからわかる。
すごい。