Core Web Vitals و INP در ۲۰۲۶: راهنمای کامل برای طراحان سایت

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

سه تا شاخص اصلی که گوگل ازشون استفاده می کنه

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

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

سومیش CLS هست، Cumulative Layout Shift. این یکی اون لحظاتی رو می گیره که می خواین یه چیزی رو بزنید ولی ناگهان یه چیز دیگه جاش رو می گیره و شما اشتباهی جای دیگه کلیک می کنید. امتیاز خوب زیر ۰.۱ هست.

چرا این شاخص ها رو جدی بگیریم؟

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

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

چطوری بهشون رسیدگی کنیم؟

برای بهبود LCP، اول باید سرعت سرورتون رو چک کنید. بعدش نگاه کنید تصاویرتون چقدر سنگین ان. فرمت هایی مثل WebP خیلی کمک می کنن. استفاده از CDN هم تفاوت محسوسی می سازه. اگه یه تصویر بزرگ دارید که اول صفحه نمایش داده میشه، حتماً بهینه اش کنید. کدهای CSS و JavaScript که رندر رو مسدود می کنن هم باید بررسی بشن.

برای FID، باید کدهای جاوااسکریپت رو سبک تر کنید. اگه اسکریپت های سنگین دارید، تقسیمشون کنید یا به تأخیر بندازید. پلاگین ها و کدهای شخص ثالث غیرضروری رو حذف کنید. CLS هم معمولاً از تصاویر بدون سایز مشخص یا فونت هایی که دیر لود میشن میاد. اگه برای هر تصویر width و height تعیین کنید، خیلی از مشکلات حل میشه. فونت ها رو هم پیش بارگذاری کنید یا از فونت های سیستمی استفاده کنید.

پیشنهاد مطالعه: ترتیب یادگیری زبان های برنامه نویسی برای طراحی وب

ابزارهایی که بهتون کمک می کنن

گوگل یه سری ابزار مفت داره که دقیقاً همین معیارها رو می سنجن. PageSpeed Insights، Search Console، Lighthouse. هر کدوم زاویه ای رو نشون میدن. بعضی ها داده های واقعی کاربرا رو نشون میدن، بعضی ها شرایط آزمایشگاهی. بهتره هر چند وقت یه بار چک کنید ببینید کجا عقب موندید. این کار یه بار انجام نمیشه و تموم نمیشه، باید پیگیر باشید.

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

معرفی شاخص INP و تفاوت آن با FID

تعریف شاخص INP و نحوه اندازه گیری آن

INP یا Interaction to Next Paint یه معیاره که می سنجه کل صفحه چقدر به تعاملات کاربر جواب میده. نه فقط اولین کلیک، بلکه همه شون. هر بار که کسی روی یه دکمه کلیک می کنه، یه کلید رو فشار میده، یا روی صفحه لمسی انگشت می کشه، INP داره نگاه می کنه که چقدر طول میکشه تا تغییر بعدی روی صفحه نمایش داده بشه. این شاخص طولانی ترین تاخیر رو گزارش میده، نه میانگین.

عدد خوب برای INP زیر ۲۰۰ میلی ثانیه ست. بالای ۵۰۰ میلی ثانیه یعنی مشکل جدی. این عدد فاصله زمانی بین لحظه ای که کاربر کاری انجام میده تا لحظه ای که مرورگر واکنش بصری نشون میده رو نشون میده. برای سایت هایی که خیلی پویا هستن یا اپلیکیشن های تحت وب، این شاخص خیلی مهم تر از چیزی هست که قبلاً داشتیم.

شاخص FID و محدودیت های آن در ارزیابی تعاملات

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

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

تفاوت های کلیدی بین INP و FID

اصلی ترین فرق اینه که FID فقط یه نقطه رو می بینه، INP کل مسیر رو. یکی میگه اولین قدم چطور بود، اون یکی میگه کل راه رو چطور رفتی.

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

راهکارهای بهینه سازی برای بهبود شاخص INP

اگه می خوای INP رو بهتر کنی، باید روی زمان پاسخ دهی جاوا اسکریپت کار کنی. کدهای طولانی رو بشکن به تیکه های کوچیک تر. از Web Workers استفاده کن تا پردازش های سنگین رو به پس زمینه بفرستی. رندرینگ مجدد DOM رو بهینه کن.

کم کردن حجم فایل های جاوا اسکریپت از طریق فشرده سازی و حذف کدهای اضافی هم تاثیر مستقیم داره. lazy loading برای محتوایی که الان لازم نیست، caching درست، این ها همه کمک می کنن. تو دنیای سئو تکنیکال، بهینه سازی Core Web Vitals از جمله INP یعنی رتبه بهتر و نرخ تبدیل بالاتر.

