Fri Mar 27 2026 20:00:00 GMT-0400 (Eastern Daylight Time)

استخراج الصور الحرجة لتحسين LCP و SEO

اكتشف الصورة الحرجة التي تؤثر على LCP، وقم بتحميل الموارد الصحيحة فقط مسبقًا (preload)، وتجنب أخطاء التحميل الكسول (lazy-loading)، وتحقق من أولوية الصور في أدوات SEO.

استخراج الصور الحرجة لتحسين LCP و SEO

آخر تحديث: June 28, 2026

يعني الاستخراج الحرج للصور العثور على الصورة الواحدة التي تتحكم في الانطباع البصري الأول للصفحة. ففي العديد من صفحات المنتجات، وصفحات الهبوط، ومنشورات المدونة، تكون تلك الصورة هي "البطل" (hero)، أو صورة المنتج الرئيسية، أو رسم توضيحي كبير فوق خط الطي (above-the-fold). إذا قمت بتحديدها مبكرًا، يمكنك تحميل الملف الصحيح مسبقًا أو إعطائه الأولوية بدلاً من تسريع كل الصور بالتساوي.

الإجابة السريعة: كيف تستخرج الصورة الحرجة؟

استخدم استخراج الصورة الحرجة لتسمية الصورة الأكثر احتمالاً أن تصبح عنصر "Largest Contentful Paint"، ثم امنح هذا الملف معاملة تحميل خاصة. عادةً ما يعني ذلك أن أكبر صورة مرئية في مساحة العرض الأولية تحصل على fetchpriority="high"، ولا يتم تطبيق التحميل الكسول (lazy loading)، وأبعاد ثابتة، وفي بعض الأحيان <link rel="preload">.

لا تقم بتحميل جميع الملفات الكبيرة مسبقًا. قم بتحميل صورة البطل أو المنتج مسبقًا فقط عندما لا يكتشفها المتصفح بطريقة أخرى متأخرة، مثل داخل CSS، أو شريط تمرير (carousel)، أو مكون مُصيَّر من جانب العميل (client-rendered component)، أو مكدس <picture> متجاوب مع اختيار مصدر معقد.

بعد التغيير، تحقق من النتيجة. تحدد وثائق Largest Contentful Paint الخاصة بـ Google الـ LCP حول أكبر عنصر محتوى مرئي، وستظهر PageSpeed Insights أي عنصر تم قياسه. يجب أن تُظهر أدوات Chrome DevTools أيضًا طلب الصورة الحرجة في وقت مبكر من مخطط الشلال (waterfall).

استخدم هذا الترتيب:

  1. تحميل الصفحة على مساحة عرض هاتف محمول واقعية.
  2. العثور على أكبر صورة أو ملصق فوق خط الطي.
  3. التحقق مما إذا كانت PageSpeed أو Lighthouse تبلغ عنه كـ LCP.
  4. إزالة loading="lazy" من تلك الصورة.
  5. إضافة الأبعاد أو نسبة العرض إلى الارتفاع (aspect ratio).
  6. إضافة fetchpriority="high" عندما تكون عنصر <img>.
  7. تحميلها مسبقًا فقط عندما يكون الاكتشاف متأخرًا.
  8. إبقاء الصور تحت خط الطي كسولة (lazy).
  9. إعادة الاختبار بعد تغييرات التخطيط، أو نظام إدارة المحتوى (CMS)، أو نص البطل.

ما الذي يُعتبر صورة حرجة؟

الصورة الحرجة هي الصورة التي ينتظرها الزائر قبل أن يشعر بأن الصفحة مفيدة. غالبًا ما تكون، ولكن ليس دائمًا، عنصر LCP. قد يتم تحميل شعار صغير في أعلى الصفحة أولاً، لكنه نادرًا ما يتحكم في الجاهزية المتصورة. أما صورة البطل التي تشغل نصف شاشة الهاتف المحمول، فغالبًا ما تفعل ذلك.

Diagram comparing hero, logo, and below-fold image candidates for Largest Contentful Paint selection

