قائمة تحقّق الأداء قبل الإطلاق
خمس عشرة نقطة لا تفوّتها قبل نشر منتج SaaS جدّي.
شارك الصفحة:
الصور
loading="lazy" لكل صورة خارج viewport، width/height لكل صورة لمنع layout shift، تحويل PNG الكبيرة إلى WebP، وأحجام مختلفة عبر srcset للمواضع الحرجة.
الخطوط
حمّل الخطوط عبر <link> في head مع preconnect إلى fonts.gstatic.com. استخدم display=swap لتجنّب FOIT. اقتصر على وزنين لكل عائلة على الأكثر.
تقسيم الكود
TanStack Router يقسّم الكود تلقائيًا لكل مسار. لا تستورد مكتبات ثقيلة في module scope لملفّ يُستورد في كل مكان (مثل __root). حمّلها dynamic import عند الحاجة.
الميتاداتا
head() لكل صفحة قابلة للمشاركة، og:image فقط في leaf routes، Cache-Control مضبوطة للأصول الثابتة (immutable, 1y).
برومبتات ذات صلة
- تحسين أداء الصورlazy load + أبعاد مناسبة + alt واضح.
- تقسيم الكود على مستوى المساراتاستفد من code splitting التلقائي لـ TanStack.
- SEO لكل مسارhead() مخصّص بعناوين وأوصاف وog images.
- توليد sitemap.xml وrobots.txtserver route يبني الخريطة تلقائيًا.
مصطلحات ذات صلة
هل كان هذا المحتوى مفيداً؟
النشرة الأسبوعية
استلم أحدث الأدلّة والبرومبتات كل أسبوع
خلاصة عربية أسبوعية عن Lovable وVibe Coding — بلا سبام، إلغاء متى شئت.