الموقع المستقل بطيء في التحميل، فكيف يمكن تشخيص مشكلات تحميل الصور؟

يُعد بطء تحميل الموقع المستقل من المشكلات الشائعة، وغالبًا ما تكون الصور من أولى العناصر التي يجري فحصها. لكن لا ينبغي ضغط الصور دفعة واحدة لمجرد أن الصفحة تحتوي على عدد كبير منها. فقد يرجع شعور المستخدم بأن «الصور لا تظهر» إلى بطء تنزيل صورة كبيرة في الجزء الظاهر عند فتح الصفحة، أو تأخر اكتشاف طلب الصورة، أو ضعف الاتصال بالعقد في الخارج، بل وحتى بطء استجابة الخادم. حدّد أولًا الصور ومراحل التحميل التي تؤدي إلى إبطاء الصفحة، ثم قرر ما إذا كان ينبغي تعديل الملفات أو شفرة الصفحة أو فحص مسار تقديم المحتوى.

ينبغي أن يجيب الفحص الفعال، بالنسبة إلى المقيمين الفنيين، عن ثلاثة أسئلة: أي صورة بطيئة؟ وهل يُستهلك الوقت قبل بدء الطلب أم أثناء النقل؟ وهل يرى المستخدمون في السوق المستهدف المحتوى الرئيسي بسرعة أكبر فعلًا بعد التحسين؟

تأكد أولًا مما إذا كانت الصور تمثل عنق الزجاجة الرئيسي

افتح لوحة Network في أدوات مطوري Chrome، وحدد خيار تعطيل ذاكرة التخزين المؤقت، ثم سجّل الطلبات أثناء تحميل الصفحة. بعد اختبار الزيارة الأولى، أعد الاختبار مع الإبقاء على ذاكرة التخزين المؤقت للتمييز بين تجربة التخزين المؤقت البارد وتجربة العودة إلى الموقع. صفِّ الطلبات حسب نوع الصورة، وافحص حجم الملف ووقت بدء الطلب ومدة استغراقه والمخطط الزمني. أجرِ الاختبارات باستخدام ظروف شبكة قريبة من ظروف المستخدمين المستهدفين، وافحص صفحات أجهزة الكمبيوتر والهواتف المحمولة كلًّا على حدة.

شغّل أيضًا Lighthouse أو PageSpeed Insights، وراجع التشخيصات المتعلقة بأكبر عملية عرض للمحتوى (LCP). إذا كان عنصر LCP صورة في الجزء الظاهر عند فتح الصفحة وكانت لا تظهر إلا متأخرة، فهذه نقطة واضحة لبدء الفحص. أما إذا كان عنصر LCP نصًا، أو كانت استجابة HTML أو البرامج النصية نفسها بطيئة، فقد يظل تحسين الصور مفيدًا، لكنه قد لا يحل مشكلة بطء ظهور الجزء الأول من الصفحة.

لا تركز على إجمالي مدة الطلب وحدها. انقر على الصورة المشتبه بها لعرض Timing، واستخدم المخطط الزمني لتحديد ما يلي:

• تأخر بدء الطلب: قد لا يُكتشف طلب الصورة إلا بعد عرض JavaScript، أو ربما تم ضبط التحميل الكسول لها على نحو غير صحيح.
• طول مدة انتظار الاستجابة: افحص خادم مصدر الصورة، وحالة التخزين المؤقت في CDN، ومسار الشبكة إلى المنطقة المستهدفة.
• طول مدة تنزيل المحتوى: قيّم حجم البيانات المنقولة فعليًا وعرض النطاق الترددي للشبكة وأبعاد الصورة، وابدأ بفحص الملفات الكبيرة.
• بطء ظهور الصورة بعد اكتمال التنزيل: افحص فك ترميز الصورة ومهام سلسلة التعليمات الرئيسية، وما إذا كانت أنماط الصفحة أو برامجها النصية تعيق العرض.

