راهنمای اصلی ویتامین های اصلی برای SEO و توسعه دهندگان

thumbnail

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

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

معیارهای عملکرد برای هر آمار وب Vital با توجه به سه نتیجه ارزیابی می شوند:

  • خوب (پاس)
  • نیاز به بهتر شدن دارد
  • شکست

معیارهای فعلی عبارتند از:

  • بزرگترین رنگ محتوا (LCP). فاصله زمانی بین شروع بارگذاری صفحه تا زمانی که بزرگترین تصویر یا متن در نمای صفحه کاربر به طور کامل ارائه شود. ممکن است به دلیل بارگذاری صفحه و در هنگام مشاهده محتوای ، تغییر نمره را مشاهده کنید ، اما بزرگترین گره هنوز در قسمت باقیمانده نمایش داده نشده است ، که در سرعت های اتصال پرتاب بیشتر مورد توجه قرار می گیرد.
  • تأخیر ورودی اول (FID). مقدار زمان لازم برای آماده شدن یک صفحه برای تعامل کاربر ، به این معنی که در حالی که صفحات در حال جمع آوری هستند چه مدت طول می کشد تا صفحه بتواند به کلیک ، پیمایش یا ورودی صفحه کلید پاسخگوی پردازنده های رویداد مربوطه باشد. تعامل کاربر می تواند به طور قابل توجهی توسط کارهای اصلی اسکریپت مسدود کننده به تاخیر بیفتد.
  • تغییر چیدمان تجمعی (CLS). فاصله و کسری از منظر که به دلیل دستکاری DOM یا عدم وجود ویژگی های بعد برای عناصر اصلی رسانه تغییر می کند. به عنوان مثال ، وقتی نمی توان ابعاد تصاویر قهرمان خود را تعریف کرد ، ابتدا متن در صفحات ما فقط جابجا می شود و باعث ایجاد یک تغییر در محتوای اصلی برای کاربران می شود.

کاربران طولانی مدت PageSpeed ​​Insights (PSI) ممکن است با معیارهای مشابهی آشنا باشند ، که بسیاری از آنها قصد دارند بچرخند ، اما شاید همه آنها اینگونه نباشند. Core Web Vitals بیانگر اوج این معیارهای دیگر است و از پیچیدگی تجربه توسعهدهنده با آنها بیرون می آید. منظور از سادگی وب ویتال ها برای کاهش وضوح سر و صدا و کاهش معیارهای کمتری برای دنبال کردن این سر و صدا است.

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

نحوه تجزیه و تحلیل نمرات وب ویتامین های تلفن همراه و دسک تاپ

شما نمرات Web Vitals مستقل بین دستگاه های تلفن همراه (تلفن) یا رومیزی / لپ تاپ دریافت می کنید. در بعضی از ابزارها می توانید مشخص کنید که کدام دسته از دستگاهها برای اجرای یک پرس و جو یا آزمون است و می توانید در صورت موجود بودن هر دو در ابزاری مانند Google PageSpeed ​​Insights ، بین آنها جابجا شوید. PageSpeed ​​Insights به صورت پیش فرض در آمارهای تلفن همراه قرار دارد ، بنابراین برای دیدن تفاوت در نمرات یک صفحه باید به برگه دسک تاپ بروید.

Google وقتی داده های تجربه کاربری Chrome برای مبدأ (دامنه) شما در دسترس است ، Google معیارهای Core Web Vitals را به گزارش کنسول اضافه کرده است. اگر به نمرات وب ویتال ها در کنسول جستجو دسترسی دارید ، داشبورد هر دو دسته دستگاه را با نمرات در URL های تحت پوشش نمایه سازی شما نشان می دهد. می توانید به گروههایی از صفحات که به عنوان مشکل نشان داده شده اند ، استفاده کنید.

