اتفاقات روزمره ، اخبار مهم و دیگر مطالب میهن وب هاست را می توانید در این قسمت مطالعه کنید

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

این پست شامل تمام مواردی است که شما باید در مورد Core Web Vital و WordPress بدانید. در این مقاله در خصوص پروژه جدید گوگل به صورت کامل توضیحات ارائه می شود که چگونه می توان آنها را آزمایش کرد و چگونه نمرات سایت خود را بهبود ببخشید تا تجربه کاربری بهتری ایجاد کنید. حتی ممکن است رتبه بندی جستجوی خود را در سال 2021 و بعد از آن با این تکنیک ها افزایش دهید.

GOOGLE CORE WEB VITALS چست؟

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

معیار Largest contentful paint یا LCP: این معیار برای سنجش زمان تقریبی است که برای لود بزرگترین محتوای موجود در سایت اختصاص داده می شود. در واقع این معیار معادل زمان مورد نیاز برای قابل نمایش شدن بزرگترین محتوای موجود در سایت است.

معیار Cumulative layout shift یا CLS: در این بخش گوگل یک پرسش را مطرح می کند، که چقدر زمان لازم است تا صفحه سایت شما پایدار شود؟ شاید تجربه کرده باشید که به وسیله مرورگر موبایل خود وارد سایتی شده اید و می خواهید روی گزینه ای کلیک کنید، اما عملا با انتخاب آن، اتفاق دیگری افتاده است و به مسیر دیگری هدایت شده اید. این موضوع به عنوان یک تجربه کاربری ضعیف محسوب خواهد شد. بله این موردی است که Google به آن اهمیت خواهد داد.

معیار First input delay یا FID: مدت زمان بین تعامل کاربر با یک صفحه در سایت شما (به عنوان مثال کلیک کردن روی یک دکمه) و مدت زمانی که مرورگر وی قادر به شروع پردازش آن رویداد باشد، گفته می شود. همانطور که مشاهده می کنید، "زمان بارگیری" یکی از معیارهایی نیست که Google انتخاب کرده است.

Google بیشتر به چگونگی ارتباط عملکرد سایت شما با تجربه کاربر توجه دارد. تیم Google معتقد است که این معیارها بخش عمده ای از "تجربه کاربر" و عملکرد سایت است.

آیا CORE WEB VITALS بر بهینه سازی موتور جستجو (SEO) تأثیر می گذارند؟

در ماه مه 2021، گوگل شروع به استفاده از Core Web Vital به عنوان عامل رتبه بندی SEO می کند. گوگل همچنین گفته است که Core Web Vital هم بر روی نتایج موبایل و دسکتاپ و هم بر روی نمایش یا عدم نمایش سایت شما در Top Stories تاثیر خواهد گذاشت. پیش از این، سایت شما برای نمایش در Top Stories نیاز به استفاده از AMP (مخفف عبارت Accelerated Mobile Pages به معنی «صفحات موبایلی شتاب‌یافته یا پرشتاب» است) داشت. وقتی Google این تغییر را اعمال می کند، دیگر نیازی به AMP نخواهد بود، اما سایت شما برای نشان دادن در Top Stories باید حداقل امتیازات Core Web Vital های خاص را بدست آورد. شما وقت کمی دارید تا سایت خود را با Core Web Vital تنظیم کنید، اما این چیزی نیست که بتوانید از آن چشم پوشی نمایید زیرا تأثیر واقعی در عملکرد جستجوی سایت شما خواهد داشت، به خصوص اگر می خواهید محتوای خود را در Top Stories نشان دهید.

توضیح CORE WEB VITALS و نحوه آزمایش آنها

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

نحوه تست Core Web Vital در وردپرس

ساده ترین راه برای آزمایش سایت خود برای بررسی Core Web Vital ها از طریق Google PageSpeed ​​Insights است که داده های مربوط به هر سه معیار را فراهم می کند. در حال حاضر، WebPageTest از Core Web Vital پشتیبانی می کند و GTmetrix قصد دارد این پشتیبانی را به زودی اضافه کند. سایر ابزارهای تست سرعت نیز ممکن است در آینده از این مورد پشتیبانی کنند. در PageSpeed ​​Insights، تمام کاری که می کنید این است که URL سایت خود را در فیلد مشخص شده وارد کنید. معیارهای Core Web Vital را هم در Data Field (اگر سایت شما اطلاعات کافی دارد) و هم در Lab Data خواهید دید. معیارهای Core Web Vital با یک پرچم آبی مشخص شده اند. برای سایت های کم بازدید، ممکن است فقط داده های آزمایشگاهی برای LCP و CLS نمایش داده شود، زیرا Google داده کافی از بازدید کنندگان واقعی ندارد. با این حال، فقط در صورتی که سایت شما دارای اطلاعات میدانی کافی باشد، زمان FID را مشاهده خواهید کرد.

یک نکته مهم دیگر این است که شما باید هم نتایج تلفن همراه و هم دسکتاپ را بررسی کنید، زیرا معیارهای Core Web Vital شما بین این دو متفاوت خواهد بود:

