با این 8 روش خطای Avoid chaining critical requests رو رفع کنید

آیا هنگام تست سرعت سایت با خطای Avoid chaining critical requests یا جلوگیری از درخواست‌های ضروری زنجیره‌ای روبه رو شده‌اید؟
نگران نباشید در این مقاله از میزفا تولز به شما کمک می‌کنیم تا بفهمید یک درخواست ضروری چیست، چرا باید از درخواست‌های ضروری زنجیره‌ای جلوگیری کنید و در نهایت با بررسی 8 راهکار کاربردی می‌توانید این خطا رو برطرف کنید.✌️

درخواست‌های ضروری زنجیره‌ای چیست؟

قبل از اینکه مفهوم درخواست ضروری زنجیره‌ای رو بیان کنیم دو تا مفهوم “درخواست ضروری” و “مسیر ضروری رندر شدن” رو بررسی می‌کنیم تا بهتر مفهوم chaining critical requests رو درک کنید.

✅ درخواست ضروری یا critical requests به درخواست‌هایی گفته می‌شود که برای رندر شدن سریع‌تر صفحه ضروری هستند و باید در ابتدا به این درخواست‌ها رسیدگی بشه. نمونه‌ای از درخواست ضروری، تصاویر ابتدای صفحه هست که کاربر باید در نگاه اول بتونه اونها رو ببیند.

✅ مسیر ضروری رندر شدن یا Critical Rendering Path به ترتیب مراحلی گفته می‌شود که مرورگر برای تبدیل فایل‌های HTML، CSS و جاوا اسکریپت به پیکسل‌هایی از محتوا در صفحه بازدیدکننده سایت، انجام می‌دهد.
بیاید تا موضوع رو شفاف‌تر کنیم. وقتی کاربر وارد صفحه شما می‌شود، مرورگر کارش رو با پردازش کد HTML صفحه شما شروع می‌کند. تمام منابع خارجی مانند فایل‌های جاوا اسکریپت و فایل‌های CSS موجود در کد شما توسط مرورگر از سرور درخواست می‌شوند و سپس اونها رو خط به خط تجزیه یا parse می‌کند و به‌صورت پیکسل‌هایی روی صفحه نمایش می‌دهد.
هنگامی که منابع ضروری توسط مرورگر بارگیری شدند، مرورگر کار خودش رو برای تمام عناصر صفحه ادامه می‌دهد تا همه سند HTML رو تجزیه کنه و در صفحه وب شروع به نمایش محتوایی قابل درک برای کاربر کند. 
در این بین برخی از منابع render blocking هستند و مانع از فرآیند رندر شدن صفحه می‌شوند و مرورگر رو مجبور می‌کنند تا اول به اونها رسیدگی کند. این منابع لجباز و خودخواه موجب کندی لود صفحه و در نتیجه تجربه کاربری ضعیف می‌شوند. خطای TBT هم مخصوص همین مورد هست.
کل این مسیر از زمانی که مرورگر شروع به پردازش فایل‌های HTML می‌کند تا زمانی که مرورگر برای اولین بار شروع به نمایش محتوا روی صفحه می‌کند، به‌عنوان مسیر ضروری رندر شدن یا critical rendering path شناخته می‌شود. برای رفع خطای Avoid chaining critical requests و بهینه‌سازی سرعت سایت باید این مسیر رو کوتاه‌تر کنید.

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

✅ درخواست‌های ضروری زنجیره‌ای یا chaining critical requests به مجموعه‌ای از درخواست‌های ضروری که به یکدیگر وابسته هستند، گفته می‌شود که برای ارائه محتوا در صفحه وب بسیار مهم هستند. ترتیب پردازش درخواست‌های ضروری توسط مسیر ضروری رندر شدن یا critical rendering path تعیین می‌شود.

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

علت ایجاد خطای Avoid chaining critical requests چیست؟

خطای «جلوگیری از درخواست‌های ضروری زنجیره‌ای» به این موضوع اشاره می‌کند که منابع ضروری مورد نیاز برای بارگذاری صفحه وب بسیار بزرگ هستند و یا فایل‌های جاوا اسکریپت و CSS بهینه‌سازی نشدند. فایل‌های بزرگ‌ و جاوا اسکریپت بهینه نشده باعث می‌شود تا مرورگر زمان بیشتری برای پردازش نیاز داشته باشد تا بتواند اولین محتوا رو نمایش دهد. 