قد يختلف حجم النقل المعروض في لوحة Network عن الحجم الأصلي لملف الصورة. انتبه أيضًا إلى عمليات إعادة التوجيه، وإعادة المحاولة بعد فشل الطلب، وما إذا كان الطلب قد استفاد من ذاكرة التخزين المؤقت، وما إذا كانت الصورة نفسها تُطلب مرارًا بعناوين مختلفة. يُفضّل إعادة الاختبار للمواقع المستقلة الموجهة إلى الخارج من المنطقة التي يوجد فيها العملاء الرئيسيون، أو باستخدام عقد اختبار محلية؛ وإلا فقد تخفي النتائج المحلية مشكلات الوصول عبر المناطق.

افحص أبعاد الصور وتنسيقاتها واستخداماتها الفعلية

ابدأ بالصورة الرئيسية في الجزء الظاهر عند فتح الصفحة، والصور الكبيرة في تفاصيل المنتجات، واللافتات المخصصة للهواتف المحمولة. فقد تستهلك هذه الصور قدرًا كبيرًا من البيانات، كما تؤثر مباشرةً في وقت ظهور المحتوى الرئيسي للمستخدم. اعرض أبعاد الصورة الفعلية وأبعاد المورد في المتصفح: فإذا كانت الصفحة تعرض صورة مصغّرة صغيرة للمنتج، لكنها تنزّل الصورة الأصلية عالية الدقة، فأنشئ نسخة مناسبة لموضع العرض بدلًا من الاكتفاء بزيادة مستوى الضغط.

يمكن للصفحات المتجاوبة استخدام srcset وsizes لتوفير صور بأبعاد مختلفة، كي يختار المتصفح المورد المناسب وفقًا للتخطيط وظروف الجهاز. وعندما يختلف تكوين الصورة بدرجة كبيرة بين الهاتف المحمول والكمبيوتر، يمكن أيضًا استخدام picture لتوفير صور منفصلة. عند الفحص، تحقق من توافق sizes مع التخطيط الفعلي؛ وإلا فقد يظل المتصفح يختار ملفًا أكبر من اللازم.

ينبغي اختيار التنسيق وفقًا لمحتوى الصورة ومتطلبات التوافق. يمكن تقييم WebP أو AVIF للصور الفوتوغرافية وصور المنتجات الفعلية. أما المواد التي تتطلب خلفية شفافة، فينبغي التحقق أيضًا من دعم التنسيق المستهدف وأدوات المعالجة. احتفظ بخيار بديل متوافق، وقارن حجم الملف الناتج وجودة الصورة وأداء فك الترميز. فحداثة التنسيق لا تعني أن كل صورة ستكون أصغر؛ ويجب فحص حواف النصوص وملمس المنتجات والعلامات التجارية خصوصًا بعد الضغط.

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

أعطِ الأولوية للجزء الأول من الصفحة وحمّل الصور خارج الشاشة عند الحاجة

ينبغي أن يكتشف المتصفح صورة LCP في الجزء الأول من الصفحة مبكرًا. اجعل عنوان الصورة يظهر مباشرةً في HTML الأولي، وتجنب إدراجها بعد تنفيذ البرنامج النصي فقط. ولا تستخدم loading="lazy" لصورة الجزء الأول من الصفحة. بعد التأكد من أنها مورد أساسي، يمكن تقييم استخدام fetchpriority="high" لإرشاد المتصفح إلى رفع أولويتها، لكن لا تضبط أولوية عالية لصور متعددة في الوقت نفسه، كي لا تتنافس على النطاق الترددي مع الموارد الأساسية مثل الخطوط والأنماط.

إذا جرى تحميل الصورة الكبيرة في الجزء الأول من الصفحة كخلفية CSS، فعادةً ما يحتاج المتصفح إلى جلب الأنماط ذات الصلة وتحليلها أولًا قبل اكتشافها. يمكن تقييم استبدالها بعنصر صورة HTML إذا كانت تحمل محتوى رئيسيًا، كما يمكن تقييم التحميل المسبق عندما يكون عنوان المورد معروفًا ويوجد تأخر فعلي في اكتشافه. يجب أن يتطابق عنوان المورد وإعدادات الاستجابة في التحميل المسبق مع المورد المستخدم نهائيًا، وإلا فقد يحدث تنزيل مكرر.

