تحسين الصور والخطوط في React
استخدم next/image أو المحمّل كسولًا مع الأبعاد والتنسيقات الصحيحة (AVIF/WebP) وfont-display.
تحسين الصور والخطوط في React درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.
لماذا تُعد الصور مهمة
تكون الصور عادةً أكبر الموارد حجماً في الصفحة. وتتسبب الصور غير المحسّنة في ضعف LCP، وبطء تحميل الصفحات، وارتفاع تكاليف النطاق الترددي — خصوصاً على الأجهزة المحمولة.
مكوّن الصور في Next.js
يعمل next/image على تحسين الصور تلقائياً: التحميل الكسول افتراضياً، وsrcSet المتجاوب، والصيغ الحديثة (WebP/AVIF)، والأبعاد الصحيحة لمنع CLS.
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority // preload above-the-fold images
sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>التحميل الكسول في React العادي
أضف loading='lazy' إلى عناصر <img> الأصلية. يؤجل المتصفح تحميل الصور خارج الشاشة حتى تقترب من إطار العرض أثناء التمرير.
// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />
// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />صيغ الصور الحديثة
قدّم الصور بصيغة WebP أو AVIF بدلاً من JPEG/PNG. تكون AVIF أصغر بنسبة 50% من JPEG بالجودة نفسها. استخدم عنصراً <picture> للتفاوض على الصيغة مع توفير صيغ بديلة.
<picture>
<source srcSet="/hero.avif" type="image/avif" />
<source srcSet="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>الصور المتجاوبة باستخدام srcSet
وفّر أحجاماً متعددة كي يختار المتصفح الدقة المناسبة للشاشة، وتجنب تنزيل صورة بعرض 2000px لشاشة محمولة بعرض 400px.
<img
src="/photo-800.jpg"
srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Photo"
/>عناصر Blurhash / Skeleton النائبة
اعرض عنصراً نائباً ضبابياً أثناء تحميل الصورة لمنع إزاحة التخطيط وتحسين الأداء المتصوَّر.
// With next/image blur placeholder:
<Image
src="/photo.jpg"
alt="Photo"
width={800}
height={600}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>استراتيجية تحميل الخطوط
تحجب الخطوط عملية العرض. استخدم font-display: swap لعرض خط بديل أثناء تحميل الخط المخصص، ما يقلل FOIT (وميض النص غير المرئي).
/* In global CSS: */
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2');
font-display: swap; /* show fallback, swap to MyFont when ready */
}تحسين الخطوط في Next.js
يحمّل next/font Google Fonts في وقت البناء، ويستضيفها محلياً، ويطبّق font-display: optional لإزالة CLS الناتج عن تبديل الخطوط.
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export default function RootLayout({ children }) {
return <html className={inter.variable}><body>{children}</body></html>;
}تقليص مجموعات الخطوط
حمّل مجموعات الأحرف التي تحتاج إليها فقط. قد يتجاوز حجم خط Unicode الكامل 1MB، بينما يتراوح حجم مجموعة Latin عادةً بين 30–80KB.
// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin
// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });التحميل المسبق للخطوط المهمة
حمّل الخطوط المستخدمة في الجزء الظاهر من الصفحة مسبقاً كي تُحمّل بالتوازي مع تحليل HTML، مما يقلل وقت حجب العرض.
<link
rel="preload"
href="/fonts/MyFont.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>شبكة CDN والتخزين المؤقت
قدّم الصور والخطوط من شبكة CDN مع مدد طويلة للتخزين المؤقت (Cache-Control: max-age=31536000, immutable). تضمن أسماء الملفات التي تحتوي على تجزئة المحتوى تجاوز التخزين المؤقت عند الحاجة إلى ملفات جديدة.
تحقق سريع
ماذا تفعل font-display: swap لخطوط الويب؟
مراجعة
استخدم next/image للتحسين التلقائي، أو استخدم loading='lazy' الأصلي مع srcSet في React العادي. قدّم AVIF/WebP مع صيغ بديلة عبر <picture>. طبّق font-display: swap لخطوط الويب، واستخدم next/font للاستضافة المحلية لـ Google Fonts، وحمّل الموارد المهمة في الجزء الظاهر من الصفحة مسبقاً.
الأسئلة الشائعة
هل درس «تحسين الصور والخطوط في React» مجاني؟
نعم — نص درس «تحسين الصور والخطوط في React» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.
ماذا ستتعلم في «تحسين الصور والخطوط في React»؟
استخدم next/image أو المحمّل كسولًا مع الأبعاد والتنسيقات الصحيحة (AVIF/WebP) وfont-display. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «تحسين الصور والخطوط في React»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- قياس مؤشرات الويب الأساسية في تطبيقات React
- تحليل الحزمة واستراتيجية تقسيم التعليمات البرمجية
- تحسين الصور والخطوط في React
- تقليل INP: تحسين معالجات الأحداث