اهمیت انتقال از FID به INP برای استراتژی سئو

از مارس ۲۰۲۴، INP به طور رسمی جای FID رو گرفته. اگه تو سئو یا توسعه وب کار می کنی، باید استراتژی هات رو دوباره نگاه کنی. این تغییر نشون میده که گوگل داره دقیق تر می شه تو سنجش تجربه کاربری.

اگه فقط روی FID کار کرده بودی، ممکنه الان با افت رتبه مواجه بشی. چون INP سخت گیرتره. برای اینکه تو سئوی امروزی موفق باشی، باید مدام عملکرد تعاملی سایت رو با ابزارهایی مثل PageSpeed Insights یا Chrome User Experience Report چک کنی. سرمایه گذاری روی INP فقط رتبه رو بهتر نمی کنه، بلکه کاربر راضی تر میشه، نرخ پرش کم می شه، و در نهایت تبدیل بیشتر اتفاق می افته.

گوگل برای سال ۲۰۲۶ استانداردهای جدیدی را برای Core Web Vitals تعیین کرده که مستقیماً روی رتبه بندی سایت ها اثر می گذارند. این معیارها دیگر فقط توصیه نیستند، بلکه بخشی از الگوریتم رسمی جستجوی گوگل شده اند. اگر قصد دارید سایتتان در نتایج جستجو دیده شود، باید این استانداردها را جدی بگیرید.

استانداردهای ۲۰۲۶ برای Core Web Vitals

Core Web Vitals سه معیار اصلی دارد که هرکدام بخشی از تجربه کاربر را می سنجند. اولی LCP یا Largest Contentful Paint است که سرعت بارگذاری بزرگ ترین بخش محتوا را اندازه می گیرد. دومی INP یا Interaction to Next Paint که جایگزین FID شده و نشان می دهد سایت چقدر سریع به کلیک ها و تعامل های کاربر پاسخ می دهد. سومی CLS یا Cumulative Layout Shift است که می سنجد عناصر صفحه چقدر در حین بارگذاری جابجا می شوند.

این معیارها دیگر صرفاً برای توسعه دهندگان مهم نیستند. هرکسی که سایت دارد یا سئو انجام می دهد باید بداند که این سه عدد می توانند تفاوت بین صفحه اول و صفحه سوم گوگل را رقم بزنند.

پیشنهاد مطالعه: Cumulative Layout Shift چیست؟

تعریف و اهمیت Core Web Vitals در سال ۲۰۲۶

گوگل از سال ها پیش روی تجربه کاربری تأکید داشت، اما از ۲۰۲۶ این موضوع بیشتر از همیشه جدی شده. Core Web Vitals دیگر فقط یک پیشنهاد نیست، بلکه یک سیگنال رتبه بندی مستقیم است. یعنی اگر سایت شما کند باشد یا عناصرش تکان بخورند، ممکن است حتی با محتوای خوب هم رتبه پایینی داشته باشید.

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

آستانه های جدید عملکردی برای ۲۰۲۶

گوگل اعداد دقیقی تعیین کرده که سایت شما باید زیر آن ها باشد. برای LCP، باید زیر ۲.۵ ثانیه باشید. برای INP، کمتر از ۲۰۰ میلی ثانیه. برای CLS هم کمتر از ۰.۱ باید بماند.

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

روش های عملی برای بهبود Core Web Vitals

خبر خوب اینکه بهبود این معیارها شدنی است، فقط باید بدانید از کجا شروع کنید. برای LCP، تصاویرتان را کوچک تر کنید. از فرمت های جدیدتر مثل WebP یا AVIF استفاده کنید. اگر سرور شما کند است، از CDN استفاده کنید تا فایل ها از نزدیک ترین نقطه ارسال شوند.

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

یک نکته ساده اما مؤثر: از lazy loading استفاده کنید. یعنی تصاویری که پایین صفحه هستند فقط وقتی بارگذاری شوند که کاربر به آن قسمت برسد. این کار هم سرعت اولیه را بالا می برد، هم حجم مصرفی را کم می کند.

خطاهای رایج در رعایت استانداردهای جدید

یکی از اشتباهات متداول این است که فقط روی یکی از معیارها تمرکز می کنید. مثلاً LCP را بهبود می دهید، ولی CLS خرابتر می شود. یا اسکریپت ها را کم می کنید تا INP بهتر شود، اما کل قابلیت های سایت از کار می افتد.

