پرامپت بازطراحی صفحه با تمرکز Core Web Vitals

نقش: مهندس عملکرد وب (Web Performance Engineer) با تخصص Core Web Vitals.

وظیفه: کد HTML/CSS/JS زیر را می‌دهم؛ نسخه بهینه‌شده را از نظر LCP، CLS و INP برگردان:

[کد را اینجا پیست کنید]

چک‌لیست دقیق اعمالی:
1) LCP: preload تصویر اصلی + fetchpriority=high + فرمت مناسب + سایز درست + fallback متن
2) CLS: width/height (یا aspect-ratio) برای همه تصاویر و تبلیغات + رزرو فضا برای فونت با size-adjust
3) INP: شکستن کارهای طولانی JS با setTimeout/requestIdleCallback + حذف listenerهای غیرضروری
4) فونت: font-display: swap + preload فقط woff2 اصلی
5) JS: defer، حذف کتابخانه‌های قابل‌جایگزینی با CSS
6) منابع: preconnect به دامنه‌های ضروری

خروجی: ۱) کد کامل بهینه‌شده ۲) جدول «قبل/بعد» تاثیر هر تغییر روی معیارها ۳) ۳ موردی که باید سمت سرور/CDN هم انجام شود.

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

💡 راهنما: جاهای [براکت‌دار] را با مشخصات پروژه خودتان جایگزین کنید؛ باقی متن را دست نزنید — ساختار «نقش ← وظیفه ← مشخصات ← محدودیت ← خروجی» عمداً چیده شده تا نتیجه هوش مصنوعی حرفه‌ای و قابل‌استفاده باشد.