نکات اولویت Google CWV را بهبود می بخشد

ویژگی اهمیت عناصر صفحه وب را با دادن راهنمایی به مرورگر وب در مورد اینکه آیا یک عنصر صفحه وب مهم است یا مهم نیست یا فقط به مرورگر اجازه تصمیم گیری می کند، تغییر می دهد.

ویژگی اهمیت را یک راهنمایی اولویت می نامند. این ویژگی به مرورگر اشاره می کند که یک عنصر مشخص شده مهم است (یا مهم نیست) و به آن اولویت بالاتر (یا پایین تر) می دهد.

ارزش هایی که “اهمیت” ویژگی می تواند ارتباط برقرار کند:

اشاره منبع ویژگی اهمیت برای عناصر زیر قابل استفاده است:

چگونه نکات منابع، Core Web Vitals را بهبود می بخشد

مرورگرها به طور خودکار سطوح اولویت را برای دانلود منابع محاسبه می کنند.

ابزارهای کنونی مانند ویژگی “preload” به ارائه نکاتی در مورد منبع برای دانلود منابع مهم مانند فونت ها و تصاویر کمک می کند.

سایر نکات منابع همگام و به تعویق افتادن هستند.

همه آنها به سرعت دانلود کل سند کمک می کنند و سند را سریعتر قابل مشاهده و تعامل می کنند.

اما مرورگر هنوز باید تصمیم بگیرد که کدام یک مهمتر است.

به گفته Web.dev، یک تصویر از پیش بارگذاری شده دانلود می شود اما همچنان اولویت پایینی از سوی مرورگر به آن اختصاص داده می شود و با تأخیر مواجه می شود.

این توضیح است:

بزرگ‌ترین تصویر رنگ محتوا را بگیرید، که وقتی از قبل بارگذاری شود، همچنان اولویت پایینی دارد.

اگر توسط سایر منابع اولیه با اولویت پایین عقب نشینی شود، استفاده از نکات اولویت همچنان می تواند به بارگذاری سریع تصویر کمک کند.

مثالی از مفید بودن ویژگی اهمیت زمانی است که یک صفحه وب دارای یک چرخ فلک تصویر در بالای درگاه نمایش (بخشی از مرورگر است که بازدیدکننده سایت در حال حاضر می بیند).

اگر چرخ فلک حاوی پنج تصویر باشد، همه آنها را می توان از قبل بارگذاری کرد. اما اگر اولی به “بالا” ویژگی اهمیت و سایر موارد با توجه به ”کمویژگی ” صفحه وب سریعتر نمایش داده می شود زیرا مرورگر اکنون می داند که اولویت بالایی به تصویر اول می دهد.

مثال دیگری که توسط گوگل ارائه شده است، تصویر برجسته در بالای صفحه وب است. مرورگر به تصویر اولویت پایینی می دهد و تنها پس از تکمیل بقیه طرح بندی صفحه وب، آن را رندر می کند.

گوگل توضیح می دهد:

«ارائه اشاره اولویت در نشانه‌گذاری به تصویر اجازه می‌دهد با اولویت بالا شروع شود و خیلی زودتر بارگذاری شود.

توجه داشته باشید که پیش‌بارگذاری هنوز برای کشف اولیه تصاویر LCP که به عنوان پس‌زمینه CSS گنجانده شده‌اند مورد نیاز است و می‌توان آن را با نکات اولویت با درج اهمیت=’high’ در پیش‌بارگذاری ترکیب کرد، در غیر این صورت همچنان با اولویت پیش‌فرض «کم» برای تصاویر شروع می‌شود. “

همین اتفاق در مورد اسکریپت هایی می افتد که به صورت async یا defer دانلود می شوند، هر دو اولویت پایینی دارند.

با افزودن یک راهنمایی اولویت به اسکریپت های مهم، مرورگر می تواند صفحه را سریعتر ارائه کند و تجربه کاربری بهتری را ارائه دهد.

بارگذاری سریعتر توسط بازدیدکنندگان سایت تجربه می شود