تصویر(1)

نتایج Core Web Vital Metrics - Google PageSpeed Insights

اگر از کنسول جستجوی Google استفاده می کنید، می توانید گزارش Core Web Vital را در سراسر سایت خود نیز مشاهده کنید که به شما کمک می کند تا به سرعت مشکلات مربوط به سایت را پیدا کنید:

تصویر(2)

در آینده وقتی می خواهید مشکلات سایت خود را به طور کلی تشخیص دهید، این ابزار کارائی بالایی پیدا می کند. در ادامه سه معیار Core Web Vital بررسی می شود.

معیار Largest contentful paint یا LCP

تصویر(3)

Largest Contentful Paint زمان بارگیری محتوای اصلی یک صفحه را اندازه گیری می کند. این معیار برای سنجش زمان تقریبی است که برای لود بزرگترین محتوای موجود در سایت اختصاص داده می شود. در واقع این معیار معادل زمان مورد نیاز برای قابل نمایش شدن بزرگترین محتوای موجود در سایت است. از این معیار حتی می توان برای مشخص کردن زمان پایان لود سایت استفاده کرد. در واقع مهم است که بدانید بزرگترین محتوا در viewport، اعم از سیستم های دسکتاپ یا سیستم های تلفن همراه، خواه یک تصویر و یا یک فیلم باشد، با چه سرعتی بارگذاری می شود ؟ البته این موضوع می تواند تحت تاثیر زمان پاسخ دهی سرور، زمان اجرای css و JavaScript باشد که به مرورگر ارائه می شود.

هرچه مرورگر برای دریافت محتوا از سرور بیشتر منتظر بماند، رندر هر آیتم روی صفحه بیشتر طول می کشد. زمان پاسخ سریعتر سرور هر معیار Core Web Vital ، از جمله LCP را مستقیماً بهبود میبخشد. قبل از هر اقدام دیگری، نحوه مدیریت سرور با محتوای خود را بهبود ببخشید. برای اندازه گیری زمان پاسخ سرور از Time to First Byte استفاده کنید. برای مشاهده و بررسی LCP سایت خود، می توانید از PageSpeed ​​Insights استفاده کنید. به بخش Diagnostics بروید و برگه LCP را بررسی نمایید. 

تصویر(4)

اساساً، LCP اندازه گیری می کند که چه مدت طول می کشد تا عناصر سایت برای بازدید کنندگان قابل مشاهده باشند. چه زمانی برای LCP خوب است؟ 

مقادیر مدنظر Google به شرح زیر است:

• خوب - کمتر از 2.5 ثانیه
• نیاز به بهبود دارد - بین 2.5 ثانیه تا 4.0 ثانیه
• ضعیف - بیش از 4.0 ثانیه

معیار Cumulative layout shift یا CLS

تصویر(5)

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

برای اندازه گیری نمره CLS سایت خود، می توانید از داده های بدست آمده در PageSpeed Insights استفاده کنید. مقادیر مدنظر Google به شرح زیر است:

• خوب - زیر 0.1
• نیاز به بهبود - بین 0.1 و 0.25
• ضعیف - بیش از 0.25

مطابق با تصویر زیر به Avoid large layout shifts در بخش Diagnostics در PageSpeed Insights بروید، می توانید عناصری که در سایت شما "تغییر مکان" می دهند و نمره شما را تحت تأثیر قرار می دهند، مشاهده می کنید:

تصویر(6)

معیار مهم First input delay

تصویر(7)

در وب، اولین برداشت خوب می تواند تفاوتی بین تبدیل شدن شخصی به کاربر وفادار یا خروج و عدم بازگشت وی را ایجاد کند. سوال این است که چه چیزی باعث ایجاد تأثیر خوب می شود و چگونه می توانید نوع بازخوردی را که برای کاربران خود ایجاد میکنید، اندازه گیری نمایید؟

اگرچه اندازه گیری اینکه کاربران چقدر طراحی سایت را با API های وب دوست دارند، دشوار است، اما اندازه گیری سرعت و پاسخگویی آن چنین نیست!

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

برای FID مقادیر مدنظر Google به شرح زیر است:

• خوب - زیر 100 میلی ثانیه
• به بهبود نیاز دارد - بین 100 میلی ثانیه تا 300 میلی ثانیه
• ضعیف - بیش از 300 میلی ثانیه

برخلاف LCP و CLS ، FID بر اساس داده های واقعی کاربر است، بنابراین نمی توانید به راحتی آن را "در آزمایشگاه" بررسی کنید. متأسفانه، اگر سایت شما اطلاعات کافی برای پر کردن بخش Field Data نداشته باشد، هیچ راهی برای اندازه گیری زمان FID سایت شما وجود ندارد.

چگونه می توان CORE WEB VITALS را در وردپرس بهبود بخشید؟

اکنون یک سوال مهم وجود دارد، اگر در حال حاضر توصیه های Google برای سه معیار Core Web Vital را درک نکنید، چگونه می توانید سایت وردپرسی خود را برای بهبود امتیازات Core Web Vital بهینه ببخشید؟

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

