قانون ۳ ثانیه‌ای عملکرد وب

شما فقط سه ثانیه فرصت دارید.

بعد از آن، کاربران شما سایت را ترک می‌کنند.

تحقیقات گوگل نشان می‌دهد که اگر بارگذاری یک سایت بیش از ۳ ثانیه طول بکشد، ۵۳٪ از کاربران موبایل آن را رها می‌کنند.

سایت‌های کند برای شما هزینه دارند. بهبود زمان بارگذاری در موبایل به میزان ۰.۱ ثانیه، نرخ تبدیل خرده‌فروشی را ۸.۴٪ افزایش می‌دهد.

عملکرد صرفاً یک معیار فنی نیست؛ بلکه یک معیار تجاری است.

برای پیروزی، باید Core Web Vitals را درک کنید:

• LCP (Largest Contentful Paint): سرعت مشاهده محتوای اصلی توسط کاربر. هدف: زیر ۲.۵ ثانیه. • INP (Interaction to Next Paint): سرعت واکنش صفحه به کلیک‌ها. هدف: زیر ۲۰۰ میلی‌ثانیه. • CLS (Cumulative Layout Shift): میزان پایداری چیدمان صفحه. هدف: زیر ۰.۱.

حدس زدن را متوقف کنید و بهینه‌سازی را شروع کنید. در اینجا روش غلبه بر زمان آمده است:

بهینه‌سازی JavaScript

• کد کمتری ارسال کنید. از dynamic imports استفاده کنید تا کدها را فقط در زمان نیاز بارگذاری کنید. • از tree-shaking استفاده کنید. برای حذف کدهای اضافی، از CommonJS به ES modules مهاجرت کنید. • کارهای سنگین را به Web Workers منتقل کنید. رشته اصلی (main thread) را برای ورودی‌های کاربر آزاد نگه دارید. • از defer یا async استفاده کنید. اجازه ندهید اسکریپت‌ها مانع تجزیه (parsing) HTML شما شوند.

CSS و رندرینگ

• CSS حیاتی را به صورت inline قرار دهید. ابتدا فقط آنچه در بخش بالایی صفحه (above the fold) قابل مشاهده است را بارگذاری کنید. • از layout thrashing جلوگیری کنید. عملیات خواندن و نوشتن را دسته‌بندی کنید تا از محاسبات مجدد مداوم جلوگیری شود. • از transform و opacity برای انیمیشن استفاده کنید. این‌ها از GPU استفاده می‌کنند و از تغییر چیدمان (layout shifts) جلوگیری می‌کنند. • از content-visibility: auto استفاده کنید. رندر کردن محتوایی که خارج از صفحه است را نادیده بگیرید.

استراتژی تصاویر

• از فرمت‌های مدرن استفاده کنید. WebP و AVIF بسیار کوچک‌تر از JPEG هستند. • ویژگی‌های width و height را تنظیم کنید. این کار از تغییر چیدمان (CLS) جلوگیری می‌کند. • تصاویر پایین صفحه را به صورت lazy-load بارگذاری کنید. تصویر اصلی (LCP hero image) را lazy-load نکنید. • از srcset استفاده کنید. تصاویر کوچک‌تر را برای کاربران موبایل ارسال کنید.

شبکه و کشینگ (Caching)

• از CDN استفاده کنید. محتوای خود را برای کاهش تأخیر (latency) به کاربران نزدیک‌تر کنید. • فشرده‌سازی را فعال کنید. از Brotli یا Zstandard برای کاهش حجم فایل‌ها استفاده کنید. • به شکلی تهاجمی از کش استفاده کنید. برای دارایی‌های هش‌شده (hashed assets) از هدرهای کش تغییرناپذیر (immutable) استفاده کنید. • عملکرد bfcache را حفظ کنید. از استفاده از رویداد unload خودداری کنید تا از پیمایش فوری به عقب/جلو اطمینان حاصل شود.

هدف ساده است: از انجام کار اضافی خودداری کنید.

سریع‌ترین کد، کدی است که کاربران هرگز دانلود نمی‌کنند. سریع‌ترین درخواست، درخواستی است که مرورگر هرگز مجبور به ارسال آن نباشد.

Source: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1