گوگل داده های میدانی را از بیش از 18 میلیون وب سایت که آمار کافی را نشان داده اند برای گزارش ویتامین های وب به عنوان بخشی از گزارش تجربه کاربری Chrome (CrUX) خود در معرض نمایش قرار داده است. داده ها در سرویس BigQuery گوگل قرار گرفته اند که می توانید داده های تاریخی این وب سایت ها را به چندین سال بازپرس کنید. به روزرسانی ها در روز سه شنبه دوم هر ماه پس از آمار انباشته موجود است.

برای دیدن نمرات موبایل و دسک تاپ با استفاده از گزارش جدید CrUX ، به عنوان تلفن در اظهارات SQL به “تلفن” یا “دسک تاپ” نیاز دارید. جالب است که ، “تلفن همراه” کار نمی کند و “رایانه لوحی” فقط به ندرت برای کمبود داده های مشخص شده کار می کند.

مطالب مرتبط  SEL 20200611

به عنوان مثال ، داده های رایانه لوحی را می توان در نمایش داده شد برای منشاء Google ، اما شما نمی خواهید آن را برای سایتهایی که بسیار کمتر شلوغ هستند ، مشاهده کنید.

درک آزمایشگاه در مقابل داده های میدانی

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

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

داده های آزمایشگاه هر دو متخصص SEO و توسعه دهندگان می توانند با استفاده از PSI ، WebPageTest ، Chrome Dev Tools و از طریق برنامه افزودنی مرورگر جدید “وب ویتال ها” به داده های آزمایشگاه در زمان واقعی دسترسی داشته باشند. PSI و WebPageTest نمرات شما را از رویدادهای بارگذاری صفحه نشان می دهند و با حساب کردن زمان انجام وظیفه اسکریپت مسدود کردن تاخیر ، تأخیرات تعامل صفحه را نزدیک می کند.

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

می توانید کتابخانه Web Vitals JavaScript را به جریان کار و خط لوله آزمایش خود معرفی کنید. كتابخانه از طريق CDN موجود است و مي تواند در توليد باشد و نوشته شود تا داده هاي مزرعه جمع شده مستقل را به جايي كه مي خواهيد آنها را براي گزارش ها جمع آوري كنيد ، منتقل كنيد. کد مثال نحوه انجام این کار را برای انتقال نمرات به Google Analytics نشان می دهد.

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

مقایسه نتایج آزمایشگاه با داده های میدانی. مرورگرهای مدرن با Chrome شروع به اندازه گیری میزان تجربه واقعی کاربران وب سایت شما از طریق JavaScript API می کنند. می توانید به هر JavaScript دسترسی پیدا کنید یا از یکی از کتابخانه های Google استفاده کنید. گوگل برخی از داده های زمینه را از کاربران Chrome بخاطر گزارشات کاربری Chrome (CrUX) خود جمع آوری و ، در معرض دید آنها قرار می دهد.

چند روش مختلف برای دسترسی یا تجسم این داده ها وجود دارد. می توانید از کانکتورهای خروجی BigQuery به سایر خدمات Google برای تولید داشبورد مانند اتصال اتصال از پیش ساخته DataStudio استفاده کنید.

با تأیید مالکیت وب سایت خود در کنسول جستجوی Google که داشبورد آن را نمایش می دهد و به جای جستجوی SQL می توانید با کلیک کردن به داده های زمینه دسترسی آسانتر کنید.

از طرف دیگر ، شما به سادگی می توانید از PSI استفاده کنید ، که داده های شما را به 28 روز بر می گرداند. API که گزارش را هدایت می کند همچنین یک کتابخانه JavaScript با منبع آزاد است که شما برای گردش کار یا داشبورد برنامه خود استفاده می کنید. این برنامه همچنین می تواند به عنوان یک برنامه مستقل که یک توسعه دهنده قبلاً یک ظاهر نرم و صاف برای آن ایجاد کرده است ، خدمت کند.

عیب یابی گزارش وب ویتامین ها

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

این می تواند به چند دلیل اتفاق بیفتد.

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

مطالب مرتبط  SEL 20200825

