آموزش رفع خطای Avoid Chaining Critical Requests در جی تی متریکس

Critical requests یا همون درخواست های ضروری، در خواست هایی هستند که باید زودتر از درخواست های دیگه پردازش بشن و تو اولویت قرار دارند.

وقتی که یه صفحه یا یه اسکریپت باعث بشه چند تا درخواست ضروری با هم دانلود بشن، زنجیره ای درخواست های ضروری یا همون chaining critical requests به وجود میاد.

یه مرورگر تا زمانی که همه منابع مهم دانلود نشدند شروع به رندر کردن صفحه (به طور کامل) نمیکنه. بنابراین هر منبع ضروری میتونه اولین رندر صفحه رو مسدود کنه.

هر چی زنجیره درخواست ضروری بزرگتر یا سنگین تر بشه، روی زمان بارگذاری صفحه تاثیر بیشتری داره.

اگه با خطای Avoid Chaining Critical Requests توی جی تی متریکس مواجه شدید، این مقاله بهتون کمک میکنه تا برطرفش کنید.

برای دریافت مشاوره به صفحه سئو سایت در شیراز مراجعه کنید.

فهرست:

• اولویت دانلود چگونه تعیین می شود؟
• Critical Request Chain چگونه بر سرعت بارگذاری تاثیر میگذارد؟
• رفع خطای Avoid Chaining Critical Requests در جی تی متریکس
• HTML
• استایل شیت ها (CSS)
• جاوا اسکریپت
• فونت ها
• تصاویر
• درخواست AJAX
• آیفریم ها
• جمع بندی

اولویت دانلود چگونه تعیین می شود؟

critical requests منابعی هستند که در زمان بارگذاری اولیه صفحه اولویت برای دانلودشون بالاتر از بقیه‌س. ممکنه براتون سوال پیش بیاد که این اولویت چجوری تعیین میشه؟

اولویت دانلود توسط خود مرورگر تعیین میشه، یعنی مرورگر یه سری قوانین داره که بر اساس اونها اولویت رو تعیین میکنه. البته، اینکه کدوم عناصر بیشترین اولویت رو دارند به ساختار صفحه بستگی داره. عناصری که مرورگر فکر میکنه برای اولین رندر صفحه ضروری هستند، پس مسلما توی اولویت قرار میگیرند.

مرورگر اول حدس میزنه کدوم عناصر مهم‌ترند. به طور کلی، اولویت دانلود اینجوریه:

❶HTML همیشه بالاترین اولویت رو داره

❷بعدش استایل شیت ها (CSS)

❸جاوا اسکریپت متصل

❹فونت ها

❺درخواست های Ajax

❻تصاویر بالای صفحه

❼تصاویر بعدی در صفحه

❽نهایتا هم جاوا اسکریپت های ناهمزمان

اگه میخواید ببینید سایت خودتون اولویت بندیش چجوریه، برید توی صفحه سایت و کلیک راست کنید، Inspect رو باز کنید، حالا برید تو بخش network:

توی نوار منو باید یه قسمت باشه به اسم “priority” که اولویت ها رو با highest یعنی بالاترین اولویت، Medium با اولویت متوسط و low با اولویت پایین تر بهتون نشون میده. اگه نتونستید priority روی پیدا کنید. روی بخش نوار کلیک راست کنید و تیک priority رو بزنید:

Critical Request Chain چگونه بر سرعت بارگذاری تاثیر میگذارد؟

هنگام بارگیری یه صفحه، مرورگر در حالت “display blocking” شروع به کار میکنه. در این حالت مهم ترین منابع با بالاترین اولویت دانلود میشن؛ در واقع همون منابع ضروری.

همونطور که گفتم، یه مرورگر (به طور کامل) شروع به رندر کردن صفحه نمیکنه تا زمانی که همه منابع مهم دانلود بشن. بنابراین هر منبع ضروی میتونه اولین رندر صفحه رو مسدود کنه.

هرچه یه صفحه منابع ضروری کمتری داشته باشه، مرورگر برای دریافت اولین محتوا روی صفحه کار کمتری باید انجام بده و رقابت کمتری برای CPU و سایر منابع وجود داره.

رفع خطای Avoid Chaining Critical Requests در جی تی متریکس

میتونید تاثیر درخواست های ضروی رو به سه روش کاهش بدید:

• تعداد منابع ضروری را کاهش دهید. منابع مهم رو با حذف یا به تعویق انداختن‌شون به منابع غیر ضروری تبدیل کنید.

• تعداد بایت های مهم را کاهش دهید. کاهش تعداد بایت‌های منابع ضروری باعث میشه سریع‌تر دانلود بشن. به عنوان مثال فشرده سازی gzip، بهینه سازی تصویر و…

