← بازگشت به ویژگی‌ها
Pro

Core Web Vitals

Core Web Vitals سه معیار رتبه‌بندی Google را نشان می‌دهد - LCP، CLS و INP - که به صورت زنده در صفحه‌ای که مشاهده می‌کنید اندازه‌گیری می‌شوند، بر اساس آستانه‌های Google رتبه‌بندی می‌شوند و به عنصر دقیق پشت هر عدد برمی‌گردند.

Core Web Vitals قسمتی از رتبه بندی صفحات شما را تعیین می کند، اما روش های معمول اندازه گیری آنها دشوار است. ابزارهای آزمایشگاهی بار مصنوعی را به دست می آورند که هیچ کس آن را تجربه نمی کند. کنسول جستجو کاربران واقعی را با چهار هفته تأخیر گزارش می دهد و در سطل های URL گروه بندی می شود. هیچ کدام به شما نمی گوید که کدام عنصر در صفحه روبروی شما مشکل دارد.

این ابزار صفحه ای را که در واقع به آن نگاه می کنید، همانطور که از آن استفاده می کنید، اندازه گیری می کند. LCP، CLS و INP هر کدام یک کاشی با ارزش خود، رتبه بندی خوب، نیاز به کار یا ضعیف در برابر آستانه های منتشر شده Google، و نواری که محل نشستن شما را نشان می دهد، دریافت می کنند. FCP و TTFB برای زمینه در کنار آنها قرار می گیرند، زیرا LCP کند ناشی از یک سرور کند، مشکلی متفاوت از یک تصویر سنگین است.

تعاریف با آنچه Chrome به CrUX گزارش می‌دهد مطابقت دارد، که اگر قصد مقایسه اعداد با کنسول جستجو را داشته باشید، مهم است. CLS از پنجره‌های جلسه استفاده می‌کند - یک پنجره پس از یک ثانیه یا پنج ثانیه به پایان می‌رسد و بدترین پنجره برنده می‌شود - به جای اینکه ساده لوحانه هر تغییر را با هم اضافه کند. INP صدک 98 تأخیر تعامل شما است که برای یک بازدید معمولی به سادگی کندترین تعامل است. LCP در اولین تعامل شما تغییر نمی کند، دقیقاً همانطور که Chrome انجام می دهد.

مفیدتر از همه، هر عدد نسبت داده می شود. پانل بزرگترین عنصر رنگ، عناصری که جابجا شده اند و کندترین تعاملات را نامگذاری می کند، و یک دکمه Show به هر یک از آنها پیمایش می کند و آن را در صفحه مشخص می کند. به جای اینکه بدانید CLS 0.31 است، بنری را می بینید که محتوای شما را پایین می آورد. گزارش کپی همه چیز را به عنوان متن برای بلیط به شما می دهد.

پیش‌نمایش زنده
example.com/products
Core Web Vitals اندازه گیری زنده
LCPخوب
1.84 s
CLSبیچاره
0.312
INPنیاز به کار دارد
248 ms
FCP 1.12 s
TTFB 410 ms
بزرگترین عنصر
1.84 s section.hero > img.banner نمایش دهید
بزرگترین تغییرات چیدمان
0.241 div.promo-banner نمایش دهید
0.071 ul.product-grid > li:nth-of-type(3) نمایش دهید
ویژگی‌های کلیدی

LCP زنده، CLS و INP

سه معیار رتبه‌بندی هنگام استفاده از صفحه به‌روزرسانی می‌شوند: پیمایش باعث حرکت CLS، کلیک کردن و تایپ حرکت INP می‌شود. هر کدام در برابر آستانه Google رتبه‌بندی خوب، نیاز به کار یا ضعیف را دارند.

به شما می گوید کدام عنصر

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

تعاریف خود کروم

CLS از پنجره‌های جلسه با شکاف 1s و سقف 5s استفاده می‌کند، INP صدک 98 تأخیر تعامل است، و LCP در اولین تعامل ثابت می‌شود — بنابراین اعداد شما با کنسول جستجو هماهنگ می‌شوند.

FCP و TTFB برای زمینه

First Contentful Paint و Time To First Byte در کنار سه بایت بزرگ قرار دارند، بنابراین می‌توانید قبل از بهینه‌سازی چیز اشتباه، یک سرور کند را از یک تصویر قهرمان سنگین جدا کنید.

تفکیک تعامل

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

گزارش قابل کپی

با یک کلیک هر معیار، رتبه‌بندی و انتخابگر متخلف را به‌عنوان متن ساده کپی می‌کند - آماده برای چسباندن در یک بلیط، یک درخواست کشش یا ایمیل مشتری.

موارد استفاده رایج

بررسی یک صفحه قبل از ارسال

قبل از اینکه یک الگوی جدید منتشر شود، به جای اینکه یک ماه بعد از کنسول جستجو مطلع شوید، تأیید کنید LCP، CLS و INP سبز هستند.

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

کنسول جستجو به شما می گوید که گروهی از URL ها در CLS شکست می خورند. یکی از آنها را با این ابزار باز کنید و ببینید دقیقا کدام عنصر شیفت را انجام می دهد.

یافتن عنصری که می پرد

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

تشخیص رابط کند

روی فیلترها، منوها و مدال کلیک کنید، سپس فهرست کندترین تعامل را بخوانید تا بفهمید کدام کنترل صدها میلی ثانیه هزینه دارد.

اثبات یک بهینه سازی کار کرد

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

نحوه استفاده
1

Core Web Vitals را باز کنید

روی نماد Core Web Vitals در داک DevSuite Pro کلیک کنید. کاشی های متریک بلافاصله با استفاده از هر چیزی که صفحه قبلاً ضبط کرده است ظاهر می شود.

2

بارگیری مجدد برای یک LCP تمیز

LCP فقط از ابتدای بارگیری صفحه معنادار است، بنابراین زمانی که می‌خواهید خواندنی را که می‌توانید به آن اعتماد کنید، با پانل باز بارگیری کنید.

3

از صفحه به طور معمول استفاده کنید

برای تمرین CLS در کل صفحه اسکرول کنید و برای ایجاد اندازه‌گیری‌های INP کلیک کنید، ضربه بزنید و تایپ کنید. کاشی ها در حین رفتن به روز می شوند.

4

مقصر را پیدا کن

نمایش را در کنار عنصر LCP، یک منبع تغییر طرح یا یک تعامل آهسته فشار دهید. صفحه به آن پیمایش می‌کند و آن را مشخص می‌کند، بنابراین هیچ ابهامی در مورد اینکه کدام عنصر مسئول است وجود ندارد.

5

گزارش را کپی کنید

برای یک خلاصه متن ساده از هر متریک، رتبه بندی و انتخابگر، روی کپی گزارش کلیک کنید. Press Reset to start CLS and INP again from scratch.

آماده برای امتحان کردن هستید؟

DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۷۱ ابزار توسعه را برای مرورگر خود باز کنید.

افزودن به Chrome افزودن به Edge افزودن به FireFox