برای نتایج دقیق تر محلی با استفاده از برنامه افزودنی Chrome و Chrome Dev Tools به یاد داشته باشید که در هنگام حرکت سریع با استفاده از مرورگر وب ، داده های حافظه پنهان خود را خالی کنید و یا با استفاده از آن ، آن را با تازه سازی شیفت دور کنید. نکته دیگر بارگیری “درباره: خالی” قبل از شروع جلسه ضبط عملکرد در Dev Tools است.

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

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

این برای FID نیز کار می کند. نمره FID خالی شروع می شود. هنگامی که با تعامل صفحه اول (کلیک ، پیمایش یا ورودی صفحه کلید) زمان انجام کارهای مسدود کردن موضوع به آن لحظه اضافه می شود که به امتیاز شما تبدیل می شود.

سرانجام ، اطلاعات بسیار دقیق در Chrome Dev Tools به شما امکان می دهد CLS را با یک ضبط و پخش عملکرد ، در یک سطح ریز و عیب یابی حل کنید. به دنبال بخش “Experience” باشید که از CLS در ضبط خارج می شود. همچنین با استفاده از عناصر بسته بندی فلاش آبی ، در هنگام تغییر و افزودن به امتیاز شما ، تنظیماتی برای برجسته سازی تغییر در صفحه نمایش وجود دارد.

زمان ابزار

PageSpeed ​​Insights. اولین متوقف کردن اندازه گیری ویتامین های وب شما باید PageSpeed ​​Insights باشد. شما داده های آزمایشگاه و داده های میدانی (در صورت وجود) را در یک گزارش دریافت می کنید. چندین معیار دیگر نیز وجود دارد که عمدتا مربوط به بهبود صفحات ناموفق است ، به ویژه یافته هایی که بر سرعت یک صفحه و بارگیری دارایی های آن تأثیر می گذارد.

پسوند Chrome Vitals. با استفاده از برنامه افزودنی Chrome ، می توانید به Web Vitals در بارگیری صفحه دسترسی داشته باشید ، و همانطور که بحث شد ، می توانید در صورت بروز First Input Delay و یا Content Layout Shift با صفحه در تعامل با مشکل عیب یابی باشید. با مرور وب سایت ها ، این صفحه به صفحه در دسترس شما نیز می باشد.

WebPageTest. با استفاده از این ابزار تست مستقل می توانید رویکرد خود را با شرایط مختلف پیکربندی کنید. این اطلاعات توسط مهندسین Google که بخشی از تیم Chromium هستند ساخته شده است ، به همان اندازه معتبری است که شما از Google دریافت کنید و API های RESTful را در دسترس قرار می دهد.

کنسول جستجوی Google. اگر قبلاً مالکیت وب سایت خود را برای استفاده از کنسول جستجوی Google تأیید نکرده اید ، باید برای کمک به حفاری در مناطق مشکل دار با صفحاتی که در زمینه عدم موفقیت در زمینه با فرض اینکه در CrUX نمایش داده اید ، این کار را انجام دهید. می توانید برای یافتن گروه هایی از صفحات با مشکلات مشابه ، سوراخ کنید ، در نهایت این شما را به PageSpeed ​​Insights پیوند می دهد.

API های JavaScript Web Vitals. برای دسترسی مستقیم به معیارها از مرورگر از JavaScript استفاده کرده و آنها را به یک مخزن مورد نظر خود منتقل کنید. از طرف دیگر ، می توانید این آزمایش را به روند توسعه خود معرفی کنید و اطمینان حاصل کنید که تغییراتی که ایجاد می کنید پس از فشار بر تولید ، روی نمرات شما تأثیر منفی نخواهد گذاشت.

ابزارهای Chrome Dev. کروم خود با استفاده از اطلاعات بسیار دقیق موجود در گزارش ها و ضبط بارهای صفحه در برگه عملکرد ، ابزار نهایی را برای کشف یا ردیابی مشکلات پشت فراهم می کند. مجموعه گسترده ای از ابزارها و سوئیچ ها یا گزینه های بی پایان برای دقیق ترین کار بهینه سازی ایده آل است.

The post Guide for Core Web Vitals برای SEO و توسعه دهندگان برای اولین بار در موتور موتور جستجو ظاهر شد.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Back To Top