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

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

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

JavaScript

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

CSS

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

画像

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

HTML

  • HTMLLが複雑な階層構造になっていませんか?
  • style属性を多用していませんか?
    • CSSに分離することで重複を排除できることがあります
  • <dev style="clear: both;"/>が大量に記述されていませんか?
    • clearfixで代用しましょう

インライン化する

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

非同期で読み込む

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

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

遅延読み込み

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

styleをhead内に記述する

<style>タグは、スクリプトをブロックします。スクリプトは、パース解析をブロックします。

そのため、<style>タグを<head>内で行うことでファーストビューが高速化します。

圧縮する

通信量を減らします。

DNSプリフェッチする

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

コメント: 0

コメントを書く