یکی از دلایل اصلی خطای «جلوگیری از درخواست های ضروری زنجیره ای» منابع render blocking هست. منابع مسدود کننده رندر شامل تصاویر، منابع متنی، فایل‌های CSS یا فایل‌های جاوا اسکریپت هست که باعث می‌شود اولین رندر محتوا در صفحه وب شما کند شود.
درک این نکته مهم هست که همه منابع به همان ترتیبی که در فایل‌های کد HTML ظاهر می‌شوند، دانلود می‌شوند. شما باید منابع حیاتی رو مشخص کنید تا منابع مسدودکننده رندر بر سرعت بارگذاری صفحه تأثیر نگذارند یا مسیر رندر حیاتی رو به تأخیر بیندازند.

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

وظیفه شما این هست تا از ایجاد درخواست‌های ضروری جلوگیری کنید. زیرا همان‌طور که گفتیم این درخواست‌ها render blocking هستند.

رفع خطای Avoid chaining critical requests

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

1- افزونه‌های غیر ضروری رو حذف کنید.

خیلی از مشکلات سرعت مخصوصا در سایت‌های وردپرسی به دلیل افزونه‌های زیاد هست که باید در ابتدا به اونا رسیدگی کنید.
معمولاً اوایل که سایت رو تأسیس می‌کنیم کلی افزونه‌های مختلف رو نصب می‌کنیم، این کار شاید اوایل تأثیر چندانی نداشته باشه ولی بعد از مدتی که سایت شکل می‌گیرد و ورودی‌ها و منابعش بیشتر می‌شود، اون افزونه‌ها کلی مشکلات رو ایجاد می‌کنند و معمولاً کسی فکرشم نمیکنه که مشکل از افزونه‌هایی هست که سال‌ها پیش نصب کردند. حتماً همین امروز وارد بخش افزونه‌ها بشید و اونا رو بازنگری کنید.

1-1 حذف افزونه‌هایی که استفاده نمی‌شوند

بارها در پروژه‌های سرعت سایت دیدیم که افزونه‌هایی روی سایت وجود داره که اصلاً هیچ کاربردی برای کاربر نداره ولی صرفاً مدیر سایت خوشش اومده که از اون افزونه برای زیبایی استفاده کنه!
به‌عنوان مثال نصب افزونه تیکت در سایت فروشگاهی آنلاین کار اشتباهی هست و سایت‌های فروشگاهی اصلاً تیکت ندارند و این افزونه به درد کاربر نمیخوره.

1-2 حذف افزونه‌هایی که هم پوشانی دارند

برخی از افزونه‌ها کارایی مشابهی دارند و می‌توان با داشتن یک افزونه به چند هدف مختلف رسید. 
به‌عنوان مثال وجود دو افزونه المنتور و contact form 7 کاملاً بیهوده هست چون افزونه المنتور فرم تماس با ما داره و میشه از این قابلیتش استفاده کرد بدون اینکه نیازی به استفاده از افزونه فرم تماس باشه. پس بهتره حذفش کرد.

1-3 حذف افزونه‌های غیر بهینه

برخی افزونه‌ها هرچند خیلی از نظر ما خوب و کاربردی باشند ولی بازم خیلی غیر بهینه هستند مثل افزونه آمار وردپرس. 
استفاده از این افزونه‌ها منابع رو بالا می‌برند و سایت رو سنگین می‌کنند و احتمال وجود این مشکلات رو افزایش میده. وقتی این افزونه‌ها رو فعال می‌کنیم درخواست‌های ضروری در بین کلی درخواست‌های غیر ضروری گم می‌شوند.

2- قالب‌های غیر کاربردی و غیر بهینه رو حذف کنید.

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

2-1 حذف قالبی که از امکاناتش استفاده نمی‌شود

قالب رو باید بر اساس نیازتون انتخاب کنید. متأسفانه اکثر افراد قالب رو بر اساس نیازشون انتخاب نمی‌کنند بلکه قالب رو بر اساس امکاناتش انتخاب می‌کنند. این کار یک اشتباه بزرگ و پایه‌ای هست و بعد گلایه می‌کنند که چرا سرعت سایتشون پایینه! 
یکی از دوستان قالبی رو انتخاب کرده بود که داخل توضیحاتش نوشته شده بود که با استفاده از این قالب دیگه نیازی نیست کلی افزونه‌ جانبی رو نصب کنید! دقیقاً همین توضیح یعنی این قالب مشکل داره چون با نصب این قالب انگار ۱۰ تا افزونه دیگه هم نصب کردید در صورتی که شاید این امکانات اصلاً مورد نیاز شما نباشه و با نصب یک قالب غیرکاربردی کلی سایت رو سنگین کردید.

