عنصر واجهة المستخدم الخاص بالدردشة الخاص بك مباشر ويعمل. ثم تفتح المتجر على الهاتف، وتمرر إلى منتج، ويستقر المشغل على شريط "أضف إلى عربة التسوق". تضغط على "شراء"، وتفتح نافذة الدردشة.
النصيحة المعتادة هي تقليص حجم عنصر واجهة المستخدم، وتعيينه مغلقًا افتراضيًا، وتأجيل البرنامج النصي. كل هذا يتعلق بالوزن، والوزن يستحق التحقق منه، لذا اختبرته. نفس الموقع، مع تشغيل عنصر واجهة المستخدم وإيقافه، وعادت درجات السرعة كما هي في كلتا المرتين.
بعض عناصر واجهة المستخدم ثقيلة حقًا وتستحق التحسين. لكن عنصر واجهة مستخدم يستقر على زر "أضف إلى عربة التسوق" يكلفك البيع مباشرة، وهذا ليس مشكلة وزن.
إنها مشكلة موضع، والشريط السفلي لشاشة الهاتف هو المكان الذي تتنافس فيه عربة التسوق الخاصة بك، وشريط الإشعارات الخاص بملفات تعريف الارتباط، والمشغل الخاص بك.
أدناه قمت بالمرور على نتائج الاختبار، وكيفية قياس شريط عربة التسوق الخاص بالسمة الخاصة بك، وما الذي يجب ضبط عنصر واجهة المستخدم عليه حتى يتجاوزه.
في هذا المقال:
- عناصر واجهة المستخدم الخاصة بالدردشة ليست ثقيلة جدًا، بل هي في المكان الخاطئ
- ماذا حدث عندما قمنا بقياس عنصر واجهة مستخدم للدردشة أثناء تفعيله وإلغاء تفعيله
- كيف تكتشف مدى ارتفاع شريط عربة التسوق اللاصق لديك فعليًا
- حلقة تخمين البكسل، والإعدادات التي تنهيها
- أسئلة شائعة حول عناصر واجهة المستخدم للدردشة على الهاتف المحمول
- تحسين عناصر واجهة المستخدم للدردشة على الهاتف المحمول: ما يعود إليه الأمر
عناصر واجهة المستخدم الخاصة بالدردشة ليست ثقيلة جدًا، بل هي في المكان الخاطئ
على الهاتف، الجزء السفلي من الشاشة هو مساحة متنازع عليها. شريط "أضف إلى عربة التسوق" اللاصق يعيش هناك. وكذلك شريط ملفات تعريف الارتباط الخاص بك. وكذلك مشغل الدردشة الخاص بك، عادةً في الزاوية اليمنى السفلية افتراضيًا.
عندما يستقر المشغل فوق زر "شراء"، يضغط المتسوق على الدردشة بدلاً من الشراء. هذا يكلفك البيع بطريقة لن تفعلها أبدًا بضعة كيلوبايت إضافية.
لقد أجريت تدقيقًا باستخدام Lighthouse على نفس الموقع مع تشغيل عنصر واجهة المستخدم وإيقافه. النسخة المختصرة: أضاف عنصر واجهة المستخدم حوالي 148 كيلوبايت من الأصول ولم يحرك أيًا من مقاييس Core Web Vital.
لذا فإن الإصلاح ليس مشروعًا يتعلق بحجم الملف. إنها ثلاث خطوات، بهذا الترتيب:
- اختر الزاوية التي لا يتم التنافس عليها. إذا كان شريط عربة التسوق أو اللافتة الخاصة بك يزدحمان جانبًا واحدًا، فانقل المشغل إلى الجانب الآخر.
- قم بقياس ارتفاع شريطك اللاصق. أنت بحاجة إلى الرقم الحقيقي من السمة الخاصة بك، وليس رقمًا تم تخمينه.
- اضبط إزاحة بالبكسل عن الأسفل. هذا يرفع المشغل بعيدًا عن الشريط بدلاً من إخفائه.
قم بالعمل من خلالها بهذا الترتيب، وسيختفي التصادم قبل أن تفتح تقرير الأداء على الإطلاق.
ماذا حدث عندما قمنا بقياس عنصر واجهة مستخدم للدردشة أثناء تفعيله وإلغاء تفعيله
لقد قمت بإعداد أربع صفحات متطابقة على نفس موقع ووردبريس. اثنان قاما بتشغيل WPChat، واثنان لم يكن بهما أي عنصر واجهة مستخدم للدردشة على الإطلاق.
ثم اختبرت كل واحدة في PageSpeed Insights على هاتف Android متوسط المدى محاكى عبر اتصال بطيء، مرتين لكل صفحة، وقمت بحساب متوسط النتائج.
هذا ما عاد.
| المقياس | بدون عنصر واجهة مستخدم | مع عنصر واجهة مستخدم |
|---|---|---|
| الأداء | 96.5 | 96.5 |
| أول طلاء للمحتوى | 2.0 ثانية | 2.0 ثانية |
| أكبر طلاء للمحتوى | 2.30 ثانية | 2.35 ثانية |
| إجمالي وقت الحظر | 0 مللي ثانية | 0 مللي ثانية |
| تغيير التخطيط التراكمي | 0 | 0 |
| مؤشر السرعة | 2.05 ثانية | 2.20 ثانية |
- أكبر طلاء للمحتوى، اللحظة التي ينتهي فيها تحميل أكبر شيء على الشاشة، تحركت بمقدار 0.05 ثانية.
- مؤشر السرعة، تقريبًا مدى سرعة ملء الصفحة بصريًا، تحرك بمقدار 0.15 ثانية.
كلاهما يقعان ضمن التباين الطبيعي بين التشغيلات على تكوينات متطابقة، لذا لا يوجد فرق حقيقي.
ظل إجمالي وقت الحظر وتغيير التخطيط التراكمي عند الصفر. هذا يعني أن الأداة لم تحظر شيئًا على الخيط الرئيسي ولم تنقل شيئًا على الصفحة أثناء تحميلها.
تظهر التكلفة في التشخيصات بدلاً من ذلك. انتقلت الصفحة من 33 كيلوبايت من الملفات القابلة للتخزين المؤقت إلى 181 كيلوبايت، وهو ما يقرب من 148 كيلوبايت من أصول الأداة، أو بحجم صورة متوسطة الحجم تقريبًا.
لذا فإن النسخة البسيطة هي هذه: بلغت تكلفة الأداة حوالي 148 كيلوبايت ولم تنقل أيًا من مؤشرات الويب الأساسية، مما يعني أن أيًا من درجات التحميل والاستقرار الثلاث التي تستخدمها Google فعليًا للتصنيف.
طالما أنك تستخدم مكونًا إضافيًا مكتوبًا بشكل جيد مثل WPChat لأداة الدردشة الخاصة بك، فلن تكون سرعة الموقع مشكلة لزوار هاتفك المحمول.
كيف تكتشف مدى ارتفاع شريط عربة التسوق اللاصق لديك فعليًا
تبني كل سمة شريط "أضف إلى عربة التسوق" الخاص بها بشكل مختلف، لذلك لا يوجد رقم يمكنني تقديمه لك. عليك قراءة بنفسك. يستغرق الأمر حوالي دقيقتين في متصفح سطح المكتب الخاص بك.
إليك كيفية الحصول عليه.
- افتح إحدى صفحات المنتج الخاصة بك في Chrome على جهاز الكمبيوتر الخاص بك. اختر منتجًا تبيعه بالفعل، وليس منتجًا نموذجيًا، لأن محتويات الشريط تغير مظهره.
- افتح أدوات المطور. انقر بزر الماوس الأيمن في أي مكان على الصفحة واختر "فحص". تفتح لوحة على جانب الشاشة أو أسفلها.
- قم بالتبديل إلى عرض الهاتف. انقر على أيقونة الهاتف والجهاز اللوحي الصغيرة بالقرب من أعلى يسار لوحة أدوات المطور، المسماة "تبديل شريط أدوات الجهاز". تعيد الصفحة رسمها بعرض الهاتف.
- اضبطه على عرض الهاتف، 390 هو عرض شائع. في الجزء العلوي من الصفحة سترى مربع حجم مع قائمة منسدلة بجانبه، عادة ما يقرأ "متجاوب". اكتب 390 في حقل العرض. يتكدس شريطك ويضبط حجمه بشكل مختلف عند عرض الهاتف مقارنة بشاشة سطح المكتب.
- مرر لأسفل حتى يظهر الشريط الثابت. في معظم السمات، ينزلق بمجرد تجاوز زر "أضف إلى عربة التسوق" الرئيسي.
- انقر بزر الماوس الأيمن على الشريط نفسه واختر "فحص" مرة أخرى. ينتقل Chrome إلى هذا العنصر في لوحة "العناصر" ويبرزه على الصفحة.
- مرر مؤشر الماوس فوق السطر المميز في لوحة العناصر. تظهر تلميح صغير فوق الصفحة يعرض رقمين، شيء مثل 390 × 64. الأول هو العرض، والثاني هو الارتفاع. هذا الرقم الثاني هو ما جئت من أجله.
اكتبه. هذا هو ارتفاع الشريط بالبكسل.
إليك بعض الأشياء التي يجب مراعاتها من هنا:
- إذا بدا الرقم صغيرًا جدًا، فقد قمت بتحديد الزر بدلاً من الشريط. في لوحة العناصر، انقر فوق السطر الموجود فوق السطر الذي أنت عليه وشاهد التمييز. استمر في الصعود حتى يغطي الشريط بأكمله، من الحافة إلى الحافة، ثم اقرأ الارتفاع مرة أخرى.
- تحقق من منتج ثانٍ. عادةً ما يعطي المنتج البسيط الذي يحتوي على زر واحد شريطًا أقصر من المنتج المتغير، حيث يؤدي محدد الكمية أو قائمة منسدلة للتنوع إلى جعله أطول.
- احتفظ بالرقم الأكبر. يمكن أن يكون الأداة في ارتفاع واحد فقط.
لديك الآن رقم. السؤال التالي هو أين تكتبه، لأن العديد من الأدوات لا توفر لك مكانًا لوضعه وتعطيك CSS بدلاً من ذلك.
يحتوي WPChat على حقول لهذا الغرض بالضبط: إعداد موضع وإزاحات منفصلة بالبكسل من الأسفل واليمين.
تحويل هذا الرقم إلى إزاحة
إزاحتك هي ارتفاع الشريط بالإضافة إلى فجوة. إذا كان شريطك يقيس 64 بكسل، فلا تضبط الإزاحة على 64 بكسل.
اضبطه على شيء مثل 80 بكسل بدلاً من ذلك. الفجوة مهمة لأن أهداف النقر لا تحتاج إلى التداخل للتسبب في مشاكل.
تغطي أطراف الأصابع جزءًا أكبر بكثير من الشاشة مما يغطيه مؤشر الماوس، لذا فإن عنصرين متجاورين تمامًا سيؤديان إلى نقرات خاطئة حتى عندما تبدو الواجهة نظيفة. فجوة 16 بكسل فوق الشريط كافية لفصلهما.
لذا فإن الصيغة العملية هي: ارتفاع الشريط + 16 بكسل = إزاحة الأسفل الخاصة بك.
تحذير واحد قبل أن تثق بهذا الرقم
ترسم DevTools تخطيطك، لكنها لا ترسم الهاتف. واجهة المتصفح الخاصة تجلس فوق الصفحة على جهاز حقيقي، وهذا يكلفك ارتفاعًا لا يظهره المحاكي أبدًا.
ثلاثة أشياء تستهلك منه:
- واجهة المتصفح. شريط العنوان وشريط الأدوات في أسفل Safari و Chrome على iOS تشغل مساحة حقيقية.
- شريط العنوان القابل للطي. يتقلص أثناء التمرير ويتوسع عند التمرير لأعلى مرة أخرى، لذا تتغير المساحة المتاحة أثناء استخدام المتسوق للصفحة.
- فواصل المنطقة الآمنة لنظام iOS. شريط مؤشر المنزل في أسفل أجهزة iPhone الأحدث هو مساحة محجوزة يجب أن يقع تخطيطك فوقها.
لا تنس أن ارتفاعات الأشرطة تختلف عبر سمات مثل Astra و Botiga و Woostify وغيرها، ولم أختبرهم جميعًا.
لهذا السبب سأختار إزاحة مع مساحة علوية بدلاً من إزاحة مثالية بالبكسل.
اضبط رقمك، ثم افتح صفحة المنتج على هاتف فعلي مرة واحدة وانقر فوق زر الشراء. إذا كان نظيفًا، فقد انتهيت. إذا كان ضيقًا، أضف 10 بكسل أخرى وتحقق مرة أخرى.
حلقة تخمين البكسل، والإعدادات التي تنهيها
يُظهر موضوعان للدعم العام على WordPress.org ما يحدث عندما لا توفر لك أداة إعدادًا لهذا.
في الموضوع الأول، يبلغ صاحب متجر عن تغطية أداة الدردشة لزر "إضافة إلى عربة التسوق" في WooCommerce على الهاتف المحمول. الإصلاح قصير: انقل موضع الأداة في إعدادات المكون الإضافي. هذا هو الحل الكامل.
يذهب الموضوع الثاني في الاتجاه الآخر. يصل شريط ملفات تعريف الارتباط فوق أزرار أداة الدردشة على الهاتف المحمول، ولا يوجد إعداد له.
لذلك، يقدم الدعم CSS مخصصًا يرفع الشريط بمقدار 100 بكسل على الشاشات التي يقل عرضها عن 479 بكسل.
هذا غير كافٍ، لذا يرتفع الرقم إلى 160 بكسل. يعود المستخدم ويبلغ عن أن الشعار أصبح الآن في وسط اللا مكان.
لم يرتكب أحد في هذا الموضوع أي خطأ. تحدث الحلقة لأن قيمة بكسل مقدرة يتم اختبارها مقابل ارتفاع شريط لم يتم قياسه أبدًا، داخل استعلام وسائط، لا يملك صاحب المتجر أي طريقة لتصحيح الأخطاء على هاتفه الخاص.
تغير الرقم، ثم تعيد التحميل، ثم تحدق، ثم تغيره مرة أخرى. لا يوجد قياس في أي مكان في هذه العملية، وهذا هو السبب في أنها لا تتقارب.
الإعدادات التي تحل محل التخمين
يعتمد مكان جلوس هذا الشريط على السمة الخاصة بك، وهذا هو بالضبط سبب منحك WPChat عناصر تحكم في الموضع بدلاً من افتراض أن زاوية واحدة تعمل في كل مكان.
تتوافق عناصر التحكم مع ترتيب الإصلاح من وقت سابق في هذه المقالة.
- الموضع: يستقر المشغل في أسفل اليمين افتراضيًا، مع توفر أسفل اليسار. هذه هي الحركة الأفقية، عندما يشغل زر "أضف إلى السلة" أحد جانبي الشريط.
- الإزاحة: حقول بكسل منفصلة للمسافة من اليمين والمسافة من الأسفل. الرقم الذي قمت بقياسه سابقًا يذهب إلى الحقل السفلي: ارتفاع الشريط الخاص بك بالإضافة إلى الفجوة 16 بكسل.
- استهداف الصفحة: يتيح لك هذا إيقاف تشغيل الأداة على صفحات معينة، وهذا هو كيف تبقيها بعيدًا عن الصفحات التي لا تحتاجها فيها.
يجدر معرفة استهداف الصفحة: عندما يتم إيقاف تشغيل الأداة على صفحة، لا يقوم WPChat بتحميلها ثم إخفائها. يتحقق أولاً، لذلك لا يتم تنزيل الملفات على الإطلاق.
هل أنت مستعد للبدء؟ اطلع على دليلنا خطوة بخطوة لإضافة أداة دردشة عبر الإنترنت إلى موقعك الإلكتروني.
أسئلة شائعة حول عناصر واجهة المستخدم للدردشة على الهاتف المحمول
كيف أقيس ارتفاع شريط "أضف إلى السلة" الثابت في السمة الخاصة بي؟
قم بقياسه في Chrome DevTools مع تفعيل شريط أدوات الجهاز. اضغط على F12، وانقر على "تبديل شريط أدوات الجهاز"، واضبط العرض على حجم هاتف مثل 390، ثم قم بالتمرير حتى يظهر الشريط الثابت. انقر بزر الماوس الأيمن على الشريط، واختر "فحص"، ومرر فوق السطر المميز في لوحة "العناصر". يعرض التلميح رقمين، والثاني هو ارتفاعك بالبكسل.
أسفل اليسار أم أسفل اليمين عندما يكون لدي شريط تسوق ثابت؟
اختر الزاوية المقابلة للزر الرئيسي للشريط، حتى لا يكلفك النقر الخاطئ شيئًا. إذا كان زر "أضف إلى السلة" الخاص بك يقع على اليمين، فضع المشغل في أسفل اليسار. عندما يمتد الشريط عبر عرض الشاشة بالكامل، فلا توجد زاوية مجانية في أي من الاتجاهين، لذا اترك الموضع وشأنه وارفع المشغل بإزاحة سفلية بدلاً من ذلك.
هل تؤثر أداة الدردشة على نتيجة PageSpeed الخاصة بي؟
في اختباري، لا. عند تشغيل نفس الموقع مع تشغيل الأداة وإيقاف تشغيلها، أضافت حوالي 148 كيلوبايت من الأصول ولم تحرك أيًا من Core Web Vital. ظل كل من TBT و CLS عند الصفر. هناك تحذير واحد: كانت تلك صفحة اختبار نظيفة، وهي أفضل حالة، لذا فإن صفحة المنتج المليئة بالصور لن تتصرف بشكل متطابق.
لماذا لا يعمل إزاحة البكسل الموصى بها عبر السمات؟
لأن شريط "أضف إلى السلة" الثابت ليس ميزة WooCommerce. يأتي من السمة الخاصة بك أو من مكون إضافي منفصل، وكل منها يبني هذا الشريط بارتفاع مختلف. أي رقم تنسخه من موضوع دعم تم قياسه على سمة شخص آخر، وهذا هو السبب في أنك بحاجة إلى قياس السمة الخاصة بك.
تحسين عناصر واجهة المستخدم للدردشة على الهاتف المحمول: ما يعود إليه الأمر
لا يلزم أن يثقل عنصر واجهة مستخدم جيد الصنع موقعك. أضاف WPChat حوالي 148 كيلوبايت في اختباري ولم يؤثر على أي من مقاييس Core Web Vital، لذا لم يكن الوزن هو ما كلف البيع. كان الموضع: المشغل يجلس على الزر الوحيد الذي جاء عميلك للنقر عليه.
إليك ما يمكنك فعله:
- قم بقياس شريطك الثابت في Chrome DevTools بعرض الهاتف، وخذ الارتفاع من التلميح.
- أضف فجوة 16 بكسل إلى هذا الرقم. هذا هو الإزاحة السفلية الخاصة بك.
- اضبط الموضع والإزاحة في إعدادات عنصر واجهة المستخدم الخاص بك، وليس في استعلام وسائط.
- قم بإيقاف تشغيل عنصر واجهة المستخدم للسلة والدفع، إذا كنت تريد التركيز الكامل على البيع.
- تحقق من ذلك على هاتف حقيقي مرة واحدة، لأن أشرطة المتصفح الخاصة والجزء المخصص في أسفل أجهزة iPhone الأحدث تستهلك ارتفاعًا لا يظهره لك المحاكي أبدًا.
الرقم الذي تحصل عليه ينتمي إلى السمة الخاصة بك، وليس إلى عناصر واجهة الدردشة بشكل عام. تختلف السمات المختلفة في بناء هذا الشريط، ولهذا السبب فإن الحقل الذي يمكنك كتابة قياسك الخاص فيه يتفوق على أي رقم يمكنني طباعته هنا.
لديك الآن قياس. يوفر لك WPChat مكانًا لكتابته: الموضع، وإزاحات البكسل المنفصلة، واستهداف الصفحة.
احصل على WPChat وابدأ في التواصل مع الزوار على جميع الأجهزة وتنمية عملك.
