link태그에 preconnect 속성


<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E~">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">

link태그에 preconnect 속성은 브라우저 성능 개선를 위해 사용합니다.

Resource Hint

preconnect 속성은 리소스를 사전 연결해줍니다. HTTP 요청이 실제로 서버로 전송되기 전에 브라우저가 미리 외부 도메인과의 연결을 설정하게 합니다. 서버 전송 전 미리 도메인과의 연결이 가능한지 미리 예상하여 사전 작업을 하게합니다. 브라우저는 필요한 소켓을 미리 설정할 수 있기 때문에 DNS조회, TLS형상, TCP 핸드셰이크 과정을 포함하기 때문에 왕복 지연 시간을 없애고 사용자의 시간을 절약할 수 있습니다.

참고 자료

Resource Hints

This specification defines the dns-prefetch, preconnect, prefetch, and prerender relationships of the HTML Link Element ( ). These primitives enable the developer, and the server generating or delivering the resources, to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.

https://www.w3.org/TR/resource-hints/

Resource Hint

무심코 우리는 브라우저를 통해 URL을 입력하고 해당 웹 사이트를 확인 하지만 아무리 간단한 페이지라도 생각보다 많은 동작을 통해 홈페이지가 동작을 한다.. "Resource Hint" is published by 박상수.

https://pakss328.medium.com/resource-hint-8fb4e56ee042