Core Web Vitals چیست و نحوه بهینه سازی آن

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

هسته حیاتی وب یا همان Core web vitals چیست؟

شاخص Core web vitals معیاری برای سنجش سرعت، عملکرد و سازگاری صفحات وب سایت است که از طریق سرویس Chrome UX جمع آوری و بصورت میانگین گزارش داده می شود. شاخص Core web vitals با سه مولفه تعریف می شود که عبارتند از:

• LCP مخفف Largest contentful paint به معنی بزرگترین عنصر محتوایی صفحه
• INP مخفف Interaction to next paint به معنی سرعت برقراری تعامل و عملکردهای ضروری صفحه
• CLS مخفف Cumulative Layout Shift به معنی سرعت طرح بندی و سازگاری نمایش صفحه وب با دستگاه

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

همانند جدول زیر سه معیار Good – Need improvement – Poor وجود دارد که Good به معنی عالی، Need improvement نیاز به بهبود و Poor ضعیف می باشد.

مولفه LCP: در هر صفحه چندین اِلِمان وجود دارد که معمولا حجیم ترین آنها تصاویر یا ویدیوها (در صورت پخش خودکار) هستند. LCP به این مساله اشاره دارد که زمان لود کامل بزرگترین المان محتوایی چند ثانیه طول می کشد. اگر این مقدار برابر یا کمتر از 2.5 ثانیه باشد مشکلی وجود نداشته و نیازی به انجام دادن کاری وجود ندارد. اما اگر زمان LCP بالاتر از 2.5 تا 4 ثانیه باشد نیاز است که اقدام مناسب برای بهبود آن انجام شود. اگر زمان LCP بیش از 4 ثانیه باشد وضعیت اصلا خوب نیست و باید سریعا اقدامات لازم برای رفع این مشکل انجام شود. معمولا رفع کردن مشکل LCP به سادگی قابل انجام است که در ادامه بصورت کامل به آن اشاره خواهیم کرد.

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

مولفه CLS: این مورد نیز میزان جابجایی المان ها و ساختار محتوایی صفحات را نشان می دهد. اگر مقدار CLS برابر یا کمتر از 0.1 باشد وضعیت عالی است. اگر بیش از 0.1 تا 0.25 باشد نیاز به بهبود و در صورت بالاتر بودن این مقدار نیاز به اقدام جدی.

مشاهده گزارش Core Web Vitals در Google Search Console

برای دسترسی به گزارش Core web vitals می توانید به صفحه زیر مراجعه نمایید:

https://search.google.com/search-console/core-web-vitals

سپس مطابق تصویر زیر از طریق گزینه Search property اقدام به انتخاب وب سایت خود می کنیم.

اگر با صفحه ای مشابه تصویر زیر مواجه شدید به این معنی است که وب سایت شما به دلیل بازدیدهای کم، گزارش Core web vitals ندارد و باید سعی کنید بازدیدهای وب‌سایت خود را افزایش دهید.

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

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

لازم به ذکر است گزارش Core web vitals برای دستگاه های موبایل و کامپیوتر ارائه می گردد در صفحه مورد نظر، برای هر کدام نمودار مجزایی را نمایش می دهد. اگر می بینید که یکی از نمودارها داده ای ندارد به این معنی است که وب سایت شما بازدید زیادی از آن دستگاه ها ندارد. برای مثال در تصویر زیر، نمودار Core web vitals وب سایتی را مشاهده می کنید که اغلب بازدیدهای آن از طریق دستگاه های موبایل بوده و بازدید زیادی از دستگاه های لپ تاپ و کامپیوتر ندارد.

چرا Core web vitals مهم است و باید آن را پاس کنیم؟

همانطور که در ابتدای بحث بصورت کوتاه اشاره کردیم شاخص Core web vitals سعی بر این دارد که صاحبان وب سایت ها را به رفع مشکلات مربوط به سرعت، عملکرد و سازگاری تشویق کند. اگر یک وب سایت دارای سرعت بالا، عملکرد بدون مشکل و سازگاری با دستگاه های مختلف باشد بازدیدکنندگان نیز حس خوبی نسبت به آن خواهند تا نسبت به وب سایتی که این فاکتورها را ندارد. البته تنها عالی بودن وضعیت صفحات وب سایت در Core web vitals در سئو کافی نیست اما اگر فرض کنیم دیگر مولفه های وب سایت نیز مانند رابط کاربری (UI)، ساختار، محتوا و … نیز در وضعیت مطلوبی قرار داشته باشند شانش بالا آمدن در نتایج جستجوی گوگل نیز بالاتر می رود.

پس اگر تجربه کاربری (UX) برای شما مهم است حتما باید باید سعی در پاس کردن شاخص Core web vitals نمایید.

