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 است، بنری را می بینید که محتوای شما را پایین می آورد. گزارش کپی همه چیز را به عنوان متن برای بلیط به شما می دهد.
سه معیار رتبهبندی هنگام استفاده از صفحه بهروزرسانی میشوند: پیمایش باعث حرکت CLS، کلیک کردن و تایپ حرکت INP میشود. هر کدام در برابر آستانه Google رتبهبندی خوب، نیاز به کار یا ضعیف را دارند.
بزرگترین عنصر رنگ، عناصری که جابجا شدند و کندترین فعل و انفعالات را نام می برد. نمایش را فشار دهید تا به هر یک از آنها بروید و آن را مستقیماً در صفحه مشخص کنید.
CLS از پنجرههای جلسه با شکاف 1s و سقف 5s استفاده میکند، INP صدک 98 تأخیر تعامل است، و LCP در اولین تعامل ثابت میشود — بنابراین اعداد شما با کنسول جستجو هماهنگ میشوند.
First Contentful Paint و Time To First Byte در کنار سه بایت بزرگ قرار دارند، بنابراین میتوانید قبل از بهینهسازی چیز اشتباه، یک سرور کند را از یک تصویر قهرمان سنگین جدا کنید.
کندترین تعاملات شما را با نوع رویداد و عنصر درگیر فهرست می کند، بنابراین به جای حدس زدن، می توان یک فهرست کشویی یا فیلتر کند پیدا کرد.
با یک کلیک هر معیار، رتبهبندی و انتخابگر متخلف را بهعنوان متن ساده کپی میکند - آماده برای چسباندن در یک بلیط، یک درخواست کشش یا ایمیل مشتری.
قبل از اینکه یک الگوی جدید منتشر شود، به جای اینکه یک ماه بعد از کنسول جستجو مطلع شوید، تأیید کنید LCP، CLS و INP سبز هستند.
کنسول جستجو به شما می گوید که گروهی از URL ها در CLS شکست می خورند. یکی از آنها را با این ابزار باز کنید و ببینید دقیقا کدام عنصر شیفت را انجام می دهد.
صفحه را اسکرول کنید و صعود CLS را تماشا کنید، سپس نمایش را فشار دهید تا آگهی، بنر یا فونت وب با بارگذاری دیرهنگام که محتوای شما را جابجا می کند مشخص شود.
روی فیلترها، منوها و مدال کلیک کنید، سپس فهرست کندترین تعامل را بخوانید تا بفهمید کدام کنترل صدها میلی ثانیه هزینه دارد.
اعداد را ثبت کنید، اصلاح را اجرا کنید، سپس همان صفحه را دوباره اندازه بگیرید و دو گزارش را در کنار هم مقایسه کنید.
روی نماد Core Web Vitals در داک DevSuite Pro کلیک کنید. کاشی های متریک بلافاصله با استفاده از هر چیزی که صفحه قبلاً ضبط کرده است ظاهر می شود.
LCP فقط از ابتدای بارگیری صفحه معنادار است، بنابراین زمانی که میخواهید خواندنی را که میتوانید به آن اعتماد کنید، با پانل باز بارگیری کنید.
برای تمرین CLS در کل صفحه اسکرول کنید و برای ایجاد اندازهگیریهای INP کلیک کنید، ضربه بزنید و تایپ کنید. کاشی ها در حین رفتن به روز می شوند.
نمایش را در کنار عنصر LCP، یک منبع تغییر طرح یا یک تعامل آهسته فشار دهید. صفحه به آن پیمایش میکند و آن را مشخص میکند، بنابراین هیچ ابهامی در مورد اینکه کدام عنصر مسئول است وجود ندارد.
برای یک خلاصه متن ساده از هر متریک، رتبه بندی و انتخابگر، روی کپی گزارش کلیک کنید. Press Reset to start CLS and INP again from scratch.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۷۱ ابزار توسعه را برای مرورگر خود باز کنید.