یک مشکل دیگر استفاده از فونت های وب بدون تعریف font-display است. این باعث می شود متن تا بارگذاری کامل فونت نمایش داده نشود و کاربر صفحه خالی ببیند. همین یک تنظیم کوچک می تواند LCP را چند دهم ثانیه بهتر کند.

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

پیشگیری و مانیتورینگ مستمر

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

بهتر است یک سیستم مانیتورینگ داشته باشید. Google Search Console به صورت رایگان گزارش می دهد که کدام صفحات مشکل دارند. PageSpeed Insights هم می تواند به شما نشان دهد دقیقاً کجا باید بهبود بدهید.

اگر قرار است تغییر بزرگی در سایت بدهید، قبلش حتماً تست کنید. یک آپدیت ساده می تواند باعث شود LCP از ۲ ثانیه به ۴ ثانیه برسد و متوجه نشوید تا دیر شده باشد.

جمع بندی و چشم انداز آینده

Core Web Vitals دیگر انتخاب نیست، الزام است. اگر می خواهید سایتتان در گوگل دیده شود، باید این معیارها را رعایت کنید. این فقط برای توسعه دهندگان نیست، برای هرکسی که روی سئو کار می کند یا سایت دارد اهمیت دارد.

سرمایه گذاری روی سرعت و تجربه کاربری دیگر صرفاً یک امتیاز اضافه نیست. این تفاوت بین دیده شدن و نادیده گرفته شدن است.

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

ابزارهای اندازه گیری و بهینه سازی عملکرد سایت

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

ابزارهای پیشنهادی گوگل برای سنجش عملکرد

گوگل چند تا ابزار رایگان داره که خیلی به درد می خورن. اولیش PageSpeed Insights هست. این ابزار سایت رو هم روی موبایل و هم روی دسکتاپ تست می کنه و یه نمره بین صفر تا صد بهت میده. البته نمره فقط یه بخش قضیه ست. اون پایین تر یه سری پیشنهاد بهت میده که دقیقاً بگه کجا مشکل داری. مثلاً تصاویر رو بهینه کن، فایل های CSS رو کوچیک کن، از کش استفاده کن. توی همین ابزار می تونی معیارهای Core Web Vitals رو هم ببینی. اون ها شامل LCP، FID و CLS هستن که گوگل خیلی بهشون اهمیت میده.

ابزار دیگه Lighthouse هست. این یکی توی مرورگر کروم تعبیه شده و می تونی مستقیماً ازش استفاده کنی. تحلیلش کاملتره. یعنی علاوه بر عملکرد، دسترسی پذیری، سئو و بهترین شیوه ها رو هم بررسی می کنه. یه امتیاز جداگانه برای هر کدوم میده و اگه جایی مشکل باشه، بهت میگه کجا. Google Search Console هم جای دیگه ایه که می تونی ببینی کدوم صفحات سایت مشکل سرعت دارن یا گوگل تو خزیدنشون به مشکل خورده.

ابزارهای تخصصی شخص ثالث

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

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

پیشنهاد مطالعه: راه حل خطاهای جی تی متریکس

خطاهای رایج در استفاده از ابزارهای سنجش

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

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

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

استراتژی های بهینه سازی بر اساس داده ها

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

استفاده از CDN هم کمک می کنه. یعنی فایل های سایت رو توی چند سرور مختلف توی نقاط مختلف دنیا قرار میدی تا هر کاربر از نزدیک ترین سرور دانلود کنه. کاهش درخواست های HTTP هم مهمه. مثلاً اگه ده تا فایل CSS داری، می تونی اون ها رو یکی کنی. بارگذاری تنبل یا Lazy Loading هم یکی از تکنیک های خوبه. یعنی تصاویری که پایین صفحه ان و کاربر هنوز بهشون نرسیده، بارگذاری نمی شن تا وقتی کاربر اسکرول کنه.

سرور هم مهمه. یه سرور با پاسخگویی بالا می تونه تفاوت زیادی بسازه. پایش مستمر سایت هم لازمه. ابزارهایی مثل Uptime Robot بهت اطلاع میدن اگه سایت افتاد یا کُند شد.

جمع بندی و توصیه های عملی

بهینه سازی سایت یه کار یک باره نیست. باید مرتب چک کنی، ببینی چی تغییر کرده، الگوریتم گوگل چی شده. از چند تا ابزار استفاده کن، نه فقط یکی. هر کدوم یه زاویه متفاوت نشون میدن. اولویت بندی کن. یعنی اول روی مشکلاتی کار کن که بیشترین تأثیر رو دارن. با این کار می تونی سایتی بسازی که هم کاربرا دوستش دارن، هم گوگل.

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