استخدم الحجم المُصيَّر (rendered size)، وموقع مساحة العرض (viewport position)، والغرض معًا. قد تكون الصورة المصغرة في قائمة التنقل مرئية، لكنها ليست المحتوى الرئيسي. قد تكون صورة الخلفية خلف العنوان حرجة إذا كانت أكبر عنصر مرئي. أما صورة البطاقة الاجتماعية في البيانات الوصفية فهي مهمة للمشاركة، ولكن لا يتم جلبها للصفحة المُصيَّرة ما لم تقم القالب أيضًا بعرضها.

Image candidate Critical for LCP? Loading treatment Common mistake
Above-the-fold hero image Usually yes Eager, high priority, maybe preload Lazy-loaded by a global image component
Main product photo Usually yes Eager, high priority, stable size Hidden behind carousel JavaScript
Logo or small icon Usually no Normal priority Preloaded even though it is tiny
Social sharing image No for page LCP Metadata only Confused with rendered hero
Below-fold diagram or gallery No Lazy-load Competes with the hero if loaded eagerly

تدرج Google الخاص بـ LCP يسرد عناصر <img>، وعناصر الصور داخل SVG، وصور ملصقات الفيديو (video poster images)، وصور خلفية CSS كمرشحين محتملين. هذا يعني أن الاستخراج لا يمكن أن يتوقف عند البحث عن أول وسم <img>. تحتاج إلى فحص الصفحة المُصيَّرة.

للعمل المتجاور، احتفظ بقائمة التحقق الأوسع لـ image optimization for SEO بالوقت القريب. يقرر استخراج الصورة الحرجة الأولوية؛ بينما لا تزال الضغطات (compression)، وأسماء الملفات، والنص البديل (alt text)، والمحتوى المهيكل تحدد ما إذا كانت الصورة مفيدة بعد تحميلها.

أي صورة يجب أن تحصل على preload أو أولوية عالية؟

امنح أولوية عالية لصورة واحدة: وهي صورة LCP المحتملة للصفحة الحالية. إذا كان هناك مرشحان متقاربين، فاختر الأكبر حجمًا على الهاتف المحمول أولاً، لأن مقاييس Core Web Vitals للهاتف المحمول عادة ما تكون أصعب في اجتيازها.

استخدم fetchpriority="high" عندما تكون الصورة الحرجة عنصر <img> عادي أو عنصر <img> الاحتياطي في عنصر <picture>. يوضح دليل fetch priority guidance الخاص بـ Google أن هذا التلميح يغير أولوية موارد المتصفح دون تغيير مسار اكتشاف العلامة (markup discovery path).

استخدم preload عندما تكون المشكلة هي الاكتشاف. يصف مرجع MDN لـ rel="preload" الـ preload بأنه طريقة لطلب الموارد في وقت مبكر من تحميل الصفحة. وهذا يساعد عندما يظهر عنوان URL للصورة في CSS، أو يصل بعد التروية (hydration)، أو يقع خلف علامة لا يستطيع المتصفح اكتشافها بالسرعة الكافية.

Decision tree showing that only the extracted visible LCP image should receive preload and high priority

Situation Better choice Why
<img> hero appears in server-rendered HTML fetchpriority="high" Browser can discover it already
CSS background hero is the visual LCP Preload exact URL Browser may discover it after CSS
Responsive <picture> hero is visible immediately fetchpriority="high" on <img> Keeps source selection in markup
Client-rendered carousel starts with hero image Server-render first slide or preload JavaScript can delay discovery
Two large heroes alternate by media query Preload only matching candidate Avoids wasting bandwidth

بالنسبة لصورة متجاوبة عادية، يمكن أن يبدو القالب (markup) كالتالي:

<img
  src="/images/product-hero-960.webp"
  srcset="/images/product-hero-480.webp 480w, /images/product-hero-960.webp 960w, /images/product-hero-1440.webp 1440w"
  sizes="(max-width: 640px) 100vw, 960px"
  width="960"
  height="640"
  fetchpriority="high"
  alt="Black leather backpack shown open with laptop sleeve visible"
