إلقاء نظرة على حالة الصور التقدمية وتصور المستخدم

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

لقد كتبت مؤخرًا عن طرق مختلفة لاستخدام SVG كعناصر نائبة ، وشمل تقويم أداء PerfPlanet لهذا العام منشورين يصفان SQIP بشكل أكبر ، وهي تقنية تستند إلى SVGs غير واضحة: التحميل التدريجي للصور باستخدام Intersection Observer و SQIP و SQIP - Vague Vectors for Performant Previews.

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

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

هل نحن متأكدين من هذا؟

من خلال بعض التعليقات على Reddit ، وجدت الكثير من الآراء الثاقبة (والسلبية). هنا اثنين منهم:

"أنا أكره مواقع الويب التي تعرض نسخة ضبابية من الصورة قبل تحميل الصورة الأخيرة. إنه يلعب بعيني. لا بد لي من النظر بعيدًا وإلقاء نظرة خاطفة لمعرفة ما إذا كان قد تم ذلك قبل أن أتمكن من القراءة. أتمنى لو كانت هناك طريقة لتعطيل هذه الوظيفة ".
- rocky1138 ، هاكر نيوز

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

محاولة إيجاد دراسات حول تصور المستخدمين

أردت أن أجد بعض الأبحاث العلمية التي يمكن أن تدعم أن هذه التقنيات لتحميل الصور كانت (أو لا) مفيدة. ثبت أن هذا يمثل تحديا. لم أتمكن من العثور على أي دراسة تثبت أن عرض شيء مثل صورة مصغرة ضبابية قبل تحميل الصورة يحسن إدراك المستخدم. ثم فكرت في ملفات JPEG التقدمية.

العودة إلى الأساس: ملفات JPEG التقدمية

بطريقة معينة ، لدينا "تقنية تحميل الصور التقدمية" مماثلة مدعومة في الصور لفترة طويلة. يُعد تنسيق JPEG التقدمي مثالًا جيدًا.

تم اقتراح ملفات JPEG التقدمية كممارسة جيدة للصور ، خاصة للمواقع المستخدمة في الشبكات البطيئة. كتبت آن روبسون منشورًا يشجع JPEGs التقدمية ، الآن منذ خمس سنوات ، حيث لخصت سبب تفوقها:

"تعد ملفات JPEG التقدمية أفضل لأنها أسرع. الظهور بشكل أسرع يكون أسرع ، والسرعة المدركة أكثر أهمية من السرعة الفعلية . حتى لو كنا جشعين بشأن ما نحاول تقديمه ، فإن ملفات JPEG التقدمية تمنحنا أكبر قدر ممكن في أقرب وقت ممكن ".

يقوم JPEG التدريجي بترميز الصورة إلى عدة عمليات مسح ضوئي. يعرض المسح الأول الصورة الكاملة بجودة منخفضة ، ويتم تنقيحها مع تقديم المزيد من عمليات المسح. البديل هو الوضع الأساسي لـ JPEG حيث يتم فك ترميز الصورة من أعلى إلى أسفل.

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

تشبه التقنيات التقدمية مثل Blur-up و SQIP صور JPEG التقدمية من وجهة نظر المستخدم. يعرض المتصفح صورة منخفضة الجودة أولاً ويستبدلها بالصورة النهائية عند تحميلها.

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

الدراسة

لم أجد سوى دراسة تسمى "عرض الصورة التقدمي - جيد أم شر؟" ، والتي حاولت إلقاء بعض الضوء على هذا الموضوع.

"عندما ، كما هو الحال مع طريقة JPEG التقدمية ، يكون عرض الصورة عبارة عن عملية من مرحلتين يتم فيها التقاط الصورة الخشنة الأولية في التركيز البؤري الحاد ، ويتم منع الطلاقة المعرفية ، ويتعين على الدماغ أن يعمل بجهد أكبر قليلاً لفهم ما يتم عرضه . "

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

لقد ذكرت مؤخرًا الدراسة في محادثة حول LQIP (العناصر النائبة للصور منخفضة الجودة). سرعان ما تلقيت بعض الردود التي تشكك في صرامة الدراسة:

شكك كثير من الناس في صحة هذه الدراسة. إنه مخالف لكل ما نفترضه حول فوائد العرض التدريجي ولم يخرج أحد بعد بدراسة ثانية بنتائج مماثلة. نحن بحاجة إلى مزيد من البيانات.

- توبياس بالدوف (tbaldauf) 9 ديسمبر 2017

كانت الدراسة محدودة للغاية ومثيرة للجدل. البيانات واسعة النطاق لإثبات أو دحض أنه من الضروري استخلاص أي استنتاجات

