معیار های Web Vitals چیست؟

by | ژانویه 13, 2021 | کتابخانه تابان شهر | 0 comments

[vc_row][vc_column][vc_column_text]معیار های Web Vitals[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row_content” el_class=”firstRowBackground”][vc_column width=”1/12″][/vc_column][vc_column width=”5/12″][vc_empty_space height=”64px”][vc_custom_heading text=”معیار های Web Vitals” font_container=”tag:h2|font_size:3rem|text_align:left|color:%23ffffff” use_theme_fonts=”yes” font_weight=”600″][vc_column_text]


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

[/vc_column_text][porto_info_box icon_type=”custom” img_width=”70″ icon_border_radius=”500″ title=”سبحان بهرامی زاده” subtitle=”24 دی 99″ title_font_color=”#ffffff” subtitle_font_color=”#f2f2f2″ desc_font_color=”#ffffff”]زمان مطالعه :  45 دقیقه[/porto_info_box][vc_btn title=”دانلود PDF” style=”custom” custom_background=”#e5e5e5″ custom_text=”#000000″ shape=”round” size=”xl” link=”url:https%3A%2F%2Ftabaneshahr.com%2Fwp-content%2Fuploads%2F2021%2F01%2F%D9%85%D8%B9%DB%8C%D8%A7%D8%B1%D9%87%D8%A7%DB%8C-Web-Vitals-%DA%86%DB%8C%D8%B3%D8%AA.pdf||target:%20_blank|”][/vc_column][vc_column width=”5/12″][vc_empty_space][vc_single_image image=”29022″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text][/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”مطالبی که در رابطه با معیار های Web Vitals خواهید خواند” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

در این مقاله می خواهیم موارد زیر را مطالعه کنیم. برای اینکه به مطلب مورد نظرتان برسید کافیست بر روی تیتر آن در لیست زیر کلیک کنید.

[/vc_column_text][vc_custom_heading text=”Core Web Vitals یا معیار های Web vitals دقیقا به چه چیزی اشاره می کند؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

راستش را بخواهید من هرگز متوجه نشدم چرا Core Web Vitals باید “ویتامین های هسته وب” ترجمه بشود. ترجمه اصلی این عبارت در بهترین حالت می تواند عبارت “واجبات بنیادی وب”  یا “عناصر بنیادی وب” باشد که اتفاقا کاملا هم به فاکتور هایی که ارائه می دهد نزدیک است. معیار های Web Vitals در واقع عبارتند از یکسری فاکتور های مهم برای بهتر کردن تجربه کاربری در صفحات وب. در واقع به عبارت دیگر، یک مجموعه از عوامل و فاکتور هایی که میزان خوب بودن یا نبودن تجربه کاربری را تخمین می زنند. این فاکتور ها تاثیر مستقیم بر سئو سایت ما دارند و می توان گفت در حال حاضر جزو یکی از اصلی ترین معیار های رتبه بندی و سئو برای گوگل به حساب می آیند.

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

[/vc_column_text][vc_single_image image=”31844″ img_size=”full” alignment=”center”][vc_custom_heading text=”معیار های اصلی Core Web Vitals چیست؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text el_id=”LargestContentfulPaint”]

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

این واجبات بنیادی وب عبارتند از (Largest Contentful Paint(LCP)، First Input Delay(FID و (Cumulative Layout Shift(CLS که فکر می کنم برگردان فارسی آن ها چندان حق مطلب را ادا نکند اما با توضیح جزء به جزء هر سه تای این ها، مفهوم درست و دقیقی از هرکدام به دست خواهد آمد. مفاهیمی که آنطور که انتظار می رود قرار است تا سال ها در طراحی سایت به کار بیاید و همیشه جزو مهمترین فاکتور های رتبه بندی و UX به شمار بروند. چیز هایی که شاید هنوز طراحان وب سایت تمرکز چندانی بر روی آن ها ندارند و خیلی ها هم ممکن است از وجود چنین فاکتور هایی خبر هم نداشته باشند.

[/vc_column_text][vc_custom_heading text=”Largest Contentful Paint چیست؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

بزرگترین المان حاوی محتوا (ترجمه‌ی دقیق نیست) یا همان Largest Contentful Paint به بارگذاری بزرگترین المان صفحه اشاره دارد. در واقع ما در معیار های Web Vitals یا همان Core Web Vitals گاهی منحصرا می خواهیم بدانیم که چقدر طول می کشد که یک سری از اجزای خاص صفحه بارگذاری بشوند. یکی از مهمترین چیز هایی هم که زمان بارگذاری آن مهم است، بزرگترین بخش دارای محتوای صفحه شماست. به بیان ساده تر LCP متراژ اندازه گیری زمان بارگذاری محتوای اصلی سایت شما می باشد. طوری که کاربران بتوانند با آن محتوا تعامل برقرار کنند و بارگذاری آن ناقص انجام نشده باشد.

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

[/vc_column_text][vc_single_image image=”31845″ img_size=”full” alignment=”center”][vc_custom_heading text=”یک LCP خوب دقیقا چگونه بدست می آید؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

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

برای این هم که ما به هدفمون برسیم لازم است که مواردی برای Largest Contentful Paint ما رعایت شود. اما اصلا چرا باید این موضوع رعایت شود و چرا انقدر گوگل برایش مهم است که زیر ۲.۵ ثانیه شما تقریبا ۷۵ درصد از صفحه را به کاربرتان تحویل داده باشید؟ به این خاطر که تحقیقات نشان می دهند ۵۳٪ از استفاده کنندگان موتور های جست و جو بیشتر از ۳ ثانیه برای لود شدن یک صفحه صبر نمی کنند. به همین خاطر هم مهم هستش که کاربر زیر ۲.۵ ثانیه متوجه شود که صفحه را درست آمده و همان اطلاعاتی که می خواهد را قرار است بدست بیاورد. (احتمالا البته نیمی از آن ۴۷ درصد باقی هم مردم کشور ما هستند که بسیار صبور اند و به سرعت کم عادت دارند و از این سختگیری ها نمی کنند!)

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

[/vc_column_text][vc_custom_heading text=”چه مواردی بر روی LCP صفحه شما تاثیر می گذارند؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text el_id=”FirstContentfulPaint”]

قبل از اینکه به سراغ پارامتر های Largest Contentful Paint برویم بهتر است نگاهی بیندازیم به اینکه اصلا چه المان هایی می توانند جزوی از LCP باشند. به طور کلی هرچیزی که داخل تگ img باشد یعنی در واقع یک تصویر باشد، هر چیزی که داخل تگ SVG باشد، هر ویدیویی در سایت که کاور داشته باشد، هر المانی که تصویر پس زمینه داشته باشد و هر المانی که از node های متعدد تشکیل شده باشد می تواند یک LCP باشد. در واقع اینطور به شما بگویم که حجیم ترین المان شما Largest Contentful Paint شما محسوب می شود.

مواردی هم که باعث می شوند یک المان به LCP تبدیل شود هم می توانند حجم یک المان باشد(مثلا حجم تصویر)، می تواند حجم کد به کار رفته در یک المان باشد و… هرچیزی که به ما بگوید چرا یک المان بزرگترین و مهمترین المان ما محسوب می شود.

[/vc_column_text][vc_custom_heading text=”First Contentful Paint چیست؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

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

یکی از این موارد که اتفاقا یکی از مهمترین متراژ های جزئی تر نیز به حساب می آید First Contentful Paint است. FCP در واقع همانطور که از نامش پیداست به جای اینکه به حجیم ترین المان حاوی محتوا اشاره کند، به اولین المانی که در صفحه بارگذاری می شود اشاره دارد. پس این موضوع مهم است که چقدر طول می کشد که اولین المان محتوایی برای کاربر بارگذاری شود. چون به هر حال همینکه کاربر اولین المان را ببیند، تا بخواهد آن را تحلیل کند و بخش های آن را در ثانیه بررسی کند، دیگر بخش های محتوا نیز بارگذاری خواهند شد.

[/vc_column_text][vc_single_image image=”31847″ img_size=”full” alignment=”center”][vc_custom_heading text=”FCP ما باید چگونه باشد و چطوری یک FCP خوب داشته باشیم؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text el_id=”FirstMeaningfulPaint”]

اولین محتوا و المان سایت شما چیزیست که اول از همه مخاطب شما می بیند. کاری نداریم که محتوای آن چقدر جذاب و خوب باید باشد. در حال حاضر بحث ما سرعت بارگذاری آن است. در واقع FCP شما 1 ثانیه کمتر از LCP فرصت دارید. FCP شما باید زیر 1.5 ثانیه لود شود و برای کاربر نمایش داده شود.

عمده مواردی هم که جزو FCP ما به حساب می آیند نوار هدر سایت، اولین رنگی که به محض ورود کاربر می بیند، اولین المان های بالای صفحه و… هرچیزی است که بالای Fold صفحه نمایش داده می شود. Fold در واقع به قسمتی از صفحه سایت ما گفته می شود که مرز بین محتوای ورود(زمانی که کاربر هنوز صفحه را به سمت پایین اسکرول نکرده است) و باقی محتوا(هر محتوای بعد از اسکرول صفحه) می باشد.

مهمترین کاری هم که شما باید برای بهبود FCP انجام بدید این است که مطمئن شوید متن های شما قبل از اینکه نوع فونت سایتتان لود شود نمایش داده می شوند. برای حل این مشکل هم راهکاری وجود دارد که در مقاله مربوطه سایت ما می توانید مطالعه کنید.

[/vc_column_text][vc_custom_heading text=”First Meaningful Paint چیست؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

یکی دیگر از این متراژ های مهم عملکرد صفحه شما FMP یا همان First Meaningful Paint است. این مورد در واقع به بارگذاری اولین محتوای مهم معنادار شما اشاره می کند. معنادار یعنی چه؟ یعنی شروع کننده محتوایی که کاربر شما دنبال آن است. در واقع منظور ما اینجا یک رنگ بک گراند یا نوار هدر نیست، بلکه مستقیما داریم به اولین المان قابل نمایشی اشاره می کنیم که مقصود کاربر ما نیز می باشد.

در واقع First Meaningful Paint هر جا هم که باشد پایین تر از Fold به هیچ عنوان نیست. درست است که ما برای LCP هم تعریف کردیم که به علاوه اشاره به حجیم ترین المان، به مهمترین المان نیز اشاره دارد اما LCP هرجایی از محتوای شما می تواند باشد. اما هرگز FMP و FCP جایی جز بالای Fold نیستند. (این را هم البته باید بگوییم که سعی کنید به هیچ عنوان بزرگترین و حجیم ترین محتوایتان در بالای صفحه نباشد که باعث اختلال در زمان بارگذاری FCP و FMP تان می شود)

[/vc_column_text][vc_single_image image=”31848″ img_size=”full” alignment=”center”][vc_custom_heading text=”نوع اندازه گیری FMP و موارد تاثیر گذار بر آن” font_container=”tag:h4|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text el_id=”FirstInputDelay”]

اندازه گیری FMP تقریبا مثل FCP انجام می گیرد و فرق چندانی با یکدیگر ندارند. اما خب با توجه به اینکه FCP قبل از FMP بارگذاری می شود ممکن است سرعت لود آن یکی بر دیگری تاثیر بگذارد اما در کل هرکدام از آن ها جداگانه محاسبه می شوند. مثلا اگر FCP شما در 1.5 ثانیه بارگذاری می شود و FMP شما در 3 ثانیه، عملکرد FCP شما نمره 99 می گیرد و FMP شما چیزی حدود 75 و اینطور نیست که متراژ های آن ها به صورت هماهنگ محاسبه شود.

موارد تاثیر گذار بر روی FMP با موارد تاثیر گذار روی Largest Contentful Paint تقریبا یکسان هستند و هرچیزی که برای LCP توضیح دادیم که باید رعایت شود، برای FMP هم همان موارد باید مد نظر قرار بگیرند که البته موارد مربوط به هرکدام از این ها را به صورت جداگانه در مقالات مربوط به ارور های Core Web Vitals توضیح خواهیم داد.

[/vc_column_text][vc_single_image image=”31849″ img_size=”full” alignment=”center”][vc_custom_heading text=”First Input Delay چیست؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

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

مبحث First Input Delay یا همان FID نه به طور مستیقیم، بلکه با یکسری معیار های خاص می خواهد تجربه اولیه کاربری را به عنوان یکی از معیار های Web Vitals بهبود ببخشد. اول از همه ما باید بدانیم که First Input Delay چیست؟ FID در واقع اشاره به مدت زمانی دارد که طول می کشد تا کاربر بتواند با سایت اولین تعامل را برقرار کند. حال این تعامل می تواند کلیک بر روی یک المان، کلیک بر روی دکمه یا لینک و یا هر کاری باشد که کاربر در صفحه سایت شما انجام می دهد.

به بیان ساده تر بخواهیم بگوییم FID به این موضوع اشاره دارد که دقیقا زمانی که کاربر اقدام به فعالیتی در سایت می کند چه مقدار طول می کشد که این عمل انجام شود و مسلما که کاربر انتظار دارد که این کار هرچه سریعتر انجام گیرد. حال بیایید کمی عمیق تر وارد مبحث First Input Delay بشویم.

[/vc_column_text][vc_custom_heading text=”First Input Delay چگونه تخمین زده می شود؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

شاید برای سایت های ما این موضوع غیر ممکن به نظر برسد اما یک FID خوب از نظر گوگل زیر ۱۰۰ میلی ثانیه است. دقت کنید که داریم در رابطه با واحد اندازه گیری خیلی کوچکی صحبت می کنیم. البته این را هم باید اضافه کرد که وقتی داریم صحبت از FID می کنیم منظور ما این نیست که زمانی که بر روی صفحه می زنیم تا باز شود ۱۰۰ میلی ثانیه بعدش باید ما قادر باشیم تا با صفحه تعامل برقرار کنیم. (اصلا امکان نداره همچین چیزی!) شما باید این موضوع را در نظر داشته باشید که FID در واقع صرفا در تعریف این است که کاربر چقدر طول می کشد که اولین تعاملش را با صفحه برقرار کند. بلکه در واقع FID در مفهوم به این معناست که وقتی کاربر برای اولین بار بر روی یک المان در صفحه کلیک می کند چه مدت زمانی طول می کشد که مرورگر پاسخ این کلیک را بدهد.

کمی ساده تر اگر بخواهیم بگوییم تصور کنید که شما به عنوان کاربر در صفحه سایت با یک المان آکاردئون رو به رو می شوید(مثلا سوالات متداول) وقتی روی یکی از نوار های آکاردئون کلیک می کنید چقدر طول می کشد که آکاردئون باز شود؟ مدت زمان کوتاهی است و باید هم باشد اما خیلی بیش از آن چیزی که فکر کنید در حال حاضر این موضوع اهمیت دارد.

معمولا به جز یکسری موارد مانند لینک ها، معمولا FID سر و کار زیادی با جاوا اسکریپت دارد. به این خاطر که معمولا FID به عمل و عکس العمل می پردازد و هدفش این است React سایت به Act کاربر در سریعترین زمان ممکن انجام بگیرد.

[/vc_column_text][vc_single_image image=”31839″ img_size=”full” alignment=”center”][vc_custom_heading text=”چه مواردی را برای FID باید رعایت کنیم؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

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

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

البته که بهینه سازی First Input Delay فقط مختص به اسکریپت ها نیست. اما در ادامه به شما خواهیم گفت که چه موارد دیگری روی FID تاثیر می گذارند و بیشتر برای رفع ارور های آن چه کار هایی باید انجام دهیم.

[/vc_column_text][vc_custom_heading text=”چه مواردی را برای FID باید رعایت کنیم؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text el_id=”TimeToInteractive”]

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

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

البته که بهینه سازی First Input Delay فقط مختص به اسکریپت ها نیست. اما در ادامه به شما خواهیم گفت که چه موارد دیگری روی FID تاثیر می گذارند و بیشتر برای رفع ارور های آن چه کار هایی باید انجام دهیم. برای اینکه بتوانیم به خوبی راه حل های درست پیش بردن FID را توضیح دهیم، باید قبل از هر چیز مواردی مانند TTI یا همان Time to Interactive و TBT یا همان Total Blocking Time را یاد بگیریم. در ادامه با ما همراه باشید تا این متراژ ها را هم مورد بررسی قرار بدهیم.

[/vc_column_text][vc_custom_heading text=”Time to Interactive چیست؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

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

متراژ Time to Interactive یکی از متراژ های مهم در سئو سایت و به طور کلی طراحی سایت به حساب می آید. این متراژ نشان دهنده این است که دقیقا چقدر طول می کشد که صفحه شما به طور کامل برای فعالیت کاربرتان بارگذاری شود. یعنی به طور رسمی کاربر بتواند فعالیت های خودش را در سایت انجام دهد و همه چیز هم سر جای خودش باشد.

زمانی ما می گوییم که یک صفحه کالا قابل تعامل است که سه تا اتفاق حتما افتاده باشد. اولین که محتوای قابل استفاده آن یعنی همان First Contentful Paint بارگذاری شده باشد، دوم اینکه اکثر المان های صفحه شما بارگذاری کامل شده باشند و سوم اینکه تمام المان های صفحه شما زیر 50 میلی ثانیه به تعامل کاربر پاسخ دهند.

[/vc_column_text][vc_custom_heading text=”چگونه Time to Interactive خوب داشته باشیم؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

متراژ TTI در واقع می توان گفت نشان دهنده بارگذاری 70 الی 80 درصد صفحه سایت شماست. اینطور می شود که گفت که این متراژ نمایان گر این موضوع است که چقدر طول می کشد که صفحه شما به کامل ترین کارایی برسد. اگر سایت شما بعد از 2.2 ثانیه کاملا برای تعامل کاربر بارگذاری شود، نمره 99 را از لایت هاس و پیج اسپید در بخش TTI دریافت خواهید کرد که مسلما رسیدن به همچین تایم لودی بسیار رویایی و بعید است. (حداقل برای سایت های ما) اما به طور کلی Time to Interactive ما بهتر است بیش از 3.8 ثانیه طول نکشد. زمانی هم که TTI ما از 3.9 تا 7.3 ثانیه باشد هم باز مشکلی ندارد اما جای بهبود دارد. بهتر است عدد از 7.3 ثانیه بیشتر نشود که در آن صورت TTI ما به مرحله بحرانی خودش می رسد.

یادتان هست که به شما گفتیم که رفع ایرادات FID در گرو رفع ایرادات TTI و TBT است که در اینجا می خواهیم موارد مرتبط با TTI را بررسی کنیم ک بیشتر تمرکز آن هم بر روی جاوا اسکریپت هایی است که در صفحه سایت ما وجود دارند.

یک کاری که شما می توانید انجام دهید و تاثیر مستقیم بر بهبود TTI اتان هم دارد این است که یا بارگذاری جاوا اسکریپت هایتان را به تعویق بیندازید، یا اینکه به طور کلی جاوا اسکریپت های بی استفاده را از صفحه سایتتان حذف کنید. برای اینکار شما می توانید افزونه های WP Rocket یا AutoOptimize را نصب کنید یا اینکه به صورت دستی کد های جاوا اسکریپتتان را بهینه سازی کنید. حتی اگر نمی خواهید کد های جاوا اسکریپتتان را حذف کنید می توانید تمامی آن ها را Minify کنید تا حجم آن ها کمی پایین تر بیاید.

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

[/vc_column_text][vc_single_image image=”31850″ img_size=”full” alignment=”center”][vc_empty_space height=”80px” el_id=”TotalBlockingTime”][vc_custom_heading text=”Total Blocking Time چیست؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text el_id=”CumulativeLayoutShift”]

بارگذاری یک صفحه از سایت شما در یک آن متوقف می شود. این توقف به این منظور اتفاق می افتد که برای بارگذاری تسک اصلی نیاز است بارگذاری در جایی از لود بلوکه شود تا صفحه بتواند بهتر به لود خودش ادامه دهد. این بلوکه شدن که به آن Total Blocking Time گفته می شود، درست بین بارگذاری First Contentful Paint و Time to Interactive اتفاق می افتد.

هر زمان که یک Task طولانی مدتی در بارگذاری سایت وجود داشته باشد (این Task معمولا به لود اسکریپت های سایت یا هرچیزی اطلاق می شود) بارگذاری صفحه بلوکه می شود تا بتواند تسک مورد نظر را لود بکند. ( که اتفاقا نباید بالای 50 میلی ثانیه هم باشد) در واقع مرورگر کاربر لود سایت را متوقف می کند تا بتواند پاسخ درستی به تسک در حال بارگذاری بدهد.

مقوله و متراژ TBT به طور کلی با TTI در ارتباط است و تقریبا هر مورد موثر بر روی TTI تاثیر مستقیم بر Total Blocking Time هم می گذارد. اینکه TBT ما هم چقدر باشد بستگی به تسک مورد نظر دارد که TBT ما می تواند از 3 میلی ثانیه تا حتی خیلی بیشتر هم طول بکشد. مسلما هرچقدر زمان بلوکه شدن تسک کمتر باشد، عملکرد سایت هم بهتر است. برای اینکه بدانید چه مواردی هم بر روی TBT تاثیر می گذارند، می توانید موارد مرتبط با Time to Interactive را یکبار دیگر مطالعه کنید.

[/vc_column_text][vc_single_image image=”31851″ img_size=”full” alignment=”center”][vc_custom_heading text=”Cumulative Layout Shift چیست؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

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

اگر بخواهیم یک تعریف دقیق از Cumulative Layout Shift ارائه بدهیم باید بگوییم CLS یکی از معیار های Web Vitals است که مجموعه تغییرات غیر قابل انتظار در صفحه را نسبت به زمانی که صفحه برای کاربر قابل نمایش است اندازه گیری می کند. Cumulative Layout Shift هم مانند دیگر موارد Core Web Vitals اینگونه است که نمی توان معنی دقیق فارسی برای آن پیدا کرد. این عبارت در گوگل ترنسلیت “تغییر چیدمان تجمعی” معنی شده است اما شاید برای دقیق تر معنی کردن آن باید بگوییم “مجموع تغییر چیدمان ها” که شاید بتواند کمی بیشتر حق مطلب را ادا کند.

نمی توان گفت CLS بین معیار های Web Vitals از همه مهمتر است، اما این معیار از Web Vitals معمولا بیش از باقی موارد قابل لمس است. حتی در کشور ما که سرعت بارگذاری صفحه ممکن است همیشه هم بالا نباشد و کسی چندان توجهی به بارگذاری Largest Contentful Paint نکند و کسی هم متوجه نشود که بعد از کلیک روی المان چند میلی ثانیه طول می کشد که المان به ما پاسخ بدهد و بحث First Input Delay هم برای کاربر چندان مطرح نیست، موضوعی مانند ظاهر شدن ناگهانی یک دکمه بالای یک دکمه دیگر که باعث شود جای دکمه مورد نظر عوض شود و کلیک ما اشتباهی روی دکمه ای که مد نظرمان نیست ثبت شود، مسلما به چشم همه می آید.

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

[/vc_column_text][vc_single_image image=”31840″ img_size=”full” alignment=”center”][vc_custom_heading text=”معیار های CLS چه چیز هایی هستند؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

برای بوجود آمدن یک تجربه کاربری خوب بهترین نمره برای CLS در واقع 0.1 می باشد. اینجا دیگر حرف از ثانیه و میلی ثانیه نیست. در واقع ما اینجا یک مقدار تقریبی داریم که حتی نباید به یک عدد بالای 1 برسد. اینطور باید در نظر گرفته شود که شما به ازای بارگذاری 75 درصد از صفحه سایتتان باید کمتر از 0.1 تغییر غیر منتظره در سایتتان داشته باشید که بتوانید نمره کامل CLS را دریافت کنید. با زبان بی زبانی گوگل دارد به ما می فهماند که این تنها یک متراژ اندازه گیری است و شما تا جایی که می شود اصلا نباید که تغییر غیر منتظره در سایتتان داشته باشید و همه چیز باید از قابل بارگذاری شوند و Render کامل هم از آن ها گرفته شود.

در واقع Layout Shift ها با Layout Instability API توصیف می شوند. این ابزار اطلاعات دقیقی از Layout-shift به ما می دهد که نشان می دهد آیا اگر یک المان داخل صفحه ظاهر می شود، ممکن است موقعیت خودش را تغییر دهد؟ اگر آره این اتفاق چگونه می افتد و چه تاثیری دارد؟ به این نوع المان ها هم اصطلاحا المان های ناپایدار یا Unstable Elements می گویند. در نظر داشته باشید که Layout Shift زمانی اتفاق می افتد که المانی که در حال حاضر وجود دارد موقعیتش تغییر بکند. زمانی که یک المان جدید به DOM اضافه شود یا یک المان سایزش تغییر کند اما تاثیری بر موقعیت مکانی المان نگذارد Layout Shift اتفاق نیوفتاده است. دقت داشته باشید که کلمه Shift معمولا به تغییر موقعیت اشاره دارد که با کلمه Change که تغییر کلی است در مواردی متفاوت است.

به منظور محاسبه CLS، مرورگر نگاهی به Viewport صفحه سایت و حرکت المان های ناپایدار در ویوپورت بین دو فریم رندر گرفته شده از صفحه می اندازد. امتیاز Layout Shift به این صورت با دو نوع از اندازه گیری این حرکت انجام می شود: Impact Fraction یا به اصطلاح “مقدار تاثیر” و Distance Fraction یا “مقدار فاصله” که از فرمول زیر هم بدست می آید.

layout shift score = impact fraction * distance fraction

[/vc_column_text][vc_custom_heading text=”Impact Fraction” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_column_text]

متراژ Impact Fraction به تاثیری که المان ناپایدار بر ویوپرت صفحه شما در دو قاب قبل از تغییر موقعیت و بعد از تغییر موقعیت می گذارد اشاره می کند. در تصیر زیر به وضوح می توانید ببینید که متن در قاب اول در کجا قرار داشته و در حال حاضر هم در کجا قرار دارد و چقدر این موضوع بر روی Viewport تاثیر گذاشته است.

[/vc_column_text][vc_single_image image=”31841″ img_size=”full” alignment=”center”][vc_custom_heading text=”Distance Fraction” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_column_text]

متراژ Distance Fraction به فاصله ای اشاره می کند که المان در قاب اول Viewport طی کرده است که در موقعیت بعدیش که در قاب دوم می باشد قرار بگیرد. المان ناپایدار ممکن است چه به صورت عمودی و چه به صورت افقی جا به جا شود که در تصویر زیر می توانید فاصله ای که المان متن جا به جا شده است را مشاهده کنید.

[/vc_column_text][vc_single_image image=”31842″ img_size=”full” alignment=”center”][vc_custom_heading text=”چگونه یک CLS خوب داشته باشیم؟” font_container=”tag:h3|text_align:left|line_height:3.5rem” use_theme_fonts=”yes”][vc_column_text]

در اینجا می خواهیم به شما بگوییم که چگونه می توانید یک Cumulative Layout Shift خوب به عنوان یکی از معیار های Web Vitals داشته باشید. با رعایت چند نکته معمولا بهترین نتیجه برای شما بدست خواهد آمد. (در نظر هم داشته باشید که معمولا سایت های وردپرسی خیلی کم امکان دارد که در این مورد دچار مشکل شوند)

اول اینکه برای المان های عکس و ویدیو حتما Attribute سایز را تعریف کنید یا با ابزار CSS Aspect Ratio Boxes فضای مورد نیاز المان را دریابید. همچنین می توانید از موارد Unsized-media Feature Policy هم کمک بگیرید.

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

اگر المان شما متحرک یا انیمیشنی است حتما چک کنید این انیمیشن بر محتوای المان دیگر تاثیر نمی گذارد.

[/vc_column_text][vc_custom_heading text=”کلام آخر” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]

قبل از اینکه مقاله را تمام کنیم بگذارید با هم رو راست باشیم. مسلم است که انجام تمامی این کار ها و رعایت معیار های Web Vitals زمان زیادی می برد و گاهی ممکن است امکان پذیر نباشد. ممکن است همچنان شما بخواهید از روش های کلاه خاکستری و کلاه سیاه برای سئو سایت استفاده کنید و با خودتان هم بگویید قرار هم نیست که هرگز گوگل هم شما را پنالتی کند. اما در نظر داشته باشید در حال حاضر در سال 2021 هستیم و دیگر روش های قدیمی یا غیر سفید سئو دارند فرسوده می شوند. حتی اگر هم گوگل شما را پنالتی نکند دیگر این کاربر است که انتخاب می کند از کدام لندینگ پیج صفحه SERP استفاده کند.

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

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

ممنون که تا پایان مقاله همراه ما بودید. امیدوارم توانسته باشیم به شما در این راستا کمکی کرده باشیم.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”80px”][/vc_column][/vc_row][vc_row full_width=”stretch_row”][vc_column width=”1/2″][vc_custom_heading text=”همین حالا برای طراحی سایت و ساخت اپلیکیشن اقدام کنید!” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes” font_weight=”700″][vc_column_text]

شرکت طراحی سایت و اپلیکیشن تابان شهر در تمام زمینه های طراحی سایت و اپلیکیشن و ارائه خدمات مربوط به آنها در خدمت شماست

[/vc_column_text][vc_btn title=”مشاوره رایگان” style=”custom” custom_background=”#ffffff” custom_text=”#ffffff” shape=”round” size=”xl” align=”center” skin=”primary” link=”url:https%3A%2F%2Ftabaneshahr.com%2Fcontact-us1%2F||target:%20_blank|”][/vc_column][vc_column width=”1/2″][vc_single_image image=”24739″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”آخرین مقالات” font_container=”tag:h2|text_align:center” use_theme_fonts=”yes” font_weight=”700″][porto_blog post_layout=”slider” post_style=”grid” nav_pos2=”nav-pos-inside” nav_type=”nav-style-4″][/vc_column][/vc_row]

امروز شروع کن

تیم کارشناسان تابان شهر آماده ارائه مشاوره رایگان به شما هستند

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

By امیر رضا غفاری

دیگر مقالات تابان شهر

طراحی سایت با وردپرس یا  php

طراحی سایت با وردپرس یا php

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

read more
صفر تا100 آشنایی با استاندارد های طراحی اپلیکیشن

صفر تا100 آشنایی با استاندارد های طراحی اپلیکیشن

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

read more

0 نظر از شما عزیزان

0 Comments

Submit a Comment

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