سلام رفقای گل! امروز اومدیم با "سه غول مرحله آخر" گوگل!
تا حالا شده وارد یه سایت بشید و همین که خواستید روی یه دکمه کلیک کنید، یهو یه تبلیغ لود بشه و همه چی جابجا بشه و شما اشتباهی روی یه چیز دیگه کلیک کنید؟ روی اعصابه، نه؟ گوگل به این اتفاقات میگه Core Web Vitals یا همون "معیارهای حیاتی وب".
من آقا کوچولو هستم و امروز میخوام یادتون بدم چطوری سایتتون رو طوری بسازید که هم کاربر کیف کنه و هم گوگل بهتون مدال افتخار (رتبه ۱) بده. ما توی مطالب قبلی درباره سرعت سایت صحبت کردیم، اما این بحث یه پله فراتر از سرعته؛ این درباره "کیفیتِ سرعت" هست!
۱. معیار LCP: بزرگترین محتوا کی ظاهر میشه؟
LCP یا Largest Contentful Paint سادهاش اینه: چقدر طول میکشه تا اون عکس اصلی یا تیتر بزرگ سایت شما کاملاً لود بشه؟ گوگل میگه اگه این زمان زیر ۲.۵ ثانیه باشه، شما عالی هستید!
- چطوری خوبش کنیم؟ از هاست قوی استفاده کنید، عکسها رو با فرمت WebP آپلود کنید و حتماً از ترفند Lazy Load که قبلاً یادتون دادم استفاده کنید.
۲. معیار FID (یا INP جدید): چقدر زود جواب میدی؟
FID یا تأخیر ورودی یعنی وقتی کاربر روی یه دکمه کلیک میکنه، چقدر طول میکشه تا سایت عکسالعمل نشون بده؟ اگه کاربر کلیک کنه و سایت ۲ ثانیه "هنگ" باشه، یعنی امتیاز شما داغونه! گوگل دوست داره این زمان زیر ۱۰۰ میلیثانیه باشه.
- راه حل آقا کوچولو: کدهای سنگین جاوااسکریپت رو تا حد امکان کم کنید و پلاگینهای اضافی رو که توی راهنمای انتخاب افزونه گفتیم، حذف کنید تا مرورگر نفس بکشه!
۳. معیار CLS: نذار سایتت "رقص لرزان" داشته باشه!
این همون جابجایی رو اعصاب عناصر سایت هست. مثلاً متن لود شده، بعد یهو عکس لود میشه و متن رو میفرسته پایین. امتیاز CLS شما باید زیر ۰.۱ باشه.
- نکته طلایی: همیشه برای عکسها و ویدیوها ابعاد (Width و Height) تعیین کنید تا مرورگر از قبل بدونه اونجا قراره یه عکس بیاد و براش جا رزرو کنه. اینطوری هیچ چی یهو جابجا نمیشه!
تجربه فنی آقا کوچولو: خیلیا فکر میکنن فونتهای قشنگ سایتشون مشکلی نداره، اما اگه فونت دیر لود بشه، اول متن با یه فونت زشت لود میشه و بعد یهو فونت اصلی میاد و کل چیدمان سایت تکون میخوره! حتماً از دستور font-display: swap توی CSS استفاده کنید.
با چه ابزاری سایت رو چک کنیم؟
رفقا، لازم نیست حدس بزنید! گوگل خودش بهتون ابزار داده:
- Google PageSpeed Insights: آدرس سایت رو بزن و نمره بگیر.
- Google Search Console: توی بخش Core Web Vitals بهت میگه کدوم صفحههات نیاز به تعمیر دارن.
- Lighthouse: توی مرورگر کروم، راستکلیک کنید، Inspect رو بزنید و برید تب Lighthouse.
جمعبندی: سایتآموزِ سریع، سایتآموزِ برندهست!
بهینهسازی Core Web Vitals شاید اولش سخت به نظر بیاد، اما وقتی یاد بگیرید چطوری با کدهای CSS و ابعاد تصاویر بازی کنید، سایتتون از یه "سایت معمولی" تبدیل میشه به یه "سایت تراز اول". یادتون باشه گوگل عاشق سایتهاییه که به وقتِ کاربر احترام میذارن.
حالا نوبت شماست: همین الان برید سایتتون رو توی PageSpeed Insights تست کنید. کدوم معیار شما قرمزه؟ (LCP یا CLS یا FID؟) برام کامنت بذارید تا بهتون بگم دقیقاً کدوم تیکه از قالبتون رو باید اصلاح کنید!