چرا بهینه سازی سایت برای موبایل، سخت تر از کامپیوتر است؟

دستگاه های موبایل معمولا از سخت افزارهای ضعیف تری نسبت به کامپیوترها برخوردار هستند که همین مساله می تواند زمان نمایش صفحات وب را بالاتر ببرد. همچنین مدل نمایش صفحات وب در موبایل به شکلی است که نیاز به واکنشگرایی (Responsive) دارد و همین مساله نیز موجب طولانی تر شدن روند نمایش و انجام عملیات ها می گردد. بنابراین در اغلب مواقع مشاهده می کنید که پاس کردن Core web vitals برای کامپیوترها به سادگی صورت می پذیرد اما برای دستگاه های موبایل با چالش های مختلفی مواجه می شوید! به همین منظور در ادامه بحث، روش هایی را به شما آموزش خواهیم داد که بتوانید Core web vitals را بخصوص برای دستگاه های موبایل پاس کنید.

آموزش پاس کردن Core web vitals بصورت عملی

قدم اول: داشتن هاست پرسرعت و پایدار

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

1. داشتن منابع پردازشی کافی متناسب با تعداد بازدیدهای سایت و یا میزان مصرف منابع پردازشی
   • مشاهده میزان مصرف منابع سخت افزاری سایت در هاست سی پنل
2. وب سرور Litespeed با قابلیت کَش به منظور لود سریع صفحات وب سایت
3. مجهز بودن سرور به درایوهای NVMe پرسرعت به جهت پردازش سریع درخواست های I/O
4. مجهز بودن سرور هاست به شبکه پرسرعت و پایدار به همراه فایروال های سخت افزاری و نرم افزاری

موارد 1 و 2 برای همه قابل تشخیص است اما موارد 3 و 4 به این سادگی ها قابل تشخیص نیست. بر همین اساس در هنگام خرید هاست می بایست دقت و وسواس بسیار بالایی به خرج دهید و یا از هاست های میزبان فا استفاده نمایید که بالاترین سطح کیفی را در ایران دارند. هاست های میزبان فا دارای ویژگی های بارز زیر هستند:

• مشخص بودن سهم دقیق منابع پردازشی هر هاست و امکان بررسی میزان مصرف آن با ابزار Resource Usage در سی پنل
• استفاده از وب سرور Litespeed برای دستیابی به بالاترین سرعت نمایش صفحات وب
• استفاده از سرورهای جدید و بسیار قدرتمند HPE و DELL با حافظه های NVMe مخصوص سرور با سرعت 10 گیگابایت بر ثانیه!
• مجهز بودن سرورها به آپلینک های چند ده گیگابیتی و فایروال های سخت افزاری فوق قدرتمند و بسیار گران قیمت
• استفاده از سیستم فوق پیشرفته امنیتی در لایه 7 با پرفورمنس فوق العاده بالا
• بالاترین سهم خواندن و نوشتن (I/O) برابر با 4GB.s برای اولین بار در دنیا!!!
• میزبانی سرورها در بهترین دیتاسنترهای ایران و آلمان با تکنولوژی ابری و معماری کلاسترینگ
• ارائه سرویس اختصاصی وردپرس با بالاترین سطح سازگاری و منابع گسترده

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

برای خرید هاست از میزبان فا می توانید به صفحات زیر مراجعه نمایید:

• هاست اشتراکی – مناسب برای راه اندازی سایت و میزبانی وب سایت های کم بازدید و کم مصرف
• هاست وردپرس – مخصوص سایت های وردپرسی فعال و پربازدید (منابع پردازشی بیشتر)
• هاست ووکامرس – مخصوص سایت های ووکامرسی فعال و پربازدید (منابع پردازشی بیشتر)
• هاست اختصاصی – مخصوص سایت های بسیار پربازدید با کانفیگ اختصاصی (منابع پردازشی بسیار بالا)

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

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

قدم دوم: استفاده از قالب بهینه و استاندارد

قالبی که برای سایت خود استفاده می کنید بیشترین تاثیر را در پاس کردن مباحث فنی Core web vitals دارد. قالب بهینه و استاندارد، ویژگی های زیر را دارد:

• دارای کدهای بهینه و فشرده شده
• امکان غیرفعالسازی قابلیت ها به جهت کاهش حجم صفحات (در صورت عدم نیاز به آنها)
• سازگاری کامل با دستگاه های مختلف بخصوص موبایل با قابلیت واکنشگرایی (Responsive)

