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