چگونه می توان Largest Contentful Paint را در وردپرس بهبود بخشید

بهینه سازی برای Largest Contentful Paint ساده ترین معیار است زیرا با بسیاری از روش های معرفی شده در ادامه، می توانید در بالاترین حد برای بهبود عمکلرد سایت انجام دهید:

• انتخاب هاستینگ سریع:

هاست بر روی پاسخگویی سرور تأثیر می گذارد، که نقش زیادی در LCP دارد.

• حافظه پنهان صفحه را تنظیم کنید:

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

• بهینه سازی تصاویر

بسیاری از اوقات، عنصر LCP شما یک تصویر خواهد بود، بنابراین بهینه سازی تصاویر باعث تسریع در روند رفع مشکل می شود. برای بهینه سازی خودکار تصاویر وردپرس می توانید از افزونه های  Imagify، Smush و EWWW Image Optimizer استفاده کنید.

• بهینه سازی کدها

اگر سایت شما قبل از محتوای اصلی، CSS یا JavaScript غیرضروری را بارگیری کند، سرعت سایت شما کم می شود. با حذف render-blocking JavaScript و قرار دادن CSS های حیاتی می توانید این مشکل را برطرف کنید. می توانید این بهینه سازی ها را در تب File Optimization در WP Rocket تنظیم نمایید.

تصویر(8)

• از فشرده سازی در سطح سرور استفاده کنید

با استفاده از فشرده سازی Gzip، اندازه پرونده سایت شما کاهش می یابد که سرعت LCP را افزایش می دهد. در هاست های ارائه شده توسط میهن وب هاست، قابلیت فشرده سازی Gzip به صورت پیشفرض فعال می باشد.

• برای منابع مهم از اتصال متقابل استفاده کنید

preconnect به شما امکان می دهد ارتباطات مهم third-party را زودهنگام برقرار کنید.

• برای مخاطبان جهانی از شبکه تحویل محتوا (CDN) استفاده کنید

اگر مخاطبان جهانی دارید، CDN می تواند زمان LCP شما را برای بازدیدکنندگان در سراسر جهان تسریع کند. شما می توانید از سرویس های CDN مانند Cloudflare استفاده کنید.

ساده ترین راه برای اجرای روش های ذکر شده استفاده از WP Rocket می باشد. به محض فعال کردن WP Rocket، به طور خودکار کش کردن صفحات سایت، فشرده سازی ها، ویژگی های بهینه سازی کد و عملکرد سایت انجام می شود، همه اینها باعث بهبود زمان LCP در سایت شما می شوند، البته سایر افزونه کش مانند w3 total cache و wp super cache نیز می توانند موارد ذکر شده را انجام دهند.

چگونه می توان Cumulative Layout Shift را در وردپرس بهبود بخشید

بهینه سازی برای CLS کمی فنی تر است زیرا بیشتر با کدهای سایت شما سروکار دارد.

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

• تصاویر بدون ابعاد

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

• تبلیغات، جاسازی ها و فریم های بدون ابعاد

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

• وب فونت ها (FOIT/FOUT)

اگر از فونت های سفارشی استفاده می کنید، بارگذاری دیر هنگام یک فونت می تواند مشکلاتی مانند (Flash of Invisible Text (FOIT یا Flash of Unstyled Text را ایجاد کند. راه حل برای رفع این مشکل پیش بارگیری فونت وب است.

برای اینکار می بایست کد زیر را در هدر سایت قرار دهید، همچنین از افزونه Insert Headers and Footers برای انجام اینکار استفاده کنید:

rel - تنظیم این مورد بر روی preload به مرورگر می گوید که فایل فونت را از قبل بارگیری کند.

href - پیوند به پرونده فونت واقعی است. برای لود شدن فونت مورد نظر، باید آن را ویرایش کنید.

as - به مرورگر می گوید که یک فایل فونت را از قبل بارگیری می کند.

type - نوع پرونده فونت را مشخص می کند. اگر می خواهید نوع دیگری از پرونده را بارگیری کنید، باید آن را تغییر دهید.

• محتوای تزریق شده

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

چگونه می توان FID را در وردپرس بهبود بخشید

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

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

بهینه سازی CORE WEB VITALS در  WORDPRESS را امروز شروع کنید

Core Web Vital جدیدترین تلاش Google برای ساماندهی وب سایت ها و بهبود تجربه کاربر در وب سایت ها است. در حالی که Core Web Vital هم اکنون و در زمان نوشتن این مقاله فاکتور رتبه بندی SEO نمیباشد، اما در اوایل سال 2021 آنها را به عنوان یک عامل مهم در رتبه بندی سایت ها، اضافه می کند، بنابراین ضروری است سایت خود را از قبل از تاریخ ذکر شده آماده کنید.

برای آزمایش زمان / امتیازات Core Web Vital سایت خود، می توانید از PageSpeed Insights یا گزارش Core Web Vital در کنسول جستجوی Google استفاده کنید.