• ترتیب دانلود مسیر ضروری را بهبود بخشید. برای رد شدن از کشف منبع و اطمینان از دانلود هر چه سریعتر منابع ضروری، از نکات منابع مانند بارگذاری اولیه استفاده کنید.

گزینه های زیادی وجود دارند. اینکه کدوم گزینه بهترینه به نوع فایل منبع بستگی داره:

۱.HTML

HTML که در واقع همون صفحه ایه که مشاهده میکنید، همیشه با بالاترین اولویت دانلود میشه. خود صفحه بخشی از زنجیره درخواست ضروری هستش، برای همین اولین چیزیه که هنگام بهینه سازی زنجیره درخواست ضروری باید در نظرش بگیرید.

بارگذاری تاخیری محتوا: خیلی از سایت های بزرگ مثل خود گوگل از این تکنیک برای کاهش زنجیره درخواست های ضروری استفاده می کنند. برای مثال، در صفحه نتایج جستجو، بخش‌هایی از محتوا که فوراً مورد نیاز نیستند، بعداً از طریق درخواست AJAX بارگیری میشن.

Minify: کوچکتر همیشه سریعتره، html رو با حذف نظرات، فاصله ها و خطوط خالی کوچیک کنید.

فشرده سازی: در نهایت، با فشرده سازی Brotli یا GZIP میتونید فایل ها رو فشرده کنید.

۲. استایل شیت ها (CSS)

استایل شیت ها در هد صفحه همیشه مهم هستن. بدون استایل، مرورگر نمیدونه صفحه چه شکل و ظاهری داره. بنابراین استایل شیت ها بخشی از زنجیره درخواست ضروی محسوب میشن.

CSS ضروری: Stylesheet ها رو میتونید با یه ترفند ساده غیر ضروری کنید. تو این روش استایل شیت ها از طریق resource hints از قبل بارگذاری یا همون preload میشن و پس از اینکه بارگذاری تموم شد به عنوان استایل شیت اضافه میشن.
کد زیر رو به صفحه اضافه کنید، با این کد مرورگر شما استایل شیت ها رو با اولویت پایین تر دانلود میکنه.

<link rel="preload"
      href="css.css"
      type="text/css"
      as="style"
      onload="this.onload=null;this.rel='stylesheet';"/>

کوچک سازی: CSS استفاده نشده رو حذف کنید. بسیاری از سایت ها از کتابخانه های CSS مثل بوت استرپ استفاده می کنند. این کتابخانه ها اغلب بیش از حد کامل هستند و نیازی نیست از همه استایل ها استفاده بشه.
ویرایش این کتابخانه ها از طریق یک پیش پردازنده CSS (مثل SASS) آسونه. گروه‌ استایل های استفاده‌نشده رو حذف کنید تا کوچک‌تر بشن. این پیش پردازنده ها همچنین به شما این امکان رو میدن که CSS خودشون را با حذف تمام فاصله ها و خطوط جدید کوچیک کنید.

فشرده سازی: فشرده سازی استایل شیت ها با فشرده سازی Brotli یا GZIP بسیار تاثیرگذاره.

۳. جاوا اسکریپت

فایل های جاوا اسکریپت در هد صفحه به صورت پیش فرض با اولویت بالایی دانلود میشن و در حین دانلود و اجرا، رندر صفحه رو مسدود می کنند. بنابراین جاوا اسکریپت بخشی از زنجیره درخواست ضروریه.

Defer و Async: اولویت فایل های جاوا اسکریپت رو با بارگیری ناهمزمان اون از طریق ویژگی async یا defer تنظیم کنید. فایل های اسکریپت ناهمزمان به صورت موازی با اولویت کمتر دانلود میشن. جاوا اسکریپت Deferred هم به صورت موازی بارگذاری میشه و اجرای فایل جاوا اسکریپت به تأخیر میافته تا بارگذاری رو مسدود نکنه.

// blocks loading and execution
<script src="normalscript.js">
// async does not block during load, but it does block during execution
<script async src="asyncscript.js">
// defer does not block both during load nor execution
<script defer src="deferscript.js">

تقسیم کد و preloading: اگر صفحه به جاوا اسکریپت اجازه بارگیری ناهمزمان رو نمیده، میتونید اون رو به چندین فایل تقسیم کنید. بخشی از جاوا اسکریپت که در هنگام بارگذاری صفحه ضروری هستش رو تو یه فایل کوچک قرار بدید و این فایل رو preload کنید. جاوا اسکریپت غیر ضروری رو در فایل دیگه ای قرار بدید و اجازه بدید به صورت deferred یا async اجرا بشه.

