جلسه ۳۴ – رفع ارور Preload key requests

سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس میزفا همراه شما هستیم. تو جلسه ۳۳ درباره برطرف کردن ارور Preconnect to required origins صحبت کردیم و در این جلسه به آموزش رفع خطای Preload key requests در جی تی متریکس می‌پردازیم. از اونجایی که ماهیت این ۲تا خطا تا حدی شبیه به هم دیگه ست، اگه جلسه قبلی رو مطالعه نکردید، لطفا ابتدا جلسه ۳۳ رو بخونید (۵-۶ دقیقه وقت لازم داره) و سپس این مقاله رو ادامه بدید. ارور Preload key requests مربوط به اولویت بندی درخواست‌های صفحه هست و حل اصولی اون تو بعضی شرایط باعث میشه معیارهای کلیدی مثل Time to Interactive و First Contentful Paint تا ۱ ثانیه بهینه سازی بشن. رفع این خطا نسبتا آسونه، اما نیازمند آگاهی خوب ما از وضعیت کدها و منابع سایتمون هست.
لطفا تا پایان با میزفا همراه باشید.

خلاصه خطای Preload key requests

میزان سختی: ***
روی چه مواردی تاثیر می‌ذاره: TTI و FCP

علت ایجاد خطای Preload key requests چیست؟

اگرچه مرورگرهای جدید دارند روز به روز هوشمندتر و دقیق‌تر میشن و تشخیص میدن که کدوم درخواست‌ها رو برای لود صفحه در اولویت قرار بدند. با این حال گاهی اوقات و برای بعضی درخواست‌های مهم، امکان تشخیص درست اهمیت درخواست رو ندارند. در نتیجه یکی از منابعی که برای افزایش سرعت سایت و لود سریع‌تر صفحه ضروری هست رو دیرتر لود می‌کنند.
به‌عنوان مثال لود شدن یه فونت یا تصویر بکگراند صفحه ممکنه موارد ضروری باشند که نباید به تعویق بیافتند. اما شاید ما این فونت یا تصویر بکگراند رو داخل یه فایل CSS تعریف کرده باشیم. در چنین شرایطی، تا زمانی که مرورگر این فایل CSS رو دانلود و تجزیه (Parse) نکنه، قادر به شناسایی فونت یا تصویر مورد نظر نیست. بنابراین دانلود و نمایش این منابع (با وجود اهمیتی که دارند) دیرتر انجام میشه. خطای Preload key requests هم به همین موضوع اشاره داره و میگه درخواست‌های خیلی مهم رو با استفاده از Preload زودتر از حالت عادی دانلود کنید.

تو مقاله رفع ارور Preconnect to required origins گفتیم برای ایجاد اتصال (Connection) سریع‌تر با دامنه‌های third-party مهم‌تر، بهتره از Preconnect استفاده کنیم. استفاده از Preload هم چنین نقشی داره، اما برای منابع و درخواست‌های موجود در دامنه خودمون استفاده میشه. با استفاده از Preload به مرورگر هشدار می‌دیم که برای لود این منابع آماده باشه. مثلا با Preload کردن فونت‌ها به مرورگر هشدار می‌دیم و می‌گیم تا چند لحظه دیگه به این منبع نیاز پیدا می‌کنی. البته حواسمون باشه که استفاده از Preload باید فقط برای منابع مهم و ضروری صفحه باشه. به‌عبارتی با Preload کردن منابع مهم، از مرورگر می‌خوایم که زودتر از حالت عادی به اونها رسیدگی کنه و اونها رو Fetch کنه. تو مثالی که تو پاراگراف قبلی درباره فایل CSS و فونت موجود در اون گفتیم، اگه این فونت رو (به روشی که در ادامه می‌گیم) Preload کرده باشیم، زمانی که مرورگر به فایل CSS مورد نظر برسه و بخواد دانلودش کنه، همزمان دانلود فونت رو هم شروع می‌کنه. اما در حالت عادی باید اول دانلود و تجزیه CSS رو تموم می‌کرد و بعد دانلود فونت رو شروع می‌کرد.

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