و مورد مهم دیگر اینکه قالب بصورت اورجینال خریداری شود چون نسخه های نال شده (دستکاری شده) عملکرد فنی و امنیتی مناسبی ندارند. برای وردپرس، پیشنهاد ما به شما استفاده از قالب ایمپرزا (Impreza) می باشد که یکی از بهترین و استانداردترین قالب های وردپرسی دنیاست. این قالب به جهت چند منظوره بودن برای راه اندازی انواع سایت ها مانند سایت های فروشگاهی، شرکتی، خبری، وبلاگ و … مناسب است. اگر این قالب را نمی پسندید گزینه های دیگری نیز مانند موارد زیر وجود دارند:

• قالب آوادا – سنگین اما با امکانات بسیار زیاد
• قالب سون – نسبتا سبک با امکانات خوب
• قالب وودمارت – بسیار سنگین مناسب فروشگاه آنلاین
• قالب جنه – سبک و بهینه شده برای سایت های خبری و بلاگ

قدم سوم: استفاده از تصاویر بهینه در صفحات وب سایت

بیش از اینکه ابعاد و حجم تصویر مطرح باشد تناسب آن در موقعیت مورد استفاده مهم است! به این معنی که اگر برای مثال اندازه تصویر مورد استفاده شما 1280×720 است حتما می بایست به همان اندازه در صفحه نمایش داده شود و نه کوچکتر یا بزرگتر. با توجه به اینکه امکان کوچکتر و بزرگتر کردن نمایش تصویر در صفحات وب به کمک کدهای css و html وجود دارد بهتر است از اندازه اصلی تصویر استفاده نمایید. اگر می بینید که ساختار قالب وب سایت شما به نحوی است که تصاویر را کوچکتر با بزرگتر نمایش می دهد بهتر است اندازه ای از تصاویر را تهیه نمایید که کاملا متناسب با اندازه نمایش در صفحات وب سایت باشد.

مورد دیگر این است که سعی کنید تصاویر مورد نظرتان را به کمک نرم افزارهایی مانند فتوشاپ با مدل Save for Web ذخیره نمایید تا حجم آن تا حد امکان کاهش یابد. این مساله را دست کم نگیرید چون می توان تا 70 درصد حجم فایل را با این روش کاهش داد!

برای اینکار کافیست از منوی File گزینه Export و زیرمنوی Save for Web را انتخاب کرده و در کادر ظاهر شده موارد زیر را اعمال نمایید:

• نوع فایل: JPEG برای عکس های واقعی و PNG-8 برای تصاویر کارتونی
• مقدار Quality برابر با 50 الی حداکثر 72
• فعال بودن گزینه Optimized

و در نهایت ذخیره فایل با گزینه Save

قدم چهارم: نصب و پیکربندی افزونه WP Rocket

افزونه راکت وردپرس (WP Rocket) در حال حاضر بهترین افزونه بهینه سازی سایت های وردپرسی است. این افزونه قادر است موارد زیر را برای سایت شما انجام دهد:

• فعال سازی قابلیت کش به منظور لود سریع صفحات سایت در بازدیدهای بعدی
• فعال سازی قابلیت Lazy-load به منظور فراخوانی تاخیری تصاویر (وابسته به اسکرول)
• امکان فشرده سازی و تجمیع کدهای html – css و js برای به حداقل رساندن حجم صفحات
• امکان فعال سازی قابلیت پیش بارگزاری و اتصال به سرویس های CDN
• امکان حذف اطلاعات اضافه از دیتابیس و کاهش محسوس حجم آن

و قابلیت های دیگر که البته باید توجه داشت که می بایست پیکربندی آن به شکل درست انجام شود. صرف اینکه همه گزینه ها و قابلیت ها فعال شود نتیجه مطلوبی به همراه نخواهد داشت. با توجه به امکان تداخل افزونه با قالب بهتر است از قابلیت فشرده سازی و تجمیع کدها در افزونه WP Rocket استفاده نکنید. اما قابلیت های دیگر مانند کش و لود تنبل (Lazy-load) در اکثر مواقع اثر بسیار مطلوبی بر روی افزایش سرعت سایت و نتایج Core web vitals دارند.

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

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

مورد مهمی که می بایست در نظر داشته باشیم این است که هر سرویس ثالثی که با کدهای js و iframe در سایت اضافه می شوند سرعت سایت را پایین می آورند. از سرویس های ثالت متداول می توان به موارد زیر اشاره کرد:

• کدهای js سیستم هایی مانند گوگل آنالیتیکس، گوگل تگ منیجر، چت و …
• کدهای iframe سیستم هایی مانند نماد اعتماد، ساماندهی و …