Minify: تعداد بایت ها رو به دو روش از طریق ابزار Javascript Uglyfier میتونید کوچک کنید. این ابزار جاوا اسکریپت رو تجزیه و تحلیل میکنه و اون رو تا حد امکان کوچک میکنه.

فشرده سازی: علاوه بر این، تعداد بایت ها را میتونید با فشرده سازی جاوا اسکریپت از طریق Gzip یا Brotli کاهش بدید.

۴. فونت ها

فونت ها معمولا آخرین فایلی هستند که توی زنجیره درخواست ضروی بارگذاری میشن. چونکه فونت های وب فقط زمانی بارگذاری میشن که مرورگر متوجه بشه بهشون نیاز داره. برای این کار، مرورگر اول باید HTML رو تجزیه و تحلیل کنه و توی استایل شیت فونت مورد استفاده رو پیدا کنه.

Preloading: وقتی فونت رو از قبل بارگذاری میکنید معمولا سریعتر هستش. یعنی فونت توی سریعترین حالت ممکن دانلود میشه، بنابراین دیگه تاثیری روی زنجیره درخواست های ضروری نداره. این کد رو تا اونجایی که میتونید توی بالاترین قسمت هد صفحه بذارید.

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

راه‌های دیگه ای برای بارگیری سریعتر فونت‌ها وجود داره:

• همیشه به فونت های محلی تکیه کنید
• اندازه فونت را با font subsetting تغییر دهید
• برای جلوگیری از مسدود کردن فونت رندر اولیه، از display = swap استفاده کنید
• به مرورگرها اجازه دهید انواع فونت های خود را از طریق font synthesis تولید کنند

۵. تصاویر

تصاویری که هنگام بارگذاری صفحه در نمای قابل مشاهده هستند هم اولویت بالایی دارند و میتونند جزو زنجیره درخواست های ضروری محسوب بشن. وقتی مطمئن هستید که یک تصویر همیشه در قسمت قابل مشاهده وب سایت ظاهر میشه، بارگذاری این تصویر رو هم میتونید preload کنید.

<link rel="preload" as="image" href="important-image.webp">

تصاویری که فورا قابل مشاهده نیستند رو بارگذاری تنبل کنید. از “loading = “lazy برای به تاخیر انداختن بارگیری تصاویر تا زمانی که قابل مشاهده باشن استفاده میشه.

<img loading="lazy" src="lazy-image.webp" width="20" height="20" alt="...">

۶. درخواست AJAX

درخواست های AJAX همیشه در اولویت بالایی قرار دارند. بنابراین، ترجیحا تا پایان رندر شدن صفحه اونها رو به تعویق بیندازید. صبر کنید تا صفحه رویداد “load” رو ارسال کنه.

اگه امکان به تعویق انداختن درخواست AJAX وجود نداره، میتونید با preloading، اطمینان حاصل کنید که درخواست Ajax در دسترس مرورگر هستش.

window.addEventListener('load', (event)=>{
  console.log('this is a good time for an AJAX request');
});

۷. آیفریم ها

آی فریم ها معمولا با اولویت بالایی دانلود میشن. از اونجایی که iframe در واقع یه صفحه دورن صفحه‌س، میتونه باعث تاخیر بسیار قابل توجهی در بارگذاری بشه. منابعی که iframe بهش نیاز داره هم با اولویت بالا دانلود میشن و زنجیره درخواست ضروری خودشون رو تشکیل میدن. بنابراین استفاده از iframe میتونه به طور قابل توجهی روی سرعت بارگذاری سایت تاثیر بذاره.

میتونید بارگیری iframe رو از طریق ویژگی “loading = “lazy به تاخیر بندازید. هنگامی که iframe بلافاصله در حین بارگذاری قابل مشاهده نباشه، تفاوت بزرگی ایجاد میکنه. تزریق iframe به صفحه از طریق جاوا اسکریپت اغلب سریعتر هستش و به شما امکان میده تا کنترل بیشتری روی زمان بندی داشته باشید. در اینصورت میتونید مطمئن باشید که توی زنجیره درخواست ضروری قرار نمیگیره.

جمع بندی

در این مقاله در مورد رفع خطای Avoid Chaining Critical Requests در جی تی متریکس صحبت کردیم. ممنون که تا انتهای مقاله همراه من بودید در صورتی که حس میکنید مطلبی هست که گفته نشده حتما در قسمت نظرات با ما به اشتراک بگذارید. در صورت داشتن هرگونه سوال با تیم پشتیبانی پارس اوستا در ارتباط باشید.