>

إذا كانت الصورة خلفية CSS ولا يمكنك نقلها إلى HTML بعد، فقم بتحميل نفس الأصل (asset) الذي سيستخدمه مساحة العرض الأولية مسبقًا:

<link
  rel="preload"
  as="image"
  href="/images/home-hero-960.webp"
  imagesrcset="/images/home-hero-480.webp 480w, /images/home-hero-960.webp 960w"
  imagesizes="100vw"
>

يغطي دليل image preloading guide بناء الجملة (syntax) بمزيد من التفصيل. القاعدة المهمة هنا هي أضيق: التحميل المسبق بعد الاستخراج، وليس قبله.

كيف تتجنب التحميل الكسول للصورة الخاطئة؟

ينتمي التحميل الكسول إلى ما يقع تحت مساحة العرض الأولى. إنه خطأ في الصورة الحرجة المستخرجة لأنه يخبر المتصفح بالانتظار حتى تحدث فحوصات التخطيط والمسافة. يحذر دليل browser-level lazy loading guide الخاص بـ Google من التحميل الكسول للصور التي تكون مرئية على الفور.

قم بتدقيق مكونات الصور العامة بعناية. تجعل العديد من الأطر (frameworks) التحميل الكسول هو الافتراضي لأن معظم الصور تقع تحت خط الطي. هذا الافتراض يكسر الصفحات التي يتم فيها تغليف صورة البطل في نفس المكون الذي يحتوي على صور مصغرة للصور المعرضة.

تحقق من هذه الأماكن:

  1. مُصيِّرات صور النص الغني (CMS rich-text image renderers).
  2. مكونات معرض المنتجات (Product gallery components).
  3. مكونات صورة غلاف المدونة (Blog cover image components).
  4. أدوات خلفية البطل في الصفحة الرئيسية (Homepage hero background utilities).
  5. أشرطة التمرير التي تخفي جميع الشرائح حتى يتم تشغيل JavaScript.
  6. المكونات النائبة (Placeholder components) التي تستبدل data-src بـ src.
  7. كتل التخصيص الخاصة بالجهات الخارجية (Third-party personalization blocks).
  8. أغلفة اختبار A/B التي تؤخر علامة البطل (hero markup).

الحل عادة ما يكون بسيطًا. أضف خيار priority أو aboveFold أو isLcp إلى المكون واجعل مالك القالب يختارها صراحةً. يجب أن تستمر صور الجسم تحت خط الطي في استخدام التحميل الكسول الأصلي، خاصة الأدلة الطويلة التي تحتوي على لقطات شاشة ورسوم بيانية.

بالنسبة للصفحات الثقيلة بالهواتف المحمولة، قم بإقران ذلك بـ mobile image optimization guide. لا يزال البطل ذو الأولوية الصحيحة يؤدي بشكل سيئ إذا قام الهاتف بتنزيل قص سطح مكتب بدقة 2400 px لوضع مخصص بدقة 390 px.

كيف تستخرج الصور من صفحة حقيقية؟

ابدأ في المتصفح، وليس في مكتبة الأصول (asset library). تخبرك مكتبة الأصول بما هو موجود؛ بينما يخبرك المتصفح بما يتلقاه المستخدمون.

استخدم سير العمل اليدوي هذا:

  1. افتح الصفحة بعرض 390 px وأعد التحميل مع تعطيل التخزين المؤقت (cache disabled).
  2. لاحظ أكبر صورة مرئية قبل التمرير.
  3. افحص ذلك العنصر وسجل عنوان URL النهائي له.
  4. تحقق مما إذا كان عنصر <img>، أو <picture>، أو ملصق فيديو، أو خلفية CSS.
  5. تأكيد العرض والارتفاع المُصيَّرين (rendered width and height).
  6. قارن عرض الملف الذي تم تنزيله مع الفتحة المُصيَّرة.
  7. ابحث عن loading="lazy" أو تعيين src المتأخر بواسطة JavaScript.
  8. تحقق من DevTools Network لمعرفة وقت بدء الطلب والأولوية.
  9. تشغيل PageSpeed Insights وتسجيل عنصر LCP.
  10. التكرار على سطح المكتب إذا تغير البطل حسب نقطة التوقف (breakpoint).