The Priority Hints در حال گذراندن چیزی است که Google آن را Origin Trial می نامد. کروم دو سال پیش آزمایشی را اجرا کرد اما توجه زیادی به آن نشد.

Chrome این را در Chrome 96 عرضه می‌کند، که برای انتشار در 21 نوامبر 2021 برنامه‌ریزی شده است. نکات اولویت‌دار در حال حاضر در Chrome Canary، که نسخه آزمایشی Chrome است، در دسترس است.

این ویژگی‌ها را می‌توان در نسخه‌های فعلی Chrome با تایپ کردن موارد زیر در نوار آدرس فعال کرد:

chrome://flags/

و سپس به پایین پیمایش کنید و بخش با عنوان: ویژگی های Experimental Web Platform را فعال کنید

عکس صفحه: ویژگی‌های پلتفرم وب آزمایشی

نحوه بررسی سطح اولویت منابع

سطوح اولویت منابع برای بررسی در هر نسخه از Chrome، در Dev Tools در زیر برگه Network در دسترس هستند.

روی سه نقطه (منوی بیضی) در گوشه سمت راست بالا، > ابزارهای بیشتر > ابزارهای توسعه دهنده (سپس برگه شبکه را انتخاب کنید) کلیک کنید.

از آنجا یک صفحه وب را بارگذاری می کنید، روی یکی از ستون ها (مانند Time یا Waterfall) کلیک راست کرده و Priority را انتخاب می کنید و می توانید سطوح اولویت را مشاهده کنید.

هنگامی که برای آزمایشی Preority Hints ثبت نام کردید، می‌توانید از Chrome Canary برای مشاهده اولویت به‌روزرسانی شده برای منابع و همچنین در Chrome نسخه 96 هنگام عرضه استفاده کنید.

هنگامی که در این آزمایش شرکت می‌کنید، نکات اولویت‌دار به مرورگرهای بازدیدکننده سایت شما نشان داده می‌شود و هر گونه پیشرفت در Core Web Vitals از آن منعکس می‌شود.

با این حال، توجه به این نکته مهم است که این نکات اولویت هستند و دستورالعمل نیستند.

این بدان معناست که مرورگر نیازی به رعایت دقیق نکات اولویت ندارد. مرورگر ممکن است انتخاب کند که نکات را نادیده بگیرد و ترتیب خود را اختصاص دهد و رایانه کند.

همانطور که در بالا توضیح داده شد، می توان آن را در ابزارهای توسعه دهنده Chrome در تب Network بررسی کرد.

نحوه ثبت نام برای آزمایشی نکات اولویت دار

ناشران برای شرکت در آزمایش‌های اولیه برای نکات اولویت‌دار باید در Chrome ثبت‌نام کنند.

فرم ثبت نام نکات اولویت اینجاست:

https://developer.chrome.com/origintrials/#/view_trial/365917469723852801

نکات اولویتی مبدأ آزمایشی

این دومین نسخه از این آزمایش اولیه است. اولین باری که تست شد پاسخ چندانی نداشت. اما این زمان می‌تواند به دلیل موارد حیاتی Core Web متفاوت باشد.

آزمایشی اکنون برای ثبت نام باز است و تا 22 مارس 2022 ادامه دارد. هدف از آزمایش اندازه گیری علاقه توسعه دهندگان و دیدن اینکه آیا منجر به بهبودهای معنی دار می شود یا خیر.

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

استناد

اعلامیه آزمایشی مبدأ نکات اولویت جدید را بخوانید

بهینه سازی بارگیری منابع با نکات اولویت

برای شرکت در Origin Trial ثبت نام کنید

نکات اولویت صفحه ثبت نام

پیشرفت نکات اولویت کروم را دنبال کنید

صفحه وضعیت نکات اولویت کروم

توضیح دهنده نکات اولویت را در GitHub بخوانید

نکات اولویت دار

Chrome Canary را برای توسعه دهندگان با جدیدترین ویژگی ها دانلود کنید

کروم قناری