وقتایی که قصد دارید یه منبع خارجی مثل یه فونت، یه استایل CSS یا یه اسکریپت JS رو داخل صفحه HTML خودتون وارد کنید یا وقتی که داخل صفحه، درخواستهای زیادی به یک منبع مشخص ارسال میکنید، حتماً از ویژگی preconnect به صورت زیر استفاده کنید:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.gstatic.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">این ویژگی باعث میشه ارتباط با سرور مدنظر خیلی سریعتر برقرار بشه و زمان بارگذاری صفحه شما خیلی بهبود پیدا کنه.
اما اگر یک منبعی رو فقط یک بار یا به ندرت استفاده میکنید، بهتره منابع در اختیار مرورگر رو با preconnect هدر ندید و از dns-prefetch استفاده کنید:
<link rel="dns-prefetch" href="https://example.com">