سرعت خوب به معنی حذف هویت بصری و ساختن صفحهای خالی نیست. هدف این است که منابع مهم زودتر برسند، منابع غیرضروری دیرتر اجرا شوند و چیدمان در زمان بارگذاری پایدار بماند. با اولویتبندی درست میتوان طراحی چشمگیر و عملکرد عالی را همزمان داشت.
ابتدا گلوگاه واقعی را اندازه بگیرید
PageSpeed Insights، Lighthouse و گزارش Core Web Vitals فقط امتیاز نمیدهند؛ سرنخ مشکل را نشان میدهند. LCP سرعت نمایش محتوای اصلی، INP پاسخگویی به تعامل و CLS پایداری چیدمان را میسنجد. داده آزمایشگاهی و داده کاربران واقعی را جداگانه بررسی کنید.
تصاویر را متناسب با محل نمایش تحویل دهید
تصویر بزرگترین منبع بسیاری از صفحات است. WebP یا AVIF، اندازههای responsive، فشردهسازی منطقی و lazy loading برای تصاویر خارج از صفحه، معمولاً بیشترین اثر را دارند. تصویر اصلی بالای صفحه را lazy نکنید و در صورت نیاز preload کنید.
فونت را کنترل کنید
وزنهای زیاد، فایلهای متعدد و فونت شخص ثالث رندر را کند میکند. فقط وزنهای لازم را بارگذاری، فایلها را subset و font-display را تنظیم کنید. برای جلوگیری از جابهجایی، فونت جایگزین با ابعاد نزدیک انتخاب کنید.
CSS و JavaScript را بر اساس اهمیت تقسیم کنید
CSS حیاتی بالای صفحه باید زود برسد. اسکریپتهای چت، آنالیتیکس سنگین، اسلایدرها و افزونههای غیرضروری را دیرتر اجرا کنید. حذف کد استفادهنشده اغلب از فشردهسازی فایل موجود مؤثرتر است.
کش، سرور و CDN
کش مرورگر، فشردهسازی Brotli یا Gzip، HTTP/2 یا HTTP/3 و پاسخ سریع سرور پایه هستند. CDN برای کاربران جغرافیایی دور و فایلهای ثابت مفید است، اما سرور ضعیف و دیتابیس کند را بهتنهایی درمان نمیکند.
پایداری چیدمان را فراموش نکنید
برای تصویر، ویدئو، بنر و تبلیغ ابعاد رزرو کنید. محتوای جدید را بالای محتوای خواندهشده تزریق نکنید. تغییر فونت و نوارهای اطلاعرسانی از دلایل رایج CLS هستند.
بودجه عملکرد تعیین کنید
برای هر صفحه سقف حجم تصویر، JavaScript، تعداد درخواست و زمان پاسخ سرور تعیین کنید. هر قابلیت جدید باید در برابر این بودجه سنجیده شود تا سرعت بهمرور از بین نرود.
- LCP کمتر از ۲.۵ ثانیه
- INP کمتر از ۲۰۰ میلیثانیه
- CLS کمتر از ۰.۱
- تصویر مناسب هر نمایشگر
- JavaScript غیرضروری حداقلی
برای ساخت یا توسعه محصول دیجیتال آمادهاید؟
نیازتان را برای تیم پازل رایانه توضیح دهید تا مسیر فنی و اجرایی مناسب را پیشنهاد کنیم.
ثبت درخواست همکاری ↗