که هر کدام از آنها بخصوص کدهای نماد اعتماد، ساماندهی و چت می توانند در پاس کردن شاخص Core web vitals ایجاد مشکل کنند. بنابراین تا جایی که می توانید سعی کنید از کدهای سرویس های ثالث کمتر استفاده کنید. اگر مجبور هستید از این سرویس ها استفاده کنید و راهکار دیگری ندارید می توانید کدهای آن را در بخش انتهای body و footer قرار دهید تا در اولویت آخر بارگزاری قرار گیرند. اغلب قالب ها چنین امکانی را دارند که بتوانید کدهای مورد نظرتان را در بخش های دلخواه وارد نمایید.

قدم ششم: عدم استفاده از سرویس های دارای محدودیت

به دلیل شرایط تحریمی و برخی محدودیت های زیرساختی، برخی از سرویس ها اختلالات جدی دارند و دسترسی به آنها از داخل به خارج کشور و یا بالعکس مقدور نبوده و یا بشدت ضعیف است. برای مثال افزونه جت پک (JetPack) با وجود اینکه در خارج از ایران بسیار محبوب و کاربردی است اما در ایران قابل استفاده نیست! همچنین افزونه ها یا سرویس هایی مانند API های تلگرام و اینستاگرام که به دلیل محدودیت های زیرساختی قابلیت اتصال ندارند. وجود این گونه سرویس ها سرعت وب سایت را بشدت پایین می‌آورد و می‌بایست از آنها استفاده ای نشود. روش شناسایی این اختلالات بسیار ساده است چون لود صفحه طول می کشد و یا تمام نمی شود. اگر نمی توانید مشکل را شناسایی کنید می توانید از افزونه هایی نظیر Query Monitor استفاده نمایید.

قدم هفتم: تست سایت در PageSpeed Insights و رفع مشکلات

برای بررسی وضعیت سایت می بایست از ابزار PageSpeed Insights گوگل استفاده نمایید. برای دسترسی به این ابزار می توانید به صفحه زیر مراجعه نمایید:

https://pagespeed.web.dev

لازم به ذکر است به دلیل محدودیت های اعمال شده از سمت گوگل با آی پی ایران نمی توان این سایت را مشاهده کرد و می بایست با سرویس های تغییر آی پی اقدام به انجام اینکار نمایید. کافیست در قسمت خواسته شده آدرس سایت یا صفحات وب سایت خود را وارد نموده، بر روی Analyze کلیک کرده و صبر کنید تا نتیجه نمایش داده شود. اگر در پنل سرچ کنسول دیتای Core web vitals را دارید در اینجا نیز نمایش داده می شود اما اگر چنین حالتی وجود ندارد تنها گزارش های زیر ارائه می شود:

• Performance برای نمایش سطح عملکرد
• Accessibility برای نمایش سطح دسترس پذیری
• Best Practices برای نمایش میزان رعایت استانداردها
• SEO برای نمایش دستورالعمل های فنی سئو

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

• First Contentful Paint به معنی اولین نمایش محتوایی صفحه
• Largest Contentful Paint به معنی زمان مورد نیاز لود شدن بزرگترین اِلِمان محتوایی
• Total Blocking Time به معنی زمان انسداد دریافت داده از سمت کاربر
• Speed Index به معنی زمان لود کامل اسکرول نشده صفحه
• Cumulative Layout Shift به معنی میزان پرش و تغییر چیدمان صفحات وب سایت

در تصویر زیر صفحه ای را مشاهده می کنید که در وضعیت بسیار مطلوبی قرار دارد:

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

همانطور که گفته شد میزان LCP می بایست برابر یا کمتر از 2.5 ثانیه باشد که در اینجا 8.8 ثانیه است که به هیچ عنوان قابل قبول نیست. برای اینکه بتوانیم این مقدار را به میزان مناسب کاهش دهیم کافیست مراحل 1 تا 6 را انجام دهید و سپس بررسی نمایید. لازم به ذکر است با تغییر پیکربندی افزونه WP Rocket (حتی با آزمون و خطا) می توانید نتایج بخش Performance را بهبود دهید. پس از اینکه توانستید وضعیت مناسبی را برای صفحات وب سایت خود ایجاد نمایید می توانید درخواست بررسی مجدد را از طریق سرچ کنسول به گوگل ارسال نمایید. اگر مشکلی وجود نداشته باشد معمولا پس از یک الی سه هفته وضعیت نمودار تغییر می کند.

در تصویر زیر گزارش مربوط به LCP وب سایتی را مشاهده می کنید که در وضعیت نیاز به بهبود قرار دارد:

پس از رفع مشکل و اطمینان از این مساله می توانید همانند تصویر زیر از طریق گزینه START NEW VALIDATION اقدام به درخواست بازبینی مجدد نمایید:

اگر چنانچه سوال یا ابهامی دارید آن را در بخش نظرات مطرح نمایید تا به آنها پاسخ داده شود.