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

Google مقاله‌ای منتشر کرد که توسعه‌دهندگان و ناشران را تشویق می‌کرد تا از ویژگی اشاره اولویت جدید (و تجربی) «اهمیت» استفاده کنند که می‌تواند به بهبود Core Web Vitals و تجربه کاربر کمک کند.

تیم مرورگر کروم مثالی را به اشتراک گذاشت که در آن یک تصویر پس‌زمینه بارگیری شده با ویژگی Priority Hint HTML 1.9 ثانیه در زمان دانلود صرفه‌جویی کرده است، فقط در آن یک تصویر.

مشکلی که نکات اولویت حل می شود

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

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

Google این مثال‌ها را از مشکلاتی که نکات اولویت‌دار حل می‌کند ارائه می‌کند:

«تصاویر قهرمان در داخل ویوپورت با اولویت پایین شروع می‌شوند. پس از تکمیل طرح‌بندی، کروم متوجه می‌شود که آن‌ها در ویوپورت هستند و اولویت آن‌ها را افزایش می‌دهد (متاسفانه، ابزار توسعه فقط اولویت نهایی را نشان می‌دهد – WebPageTest هر دو را نشان می‌دهد).

این معمولاً تاخیر قابل توجهی در بارگذاری تصویر اضافه می کند. ارائه راهنمایی اولویت در نشانه گذاری به تصویر اجازه می دهد تا با اولویت بالا شروع شود و خیلی زودتر بارگذاری شود.

مرورگر CSS و فونت ها را در اولویت قرار می دهد، اما همه این منابع ممکن است به یک اندازه برای LCP مهم یا مورد نیاز نباشند. می توانید از نکات اولویت برای کاهش اولویت برخی از این منابع استفاده کنید.

تبلیغات

ادامه مطلب زیر

نکته مهم ویژگی منبع

در HTML به قسمت هایی که یک صفحه وب را تشکیل می دهند Elements می گویند. این می تواند div، سرفصل ها، تگ های پاراگراف، تگ های تصویر، عنصر پیوند و غیره باشد.

من تقریباً مطمئن هستم که هر چیزی که تگ HTML نامیده می شود در واقع یک عنصر HTML است، این یک راه آسان برای یادآوری چیستی یک عنصر است.
هر عنصری را می توان با چیزی که Attribute نامیده می شود تغییر داد. ویژگی nofollow را به خاطر دارید؟ ویژگی nofollow را تغییر می دهد عنصر

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

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

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

تبلیغات

ادامه مطلب زیر

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

چگونه نکات منابع، 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

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

سطوح اولویت منابع برای بررسی در هر نسخه از 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 را برای توسعه دهندگان با جدیدترین ویژگی ها دانلود کنید

کروم قناری