ウェブページのページ表示速度を高速化する

1

Bloggerの表示速度を高速化するからウェブページ共通の部分を分離しました。

ウェブページが早くなる（遅くなる）要素

  • HTML解析
    • HTMLファイルを解析して表示するページを作成します
    • これが終わらないとページは表示されません
    • これを最速で行うことが一番重要です
  • レイアウト時間
    • HTMLの構造が深いまたは、複雑な場合、HTML解析に時間が掛かります
      • HTML構造は単純にする
    • CSSのルール数が少ない方が、HTML要素の配置ルール決定が早くなります
      • CSSルール数は少なくする
      • HTML要素数を少なくしても良い
    • CSSセレクターが単純な方が、CSS解析が早く行えます
      • CSSセレクターの記述は単純にする
    • 遅いCSSプロパティを使用しない
  • スクリプト実行
    • スクリプト実行するとHTML解析処理が止まります
      • HTML解析を妨害しないようにスクリプトの実行を制御する
  • 読込み開始時間
    • ファイルを早く読込み開始することで、ファイル読込み完了を早くする
  • 非同期処理
    • 同期処理の場合、HTML解析をファイル読込み完了まで待機する
      • HTML解析が止まるため、遅くなる
    • 非同期処理では、HTML解析をファイル読み込み中でも実施る
  • 転送量
    • 読み込むファイルの容量が少ない方がファイルを早く読み込める
  • サーバ応答時間
    • サーバがより早く応答した方が処理が早くなる
      • 高額なサーバを利用する方法を検討しましょう
    • CDNを利用することで、低速サーバでも高速化する方法もあります
      • 低額または、無料でも十分な性能を発揮できます
  • リクエスト回数
    • ファイル数が少ない方が、通信の開始終了処理の回数が現象するため、高速化する
      • HTTP2などでは、一回のリクエストで複数ファイル一度に転送できるようになります
    • 上記の理由から、複数サーバからそれぞれファイルを読み込むと低速になる

不要なスクリプト、CSS、画像、HTML要素を削除する

JavaScript

  • jQueryは、本当に必要か？
    • ネイティブJavaScriptで記述できませんか？
      • IE等クラシック環境を諦めれば、簡易にネイティブJavaScriptで書けます
      • IEは、IE11のみ対応とすれば、だいたはネイティブJavaScriptで書けます
    • 小型なライブラリはありませんか？
      • ajaxだけ使用するなどの用途であれば、小型ライブラリで代用できます
  • そのスクリプトは本当に必要か？
    • なくても良いものは、削除することを検討してみては？
  • いいねボタンなどの埋め込み要素は必要か？
  • console.logは残っていませんか？
    • 本番環境では遅くなるだけです

CSS

  • CSSライブラリは、本当に必要か？
    • 必要箇所が一部だけであれば、一部を抽出するのもありです
    • リセットCSSなどの簡易なライブラリに置き換えるのも手です
  • 未使用のコードはありませんか？
  • 複雑な記述になっていませんか？
  • 重複して指定していませんか？
    • 通信量が減少します

画像

  • その画像は、本当に必要か？
    • 文字、背景色などHTML構造やCSSで代用できませんか？
  • 使用サイズより大きな画像を配置していませんか？
    • 表示領域に合わせた画像サイズにすることで、通信量が減少します

HTML

  • HTMLLが複雑な階層構造になっていませんか？
    • 不必要な<div>階層化
  • style属性を多用していませんか？
    • CSSに分離することで重複を排除できる場合があります
    • 基本的に、HTMLとstyleは分離した方が良いです
  • <dev style="clear: both;"/>が大量に記述されていませんか？
    • clearfixで代用しましょう

インライン化する

リクエスト数の現象で高速化が見込めます。ただし、HTMLファイルが肥大化しブラウザキャシュの効果が効かなくなります。小さいアイコンや簡易なスクリプトなどに限定したほうが無難かも。

非同期で読み込む

  • 外部スクリプトの非同期読込み
    • <script>タグにasync属性を指定することで非同期で読み込むことができます
    • 実行順序が依存する場合、defer属性を指定すると順序を保証できます
  • 外部CSSを非同期で読み込む

レンダリングブロックを減らすことで初回表示が高速化します。

遅延読み込み

ページ表示速度が高速化します。ページ表示速度の計測範囲外のタイミングで読み込むため、ページ表示速度が高速化します。

※領域内に入った場合のイベント
　Intersection Observer API - Web API | MDN
※初回ユーザイベントまで遅延する方法もあります
　初回ユーザイベントで発火する：onLazy.js

styleをhead内に記述する

<style>は、スクリプトをブロックします。スクリプトは、パース解析をブロックします。そのため、<style>を<head>内の<script>以降に記述することでファーストビューの高速化が見込めます。

圧縮する

  • 画像の圧縮
  • スクリプトの圧縮
  • CSSの圧縮
  • HTMLの圧縮
    • documentオブジェクトは、Nodeとして空白のみのタグ間領域も保持しています
    • タグを詰めて配置するだけでも、ドキュメントツリー構築を高速化できます
      • 理屈上は…（ほとんど効果はないと思われるが）
      • 編集のしやすさの方が遥かに重要であるため、ほどほどに

ファイルサイズを減らして、通信量を減らします。

DNSプリフェッチする

外部ファイルのDNSを先読みでプリフェッチすることで、高速化が見込めます。

CSSを書き換える

などなど、調べるといっぱいあるのでセレクタまわりを検討する。

HTMLのホワイトスペースを削除する

HTMLのホワイトスペースは、HTMLパース処理でホワイトスペースだけのNodeとしてDOMツリー上に構築されます。ホワイトスペースを事前に削除しておくとHTMLパース・レイアウト処理の高速化が見込めます。ただし、編集用のファイル自身のホワイトスペースを削除してしまうと編集しづらくなるため、最後の処理としてホワイトスペースを削除します。自分用に作ったツールが次になります。もっといいのがあれば、そっちを使ったほうが良いです。

※ホワイトスペースを削除するとレイアウトが崩れることがあります