راهکارهای عملی بهبود INP برای طراحان

کاهش زمان اجرای جاوا اسکریپت

یکی از دلایل اصلی کندی سایت ها، جاوا اسکریپت های سنگین و طولانی است. خیلی وقت ها کدهایی توی پروژه می مونن که دیگه استفاده ای ازشون نمی شه اما همچنان اجرا می شن. اولین کار این است که کدهای اضافی و بلااستفاده رو پیدا کنید و حذفشون کنید. بعدش می تونید از تکنیکی به اسم code splitting استفاده کنید، یعنی به جای اینکه همه کدها یک جا بارگذاری بشن، فقط بخش هایی که الان لازمه اجرا بشن. استفاده از async یا defer هم کمک می کنه که اسکریپت ها مانع نمایش صفحه نشن. حلقه هایی که زیادی سنگین هستن یا بارها عناصر DOM رو تغییر می دن هم بهتره بهینه بشن.

بهینه سازی رویدادهای کاربری

هر بار که کاربر کلیک می کنه، اسکرول می کنه یا چیزی تایپ می کنه، یک رویداد اجرا می شه. حالا اگر توی هر کلیک یا حرکت موس کلی کد سنگین اجرا بشه، طبیعتاً سایت کند می شه. تکنیک هایی مثل debouncing یا throttling می تونن تعداد دفعات اجرای تابع رو محدود کنن. به جای اینکه برای هر عنصر یک listener جدا تعریف کنید، از event delegation استفاده کنید که حافظه کمتری مصرف می کنه. اگر کاری سنگین دارید، ترجیحاً اون رو به Web Workers منتقل کنید تا نخ اصلی مرورگر آزاد بمونه.

کاهش تغییرات غیرمنتظره در Layout

همه مون تجربه کردیم که داریم یک چیزی رو می خونیم، یه دفعه محتوا می پره بالا یا پایین و کلیک اشتباهی می زنیم. این اتفاق وقتی می افته که برای تصاویر یا المان ها سایز مشخصی تعریف نشده باشه. بهتره همیشه برای تصاویر، ویدئوها و حتی تبلیغات، عرض و ارتفاع مشخصی بذارید. استفاده از aspect-ratio توی CSS یا font-display برای فونت ها هم جلوی جابجایی رو می گیره. اگر محتوایی به صورت داینامیک لود می شه، یک placeholder مناسب براش بذارید تا کاربر بدونه اون قسمت در حال بارگذاریه.

استفاده از ابزارهای نظارت و تست

نمی شه بهبودی رو که نمی بینیم رصد کرد. برای همین استفاده از ابزارهایی مثل Google PageSpeed Insights یا Chrome DevTools خیلی کمک می کنه. این ابزارها دقیقاً بهتون می گن کدوم بخش سایت مشکل داره. تست کردن سایت با سرعت های مختلف اینترنت هم اهمیت داره، چون همه کاربرها اینترنت پرسرعت ندارن. اگه بخواید یک قدم جلوتر برید، می تونید از Real User Monitoring استفاده کنید که داده های واقعی از تجربه کاربران رو بهتون نشون می ده. این کار کمک می کنه مشکلات مخصوص به یک دستگاه یا مرورگر خاص رو هم شناسایی کنید.

بهینه سازی کتابخانه های شخص ثالث

خیلی از سایت ها از کتابخانه ها یا اسکریپت های خارجی استفاده می کنن، مثلاً برای آنالیتیکس، چت آنلاین یا تبلیغات. مشکل اینجاست که این اسکریپت ها معمولاً سنگین هستن و روی INP تاثیر مستقیم می ذارن. اول اینکه ببینید واقعاً به همه این کتابخانه ها نیاز دارید یا نه. بعدش سعی کنید از نسخه های سبک تر استفاده کنید یا lazy loading رو فعال کنید تا این اسکریپت ها بعداً و در صورت نیاز بارگذاری بشن. گاهی هم می شه از قابلیت های native مرورگر استفاده کرد و اصلاً به کتابخانه خارجی نیاز نباشه. استفاده از CDN و cache کردن صحیح منابع هم خیلی به سرعت بارگذاری کمک می کنه.

جمع بندی و توصیه های نهایی مقاله

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

ما را در اینستاگرام و تلگرام دنبال کنید.