در دنیای امروز، سرعت بارگذاری وب سایت ها اهمیت فوق العاده ای دارد. کاربران انتظار دارند صفحات وب به سرعت بارگذاری شوند و در غیر این صورت، احتمال ترک سایت و مراجعه به رقبا بسیار بالا می رود. یکی از روش های مؤثر برای بهبود سرعت بارگذاری، استفاده از Browser Hints یا راهنمایی های مرورگر است.
Browser Hints مجموعه ای از دستورالعمل ها هستند که به مرورگر کمک می کنند تا تصمیمات بهتری در مورد نحوه بارگذاری منابع وب سایت بگیرد. این دستورالعمل ها به مرورگر اطلاع می دهند که کدام منابع مهم تر هستند، کدام منابع باید از قبل بارگذاری شوند و کدام منابع می توانند با تأخیر بارگذاری شوند.
چندین نوع Browser Hints وجود دارد که هر کدام کاربرد خاص خود را دارند. در اینجا به برخی از مهم ترین آن ها اشاره می کنیم:
Preload به مرورگر اطلاع می دهد که یک منبع خاص باید در اسرع وقت بارگذاری شود. این کار به ویژه برای منابعی که در ادامه صفحه مورد نیاز هستند، مانند فونت ها، تصاویر پس زمینه و فایل های CSS، مفید است.
برای استفاده از Preload، می توانید از تگ `` با ویژگی `rel="preload"` استفاده کنید. به عنوان مثال:
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>Prefetch به مرورگر اطلاع می دهد که یک منبع خاص ممکن است در صفحات بعدی مورد نیاز باشد و باید در پس زمینه بارگذاری شود. این کار می تواند سرعت بارگذاری صفحات بعدی را بهبود بخشد.
برای استفاده از Prefetch، می توانید از تگ `` با ویژگی `rel="prefetch"` استفاده کنید. به عنوان مثال:
<link rel="prefetch" href="next-page.html">Preconnect به مرورگر اطلاع می دهد که باید یک اتصال اولیه به یک سرور خاص ایجاد کند، قبل از اینکه درخواست واقعی منابع از آن سرور ارسال شود. این کار می تواند زمان تأخیر را کاهش دهد و سرعت بارگذاری را بهبود بخشد.
برای استفاده از Preconnect، می توانید از تگ `` با ویژگی `rel="preconnect"` استفاده کنید. به عنوان مثال:
<link rel="preconnect" href="https://example.com">DNS-Prefetch به مرورگر اجازه می دهد که نام دامنه را زودتر از درخواست به منبع شناسایی کند. این کار از طریق جستجوی DNS زود هنگام انجام می شود، که می تواند زمان تاخیر را کاهش داده و سرعت بارگذاری صفحه را بهبود بخشد.
برای استفاده از DNS-Prefetch، می توانید از تگ `` با ویژگی `rel="dns-prefetch"` استفاده کنید. به عنوان مثال:
<link rel="dns-prefetch" href="//example.com">Priority Hints به توسعه دهندگان این امکان را می دهند که به مرورگرها اطلاع دهند که کدام منابع باید در اولویت بارگیری قرار گیرند. این کار باعث می شود که منابع مهم تر سریعتر بارگیری شوند و تجربه کاربری بهتری ایجاد شود.
برای استفاده از Priority Hints، می توانید از ویژگی `fetchpriority` در تگ های ``, `