درباره نکات مربوط به منابع rel=preconnect و rel=dns-prefetch و نحوه استفاده از آنها اطلاعات کسب کنید.
قبل از اینکه مرورگر بتواند منبعی را از سرور درخواست کند، باید یک اتصال برقرار کند. ایجاد یک اتصال امن شامل سه مرحله است:
نام دامنه را جستجو کنید و آن را به یک آدرس IP تبدیل کنید.
اتصال به سرور را تنظیم کنید.
برای امنیت، اتصال را رمزگذاری کنید.
در هر یک از این مراحل، مرورگر بخشی از داده را به سرور ارسال میکند و سرور پاسخی را برمیگرداند. این سفر، از مبدا به مقصد و برگشت، یک رفت و برگشت نامیده میشود.
بسته به شرایط شبکه، یک رفت و برگشت ممکن است زمان قابل توجهی طول بکشد. فرآیند راهاندازی اتصال ممکن است تا سه رفت و برگشت را شامل شود - و در موارد غیربهینهشده بیشتر.
انجام همه این کارها از قبل باعث میشود برنامهها خیلی سریعتر به نظر برسند. این پست نحوه دستیابی به این هدف را با دو نکته در مورد منابع توضیح میدهد: <link rel=preconnect> و <link rel=dns-prefetch> .
ایجاد اتصالات اولیه با rel=preconnect
مرورگرهای مدرن تمام تلاش خود را میکنند تا پیشبینی کنند که یک صفحه به چه اتصالاتی نیاز دارد، اما نمیتوانند همه آنها را به طور قابل اعتمادی پیشبینی کنند. خبر خوب این است که میتوانید به آنها یک راهنمایی (منبع 😉) بدهید.
اضافه کردن rel=preconnect به یک <link> به مرورگر اطلاع میدهد که صفحه شما قصد دارد به دامنه دیگری متصل شود و شما میخواهید این فرآیند در اسرع وقت شروع شود. منابع سریعتر بارگذاری میشوند زیرا فرآیند راهاندازی تا زمانی که مرورگر درخواست میکند، قبلاً تکمیل شده است.
اشارهگرهای منابع (Resource hints) به این دلیل این نام را گرفتهاند که دستورالعملهای اجباری نیستند. آنها اطلاعاتی در مورد آنچه میخواهید اتفاق بیفتد ارائه میدهند، اما در نهایت تصمیم گیری در مورد اجرای آنها بر عهده مرورگر است. راهاندازی و باز نگه داشتن یک اتصال کار زیادی است، بنابراین مرورگر ممکن است بسته به شرایط، اشارهگرهای منابع را نادیده بگیرد یا آنها را به طور ناقص اجرا کند.
آگاه کردن مرورگر از قصد شما به سادگی اضافه کردن یک تگ <link> به صفحهتان است:
<link rel="preconnect" href="https://example.com">
شما میتوانید با برقراری ارتباط زودهنگام با منابع مهم شخص ثالث، زمان بارگذاری را ۱۰۰ تا ۵۰۰ میلیثانیه افزایش دهید. این اعداد ممکن است کوچک به نظر برسند، اما در نحوه درک کاربران از عملکرد صفحه وب تفاوت ایجاد میکنند.
موارد استفاده از rel=preconnect
میدونی از کجا میاری ولی نمیدونی چی میاری
به دلیل وابستگیهای نسخهبندیشده، گاهی اوقات در موقعیتی قرار میگیرید که میدانید از یک CDN خاص منبعی را درخواست خواهید کرد، اما مسیر دقیق آن را نمیدانید.
مورد رایج دیگر، بارگذاری تصاویر از یک CDN تصویر است که در آن مسیر دقیق یک تصویر به پرسوجوهای رسانهای یا بررسی ویژگیهای زمان اجرا در مرورگر کاربر بستگی دارد.
در این شرایط، اگر منبعی که دریافت میکنید مهم است، میخواهید با اتصال اولیه به سرور، تا حد امکان در زمان صرفهجویی کنید. مرورگر تا زمانی که صفحه شما درخواست نکند، فایل را دانلود نمیکند، اما حداقل میتواند جنبههای اتصال را از قبل مدیریت کند و کاربر را از انتظار برای چندین رفت و برگشت نجات دهد.
رسانههای استریمینگ
مثال دیگری که ممکن است بخواهید در مرحله اتصال کمی در زمان صرفهجویی کنید، اما لزوماً نیازی به شروع فوری بازیابی محتوا نداشته باشید، هنگام پخش رسانه از منبعی متفاوت است.
بسته به اینکه صفحه شما چگونه محتوای پخش شده را مدیریت میکند، ممکن است بخواهید منتظر بمانید تا اسکریپتهای شما بارگیری شوند و آماده پردازش پخش شوند. پیشاتصال به شما کمک میکند تا زمان انتظار را به یک رفت و برگشت واحد کاهش دهید، زمانی که آماده شروع دریافت هستید.
نحوه پیادهسازی rel=preconnect
یکی از راههای شروع preconnect ، اضافه کردن یک تگ <link> به <head> سند است.
<head>
<link rel="preconnect" href="https://example.com">
</head>
پیشاتصال فقط برای دامنههایی غیر از دامنه مبدا مؤثر است، بنابراین نباید از آن برای سایت خود استفاده کنید.
همچنین میتوانید از طریق هدر Link HTTP یک پیشاتصال (preconnect) را آغاز کنید:
Link: <https://example.com/>; rel=preconnect
برخی از انواع منابع، مانند فونتها، در حالت ناشناس بارگذاری میشوند. برای این موارد، باید ویژگی crossorigin را با اشارهگر preconnect تنظیم کنید:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
اگر ویژگی crossorigin را حذف کنید، مرورگر فقط جستجوی DNS را انجام میدهد.
نام دامنه را با استفاده از rel=dns-prefetch زودتر حل کنید
شما سایتها را با نامشان به خاطر میآورید، اما سرورها آنها را با آدرسهای IP به خاطر میسپارند. به همین دلیل است که سیستم نام دامنه (DNS) وجود دارد. مرورگر از DNS برای تبدیل نام سایت به آدرس IP استفاده میکند. این فرآیند - تفکیک نام دامنه - اولین قدم در ایجاد یک اتصال است.
اگر یک صفحه نیاز به اتصال به دامنههای شخص ثالث زیادی داشته باشد، اتصال اولیه همه آنها نتیجه معکوس میدهد. بهتر است از راهنمای preconnect فقط برای حیاتیترین اتصالات استفاده شود. برای بقیه موارد، از <link rel=dns-prefetch> استفاده کنید تا در مرحله اول، یعنی جستجوی DNS، که معمولاً حدود ۲۰ تا ۱۲۰ میلیثانیه طول میکشد، در زمان صرفهجویی کنید.
فرآیند DNS resolution مشابه preconnect : با اضافه کردن یک تگ <link> به <head> سند آغاز میشود.
<link rel="dns-prefetch" href="http://example.com">
پشتیبانی مرورگر از dns-prefetch کمی با پشتیبانی preconnect متفاوت است، بنابراین dns-prefetch میتواند به عنوان یک جایگزین برای مرورگرهایی که preconnect پشتیبانی نمیکنند، عمل کند.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
dns-prefetch fallback در همان تگ <link> باعث ایجاد باگی در سافاری میشود که در آن preconnect لغو میشود. تأثیر روی بزرگترین رنگ محتوا (LCP)
استفاده از dns-prefetch و preconnect سایتها این امکان را میدهد که مدت زمان اتصال به منبع دیگر را کاهش دهند. هدف نهایی این است که زمان بارگذاری یک منبع از منبع دیگر تا حد امکان به حداقل برسد.
در مورد Largest Contentful Paint (LCP) ، بهتر است منابع بلافاصله قابل کشف باشند، زیرا کاندیداهای LCP بخشهای حیاتی تجربه کاربری هستند. مقدار "high" fetchpriority منابع LCP میتواند با نشان دادن اهمیت این دارایی به مرورگر، این امر را بهبود بخشد تا بتواند آن را زودتر واکشی کند.
در جایی که امکان کشف فوری منابع LCP وجود ندارد، یک لینک preload - که آن هم با اولویت واکشی "high" fetchpriority - همچنان به مرورگر اجازه میدهد تا منبع را در اسرع وقت بارگذاری کند.
اگر هیچکدام از این گزینهها در دسترس نباشند - زیرا منبع دقیق تا اواخر بارگذاری صفحه مشخص نخواهد شد - میتوانید preconnect روی منابع cross-origin استفاده کنید تا تأثیر کشف دیرهنگام منبع را تا حد امکان کاهش دهید.
علاوه بر این، preconnect از نظر استفاده از پهنای باند، ارزانتر از preload است، اما همچنان بدون ریسک نیست. همانطور که در مورد preload بیش از حد صدق میکند، preconnect بیش از حد نیز در مواردی که به گواهینامههای TLS مربوط میشود، پهنای باند را مصرف میکند. مراقب باشید که پیشاتصال را به تعداد زیادی مبدا انجام ندهید، زیرا این امر ممکن است باعث ایجاد تداخل در پهنای باند شود.
نتیجهگیری
این دو نکته در مورد منابع، برای بهبود سرعت صفحه مفید هستند، زمانی که میدانید به زودی چیزی را از یک دامنه شخص ثالث دانلود خواهید کرد، اما آدرس دقیق منبع را نمیدانید. به عنوان مثال میتوان به CDNهایی اشاره کرد که کتابخانههای جاوا اسکریپت، تصاویر یا فونتها را توزیع میکنند. به محدودیتها توجه داشته باشید، فقط برای مهمترین منابع preconnect استفاده کنید، برای بقیه به dns-prefetch تکیه کنید و همیشه تأثیر آن را در دنیای واقعی بسنجید.