لعمليات تدقيق القوالب، قم بإنشاء جدول استخراج صغير قبل تحرير الكود:

Page type Likely critical image Where URL comes from Extraction note
Blog post Cover image after intro Frontmatter image field Keep cover and rendered body image in sync
Product detail Primary product photo Product media array First visible gallery slide must not wait for JS
Landing page Hero background or illustration CSS, CMS, or page component Prefer HTML image if it conveys content
Category page First large promo tile Collection data Do not prioritize every grid item
Case study Above-fold customer screenshot CMS image block Crop for mobile text readability

لقد قمت بإنشاء المخططات في هذه المقالة كملفات WebP وأبقيت كل منها أقل من 40 KB. هذا ليس هدفًا عالميًا للصور، ولكنه تذكير مفيد: يجب أن تكون الصورة المستخرجة بحجم مناسب قبل أن تحصل على الأولوية. إذا كان الملف لا يزال ضخمًا، فاستخدم image compression deep dive وbatch resize guide قبل النشر.

كيف تتحقق من الصورة الحرجة في الأدوات؟

للتحقق وظيفتان. أولاً، إثبات أن الصورة المختارة هي بالفعل عنصر LCP أو مرشح جدي لـ LCP. ثانيًا، إثبات أن المتصفح يكتشفها مبكرًا بما فيه الكفاية.

Verification trace showing the hero image request early in the waterfall and reported as the LCP element

استخدم PageSpeed Insights للسياق الميداني والمختبري (field and lab context). عادةً ما يذكر لوحة التشخيص عنصر LCP، وتساعد لقطة الشاشة في تأكيد ما إذا كان العنصر المُبلغ عنه يتطابق مع البطل البصري للصفحة. استخدم Lighthouse أو DevTools Performance عندما تحتاج إلى تتبع محلي.

استخدم DevTools Network لسلوك الطلب:

  1. التصفية حسب طلبات الصور (image requests).
  2. إعادة التحميل بتعطيل التخزين المؤقت.
  3. تأكيد أن الصورة الحرجة تبدأ بالقرب من أعلى مخطط الشلال.
  4. التحقق من أن الأولوية عالية أو تم ترقيتها مبكرًا.
  5. التأكد من أن الصور تحت خط الطي لا تتنافس جميعها في نفس الوقت.
  6. التحقق من رمز الحالة (status code)، ونوع المحتوى (content type)، وحجم النقل، ورؤوس التخزين المؤقت (cache headers).

استخدم فحص HTML المُصيَّر لأخطاء العلامات:

  1. تحتوي الصورة الحرجة على src أو srcset قابل للاكتشاف في العلامة الأولية.
  2. لا تحتوي على loading="lazy".
  3. تحتوي على width و height، أو نسبة عرض إلى ارتفاع CSS ثابتة.
  4. يصف نصها البديل (alt text) الموضوع المرئي عندما تكون الصورة محتوى.
  5. يعيد عنوان URL الخاص بـ CDN استجابة 200 قابلة الزحف (crawlable).

بالنسبة للبحث، يؤكد دليل image SEO best practices الخاص بـ Google أيضًا على أسماء الملفات الوصفية، والنص البديل، والنص التفسيري المفيد المحيط. يحسن استخراج الصورة الحرجة أولوية التحميل، ولكن لا يزال يتعين على نفس الصورة أن يكون لها سياق بحثي.

ما الذي يكسر استخراج الصورة الحرجة؟

أكثر الفشل شيوعًا هو معاملة كل صفحة وكأنها تحتوي على بطل واحد. يمكن أن يكون لفهرس المدونة، وصفحات المنتجات، وصفحات التسعير مرشحون مختلفون لـ LCP. يجب أن تحدث خطوة الاستخراج على مستوى القالب ومستوى نقطة التوقف (breakpoint).

