これらの4つのトリックであなたのHTMLリンクタグを過給する方法

導入

HTMLリンクタグは、最初のタグのいずれかをHTMLに最初のダイビングについて学ぶことです.最も一般的なユースケースは、スタイルシートを読み込み、それを忘れるだけです.

<link href="/styles.css" rel="stylesheet" />

しかし、リンクタグは年間を通して更新されており、使用する場合は、アプリケーションのパフォーマンスを過充電することができますいくつかの機能があります.

link tag属性：プリロード

rel属性のプリロード値は、開発者にリンクタグからフェッチ要求を宣言させます.これにより、ページは以前にタグで指定されたリソースを読み込み始めることができます⏰. これはいくつかの利点を作成することができます!
たとえば、このタグを使用すると、インポートされたスクリプトや大容量のメディアファイルなどのWebページで、後で確実に使用されるリソースを指定できます.これはas属性と対になって、ブラウザにどのリソースの種類を指定するかを指定します.

<link rel="preload" href="my_video.mp4" as="video" />

すべてのすべてで、これはブロックのリソースをレンダリングし、より正確にキャッシュを正しくリソースを解析するブラウザを助けることができます.

link tag属性：プリフェッチ

もう一つのパフォーマンス最適化!relタグのプリフェッチ値によって、開発者は、それがアイドル状態になっている間に取得するブラウザのリソースを指定することができます.
ブラウザが認識するためには、次の2つの方法のいずれかとして宣言する必要があります.

<link rel="prefetch stylesheet" href="my_other_style.css" />
<link rel="next" href="test.html" />

プリフェッチを使用して将来的に必要なスタイルシートを取得し、次のページHTMLを次の🚀
アイドル時間とは何か公式MDNドキュメント

In the current implementation (Mozilla 1.2), idle time is determined using the nsIWebProgressListener API. We attach a listener to the toplevel nsIWebProgress object ("@mozilla.org/docloaderservice;1"). From this, we receive document start & stop notifications, and we approximate idle time as the period between the last document stop and the next document start. The last document stop notification occurs roughly when the onLoad handler would fire for the toplevel document. This is when we kick off prefetch requests. If a subframe contains prefetching hints, prefetching will not begin until the top-most frame and all its "child" frames finish loading.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

属性の属性

メディア

リンクタグには、スクリーンの種類を指定するためのメディア属性を含めることができます.

オール

印刷

スクリーン

のスピーチ

点字(非推奨)

エンボス加工(廃止予定)

ハンドヘルド(廃止予定)

投影(廃止予定)

tty (廃止予定)

テレビ(非推奨)

私はこのlinkは、各プロパティの意味を詳細に説明しておきます.また、これらのページをよりアクセスすることができます.このarticle of mineはより深く行きます.

<link rel="stylesheet" href="braille.css" media="braille" />

しかし、このメディアの属性はまた、別の画面サイズに使用することができますし、このリスト上の他の機能と組み合わせて使用することができます!

<link rel="preload" href="HUGE.png" as="image" media="(min-width: 601px)">

linkタグ属性

あなたがユーザーに代替スタイルシートを提供することができます知っていましたか?リンクタグプロパティrelには、サフィックス単語があります.この単語は、使用するユーザーの異なるスタイルシートを指定できます.
例えば、

<link href="styles.css" title="Main" rel="stylesheet" /> 
<link href="alternate.css" title="Alternate" rel="alternate stylesheet" />

title属性は、オプションのスタイルシートの名前を指定するために使用されます.オプションは、ブラウザから直接配置できます.

FirefoxではF 10を押すことでこれらを開くことができます.
しかし、これはブラウザの間で互換性が限られているので、この機能に依存しないでください.Official MDN docsからの例.

結論

これらのヒントを使用して間違いなくいくつかのパーセンテージポイントでウェブサイトのユーザビリティを向上させることができます.少しの最適化は、誰も決して傷つけませんでした.
あなたがHTMLの先で知られていない特徴を利用する他の方法を持っているならば、先に行って、下記のコメントでそれに言及してください!
Relatable Codeのより多くの内容
あなたがこれが好きであるならば、私と接続して自由に感じてください.
私の自由な開発者ロードマップと毎週のハイテク産業ニュースをnewsletterでチェックしてください.