ابزارهای Core Web Vitals برای افزایش امتیازات عملکرد وب – مجله Smashing

موفقیت وب سایت شما بستگی به تأثیری دارد که روی کاربرانش می گذارد. با بهینه سازی خود Core Web Vitals نمرات، شما می توانید اندازه گیری و بهبود تجربه کاربر. اساسا، الف وب حیاتی یک استاندارد کیفیت برای UX و عملکرد وب است که توسط Google تنظیم شده است. هر وب حیاتی یک جنبه مجزا از تجربه کاربر را نشان می دهد. می توان آن را بر اساس داده های واقعی کاربرانی که از سایت های شما بازدید می کنند اندازه گیری کرد (متریک میدانی) یا در محیط آزمایشگاه (متریک آزمایشگاهی).

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

شایان ذکر است که Core Web Vitals نمره خوبی می گیرد لزوما به این معنی نیست که وب سایت شما در لایت هاوس در دهه 90 امتیاز بالایی کسب می کند. ممکن است در حالی که نمرات Core Web Vitals سبز رنگ داشته باشید، امتیاز Lighthouse بسیار نابهینه داشته باشید. در نهایت، در حال حاضر به نظر می رسد که تنها مورد دوم است به رتبه بندی سئو کمک می کند – هم در موبایل و هم روی دسکتاپ.

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

مقایسه سرعت صفحه

مقایسه سرعت صفحه یک ابزار ارزیابی و محک زدن سرعت صفحه است. عملکرد وب یک صفحه را با استفاده از آن اندازه گیری می کند Google PageSpeed ​​Insights. همچنین می تواند عملکرد چندین صفحه سایت شما یا وب سایت های رقبای شما را مقایسه کند. معیارهای آزمایشگاهی، معیارهای میدانی، منابع صفحه، اندازه DOM، زمان CPU و صرفه جویی احتمالی برای یک وب سایت را ارزیابی می کند. PageSpeed ​​Compare موارد حیاتی مانند FCP، LCP، FID، CLS و موارد دیگر را با استفاده از داده‌های زمین و میدان اندازه‌گیری می‌کند.

گزارشی که ایجاد می کند، منابع بارگذاری شده توسط یک صفحه، اندازه کلی برای هر دسته نوع منبع و تعداد درخواست های انجام شده برای هر نوع را فهرست می کند. علاوه بر این، تعداد آنها را بررسی می کند درخواست های شخص ثالث و منابعی که یک صفحه می سازد. همچنین منابع ذخیره شده را فهرست می کند و جاوا اسکریپت استفاده نشده را شناسایی می کند. PageSpeed ​​Compare DOM صفحه را بررسی می کند و اندازه، پیچیدگی و فرزندان آن را تجزیه می کند. همچنین تصاویر استفاده نشده و تغییرات چیدمان را در یک نمودار شناسایی می کند.

وقتی صحبت از آن می شود زمان CPU، این ابزار زمان CPU صرف شده برای کارهای مختلف، زمان اجرای جاوا اسکریپت و مسدود کردن CPU را تجزیه می کند. در نهایت، بهینه سازی هایی را توصیه می کند که می توانید برای بهبود صفحه خود انجام دهید. سرور، شبکه، CSS، جاوا اسکریپت، محتوای حیاتی و بهینه‌سازی تصویر را نمودار می‌کند تا صرفه‌جویی بالقوه‌ای را که می‌توانید با اضافه کردن اصلاحات در سایت خود به دست آورید، نشان دهد. این پیشنهادات خاص منبع را می دهد که می توانید برای بهینه سازی عملکرد صفحه خود ارائه دهید. به عنوان مثال، می‌تواند توصیه کند که CSS استفاده نشده را حذف کنید و پس‌اندازی را که در نمودار ایجاد می‌کند به شما نشان دهد.

PageSpeed ​​Compare فراهم می کند گزارش عملکرد وب در یک نمای کلی داشبورد با مجموعه ای از نمودارها. میتونی مقایسه کنی حداکثر 12 صفحه در یک زمان و گزارش را به روشی ساده و خوانا ارائه می کند زیرا از PageSpeed ​​Insights برای تولید گزارش استفاده می کند. شبکه و CPU برای آزمایش‌های داده‌های آزمایشگاهی برای شرایط واقعی‌تر محدود شده‌اند.

انبوه Core Web Vitals را بررسی کنید

