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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 ثبت‌نام کنند.

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