در اینجا مشکل Preload key requests روی خطای Avoid chaining critical requests هم تاثیر گذاشته. طبق عکس بالا، برای اینکه فونت‌های این سایت لود بشن، ابتدا باید این فایل CSS دانلود و تجزیه می‌شده. یعنی کاربر باید مدت طولانی‌تری منتظر لود شدن فونت‌ها باشه که احتمالا منجر به مشکل FOIT و خطای Ensure text remains visible during webfont load هم میشه. اما وقتی فونت‌ها رو Preload کردیم، این مشکل حل شد. از طرفی Preload فونت‌ها باعث شد ارور Avoid chaining critical requests هم کم اثر بشه.

چطور خطای Preload key requests را برطرف کنیم؟

خب با مقدمه و توضیحاتی که خدمت شما ارائه کردیم و خیلی مهم بودند (چون باید علت ایجاد خطاها رو بدونیم) حالا می‌ریم سراغ روش برطرف کردن خطای Preload key requests در جی تی متریکس جدید که خیلی هم کار سختی نیست. با قرار دادن کد زیر در تگ head شما می‌تونید منابع مختلف رو Preload کنید:

<link rel="preload" as="script" href="critical.js">

توی کد بالا، برای ویژگی href باید آدرس اسکریپت، CSS، فونت و… که می‌خوایم Preload کنیم رو قرار بدیم. برای ویژگی as هم باید نوع فایل (script / style / font / image) مورد نظر رو قرار بدیم. بدین ترتیب حتی اون فایل در کش مرورگر ذخیره میشه و برای دفعات بعدی که کاربر به سایت ما مراجعه کنه، حتی این فایل نیازی به دانلود دوباره نخواهد داشت و از کش استفاده میشه. البته خیلی مهمه که بدونیم ویژگی as نباید از این کد حذف بشه و باید حتما برای Preload استفاده بشه.

نکته بعدی اینه که بعضی منابع (مثلا فونت‌ها) به‌صورت Anonymous لود میشن. برای چنین منابعی باید ویژگی crossorigin رو هم تو تگ <link> قرار بدیم تا Preload درست انجام بشه. یه نمونه براتون آوردیم:

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

حواستون باشه که اگه از ویژگی crossorigin برای Preload فونت‌ها استفاده نکنید، ۲ بار Fetch میشن.

آخرین نکته مهمی که باید درباره ارور Preload key requests به شما عزیزان بگم، اینه که اگرچه استفاده از کد مربوط به Preload نسبتا آسونه. اما باید ازش خیلی هوشمندانه استفاده بشه. یعنی ما نمی‌تونیم همه منابع صفحه رو Preload کنیم. خود این خطا هم میگه Preload key requests؛ یعنی فقط برای درخواست‌های کلیدی و خیلی مهم. از طرفی باید دقت داشته باشیم که اگه منابعی رو Preload کنیم و تا ۳ ثانیه بعد ازشون استفاده نشه، خود این موضوع باعث ایجاد اخطار در کنسول کروم میشه. پس باید خیلی دقت کنیم و بهتره فقط منابعی که در GTmetrix یا Lighthouse بهمون پیشنهاد شده رو Preload کنیم.

جمع بندی

در این مقاله میزفا درباره روش برطرف کردن خطای Preload key requests در جی تی متریکس جدید صحبت کردیم. با استفاده از Preload از مرورگر درخواست می‌کنیم منابع کلیدی صفحاتمون رو در اولین زمان ممکن دانلود کنه. منابعی که در حالت عادی، مرورگر اونها رو بنا به دلایلی دیرتر لود می‌کرده. امیدوارم این آموزش برای شما همراهان میزفا مفید بوده باشه. تو جلسه بعدی درباره خطای Properly size images صحبت می‌کنیم که مربوط به تصاویر سایت هست.

اگه سوالی دارید در قسمت نظرات (پایین همین صفحه) بپرسید تا با کمال میل پاسخگوی شما عزیزان باشیم.