بررسی موارد حیاتی وب هسته انبوه Experte یک ابزار رایگان است که تا 500 صفحه از کل دامنه را می خزد و یک نمای کلی از امتیازات Core Web Vitals برای آنها ارائه می دهد. هنگامی که ابزار تمام صفحات را خزید، شروع به اجرای a می کند بررسی Core Web Vitals برای هر صفحه و نتایج را در یک جدول برمی گرداند. اجرای آزمون کمی طول می کشد، زیرا هر تست صفحه وب یکی یکی انجام می شود. بنابراین ایده خوبی است که اجازه دهید آن را اجرا کند 15-30 دقیقه برای دریافت نتایج خود

آن وقت چه فایده ای دارد؟ در نتیجه، یک نمای کلی از صفحاتی که بهترین عملکرد را دارند، دریافت می کنید صفحاتی که بدترین عملکرد را دارند – و می تواند مقادیر را در طول زمان مقایسه کند. این ابزار در زیر هود، از Pagespeed Insights برای اندازه گیری Core Web Vitals استفاده می کند.

تو می توانی نتایج را به عنوان یک فایل CSV صادر کنید برای Excel، Google Sheets یا Apple Pages. فرمت جدولی که نتایج در آن برگردانده می شوند، مقایسه موارد حیاتی وب در صفحات مختلف را آسان می کند. این تست ها هم برای موبایل و هم برای دسکتاپ قابل اجرا هستند.

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

Treo

اگر به دنبال گزینه کمی پیشرفته‌تر برای بررسی انبوه Core Web Vitals هستید، این ابزار به خوبی نیازهای شما را پوشش می‌دهد. سرعت سایت Treo همچنین ممیزی سرعت سایت را با استفاده از داده های گزارش Chrome UX انجام می دهد، فانوس دریایی و PageSpeed ​​Insights.

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

با Treo Site Speed، شما همچنین می توانید یک وب سایت را در مقابل رقبا محک بزنید. گزارش هایی که Treo تولید می کند جامع هستند و بر اساس دستگاه ها و جغرافیا تفکیک می شوند. آنها گرانول هستند و در سطح دامنه و صفحه در دسترس هستند. می توانید گزارش ها را صادر کنید یا با استفاده از یک API به داده های آنها دسترسی پیدا کنید. آنها نیز هستند قابل اشتراک گذاری.

تست WebPageTest Core Web Vitals

WebPageTest البته به تنهایی یک مجموعه تست عملکرد است. با این حال، یکی از ویژگی های مفیدی که ارائه می دهد، تفکیک دقیق آن است معیارهای Core Web Vitals و اشاره به مناطق مشکل دار و نحوه رفع آنها.

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

اشکال زداهای تغییر چیدمان تجمعی

اساسا، دیباگر CLS به شما کمک می کند تا CLS را تجسم کنید. از Layout Instability API در Chromium برای بارگیری صفحات و محاسبه CLS آنها. CLS برای دستگاه های موبایل و دسکتاپ محاسبه می شود و تکمیل آن چند دقیقه طول می کشد. شبکه و CPU در حین آزمایش قطع می شوند و صفحات از ایالات متحده درخواست می شوند.

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

اگرچه CLS در ابتدا به عنوان یک معیار آزمایشگاهی محاسبه می‌شود، اشکال‌زدای CLS اندازه‌گیری‌های CLS را از گزارش Chrome UX نیز دریافت می‌کند. بنابراین، CLS میانگین 28 روز گذشته است. اشکال‌زدای CLS به شما امکان می‌دهد از میان‌افزارهای کوکی چشم پوشی کنید – به علاوه، می‌توانید گزارش‌هایی را برای کشورهای خاص نیز ایجاد کنید.

به طور متناوب، شما همچنین می توانید استفاده کنید Layout Shift GIF Generator. ابزار در دسترس است صفحه وب آن یا به عنوان یک ابزار خط فرمان. با ابزار CLI می توانید گزینه های اضافی مانند عرض و ارتفاع درگاه دید، کوکی هایی برای عرضه به صفحه، گزینه های خروجی GIF و روش محاسبه CLS.

پلی پن وب ویتال

اگر می خواهید امتیازات Core Web Vitals خود را در حین توسعه در نزدیکی خود نگه دارید، پلی پن وب ویتال یک ویژگی فوق العاده است که ارزش بررسی آن را دارد. پلی پان یک مرورگر مستقل برای توسعه وب است که شامل ابزارهایی برای دسترسی، طراحی واکنشگرا و اخیراً عملکرد و Core Web Vitals نیز می شود.

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

اشاره های قابل توجه

• جستجوگر اصلی وب سایت Calibre’s Core به شما اجازه می دهد تا Core Web Vitals را برای صفحه خود با یک کلیک بررسی کنید. از داده‌های گزارش Chrome UX استفاده می‌کند و LCP، CLS، FID، TTFB، INP و FCP را اندازه‌گیری می‌کند.

(vf، yk، il)