سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس میزفا همراه شما هستیم. تو جلسه قبلی درباره رفع ارور Minimize main-thread work صحبت کردیم و در این جلسه به آموزش رفع خطای Preconnect to required origins در جی تی متریکس می‌پردازیم. ارور Preconnect to required origins مربوط به بهینه سازی کدها و منابع دامنه‌های دیگه در صفحات سایت ما از طریق پیش اتصال (Preconnect) هست. اول درباره اهمیت این خطا صحبت می‌کنیم و بعد روش برطرف کردنش رو می‌گیم که خیلی سخت نیست؛ اما لازمه از منابع دامنه‌های دیگه (یعنی دامنه‌های third-pary) که در صفحاتمون قرار دادیم آگاه باشیم.
لطفا تا پایان با میزفا همراه باشید.
سرفصل‌های پست
خلاصه خطای Preconnect to required origins
میزان سختی: ***
روی چه مواردی تاثیر می‌ذاره: TTI و DNS lookup
علت ایجاد خطای Preconnect to required origins چیست؟
خطای Preconnect to required origins مربوط به اتصال‌های شخص ثالث یا همون third-party هست. به زبون ساده‌تر، مربوط به منابع و کدهایی که از سایر سایت‌ها در صفحات سایتمون قرار دادیم. مثلا یه ویدئو از آپارات یا Youtube یا کدهای مربوط به ابزارهای چت آنلاین مثل رایچت. برای دانلود شدن این منابع، مرورگر باید به سرور این سایت‌ها درخواست ارسال کنه. ارور Preconnect to required origins اشاره به این موضوع داره که اگه قراره مرورگر برای منابعی که از دامنه‌های دیگه هستند درخواست ارسال کنه، بهتره ما در کدهامون با استفاده از Preconnect این مسئله رو زودتر به مرورگر هشدار بدیم تا آماده باشه. یعنی قبل از رسیدن به کدهای مربوط به اون دامنه، فرآیند DNS lookup رو انجام بده و یه اتصال اولیه با دامنه مورد نظر ایجاد کنه.
اجازه بدید کمی دقیق‌تر توضیح بدم. همونطور که می‌دونیم، مرورگر برای دانلود منابع مختلف مثل عکس‌ها، فونت‌ها، CSS و سایر موارد باید به سرور درخواستی رو ارسال کنه. اما قبل از اون، مرورگر باید یه اتصال (Connection) رو ایجاد کرده باشه. حالا اگه قرار باشه منابع ما از چند دامنه مختلف دانلود بشن، مرورگر باید ابتدا با هر دامنه یک Connection ایجاد کنه. این فرآیند ایجاد اتصال، براساس وضعیت اون دامنه (مثلا سرور ضعیف یا DNS lookup طولانی) ممکنه خیلی طول بکشه. پس بهتره کاری کنیم که وقتی مرورگر به کدهای مربوط به اون دامنه رسید، تازه نخواد بره سراغ DNS lookup و ایجاد Connection با اون دامنه. آیا این کار امکان پذیره؟
با استفاده از Preconnect می‌تونیم این ایده رو عملی کنیم. یعنی در ابتدای کدهای صفحه و در تگ head به مرورگر هشدار می‌دیم که قراره جلوتر منابعی رو از دامنه third-praty.com دانلود کنی؛ آماده باش!! مرورگر هم ضمن تشکر از ما برای این هشدار به موقع و مهم، کارهای لازم رو انجام میده. اما نکته جالب اینجاست که کار اصلی خودش (یعنی Render کردن صفحه) رو متوقف نمی‌کنه و ادامه میده. از طرفی زمانی که به کدهای مربوط به دامنه مورد نظر برسه، چون قبلا (با استفاده از هشدار ما) یه Connection ایجاد کرده، حالا به راحتی منابع مورد نظر رو دانلود می‌کنه. بنابراین استفاده درست از Preconnect باعث ایجاد تجربه کاربری (UX) بهتر و افزایش سرعت سایت میشه. همونطور که تو عکس مشاهده می‌کنید، استفاده از Preconnect و رفع ارور Preconnect to required origins باعث میشه اتصال‌های ضروری قبلا ایجاد شده باشند و در نتیجه، صفحه سریع‌تر لود بشه.
چطور خطای Preconnect to required origins را برطرف کنیم؟
خب با ماهیت خطای Preconnect to required origins آشنا شدیم. قبل از اینکه روش حل مشکل Preconnect to required origins در جی تی متریکس رو بگیم، باید به یه نکته مهم دیگه هم توجه کنیم. استفاده از Preconnect اگرچه آسونه و وابسته به یه کد کوتاهه، اما باید هوشمندانه انجام بشه. اگه ما به مرورگر درباره ایجاد Connection هشدار بدیم و مرورگر اتصال رو ایجاد کنه، اما تا ۱۰ الی ۱۵ ثانیه هیچ استفاده‌ای از این اتصال نشه، مرورگر Connection رو قطع می‌کنه و زحمات ما هدر میره. پس باید از Preconnect فقط برای مهم‌ترین دامنه‌های third-party استفاده بشه.
استفاده از preconnect
با قرار دادن کد زیر در تگ head میشه پیش اتصال با دامنه مورد نظر ایجاد کنیم و خطای Preconnect to required origins در جی تی متریکس رو بهینه سازی کنیم. البته به‌جای third-praty.com باید نام دامنه مورد نظر رو قرار بدیم.
<link rel="preconnect" href="https://third-praty.com">برای برخی از منابع third-party که به‌صورت Anonymous لود میشن (مثلا فونت‌ها) باید در کد بالا از ویژگی crossorigin هم در انتهای تگ <link> استفاده کنیم تا پیش اتصال (Preconnect) موثر باشه. یعنی به این شکل زیر. در غیر این صورت، مرورگر فقط DNS lookup رو انجام میده و اتصال صورت نمی‌گیره.
<link rel="preconnect" href="https://third-pary.com/ComicSans" crossorigin>استفاده از dns-prefetch
همونطور که گفتیم، استفاده از Preconnect باید فقط برای مهم‌ترین third-party ها باشه. اما اگه از منابع دامنه‌های third-party متعددی در صفحاتمون استفاده کرده باشیم چی؟ در این صورت باید برای مهم‌ترین دامنه‌ها از Preconnect استفاده کنیم و برای سایر موارد، از dns-prefetch استفاده کنیم. dns-prefetch باعث ایجاد Connection نمیشه، اما مرحله قبل از Connection (یعنی DNS lookup) رو تسریع می‌کنه. لازم به توضیحه که سرورها مثل ما آدم‌ها دامنه‌ها رو با اسمشون نمی‌شناسند؛ بلکه IP دامنه‌ها رو شناسایی می‌کنند. برای همین DNS یا Domain Name Service ایجاد شده تا مرورگر نام دامنه‌ها رو به IP اونها تبدیل کنه. DNS lookup قبل از مرحله Connection انجام میشه و معمولا خیلی هم سریعه (حدود ۲۰ تا ۱۲۰ میلی‌ثانیه). اما با استفاده از dns-prefetch میشه در همین زمان هم صرفه جویی کرد. استفاده از dns-prefetch هم شبیه Preconnect و از طریق کد زیر انجام میشه (ضمنا اگه دوست دارید بیشتر درباره DNS lookup بدونید، مقاله DNS lookup چیست رو مطالعه کنید):
<link rel="dns-prefetch" href="http://third-party.com">چندتا نکته تکمیلی مهم درباره خطای Preconnect to required origins
تا اینجا اصول و روش استفاده از Preconnect و dns-prefetch رو گفتیم. در ادامه چندتا نکته مهم می‌گیم که به شما در برطرف کردن خطای Preconnect to required origins در جی تی متریکس کمک می‌کنه:
- با اینکه بیشتر مرورگرهای جدید از هر ۲ مورد پشتیبانی می‌کنند، پشتیبانی بعضی مرورگرها از Preconnect کمی متفاوت از dns-prefetch هست. برای همین میشه در ۲تا تگ <link> از هر ۲ مورد استفاده کرد تا در صورت عدم پشتیبانی از Preconnect، مرورگر dns-prefetch رو اعمال کنه. به‌صورت زیر:
<link rel="preconnect" href="http://third-party.com">
<link rel="dns-prefetch" href="http://third-party.com">البته نباید هر ۲ مورد رو در یه تگ <link> قرار بدیم. چرا که باعث ایجاد مشکلاتی میشه؛ از جمله اینکه مرورگر Safari در این حالت Preconnect رو منتفی می‌کنه. پس کد زیر بهینه نیست:
<link rel="preconnect dns-prefetch" href="http://third-party.com">- از Preconnect و dns-prefetch باید فقط برای دامنه‌های third-party استفاده بشه. استفاده از این ۲ برای منابع دامنه خودمون موثر نیست. همونطور که از ابتدای مقاله هم گفتیم، مشکل Preconnect to required origins مربوط به منابع دامنه‌های دیگه به‌جز دامنه خودمون هست.
- از Preconnect فقط برای دامنه‌های third-party ضروری استفاده کنید. بهتره نهایتا ۲ بار و برای ۲ دامنه از Preconnect استفاده بشه. در صورت ۳ بار (یا بیشتر) استفاده ازش، ممکنه GTmetrix این موضوع رو خطا در نظر بگیره.
- بهتره در استفاده از dns-prefetch هم زیاده روی نکنیم. هرچند سایت جی تی متریکس این موضوع رو خطا محسوب نمی‌کنه، اما مرورگر کروم نهایتا ۳تا dns-prefetch رو به‌صورت موازی پردازش می‌کنه.
- با کلیک روی گزارش Structure در جی تی متریکس لیستی از دامنه‌هایی که استفاده از Preconnect باعث اتصال سریع‌تر به اونها میشه رو مشاهده می‌کنیم. نکته جالب اینجاست که معیار GTmetrix برای خطای Preconnect to required origins فقط استفاده یا عدم استفاده از Preconnect و dns-prefetch نیست. بلکه معیارش زمان لازم برای اتصال به دامنه‌های third-party هست. پس ممکنه ما برای دامنه‌ای از این ۲ مورد استفاده کرده باشیم، اما باز هم با ارور Preconnect to required origins در جی تی متریکس مواجه بشیم. در این صورت باید مشکل رو بررسی کرد و براساس وضعیت، تصمیم گیری کرد که چطور میشه زمان اتصال به اون دامنه رو کاهش داد.
کار رو به یه متخصص بسپارید
اگه مقاله رو خوندید و تلاش کردید ارور Preconnect to required origins رو برطرف کنید اما هنوز موفق نشدید، می‌تونید کار رو به یه متخصص برنامه نویسی یا متخصص سئو بسپارید. اگه تیم خوب می‌شناسید که هیچ ولی اگه دنبال یک تیم حرفه‌ای و همینطور دنبال خدمات خوب در زمینه سئو می‌گردید، می‌تونید خدمات حرفه ای سئو میزفا رو بررسی کنید. کلی خدمات متنوع از جمله بهینه سازی سرعت سایت برای خدمت رسانی به شما عزیزان آماده کردیم.
جمع بندی
در این مقاله میزفا درباره روش برطرف کردن خطای Preconnect to required origins در جی تی متریکس جدید صحبت کردیم. این ارور مربوط به منابع دامنه‌های third-party در سایت ماست. با استفاده درست از پیش اتصال (Preconnect) و یا dns-prefetch می‌تونیم سرعت لود سایت خودمون رو بیشتر کنیم. امیدوارم این آموزش برای شما مفید بوده باشه. تو جلسه بعدی درباره خطای Preload key requests که شبیه به همین خطا اما درباره منابع موجود در دامنه خودمونه صحبت می‌کنیم.
اگه سوالی دارید در قسمت نظرات (پایین همین صفحه) بپرسید تا با کمال میل پاسخگوی شما عزیزان باشیم.
یک پاسخ
توضیحات خیلی کامل بود
ممنون