Webフォントの読み込みはCSSの @import ではなく、link要素を使い、さらに rel="preconnect" を指定した link要素を head 内のできるだけ上部に記述→レイアウトシフト抑制

okyawa のブックマーク 2021/11/08 10:35

<blockquote class="hatena-bookmark-comment"><a class="comment-info" href="https://b.hatena.ne.jp/entry/4704235351419515362/comment/okyawa" data-user-id="okyawa" data-entry-url="https://b.hatena.ne.jp/entry/s/webtan.impress.co.jp/e/2021/06/18/40535" data-original-href="https://webtan.impress.co.jp/e/2021/06/18/40535" data-entry-favicon="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwebtan.impress.co.jp%2Fe%2F2021%2F06%2F18%2F40535" data-user-icon="/users/okyawa/profile.png">グーグル直伝！ CSSとウェブフォントのコア ウェブ バイタル最適化テクニック【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ</a><ul class="comment-tag" style="list-style: none; margin: 0px;"><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88">ウェブフォント</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88">フォント</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/seo">seo</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/css">css</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%22Core%20Web%20Vitals%22">Core Web Vitals</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/webfont">webfont</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/webvitals">webvitals</a>]</li></ul><br><p style="clear: left">Webフォントの読み込みはCSSの <a href="https://twitter.com/import" target="_blank" rel="noopener nofollow">@import</a> ではなく、link要素を使い、さらに rel=&quot;preconnect&quot; を指定した link要素を head 内のできるだけ上部に記述→レイアウトシフト抑制</p><a class="datetime" href="https://b.hatena.ne.jp/okyawa/20211108#bookmark-4704235351419515362"><span class="datetime-body">2021/11/08 10:35</span></a></blockquote><script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async></script>

このブックマークにはスターがありません。
最初のスターをつけてみよう！