همان‌طور که در پست قبلی به‌تفصیل توضیح داده شده است، می‌توان از قوانین فرضیه برای واکشی اولیه و پیش‌پرداززنی پیمایش‌های صفحه بعدی استفاده کرد. این کار می‌تواند بار شدن صفحه را بسیار سریع‌تر یا حتی فوری کند و Core Web Vitals را برای این پیمایش‌های صفحه اضافی به‌طور قابل‌توجهی بهبود بخشد.
اشکال‌زدایی قوانین گمانه‌زنی می‌تواند دشوار باشد. این موضوع به‌ویژه برای صفحه‌های پیش‌پردازش‌شده صادق است، زیرا این صفحه‌ها در پردازنده جداگانه‌ای پردازش می‌شوند—چیزی شبیه به برگه پس‌زمینه پنهان که هنگام فعال شدن جایگزین برگه فعلی می‌شود. بنابراین، همیشه نمی‌توان از گزینه‌های معمول DevTools برای اشکال‌زدایی مشکلات استفاده کرد.
تیم Chrome سخت در تلاش بوده است تا پشتیبانی DevTools را برای اشکال‌زدایی قوانین گمانه‌زنی بهبود بخشد. در این پست، همه روش‌های مختلف استفاده از این ابزارها را برای درک قوانین گمانه‌زنی صفحه، دلیل عدم کارکرد آن‌ها، و زمان‌هایی که توسعه‌دهندگان می‌توانند از گزینه‌های آشناتر DevTools استفاده کنند (و زمان‌هایی که نمی‌توانند) خواهید دید.
توضیح اصطلاحات «پیش‌از»
اصطلاحات زیادی با پیشوند «پیش» وجود دارد که گیج‌کننده هستند، بنابراین با توضیح این اصطلاحات شروع می‌کنیم:
- واکشی پیشاپیش: واکشی کردن منبع یا سند ازقبل برای بهبود عملکرد در آینده. این پست پیش‌واکشی اسناد را بااستفاده از Speculation Rules API پوشش می‌دهد، نه گزینه مشابه اما قدیمی‌تر
<link rel="prefetch">که اغلب برای پیش‌واکشی منابع فرعی استفاده می‌شود. - پیش‌پرداخت: این یک گام فراتر از پیش‌واکشی است و درواقع کل صفحه را به‌گونه‌ای پردازش می‌کند که گویی کاربر به آن پیمایش کرده است، اما آن را در یک فرایند پردازشگر پس‌زمینه پنهان نگه می‌دارد تا درصورت پیمایش واقعی کاربر به آنجا، آماده استفاده باشد. مجدداً، این سند به نسخه جدیدتر Speculation Rules API مربوط می‌شود، نه گزینه قدیمی‌تر
<link rel="prerender">(که دیگر پیش‌پرداز کامل انجام نمی‌دهد). - ناوبری‌های گمانه‌زنی: اصطلاح جمعی برای گزینه‌های جدید واکشی پیشاپیش و پیش‌پرداز که توسط قوانین گمانه‌زنی راه‌اندازی می‌شوند.
- پیش‌بارکردن: اصطلاحی با معانی متعدد که می‌تواند به تعدادی از فناوری‌ها و فرایندها ازجمله
<link rel="preload">، اسکنر پیش‌بارکردن، و پیش‌بارکردن‌های پیمایش سرویس‌کار اشاره داشته باشد. این موارد در اینجا پوشش داده نمی‌شوند، اما این اصطلاح برای تمایز واضح آن‌ها از اصطلاح «پیمایش‌های گمانه‌زنانه» گنجانده شده است.
قوانین گمانه‌زنی برای prefetch
از قوانین فرضیه می‌توان برای واکشی اولیه سند پیمایش بعدی استفاده کرد. برای مثال، هنگام درج JSON زیر در صفحه، next.html و next2.html پیش‌واکشی خواهند شد:
<script type="speculationr>ules"
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
استفاده از قوانین گمانه‌زنی برای پیش‌واکشی‌های پیمایش نسبت به نحو قدیمی‌تر <link rel="prefetch"> مزایایی دارد، ازجمله میانای برنامه‌سازی کاربردی گویاتر و ذخیره نتایج در حافظه پنهان به‌جای حافظه پنهان دیسک HTTP.
اشکال‌زدایی prefetch قانون گمانه‌زنی
پیش‌واکشی‌های راه‌اندازی‌شده توسط قوانین فرضیه را می‌توان در پانل شبکه به همان روش واکشی‌های دیگر مشاهده کرد:
دو درخواست برجسته‌شده با رنگ قرمز منابع پیش‌واکشی‌شده هستند، همان‌طور که در ستون نوع دیده می‌شود. این منابع با اولویت Lowest واکشی می‌شوند زیرا برای ناوبری‌های آینده هستند و Chrome منابع صفحه فعلی را در اولویت قرار می‌دهد.
با کلیک کردن روی یکی از ردیف‌ها، سرایند HTTP Sec-Purpose: prefetch نیز نشان داده می‌شود که ازطریق آن می‌توان این درخواست‌ها را در سمت سرور شناسایی کرد:
اشکال‌زدایی prefetch با برگه‌های «بار کردن حدسی»
بخش جدید Speculative loads در پانل Application در Chrome DevTools، زیر بخش Background services، اضافه شده است تا به اشکال‌زدایی قوانین گمانه‌زنی کمک کند:
سه برگه در این بخش دردسترس است:
- بار کردن حدسی که وضعیت پیش‌پرداخت‌سازی‌شده صفحه فعلی را فهرست می‌کند.
- قوانین که همه مجموعه‌های قانون یافت‌شده در صفحه فعلی را فهرست می‌کند، که به‌عنوان نشانی‌های وب یا برچسب‌های قانون (درصورت وجود) تعیین شده‌اند.
- Speculations که همه نشانی‌های وب پیش‌واکشی‌شده و پیش‌پرداز شده از مجموعه‌های قوانین را فهرست می‌کند.
برگه فرضیه‌ها در نماگرفت قبلی نشان داده شده است و می‌توانیم ببینیم که این صفحه نمونه یک مجموعه قانون فرضیه برای واکشی اولیه ۳ صفحه دارد. دو مورد از این پیش‌واکشی‌ها موفقیت‌آمیز بود و یکی ناموفق بود. با کلیک کردن روی نماد کنار مجموعه قوانین می‌توانید به منبع مجموعه قوانین در پانل عناصر بروید. یا اینکه می‌توانید روی پیوند وضعیت کلیک کنید تا به برگه گمانه‌زنی‌ها که براساس آن مجموعه قانون فیلتر شده است بروید.
برگه گمانه‌زنی‌ها همه نشانی‌های وب هدف را به‌همراه کنش (پیش‌واکشی یا پیش‌پرداز)، مجموعه قوانینی که از آن آمده‌اند (چون ممکن است چند مجموعه قانون در یک صفحه وجود داشته باشد)، و وضعیت هر گمانه‌زنی فهرست می‌کند:
در بالای نشانی‌های وب، می‌توان از منوی کرکره‌ای برای نمایش نشانی‌های وب از همه مجموعه‌های قانون یا فقط نشانی‌های وب از یک مجموعه قانون خاص استفاده کرد. در زیر آن، همه نشانی‌های وب فهرست شده است. با کلیک کردن روی نشانی وب، اطلاعات دقیق‌تری دریافت می‌کنید.
در این نماگرفت، می‌توانیم دلیل ناموفق بودن صفحه next3.html را ببینیم (که وجود ندارد و بنابراین خطای ۴۰۴ را برمی‌گرداند که رمز وضعیت HTTP غیر2xx است).
برگه خلاصه، بار کردن حدسی، گزارش وضعیت بار کردن حدسی برای این صفحه را نشان می‌دهد تا مشخص شود که آیا از واکشی اولیه یا پیش‌پرداززنی برای این صفحه استفاده شده است یا نه.
برای صفحه واکشی اولیه شده، وقتی به آن صفحه پیمایش می‌کنید باید پیام موفقیت‌آمیز ببینید:
فرضیه‌های بی‌نظیر
وقتی پیمایش از صفحه‌ای با قوانین فرضیه اتفاق می‌افتد که منجر به استفاده از واکشی اولیه یا پیش‌پرداز نمی‌شود، بخش دیگری از برگه جزئیات بیشتری درباره اینکه چرا نشانی وب با هیچ‌یک از نشانی‌های وب فرضیه مطابقت ندارد نشان می‌دهد. این برای تشخیص غلط‌های املایی در قوانین فرضیه شما مفید است.
برای مثال، در اینجا به next4.html پیمایش کردیم، اما فقط next.html، next2.html، یا next3.html پیش‌واکشی هستند، بنابراین می‌توانیم ببینیم که این کاملاً با هیچ‌یک از این سه قانون مطابقت ندارد.
برگه‌های بار کردن حدسی برای اشکال‌زدایی خود قوانین حدس و پیدا کردن هرگونه خطای نحوی در JSON بسیار مفید هستند.
درمورد خود پیش‌واکشی‌ها، پانل شبکه احتمالاً مکان آشناتری است. برای مثال خطای واکشی اولیه، می‌توانید خطای ۴۰۴ را برای واکشی اولیه در اینجا ببینید:
بااین‌حال، برگه‌های بارهای حدسی برای پیش‌پردازش قوانین گمانه‌زنی بسیار مفیدتر می‌شوند که در ادامه پوشش داده شده است.
قوانین گمانه‌زنی برای prerender
قوانین گمانه‌زنی پیش‌پرداززنی از همان نحو قوانین گمانه‌زنی واکشی اولیه پیروی می‌کنند. برای مثال:
<script type="speculationr>ules"
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
این مجموعه قانون باعث بار کردن و پردازش کامل صفحه‌های مشخص‌شده می‌شود (منوط به محدودیت‌های خاص). این کار می‌تواند تجربه بار کردن فوری را ارائه دهد—البته با هزینه منابع اضافی.
اما برخلاف پیش‌واکشی‌ها، این موارد در پانل شبکه قابل‌مشاهده نیستند، زیرا در فرایند پردازش جداگانه‌ای در Chrome واکشی و پردازش می‌شوند. این امر باعث می‌شود برگه‌های بارگیری‌های گمانه‌زن برای اشکال‌زدایی قوانین گمانه‌زنی پیش‌پرداز مهم‌تر شوند.
اشکال‌زدایی کردن prerender با برگه‌های «بار کردن حدسی»
همان صفحه‌های بارهای گمانه‌زنی را می‌توان برای قوانین گمانه‌زنی پیش‌پرداززنی استفاده کرد، همان‌طور که با صفحه نمایشی مشابهی نشان داده شده است که به‌جای واکشی اولیه سه صفحه، تلاش می‌کند پیش‌پرداززنی کند:
در اینجا دوباره می‌بینیم که یکی از سه نشانی وب پیش‌پرداز نشده است و توسعه‌دهندگان می‌توانند جزئیات هر نشانی وب را در برگه Speculations با کلیک کردن روی پیوند 2 Ready, 1 Failure دریافت کنند.
در Chrome 121، پشتیبانی از قوانین سند را راه‌اندازی کردیم. این کار به مرورگر اجازه می‌دهد تا این پیوندها را از پیوندهای همان مبدأ در صفحه انتخاب کند، به‌جای اینکه مجموعه خاصی از نشانی‌های وب را فهرست کند:
<script type="speculationr>ules"
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_match<es">;: "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
/script
این مثال همه پیوندهای دارای مبدأ یکسان را، به‌جز آن‌هایی که با /not-safe-to-prerender شروع می‌شوند، به‌عنوان نامزدهای پیش‌پرداز انتخاب می‌کند.
همچنین eagerness را روی moderate تنظیم می‌کند، یعنی وقتی نشانگر روی پیوند نگه داشته می‌شود (در رایانه)، براساس نمای (در تلفن همراه)، یا وقتی روی آن کلیک می‌شود، ناوبری‌ها پیش‌پرداز می‌شوند.
قوانین مشابهی مانند این در سایت نمایشی قوانین فرضیه وجود دارد و استفاده از بخش جدید بارهای فرضیه در این سایت مفید بودن این برگه جدید را نشان می‌دهد زیرا همه نشانی‌های وب واجدشرایطی که مرورگر در صفحه پیدا کرده است فهرست شده‌اند:
وضعیت راه‌اندازی‌نشده است چون فرایند پیش‌پرداز برای این موارد شروع نشده است. اما وقتی اشاره‌گر را روی پیوندها نگه می‌داریم، می‌بینیم که با پیش‌پرداخت هر نشانی وب، وضعیت تغییر می‌کند:
Chrome محدودیت‌هایی برای پیش‌پرداخت‌ها تعیین کرده است، ازجمله حداکثر ۲ پیش‌پرداخت برای moderate اشتیاق، بنابراین پس‌از نگه داشتن نشانگر روی پیوند سوم، دلیل شکست برای آن نشانی وب را می‌بینیم:
اشکال‌زدایی کردن prerender با پانل‌های دیگر DevTools
برخلاف پیش‌واکشی‌ها، صفحه‌هایی که پیش‌پرداز شده‌اند در فرایندهای پردازش فعلی در پانل‌های DevTools مانند پانل شبکه نشان داده نمی‌شوند، زیرا در پردازشگر پشت صحنه خودشان پردازش می‌شوند.
بااین‌حال، اکنون می‌توان بااستفاده از منوِ کرکره‌ای در بالا سمت چپ یا با انتخاب نشانی وب در بخش بالای پانل و انتخاب بازرسی، رندرکننده مورداستفاده پانل‌های DevTools را تغییر داد:
این منوِ کرکره‌ای (و مقدار انتخاب‌شده) در همه پانل‌های دیگر نیز هم‌رسانی می‌شود، مانند پانل شبکه، که در آن می‌توانید ببینید صفحه درخواست‌شده همان صفحه پیش‌پردازش‌شده است:
با نگاه کردن به سرایندهای HTTP برای این منابع، می‌توانیم ببینیم که همه آن‌ها با سرایند Sec-Purpose: prefetch;prerender تنظیم خواهند شد:
یا پانل عناصر که در آن می‌توانید محتوای صفحه را ببینید، مانند نماگرفت زیر که در آن می‌بینیم عنصر <h1> برای صفحه پیش‌پرداز شده است:
یا پانل کنسول که در آن می‌توانید گزارش‌های کنسول را که توسط صفحه پیش‌پرداخت‌شده منتشر شده است ببینید:
اشکال‌زدایی قوانین گمانه‌زنی در صفحه پیش‌پردازشده
بخش‌های قبلی درباره نحوه اشکال‌زدایی صفحه‌های پیش‌پردازش‌شده در صفحه‌ای که پیش‌پردازش را آغاز می‌کند بحث می‌کنند. بااین‌حال، این امکان نیز وجود دارد که خود صفحه‌های پیش‌پرداخت‌شده اطلاعات اشکال‌زدایی را ارائه دهند، چه ازطریق برقراری تماس‌های تحلیلی یا ثبت گزارش در کنسول (که همان‌طور که در بخش قبلی توضیح داده شد قابل‌مشاهده است).
علاوه‌براین، وقتی کاربر به صفحه پیش‌پرداززنی‌شده پیمایش می‌کند و آن را فعال می‌کند، برگه بارهای فرضی این وضعیت را نشان می‌دهد و اینکه آیا پیش‌پرداززنی موفقیت‌آمیز بوده است یا نه. اگر پیش‌پرداز نشد، توضیحی درباره دلیل آن ارائه می‌شود:
علاوه‌براین، همان‌طور که در واکشی‌های اولیه اتفاق می‌افتد، پیمایش از صفحه‌ای با قوانین فرضیه که با صفحه فعلی مطابقت ندارد تلاش می‌کند در برگه بارگذاری‌های فرضی به شما نشان دهد چرا نشانی‌های وب با نشانی‌های وب تحت پوشش قوانین فرضیه صفحه قبلی مطابقت ندارند:
نتیجه‌گیری
در این پست، روش‌های مختلفی را که توسعه‌دهندگان می‌توانند قوانین فرضیه واکشی اولیه و پیش‌پرداززنی را اشکال‌زدایی کنند نشان داده‌ایم. تیم همچنان به کار روی ابزارسازی برای قوانین گمانه‌زنی ادامه می‌دهد و ما مشتاقانه منتظر شنیدن پیشنهادات توسعه‌دهندگان درباره راه‌های دیگری هستیم که می‌تواند برای اشکال‌زدایی این API جدید و هیجان‌انگیز مفید باشد. توسعه‌دهندگان را تشویق می‌کنیم تا برای هرگونه درخواست ویژگی یا اشکال مشاهده‌شده، در ردیاب مشکل Chrome مشکل را مطرح کنند.
تصدیق‌نامه‌ها
تصویر ریزعکس از نوبلسون فرناندز در Unsplash.