کور وب ویتال یا همان Core Web Vitals مجموعهای از معیارهای کلیدی است که گوگل برای سنجش و بهبود تجربه کاربری صفحات وب معرفی کرده است. برای داشتن امتیاز بالا در گوگل، لازم است که به بهینه سازی Core Web Vitals سایت پرداخته شود.
گوگل از تعدادی از سیگنالهای رتبهبندی برای اندازهگیری و ارزیابی وبسایتها استفاده میکند. از مهمترین و جدیدترین معیارهای تجربه کاربری (Page Experience) میتوان به Core Web Vitals اشاره کرد.اگر وبسایت خود را برای این معیارها بهینه سازی نکنید، ممکن است به سئو (SEO) و تجربه کلی کاربری (UX) وبسایت خود را آسیب وارد کنید.
خبر خوب این است که پس از درک ماهیت Core Web Vitals و نحوه اندازهگیری آنها، میتوانید اقدامات مؤثری برای بهبودشان انجام دهید. این کار میتواند به شما اطمینان دهد که تجربهای کارآمد برای کاربران خود فراهم میکنید و با رعایت استانداردهای گوگل، میزان دیده شدن وبسایت خود را در نتایج جستجو افزایش میدهید.
با 8 راهکار اساسی برای بهینه سازی Core Web Vitals که به بهبود سرعت، تعاملپذیری و ثبات صفحات وب کمک میکنند، با ما همراه باشید.
معرفی Core Web Vitals
Core Web Vitals مجموعهای از شاخصهای کلیدی عملکرد هستند که گوگل از آنها برای اندازهگیری سلامت و پویایی وبسایتها استفاده میکند. به تصویر زیر دقت نمایید.
این معیارها، سیگنالهای تجربه کاربری هستند که برای ارزیابی تجربه کاربری وبسایت شما، از جمله سرعت تعامل کاربران با آن، مورد استفاده قرار میگیرند.
به عنوان مثال، سرعت سایت اهمیت زیادی دارد، زیرا بارگذاری کُند صفحات میتواند منجر به کاهش نرخ تعامل و افزایش نرخ پرش (بازدید کنندگانی که بدون انجام کار خاصی، سایت را ترک میکنند) شود.
این امر میتواند به رتبهبندی وبسایت شما در نتایج جستجو و در نهایت موفقیت کلی کسب و کارتان آسیب برساند.
چرا بهینه سازی Core Web Vitals مهم است؟
بهینه سازی Core Web Vitals میتواند به بهبود نتایج جستجوی شما کمک کند. اهمیت آنها به این دلیل است که به گوگل کمک میکنند تا عملکرد یک وبسایت را به خوبی درک کند و زمینههایی را که جای بهبود دارد، شناسایی نماید.
این معیارها به طور خاص موارد زیر را در نظر میگیرند:
سرعت بارگذاری
تعامل
ثبات بصری
این موارد تنها چند فاکتور از معیارهای متعددی هستند که گوگل در الگوریتمهای خود برای سنجش سلامت یک وبسایت در نظر میگیرد. همچنین، گوگل قابلیت نمایش وبسایت برای دستگاههای موبایل (mobile-friendliness) را نیز در نظر میگیرد.
این موضوع از آن جهت اهمیت دارد که امروزه افراد بیشتری از طریق دستگاههای تلفن همراه خود به وب دسترسی پیدا میکنند. اگر وبسایت شما برای دستگاههای موبایل بهینه نباشد، ممکن است بخش زیادی از ترافیک و کسب و کار خود را از دست بدهید.
بررسی سرعت سایت در موبایل – ابزارهای تست سرعت در موبایل
یکی دیگر از جنبههای کلیدی، امنیت وبسایت این است که به شما در حفاظت از سایت در برابر تهدیدات آنلاین مانند بدافزار (malware) و هک شدن کمک میکند. امنیت وبسایت به ایمنسازی محتوای سایت و همچنین دادههای کاربران شما کمک میکند.
خدمات افزایش امنیت وردپرس
خدمات پاکسازی سایت ویروسی
با اطمینان از اینکه وبسایت شما این استانداردها را رعایت میکند، میتوانید به بهبود عملکرد آن کمک کرده و رتبه بالاتری در نتایج جستجو کسب کنید. به عبارت دیگر، اولویت دادن و بهینهسازی Core Web Vitals میتواند به ارتقاء تجربه کاربری (UX) و سئو (SEO) شما کمک کند. یک بازی برد-برد!
Core Web Vitals چگونه کار می کند؟
Core Web Vitals زیرمجموعه ای از فاکتورهای موثر بر امتیاز “تجربه کاربری صفحه” (Page Experience) گوگل هستند. این امتیاز که در سال 2021 معرفی شد، یکی از سیگنال های رتبه بندی در نتایج جستجو به شمار می رود.
بیایید نگاهی دقیق تر به سه معیار خاص تشکیل دهنده Core Web Vitals داشته باشیم:
بزرگترین ترسیم محتوایی (Largest Contentful Paint – LCP): این معیار مدت زمان نمایش محتوای اصلی به بازدیدکنندگان را در نظر می گیرد. به عبارت دیگر، LCP سرعت بارگذاری بزرگترین عناصر مانند تصاویر و ویدیوها را اندازه گیری می کند.
تاخیر در اولین تعامل (First Input Delay – FID): این معیار زمان مورد نیاز برای شروع پردازش رویدادها توسط مرورگر کاربر در پاسخ به تعامل آنها را تجزیه و تحلیل می کند. به بیان ساده، FID میزان پاسخگویی صفحات وب شما را در اولین تعامل کاربران با آن ها اندازه گیری می کند.
تغییر چیدمان تجمعی (Cumulative Layout Shift – CLS): این معیار زمان رسیدن صفحه وب شما به ثبات بصری را اندازه گیری می کند. همه عناصر سایت شما به طور همزمان بارگذاری نمی شوند و برخی از آنها ممکن است در طول فرآیند بارگذاری جابجا شوند. CLS ارزیابی می کند که آیا عناصر روی صفحه وجود دارند که باعث ایجاد وقفه یا جلوگیری از دسترسی کاربران به محتوا شوند.
علاوه بر موارد فوق، معیار دیگری به نام (First Contentful Paint – FCP) نیز وجود دارد که کمتر مورد بحث قرار می گیرد. FCP مدت زمانی را که مرورگر برای نمایش اولین قطعه محتوا (مانند تصویر) در یک صفحه وب نیاز دارد، اندازه گیری می کند.
چگونه Core Web Vitals را اندازه گیری کنیم
قبل از اینکه بر روی بهینه سازی Core Web Vitals خود کار کنید، ایده خوبی است که از وضعیت فعلی سایت خود مطلع شوید. به این ترتیب، قادر خواهید بود پیشرفت خود را اندازه گیری کنید. ارزیابی منظم امتیاز شما می تواند بخش ارزشمندی از نگهداری وب سایت شما باشد.
حالا بیایید به چند روش مختلف برای سنجش عملکرد وب سایت شما نگاهی بیاندازیم.
ابزار PageSpeed Insights
برای اندازهگیری Core Web Vitals چندین ابزار آنلاین وجود دارد، از جمله Pingdom و GTmetrix. با این حال، توصیه میکنیم از Google PageSpeed Insights استفاده کنید.
برای شروع، میتوانید URL وبسایت خود را وارد کرده و سپس روی دکمه «تجزیه و تحلیل» (Analyze) کلیک کنید. پس از اتمام تحلیل سایت شما، این ابزار رایگان عملکرد کلی سایت شما را درجهبندی میکند. سپس خلاصهای از برخی دادههای کلیدی و معیارهای Core Web Vitals را ارائه میدهد:
نتایج را میتوانید در بخش «معیارها» (Metrics) پیدا کنید. به عنوان یک قاعده کلی، بهتر است به امتیازهای زیر دست پیدا کنید:
LCP به میزان 2.5 ثانیه
FID کمتر از 100 میلیثانیه
CLS کمتر از 0.1 ثانیه
توجه داشته باشید که میتوانید هر دو نسخه موبایل و دسکتاپ وبسایت خود را آزمایش کنید. PageSpeed Insights همچنین به شما امکان تجزیه و تحلیل تک تک صفحات سایت شما را میدهد. برای انجام این کار، میتوانید تب «منبع» (Origin) را انتخاب کنید.
در صفحه نتایج، همچنین برخی عیبیابیها و پیشنهادات برای بهبود را مشاهده خواهید کرد. PageSpeed Insights بر اساس امتیاز سایت شما، چندین توصیه ارائه میدهد که میتوانید برای افزایش امتیاز و بهبود عملکرد سایت خود از آنها استفاده کنید.
گزارش تجربه کاربری کاربران کروم (Chrome User Experience Report)
همچنین می توانید از طریق گزارش تجربه کاربری کاربران کروم (Chrome User Experience Report) به Core Web Vitals خود دسترسی پیدا کنید تا بتوانید به بهینه سازی Core Web Vitals بپردازید. این گزارش به ویژه برای توسعه دهندگان و وبمسترها مفید است.
این گزارش از طریق کنسول جستجوی گوگل در دسترس است و داده های واقعی و تجربیات بازدیدکنندگان شما را ارائه می دهد. این گزارش به شما کمک می کند تا نحوه استفاده کاربران از وب و تعامل آنها با سایت خود را درک کنید.
برای مشاهده آن، باید به داشبورد کنسول جستجوی گوگل خود مراجعه کنید. سپس به بخش Core Web Vitals که در زیر بخش Experience قرار دارد، بروید.
افزونه (Extension) گوگل کروم برای بررسی Core Web Vitals
اگر از مرورگر گوگل کروم استفاده میکنید، یکی دیگر از ابزارهای مفید برای ارزیابی Core Web Vitals شما، افزونه Web Vitals Chrome است.
این افزونه ابزاری است که به شما در تجزیه و تحلیل سرعت و عملکرد وب سایت شما کمک می کند. این افزونه اطلاعاتی در مورد عملکرد وب سایت شما، از جمله زمان بارگذاری صفحه، اندازه صفحه و درخواست های انجام شده ارائه می دهد. همچنین پیشنهاداتی برای بهبود عملکرد وب سایت شما ارائه می دهد.
از این افزونه می توانید برای تست سرعت و عملکرد هر وب سایتی، نه فقط وب سایت خودتان، استفاده کنید. برای انجام این کار، به سادگی افزونه را نصب کنید و وب سایتی را که می خواهید آزمایش کنید را باز کنید. این افزونه به طور خودکار شروع به ردیابی عملکرد وب سایت می کند.
نتایج به صورت یک گزارش آسان برای خواندن ارائه می شود:
در بخش بررسی (audit)، میتوانید به طور خودکار امتیازهای LCP، CLS و FID را مشاهده کنید. این کار در صورتی که قصد دارید این امتیازها را به طور مکرر بررسی کنید، مفید است، زیرا می توانید آن را بدون باز کردن تب دیگری اجرا کنید.
بهینه سازی Core Web Vitals (هشت راهکار)
حالا که درک کردیم Core Web Vitals چیست و چگونه کار می کند، زمان آن رسیده است که به برخی از بهترین شیوه ها برای بهینه سازی Core Web Vitals نگاهی بیندازیم. به خاطر داشته باشید که اقدامات خاصی که برای بهبود امتیاز خود باید انجام دهید، به نتایج آزمایش شما بستگی دارد.
بنابراین، مهم است که پیشنهادات و توصیه های ارائه شده توسط PageSpeed Insights (یا سایر ابزارهای آزمایشی که استفاده می کنید) را نیز در نظر بگیرید.
خدمات افزایش سرعت سایت و بهینه سازی سرعت سایت به جهت بهینه سازی Core Web Vitals و افزایش سرعت لود سایت بصورت تخصصی در امنیت من ارائه می شود. در صورتیکه تمایل دارید بهینه سازی Core Web Vitals توسط ما انجام شود، خدمات سرعت را مشاهده نمایید.
در ادامه بهینه سازی Core Web Vitals با 8 راهکار اساسی را آموزش داده ایم.
1- پیاده سازی راهکار کش (Caching)
کش کردن محتوای شما می تواند به کاهش بار روی سرور شما کمک کند. یک ابزار کش، نسخه های HTML ایستا از صفحات شما را ذخیره می کند و دیگر نیازی نیست هر بار که بازدیدکننده ای به سایت شما دسترسی پیدا می کند، این صفحات لود شوند.
بسته به هاست وب خود، ممکن است بتوانید از قابلیت کش در سطح سرور استفاده کنید. با این حال، به عنوان یک کاربر وردپرس، همچنین تعدادی افزونه کش برای انتخاب وجود دارد. یکی از محبوب ترین گزینه ها W3 Total Cache است.
این افزونه رایگان وردپرس می تواند با افزایش عملکرد، زمان بارگذاری صفحه در وب سایت شما را کاهش دهد. این افزونه امکان کش کردن صفحات و نوشته ها، CSS و جاوا اسکریپت، اشیاء پایگاه داده و موارد دیگر را فراهم می کند.
برخی دیگر از افزونه های رایگان عبارتند از:
WP Fastest Cache
LiteSpeed Cache
WP-Optimize
در بهترین افزونه افزایش سرعت وردپرس، به بررسی همه افزونه های کش وردپرس پرداخته ایم.
اما اگر به دنبال یک ابزار کشینگ قدرتمند و همه کاره هستید، ممکن است WP Rocket را در نظر بگیرید.
پیاده سازی یک راهکار کشینگ با افزونه غیر رایگان مانند افزونه راکت، می تواند به طور خاص برای بهبود امتیاز FID شما مفید باشد. به عنوان مثال، WP Rocket دارای ویژگی ای است که به شما امکان می دهد به راحتی تحویل فایل را بهینه کنید.
همچنین شامل چندین ویژگی دیگر است که می تواند به افزایش امتیاز و بهینه سازی Core Web Vitals کمک کند، که در بخش های بعدی به آنها خواهیم پرداخت.
2 – حذف منابع مسدودکننده رندر (Render-Blocking Resources)
عناصر مسدودکننده رندر (Render-blocking) به فایلهای استاتیک HTML، CSS و جاوا اسکریپت مورد نیاز برای نمایش یک صفحه در سایت شما اشاره دارند. هر یک از این فایلها حاوی اسکریپتهایی هستند که میتوانند کاربران شما را از مشاهده محتوا باز دارند. این اسکریپتها معمولا توسط افزونهها و ابزارهای جانبی شخص ثالث مانند Google Analytics ایجاد میشوند.
با این حال، یک راه برای جلوگیری از آسیب رساندن این اسکریپتها به تجربه کاربری (UX) شما (و در نتیجه، کمک به بهینه سازی Core Web Vitals) حذف منابع مسدودکننده رندر و کوچکسازی و حذف هر CSS یا اسکریپت بلااستفاده است.
برای انجام این کار میتوانید از تکنیکهای مختلفی استفاده کنید. یکی از این روشها کوچکسازی کد جاوا اسکریپت و CSS شما با حذف هرگونه فضای خالی یا کامنتهای غیر ضروری است.
میتوانید از ابزاری مانند CSS Minifier برای آسانتر کردن این کار استفاده کنید.
سایت CSS Minifier
این ابزار رایگان است و به راحتی میتوانید کد CSS خود را وارد کرده و دکمه Minify را انتخاب کنید. سپس، میتوانید خروجی را برای دانلود و جایگزینی کد خود کپی و جایگذاری کنید.
روش دیگر، متراکم کردن جاوا اسکریپت و CSS شما با ترکیب فایلها است. این کار دیگری است که ویژگی بهینهسازی فایل در افزونه WP Rocket میتواند به آن کمک کند.
3 – بارگذاری جاوا اسکریپت را به تعویق بیندازید (Defer Loading of JavaScript)
اگر به دنبال افزایش امتیاز FID خود هستید تا به بهینه سازی Core Web Vitals کمک کنید، میتوانید از تکنیکی به نام تعویق بارگذاری جاوا اسکریپت استفاده کنید. این روش دیگری برای حذف عناصر مسدودکننده رندر (Render-Blocking) است.
این فرآیند باعث بارگذاری سریعتر صفحات وب شما می شود زیرا بارگذاری جاوا اسکریپت را به تعویق می اندازد. به عبارت دیگر، با رسیدن بازدیدکننده، محتوای دیگری را در صفحه بارگذاری می کند، به جای اینکه منتظر بارگذاری کامل همه فایل های جاوا اسکریپت بماند. فایل های شما مجبور خواهند بود منتظر بمانند تا سایر موارد موجود در صفحه وب شما آماده شوند.
همچنین، میتوانید تنظیمات سایت خود را به گونهای پیکربندی کنید که CSS حیاتی، محتوای «بالای تاخوردگی» (Above the Fold) را سریعتر بارگذاری کند. «بالای تاخوردگی» به عناصر صفحه وب اشاره دارد که ابتدا ظاهر می شوند.
میتوانید این کار را با خارج کردن محتوا از فایل اصلی CSS و قرار دادن آن درون کد خود انجام دهید. این به بارگذاری سریعتر آن کمک می کند و در نتیجه تجربه کاربری (UX) را بهبود می بخشد. برخی از افزونههای کش مانند WP Rocket یک ویژگی بهینهسازی تحویل CSS را ارائه میدهند که میتواند برای این کار مفید باشد.
4 – استفاده از یک شبکه توزیع محتوا (CDN)
یک شبکه توزیع محتوا (Content Delivery Network – CDN) شبکهای از سرورها در سراسر جهان است که میتوانید برای ذخیرهسازی محتوای خود از آن استفاده کنید. این بدان معنی است که محتوای سایت شما برای بازدیدکنندگان از نزدیکترین سرورها به آنها ارائه میشود. این میتواند به افزایش سرعت بارگذاری کمک کند.
استفاده از CDN میتواند زمان LCP را برای کاربران شما تسریع کند. همچنین میتواند به حداقل رساندن زمان رسیدن به اولین بایت (Time To First Byte – TTFB) کمک کند. ابزارهای شخص ثالث زیادی وجود دارند که میتوانید برای سایت وردپرس خود از آنها استفاده کنید.
یکی از محبوبترین گزینهها برای استفاده از شبکه توزیع محتوا CDN، کلودفلر یا Cloudflare است. سرویس های ایرانی قدرتمندی هم برای شبکه توزیع محتوا CDN وجود دارد که عبارت است از: ابرآروان – شبکه توزیع محتوا آسیاتک – شبکه توزیع محتوا (CDN) پارسپک و …
مشابه با کش، برخی از ارائه دهندگان هاستینگ، راهحلهای CDN را در پلنهای خود ارائه میدهند. توصیه میکنیم قبل از اینکه خودتان یک CDN راهاندازی کنید، با هاست وب خود برای ارزیابی اینکه کدام یک از پیشنهادات (در صورت وجود) با پلنهای آنها یکپارچه شده است، بررسی کنید.
5 – اندازه و بهینه سازی صحیح تصاویر
یکی دیگر از راههای افزایش امتیاز LCP و بهینه سازی Core Web Vitals، بهینهسازی و فشردهسازی تصاویر برای کاهش اندازه فایل است. ابزارهای فشردهسازی تصویر به شما امکان میدهند بدون نگرانی در مورد افت کیفیت، اندازه فایل را به طور قابل توجهی کاهش دهید.
همچنین افزونههای بهینهسازی تصویر دیگری که میتوانید استفاده کنید عبارتند از:
ShortPixel
EWWW Image Optimizer
Imagify
Smush
همچنین میتوانید تصاویر خود را با اطمینان از داشتن اندازه و ابعاد مناسب بهینه کنید. هنگامی که تصاویر را از ویرایشگر وردپرس آپلود میکنید، سیستم مدیریت محتوا (CMS) به طور خودکار ابعاد را برای شما اختصاص میدهد.
با این حال، اگر به صورت دستی تصاویر را از طریق کد اضافه میکنید، مهم است مطمئن شوید که ابعاد را برای تعیین فضای این عناصر تعریف میکنید. هرچه تصاویر بزرگتر باشند، اندازه فایل نیز بزرگتر میشود.
بنابراین، عاقلانه است که مطمئن شوید برای قسمت های خاصی در سایت خود از ابعاد تصویر غیرضروری استفاده نمیکنید. افزودن ویژگیهای صحیح میتواند به مرورگر شما کمک کند تا فضای مناسب را برای عناصر صفحه شما اختصاص دهد، که میتواند به حداقل رساندن تغییرات چیدمان کمک کند.
میتوانید با ویرایش کد، عرض و ارتفاع تصاویر و ویدیوها را در وبسایت خود تنظیم کنید. برای مشاهده این ویژگیها، میتوانید از نمای ظاهری سایت خود روی تصویر راست کلیک کرده و سپس «بازرسی» (Inspect) را انتخاب کنید. این کار پنل ابزارهای توسعهدهنده را باز میکند. در اینجا میتوانید ببینید که آیا اندازههای مناسب اختصاص داده شده است یا خیر.
6 – پیاده سازی Lazy Loading
همچنین توصیه میکنیم از (lazy loading) استفاده کنید. این کار به این معنی است که تصاویر شما دقیقاً زمانی که کاربران به آن بخش از صفحه وب میرسند، بارگیری میشوند، نه اینکه همزمان با سایر عناصر صفحه بارگذاری شوند.
این نوع بارگذاری تصاویر میتواند به بهبود امتیاز LCP و سرعت بارگذاری شما کمک کند. بسیاری از افزونههای بهینهسازی تصویر وردپرس، مانند Smush، دارای ویژگیهای lazy loading داخلی هستند.
7 – بهینه سازی فونت های وب سایت شما
همانطور که در مورد تصاویر صادق است، فونتهایی که در وبسایت خود استفاده میکنید نیز میتوانند بر زمان بارگذاری آن تأثیر بگذارند. این به این دلیل است که مرورگر نیاز به دانلود و بارگذاری کل خانواده فونت، از جمله هر ترکیبی از وزنهای آن را دارد.
بهینهسازی فونتهای وب میتواند به بهبود عملکرد وبسایت شما کمک کند. این به این دلیل است که فونتهای وب بهینهسازی شده، اندازه فایل کوچکتری دارند و سریعتر ارائه میشوند.
همچنین، ممکن است یک مرورگر به طور خودکار عناصر متنی را رندر نکند، اگر فونت وب مرتبط با آن هنوز بارگذاری نشده باشد. از طرف دیگر، استفاده از فونتهای جایگزین (fallback fonts) ممکن است باعث جابجاییهای چیدمان شود و به امتیاز CLS شما آسیب برساند.
ما توصیه میکنیم در انتخاب فونتهایی که در سایت خود استفاده میکنید، گزینشی عمل کنید. اگر از بیش از دو فونت استفاده میکنید، بهتر است آنها را از عناصر خاص حذف کنید و از فونتهای جهانی فقط برای اعمال انواع و وزنهای مورد نیاز استفاده کنید. این کار اطمینان میدهد که فقط فونتهای مورد نیاز برای متن دانلود شوند.
8 – ارتقاء یا انتخاب هاستینگ مناسب
اگر سایت شما به طور خاصی کند است، ممکن است به این معنی باشد که زمان ارتقاء هاستینگ وب شما فرا رسیده است. برای مثال، تغییر از هاستینگ اشتراکی به یک سرور اختصاصی میتواند راهی عالی برای بهبود LCP شما باشد.
ارائهدهنده هاستینگ وردپرس شما نقش محوری در عملکرد سایت شما ایفا میکند. این بر همه چیز، از سرعت صفحه تا امنیت تأثیر میگذارد. بنابراین، به خصوص اگر یک وبسایت بزرگ یا پیچیده دارید، این بخش یکی از بخشهایی نیست که توصیه میکنیم روی آن صرفهجویی کنید.
افزایش امنیت هاست
برعکس، ارتقاء ارائهدهنده یا پلن هاستینگ شما یکی از سریعترین و قدرتمندترین راهها برای بهینهسازی وبسایت و بهبود زمان بارگذاری است.
پیشنهاد میکنیم یک هاست مدیریتشده انتخاب کنید که سرورهایی بهطور خاص برای وردپرس بهینهسازی شده داشته باشد و بتواند جنبههای فنی زیادی از عملکرد سایت را مدیریت کند.
در نهایت بهینه سازی Core Web Vitals تجربه کاربری خوب دارید
بهبود مستمر تجربه کاربری، بهینه سازی Core Web Vitals و تجربه کاربری بخش اساسی از حفظ یک وب سایت موفق است. و با کمک ابزارها و افزونه های مفیدی که امروزه در دسترس هستند، این کار می تواند بسیار آسان تر از روش های سنتی باشد.