بیشتر بازدیدکنندهها سایت را با گوشی میبینند و گوشیها پردازنده و اینترنت ضعیفتری از رایانه دارند. برای همین یک سایت که روی لپتاپ تو سریع است، ممکن است روی یک گوشی میانرده کند باشد. این هفت کار کمک میکند سایتت روی همهجا خوب کار کند.
معیارها را بشناس#
گوگل سه معیار اصلی را برای تجربهٔ کاربر بررسی میکند که به آنها Core Web Vitals میگویند:
- LCP: سرعت نمایش مهمترین بخش صفحه؛ مقدار خوب کمتر از ۲٫۵ ثانیه
- INP: سرعت واکنش صفحه به کلیک و لمس؛ مقدار خوب کمتر از ۲۰۰ میلیثانیه
- CLS: میزان پریدن عناصر هنگام بارگذاری؛ مقدار خوب کمتر از ۰٫۱
این معیارها روی دادهٔ واقعی کاربران و بیشتر برای موبایل سنجیده میشوند. پس سایتت را با یک گوشی واقعی هم امتحان کن، نه فقط روی رایانه.
۱. اول اندازه بگیر#
با ابزارهایی مثل PageSpeed Insights یا بخش Lighthouse در مرورگر کروم، وضعیت فعلی سایت را ببین. بدون اندازهگیری، نمیفهمی کدام تغییر واقعاً مؤثر بوده است.
۲. تصویرها را بهینه کن#
تصویر معمولاً سنگینترین بخش صفحه است. این کارها را بکن:
- فرمت WebP یا AVIF را به جای PNG و JPG سنگین انتخاب کن.
- تصویر را به اندازهٔ واقعیای که نمایش داده میشود کوچک کن.
- همیشه
widthوheightرا بنویس تا صفحه هنگام بارگذاری نپرد.
۳. تنبلبارگذاری برای پایین صفحه#
تصویرهایی که پایین صفحهاند، لازم نیست زود بارگذاری شوند:
<img src="photo.webp" alt="توضیح تصویر" width="800" height="450" loading="lazy" decoding="async">اما تصویر اصلی بالای صفحه را تنبل نکن؛ آن را سریع بارگذاری کن.
۴. جاوااسکریپت کمتر#
هر کیلوبایت جاوااسکریپت باید دانلود، تجزیه و اجرا شود و روی گوشی ضعیف این کار وقت میگیرد. فقط چیزی را بارگذاری کن که لازم است و اسکریپتها را با defer بارگذاری کن.
۵. فونت را مدیریت کن#
فونت را روی سرور خودت نگه دار، فقط حرفهای لازم را در آن بگذار و از font-display: swap استفاده کن تا متن تا آماده شدن فونت دیده شود.
۶. فشردهسازی و کش#
سرور را طوری تنظیم کن که فایلها را با gzip یا brotli فشرده بفرستد و برای فایلهای ثابت کش طولانی بگذارد. اینجوری بازدید دوم تقریباً فوری میشود.
۷. جلوی پریدن صفحه را بگیر#
برای هر تصویر و ویدیو جای مشخصی رزرو کن و عناصری را که دیرتر ظاهر میشوند، بالای محتوای در حال خواندن اضافه نکن. این کار CLS را پایین نگه میدارد.
جمعبندی#
سایت سریع هم کاربر را راضیتر میکند و هم در سئو کمک میکند. با اندازهگیری شروع کن، یکییکی بهبود بده و دوباره اندازه بگیر.
در حال بارگذاری…