Core Web Vitals؛ راهنمای کامل برای فرانت‌اند کارها

مقدمه

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

Core Web Vitals چیست؟

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

چرا اهمیت دارد؟

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

سه معیار اصلی

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

بزرگ‌ترین محتوای قابل مشاهده

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

اولین تأخیر ورودی

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

تغییر چیدمان تجمعی

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

معیارهای تکمیلی

علاوه بر سه معیار اصلی، معیارهای دیگری هم وجود دارند مثل زمان پاسخ سرور، زمان بارگذاری کامل صفحه و اندازه منابع که اینها جزو Core Web Vitals اصلی نیستند اما می‌توانند به تشخیص مشکلات کمک کنند. بهتر است همه آن‌ها را در پنل‌های تحلیلی زیر نظر داشته باشیم، چون گاهی یک مشکل در معیارهای تکمیلی به مشکل اصلی منجر می‌شود و اگر آن را نادیده بگیریم، ممکن است بعداً به مشکل بزرگ‌تری تبدیل شود. این معیارها به شما دید بهتری می‌دهند که چرا معیارهای اصلی خوب یا بد هستند و کدام بخش از زیرساخت نیاز به توجه بیشتر دارد.

چطور اندازه‌گیری کنیم؟

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

ابزارهای رایگان

ابزارهای رایگان زیادی برای سنجش این معیارها وجود دارد و ابزار PageSpeed Insights گوگل هم داده میدانی و هم آزمایشگاهی می‌دهد که ترکیب هر دو در یک گزارش بسیار مفید است. کنسول توسعه‌دهنده مرورگر بخشی برای عملکرد دارد که می‌توانید بلافاصله مشکلات را ببینید و ابزار Lighthouse گزارش کاملی از مشکلات و پیشنهادهای بهبود ارائه می‌دهد. سرویس‌های آنالیز وب هم می‌توانند داده واقعی کاربران را نشان دهند و استفاده منظم از این ابزارها باعث می‌شود مشکلات زودتر پیدا شوند، پس پیشنهاد می‌کنم یکی از این ابزارها را به بخشی از روتین کاری خودتان تبدیل کنید.

چطور بهبود دهیم؟

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

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

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

بارگذاری تنبل

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

پیش‌بارگذاری منابع مهم

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

کاهش جاوااسکریپت

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

پایداری بصری

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

فونت‌ها

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

تبلیغات و جای‌گذاری‌ها

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

نقش فرانت‌اند کار

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

همکاری با بک‌اند

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

فرهنگ عملکرد

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

جمع‌بندی

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