انتبه لهذه الفخاخ:

  1. تحميل صورة Open Graph مسبقًا. قد لا يتم عرض صورة البطاقة الاجتماعية أبدًا على الصفحة.
  2. التحميل الكسول لأول صورة منتج. غالبًا ما ترث معارض المنتجات الإعدادات الافتراضية للصور المصغرة.
  3. إعطاء الأولوية لكل شريحة في شريط التمرير. يمكن أن تكون الشريحة المرئية الأولى فقط حرجة عند التحميل.
  4. تجاهل قصاصات الهاتف المحمول. يمكن لسطح المكتب والهاتف المحمول اختيار صور LCP مختلفة.
  5. استخدام خلفيات CSS لمحتوى ذي مغزى. من الأصعب تحديد أولويتها وأقلها وصولاً (accessible).
  6. نسيان الأبعاد. الأولوية لا تمنع تحول التخطيط (layout shift).
  7. نشر مصدر واحد كبير الحجم. الصورة ذات الأولوية العالية بحجم 3 MB لا تزال بطيئة.
  8. الاختبار فقط على Wi-Fi المحلي. يكشف الـ 4G البطيء تأخيرات الاكتشاف.

إذا كانت المشكلة تتعلق في الغالب بوزن الملف، فابدأ بقائمة complete image optimization checklist. إذا كانت المشكلة متعلقة باختيار التنسيق، قارن بين AVIF vs WebP قبل تغيير قواعد التسليم.

ملخص: قائمة التحقق من استخراج الصورة الحرجة

استخراج الصورة الحرجة هو قرار يتعلق بسرعة الصفحة، وليس تمرينًا لتسمية الأصول. ابحث عن الصورة التي تتحكم في مساحة العرض الأولى، وامنح تلك الصورة فقط معاملة تحميل مبكرة، واجعل بقية الصفحة لا تتنافس معها.

قبل النشر، أكد ما يلي:

  1. أن صورة LCP المحتملة مُسماة في القالب أو ملاحظات التدقيق.
  2. تم فحص مرشحات الهاتف المحمول وسطح المكتب بشكل منفصل.
  3. الصورة الحرجة ليست مُحمَّلة كسولًا (lazy-loaded).
  4. استخدام fetchpriority="high" لمرشح LCP عنصر <img> المرئي.
  5. استخدام التحميل المسبق فقط عندما يكون الاكتشاف متأخرًا.
  6. يتم تغيير حجم الملف المحدد وضغطه.
  7. تحجز الأبعاد والارتفاع، أو نسبة العرض إلى الارتفاع، مساحة التخطيط.
  8. تظل الصور تحت خط الطي كسولة (lazy).
  9. تُبلغ PageSpeed Insights عن عنصر LCP المتوقع.
  10. تُظهر DevTools طلب الصورة الحرجة في وقت مبكر من مخطط الشلال.
  11. يعيد عنوان URL الخاص بـ CDN استجابة 200 مع نوع الصورة المتوقع.
  12. تحتوي الصورة على نص بديل مفيد ومحتوى تفسيري قريب.

Image credits

  • تم إنشاء مخططات غلاف، ومرشح LCP، وشجرة قرار الأولوية، وتتبع التحقق لهذا المقال باستخدام ImageMagick وتم تصديرها كـ WebP.

استخدم الأدوات المجانية أثناء متابعة الدليل.

ضغط صورةإزالة خلفية

تابع القراءة

صورة غلاف كيفية إضافة علامة مائية للصور (حماية حقوق النشر)

Tue Mar 24 2026 20:00:00 GMT-0400 (Eastern Daylight Time)

كيفية إضافة علامة مائية للصور (حماية حقوق النشر)

أضف علامة مائية للصور لحماية حقوق النشر: مقارنة بين وضع العلامة في الزاوية مقابل التوزيع الشبكي أو الوسط الخافت، وكيفية تطبيقها على دفعات (batch-watermark)، والموازنة بين مستوى الحماية وجودة الصورة.