2-2 حذف قالب غیر بهینه

گاهی اوقات یک قالب سبک و کاربردی رو بر اساس نیازتون انتخاب می‌کنید اما قالب غیر بهینه هست یعنی قالب قدیمی شده و آپدیت نیست. در این مواقع باید قالب رو آپدیت کرد یا تغییرش بدید.

3- منابع  render blockingرا حذف کنید.

از آنجایی که منابع مسدود کننده رندر باعث تأخیر در بارگیری منابع ضروری می‌شود، روند درخواست‌های ضروری زنجیره‌ای رو حتی بیشتر کند می‌کند. 

یک راه عالی برای حذف منابع مسدودکننده رندر این هست  که همه تگ‌های <script> و <link> رو به انتهای کد HTML خود منتقل کنید. به این ترتیب، مرورگر آن تگ‌ها رو در انتهای مسیر ضروری رندر شدن پردازش می‌کند. در نتیجه، منابع بیشتری رو برای بارگیری منابع ضروری آزاد می‌کند که می‌تواند به مرورگر کمک کند تا پیکسل‌ها رو در صفحه وب به سرعت نمایش دهد.

علاوه بر این، می‌توانید ویژگی‌های async یا defer رو به همه تگ‌های غیر مهم <script> و <link> در کد HTML خود اضافه کنید.

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

4- مسیر ضروری رندر شدن رو بهینه کنید.

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

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

5- منابع ضروری رو pre-load کنید.

pre-load منابع ضروری یکی از بهترین راه‌هاست برای اطمینان از اینکه مرورگر شما تمام منابع مورد نیاز برای ارائه سریع محتوا رو در صفحه وب شما دارد. می‌توانید جاوا اسکریپت‌ها رو از قبل بارگیری کنید تا زمان لازم برای بارگیری صفحه وب خود رو کاهش دهید.

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

تصاویری که باید در viewport کاربر (قسمتی از صفحه که کاربر بدون اسکرول کردن مشاهده می‌کنه) بارگیری شوند باید preload شوند. به این ترتیب، مرورگر از قبل تصاویر مورد نیاز رو دانلود کرده و آماده استفاده در هنگام ورود بازدیدکنندگان به سایت شما خواهد بود.

6- از  font-display استفاده کنید.

فراخوانی فونت با استفاده از ویژگی font-display مشخص می‌کند که در زمان لود صفحه، فونت چطور نمایش داده شود. اگر ویژگی font-display رو با swap تنظیم کنید ( یعنی به مرورگر بگویید تا پیش از لود شدن کامل فونت سفارشی، فونت جایگزین رو نشان دهد) میتونید مشکل FOIT رو هم در اکثر مرورگرهای مدرن حل کنید.              

7- درخواست‌های جاوا اسکریپت و AJAX رو به تأخیر بیندازید.

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

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

8- HTML رو کوچک و فشرده کنید. 

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

همین امروز از شر خطای Avoid chaining critical requests خلاص شوید

جلوگیری از درخواست‌های ضروری زنجیره‌ای می‌تواند چالش برانگیز باشد اما با این راهکارهایی که در این مقاله بررسی کردیم، میتونید این مشکل رو برطرف کنید.

به عنوان جمع‌بندی برای رفع خطای Avoid chaining critical requests این کارها رو انجام دهید.

✅ قالب‌ها و افزونه‌های غیرکاربردی و غیر بهینه رو حذف کنید.
✅منابع مسدودکننده رندر رو حذف کنید و مسیر ضروری رندر شدن رو بهینه کنید تا پردازش و دانلود سریع برای مرورگر فراهم شود.
✅ منابع مهم رو preload کنید تا مرورگر به سرعت منابع مهم رو پردازش کند.
✅ برای بهبود سرعت صفحه و خلاص شدن از شر خطای Avoid chaining critical requests، درخواست‌های AJAX و iframe رو به تأخیر بیندازید.

همچنین می‌توانید سایر آموزش‌های ما رو در مورد بهبود سرعت و رتبه‌بندی سایتون رو در دیگر مقالات آموزش افزایش سرعت سایت بررسی کنید. با پاسخ به سؤالات زیر، میزان یادگیری این مبحث رو محک بزنید و سپس این خطای سایتتون رو هم مثل دیگر خطاها رفع کنید.