يمكن تقييم التحميل الكسول الأصلي لقوائم المنتجات خارج الشاشة والصور الطويلة في صفحات التفاصيل والمحتوى المقترح، لتقليل عدد الطلبات الأولية. أثناء الاختبار، مرّر الصفحة إلى الأسفل وتحقق من ظهور الصور في الوقت المناسب، وحدد لها العرض والارتفاع أو نسبة أبعاد مناسبة لتجنب تحريك الصفحة بعد تحميلها. افحص أيضًا الصور المتحركة المتتابعة: فإذا جرى تحميل عدة صور كبيرة غير مرئية افتراضيًا كلها عند بدء الصفحة، فقد يؤدي ذلك إلى إبطاء الجزء الأول منها؛ ومع ذلك، ينبغي أن تظل الصورة الأولى المرئية لها الأولوية.

إذا استمر البطء بعد تحسين الملفات، فواصل فحص مسار تقديم المحتوى

إذا جرى تحميل الصورة نفسها بصورة طبيعية محليًا وببطء في السوق المستهدف، فتحقق مما إذا كان CDN يغطي منطقة الوصول المستهدفة وما إذا كان الطلب يستفيد من ذاكرة التخزين المؤقت. يجب أن تتوافق سياسة التخزين المؤقت مع طريقة تحديث الصور: فالتخزين المؤقت طويل الأمد مناسب للموارد التي لا تتغير، أما عند تحديث الصور، فيمكن استخدام عنوان يتضمن معلومات الإصدار لتجنب استمرار المستخدمين في رؤية الصور القديمة. وقد تؤثر أيضًا معلمات التوقيع أو معلمات الاستعلام التي تتغير باستمرار في الاستفادة من ذاكرة التخزين المؤقت؛ لذا افحص إعدادات الخدمة في هذا الشأن.

إذا كانت الصور مستضافة على نطاق تابع لجهة خارجية، فراقب أيضًا تحليل النطاق وإنشاء الاتصال وعمليات إعادة التوجيه وتوافر الخدمة. يتطلب الاتصال عبر النطاقات وقتًا بحد ذاته، لكن ينبغي تحديد مدى جدوى استخدام تحسينات مثل الاتصال المسبق استنادًا إلى فترات الانتظار الفعلية في المخطط الزمني. وبالنسبة إلى المتاجر العابرة للحدود، افحص بشكل منفصل مواقع اللغات والمناطق المختلفة والصفحات المقصودة للإعلانات، لتجنب الإشارة في أحد قوالب الصفحات إلى صور أصلية لم تُحسّن.

أعِد الاختبار في الظروف نفسها وتأكد من حل المشكلة

بعد إجراء التعديلات، سجّل النتائج مجددًا للصفحة نفسها ونوع الجهاز وظروف الشبكة ومنطقة الاختبار نفسها، ثم قارن وقت بدء طلب الصور الأساسية في الجزء الأول من الصفحة وحجم النقل ومدة التنزيل وLCP. قد تتأثر نتيجة الاختبار الواحد بتقلبات الشبكة، لذا كرر القياس وتحقق من استقرار النتائج. وإذا توفرت بيانات أداء للمستخدمين الفعليين، فاستند إليها أيضًا لتقييم الأداء في السوق المستهدف.

أخيرًا، تحقق مما إذا كان التحسين قد تسبب في مشكلات جديدة: هل صورة الجزء الأول من الصفحة واضحة؟ وهل اختار الهاتف المحمول الحجم المناسب؟ وهل تظهر الصور المحمّلة كسولًا في الوقت المناسب عند التمرير؟ وهل تُخزّن المواد المحدّثة مؤقتًا على نحو صحيح؟ إن تقليل عدد طلبات الصور أو حجم الملفات ليس سوى مؤشر مرحلي؛ أما المعيار الذي يحدد ما إذا كان ينبغي إجراء تعديلات إضافية فهو قدرة المستخدم على رؤية صفحة قابلة للاستخدام بسرعة أكبر.