이 네 가지 트릭으로 HTML 링크 태그를 강화하는 방법

소개

HTML 링크 태그는 모든 사람이 HTML을 처음 접할 때 가장 먼저 배우는 태그 중 하나입니다. 가장 일반적인 사용 사례는 스타일시트를 로드하고 잊어버리는 것입니다.

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

그러나 링크 태그는 수년에 걸쳐 업데이트되었으며 올바르게 사용하는 경우 애플리케이션의 성능을 극대화할 수 있는 몇 가지 기능이 있습니다.

링크 태그 속성: 미리 로드

rel 속성의 사전 로드 값을 통해 개발자는 링크 태그에서 가져오기 요청을 선언할 수 있습니다. 이를 통해 페이지는 이전 ⏰ 태그에 지정된 리소스 로드를 시작할 수 있습니다. 이것은 여러 가지 이점을 만들 수 있습니다!

예를 들어 이 태그를 사용하면 가져온 스크립트나 대용량 미디어 파일과 같이 나중에 웹 페이지에서 가장 확실히 사용될 리소스를 지정할 수 있습니다. 이는 as 속성과 쌍을 이루어 처리 중인 리소스 유형을 브라우저에 지정합니다.

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

대체로 이것은 렌더링 차단 리소스에 도움이 될 수 있으며 브라우저가 올바르게 캐시할 리소스를 보다 정확하게 구문 분석하는 데 도움이 됩니다.

링크 태그 속성: 프리페치

또 다른 성능 최적화! rel 태그의 prefetch 값을 사용하면 개발자는 브라우저가 유휴 상태일 때 가져올 리소스를 지정할 수 있습니다.

브라우저가 인식하려면 다음 두 가지 방법 중 하나로 선언해야 합니다.

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

prefetch와 다음 🚀을 사용하여 다음 페이지 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(더 이상 사용되지 않음)

tv(더 이상 사용되지 않음)

각 속성이 무엇을 의미하는지 자세히 설명하는 이link를 남겨두겠습니다. 또한 페이지의 접근성을 높일 수 있습니다. 이article of mine는 더 자세히 설명합니다.

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

그러나이 미디어 속성은 다른 화면 크기에도 사용할 수 있으며 이 목록에 있는 다른 기능과 함께 사용할 수 있습니다!

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

링크 태그 속성: 대체

사용자에게 대체 스타일시트를 제공할 수 있다는 사실을 알고 계셨습니까? 링크 태그 속성 rel에는 대체라는 접미사 단어가 있을 수 있습니다. 이 단어는 사용자가 사용할 다른 스타일시트를 지정할 수 있습니다.

예를 들어:

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

title 속성은 옵션에서 스타일시트의 이름을 지정하는 데 사용됩니다. 옵션은 브라우저에서 직접 찾을 수 있습니다.



Firefox에서는 F10을 눌러 열 수 있습니다.

그러나 이것은 브라우저 간 호환성이 제한되어 있으므로 이 기능에 의존하지 마십시오. Official MDN docs의 예 .

결론

이 팁을 사용하면 웹 사이트의 유용성을 몇 퍼센트 포인트 높일 수 있습니다. 약간의 최적화는 누구에게도 해를 끼치지 않습니다.

잘 알려지지 않은 HTML 기능을 활용할 수 있는 다른 방법이 있다면 아래 주석에 언급하십시오!

자세한 내용은 Relatable Code에서 확인하세요.

이 내용이 마음에 드셨다면 언제든지 또는 에서 저에게 연락해 주세요.

내newsletter에서 내 무료 개발자 로드맵과 주간 기술 산업 뉴스를 확인하십시오.