- Yoav Weiss (yoavweiss) 9 ديسمبر 2017

حتى الآن ، لدينا دراسة واحدة لاقت شكوكًا. ماذا ليدنا ايضا؟ هل يمكننا استخدام الأدوات الحالية لقياس الأداء المتصور كبديل؟

قياس وقت التحميل المدرك

تخيل شريطين افتراضيين مسجلين من أحد المواقع:

الاتفاق العام هو أن المستخدم سوف يدرك أن الإصدار B يتم تحميله بشكل أسرع من الإصدار A. وذلك لأن أجزاء من الصفحة تم عرضها في وقت سابق عن الإصدار A.

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

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

إذا فكرنا في تقنيات تحميل الصور التدريجي ، كيف سيتغير مؤشر السرعة عند تحميل الصورة؟ هل سيتم اعتبار هذه المنطقة "مكتملة بصريًا" إذا استخدمنا عنصرًا نائبًا منخفض الجودة؟

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

قررت أن أجرب Webpagetest على صفحة تعرض عناصر نائبة منخفضة الجودة (انظر التقرير على WebPageTest):

يمكننا أن نلاحظ أنه بين 8 و 10 الثانية يتم تحميل الصورة. يزيد العنصر النائب الضبابي نسبة اكتمال الصورة من 75٪ إلى 83٪. يأخذ تحميل الصورة النهائية من 83٪ إلى 93٪.

نرى أن العنصر النائب يساهم في الاكتمال البصري للصفحة كما تم قياسه بواسطة مؤشر السرعة. يمكننا أيضًا ملاحظة أن العنصر النائب لا يعتبر منطقة كاملة بصريًا.

مؤشر السرعة ليس هو المقياس الوحيد الذي يمكننا استخدامه للحصول على مقياس لمدى سرعة عرض صفحتنا. تتضمن أدوات مطوري Chrome خيارًا لإجراء تدقيق الأداء. انتقل إلى Audits ← Perform an audit ← Check 'Performance' ← قم Run audit .

يؤدي إجراء تدقيق إلى إنشاء تقرير مثل هذا:

أحد المقاييس التي تم الإبلاغ عنها هو "مؤشر السرعة الإدراكية". في هذا المدى القيمة هي 4,245 . لكن ماذا يعني هذا المصطلح بالضبط؟ هل هو نفس "مؤشر السرعة" الخاص بـ Webpagetest؟

نهج مؤشر السرعة لقياس التشابه على مستوى البكسل ، والذي يُطلق عليه أيضًا "متوسط ​​فرق المدرج التكراري" ، له بعض العيوب. لا يلتقط MHD الإدراك البصري للشكل أو اللون أو تشابه الكائن.

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

"في الدراسات التجريبية واسعة النطاق التي أجريناها (باستخدام أكثر من 500 مقطع فيديو لصفحات الويب للجوّال من Alexa تم جمعها عبر WebPagetest) ، وجدنا أن SI و PSI مرتبطان خطيًا (عند 0.91 ، على وجه الدقة). - مؤشر السرعة الإدراكية (PSI) لقياس أداء الويب فوق الجزء المرئي من الصفحة

مؤشر السرعة الحسية

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

يستخدم SSIM (التشابه البنيوي) لقياس التشابه بين صورتين. تحاول هذه الطريقة نمذجة كيفية إدراك البشر للصور ، وتلتقط تشابه الشكل واللون والأشياء. يحتوي SSIM على تطبيقات أخرى مثيرة للاهتمام: أحدها هو تحسين إعدادات ضغط الصور ، مثل cjpeg-dssim الذي يختار أعلى مستوى لضغط JPEG وينشئ صورة ذات SSIM قريب بدرجة كافية.

أدناه يمكنك رؤية درجات Image SSIM JS لصور SVG التي تم إنشاؤها باستخدام Primitive. كلما زاد عدد الأشكال التي نستخدمها ، كلما اقتربنا من الصورة الأصلية (SSIM = 1).

البدائل الحديثة لـ SSIM هي butteraugli (التي يستخدمها Guetzli ، ومشفرة JPEG الموجهة من Google) و SSIMULACRA (المستخدمة بواسطة Cloudinary).

خاتمة

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

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

بصفتنا مطوري ويب ، يجب أن نهتم أكثر بتجربة تحميل مواقع الويب التي نبنيها. إنه لأمر رائع أن لدينا الآن أدوات مثل WebPageTest و Lighthouse التي يمكن أن تساعدنا بسهولة في قياس تأثير استخدام تقنيات تحميل الصور التدريجي. لا مزيد من الأعذار!