タグ

ブックマーク / www.sassy-blog.com (1)

  • レンダリングブロックせずにCSSを非同期的に読み込ませる簡単なテクニック - Sassyブログ

    はじめに preloadやpreconnectのResourse Hintsを使う? media属性とonload属性を使った非同期読み込みテクニック 最後に はじめに CSSは画面描画をブロックするリソースとして扱われます。 developers.google.com 今回はパフォーマンス改善の一環としてCSSを非同期に読み込ませるテクニックを紹介していきます。 知っている方は結構いるかと思いますので知らない方へ紹介出来たらなと思います! サイトの表示に時間がかかったりする時に色々なパフォーマンス改善のテクニックがあるかと思います。 例えばJavaScriptを記述する場所はbodyの閉じタグの直前にするとか、async属性やdefer属性を付けるとか。 こうすることでJavaScriptに関してはHTMLのレンダリングをブロックせずに実行させることができます。 ではlinkタグで読み込

    レンダリングブロックせずにCSSを非同期的に読み込ませる簡単なテクニック - Sassyブログ
    tsuki-rs
    tsuki-rs 2022/10/17
    “一瞬スタイリングされていないHTMLのみのページが表示されてしまい少し不格好になってしまいます。”それを避けるためのクリティカルCSSでは?
  • 1