0

Web の速度を最適化しようとしていますが、レンダリングをブロックする CSS と JS の削除について質問したいと思います。

by JS は非同期属性のみを使用しています。- たとえば、flexslider、lightbox などのプラグインに投げるとしますが、これを次のような基本スクリプトでも使用する必要がありますか?:

<script src="https://cdnjs.cloudflare.com/.../4.5.3/js/bootstrap.min.js" async></script>
<script src="js/script.js" async></script>

スクリプトに async を追加してテストすると、その .js スクリプトはリンクされていないかのように動作しません。私は何を間違っていますか？そして、これで十分ですか...？

-by CSS - 次のように向上させます:

<link rel="preload" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" media="print" as="style" onload="this.onload=null;this.rel='stylesheet'" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><noscript><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"></noscript>

これにより、CSS リソースをレンダリングする時間が短縮されますが、fontawesome などで使用すると、リンクが存在しないかのようにアイコンが読み込まれません。これは CSS をレンダリングする良い方法ですか?

4

2 に答える 2

2

JavaScript

使用するときasyncは、ロード順序が実装に影響しないようにする必要があります。

Async基本的に、「できるだけ早くすべてをロードします。ロード順序は気にしません」と言っています。

これを考慮していない場合、最も簡単な修正はdefer、JavaScript で の代わりに使用することですasync。これは基本的に「HTML がロードされた後にすべてをロードしますが、一部のスクリプトは他のスクリプトに依存するため、順序を守ってください」と言っています。

これにより、全体的に少し遅くなりますが、JavaScript がレンダリングをブロックしている問題は修正されます。

スクロールせずに見える部分の操作に不可欠なスクリプトを除いて、すべてのスクリプトを延期する必要があります (そして、これらのスクリプトを の<script>タグにインライン化する必要があります<header>。明らかにこれを最小限に抑えてください)。

CSS

レンダリング ブロック CSS は、「スクロールせずに見える」コンテンツに関連する外部ファイルにあるものです。

これを完全に理解するには、ブラウザーがどのように物事をレンダリングするかを理解する必要がありますが、本質的には、CSS が外部ファイルにある場合、表示方法を知るためにその情報が必要なため、スクロールせずに表示されるもの (「スクロールせずに見える」コンテンツ) はすべて遅延します。そして物事をレイアウトします。

必要なのは、スクロールせずに見えるコンテンツに適用されるすべてのスタイルを見つけて<style>、ページ内のタグにインライン化することです<header>。繰り返しになりますが、これは最小限に抑える必要があるため、ブートストラップを使用するのではなく、フォールド上の CSS カスタムを作成する必要がある場合があります....ブートストラップ全体をインラインで含めるのは良くありません!

その後、他のすべてのスタイルを外部スタイル シートに配置できます。

このようにして、ページの HTML が 2 番目にダウンロードされると、他のリクエストを待たずに、ページをレイアウトするために必要なすべてが含まれます。

素晴らしいフォント

ああ、アイコンのフォント。アクセシビリティとパフォーマンスの観点から、なぜそれが悪い習慣なのかについては、これまで何度も取り上げてきたので、ここでは説明しません。

代わりに、「スクロールせずに見える」アイコンについては、代わりにインライン SVGに交換する必要があると簡単に言います。これは、CSS をインライン化するのと同じ理由によるものです。インライン SVG はレンダリングするためにネットワーク リクエストを必要としないため、HTML がロードされた瞬間にページを表示できます。

于 2020-11-22T09:50:00.000 に答える