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

آموزش حل مشکل Preload key requests در جی تی متریکس

رفع ارور 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
نمونه خطای Preload key requests در جی تی متریکس

در اینجا مشکل 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

چطور خطای 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 صحبت می‌کنیم که مربوط به تصاویر سایت هست.

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

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

5 نظر

5 پاسخ

  1. سلام وقت شما بخیر
    داخل جی تی متریکس ارور Preload key requests برای فونت سایت که داخل فایل سی اس اس هست گرفته ، برای رفعش فایل سی اس اس رو لازم نیست تغییر بدم و فقط باید آدرس فونت رو با همراه Preload به هد سایت اضافه کنم. درسته؟
    بیشتر سوالم مربوط به تغییرات فایل سی اس اس هست، اینکه لازم هست تغییر هم اونجا داده بشه یا نه؟

    1. سلام حمید.
      نه لازم نیست و اگر لازم بود حتما داخل مقاله اشاره میشد.
      طبق راهنمای مقاله پیش برید.

      1. سلام .وقت شما بخیر
        ممنون از اینکه وقت میذارید و صبورانه پاسخ میدید.
        راستش از این کد استفاده کردم و مشکلم حل شد اما ی ارور جدید برای موبایل داخل پیج اسپید گوگل اضافه شده (Ensure text remains visible during webfont load) که مربوط به تبلیغاتی هست که داخل سایت داره لود میشه و ربطی به فونت سایتم نداره، داخل ی مقاله دیگه اشاره کرده بودید که برای رفع این خطا باید font-display: swap; به فونت اضافه بشه ، اما وقتی این فونت مربوط به سایتم نیست باید چه کنم؟

        فونتی که خطا گرفته
        https://cdn.rawgit.com/rastikerdar/shabnam-font/v4.0.0/dist/Shabnam-Bold.woff2

        1. سلام حمید
          وقتی دسترسی ندارید پس کاری نمیتونید بکنید.
          البته یک سری روش های پیشرفته هست که خارج از مباحث این مقاله هست با این حال شاید وجود چنین ایرادهایی زیاد مهم نباشه.

  2. سلام وقت بخیر
    در قسمت waterfall در gtmetrix برخی فونت ها به رنگ قرمز هستند.و مقداز سایزشان صفر و در قسمت استاتوس canceled نوشته شده است.
    این دو فونت در خطای Preload key requests هم وجود دارد با کد link rel=”preload” هم برطرف نمیشود.
    این وضعیت فونت ها در waterfall به چه معنی هست.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر