الأداء وإمكانية الوصول

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

ما يفعله الثيم

السرعة

• لا يستخدم Rawnaq أي أطر عمل (frameworks) ولا مكتبات كود من أطراف خارجية. تحمّل الصفحة الرئيسية التجريبية نحو 30 KB من التنسيق المضغوط ونحو 30 KB من JavaScript، ويتأجل تحميل JavaScript حتى لا يمنع ظهور الصفحة. ويظهر المحتوى الموجود على الشاشة فورًا، وتبدأ الأفلام الموجودة في الشاشة الأولى بعد اكتمال تحميل الصفحة فقط، بحجم يناسب الشاشة.
• تقدّم Shopify الصور بعدة أحجام، ويستلم جهاز كل متسوق الحجم الذي يحتاجه. والصور الموجودة أسفل الشاشة الأولى لا تُحمَّل إلا عندما يصل المتسوق إليها بالتمرير.
• لا تُحمَّل فيديوهات YouTube وVimeo إلا عندما يضغط الزائر على التشغيل.
• تأتي الخطوط من مكتبة خطوط Shopify نفسها، فلا يتم استدعاء أي خدمة خطوط إضافية.
• الحركات خفيفة ويمكن إيقافها. راجع Theme settings > Animations.

إمكانية الوصول

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

ما يمكنك فعله

أحجام الصور

1. ارفع صورًا حادة لكن ليست ضخمة. لبانر أو عرض شرائح بعرض الصفحة كاملًا، يكفي عرض من 2000 إلى 2400 px. ولصور المنتجات، يكفي 2000 px على أطول ضلع. وأي حجم أكبر يبطئ عمليات الرفع لديك فقط.
2. اضغط الصور قبل رفعها. يمكن لأداة مجانية مثل Squoosh أو TinyPNG عادةً أن تقلل حجم الملف إلى النصف دون خسارة ظاهرة.
3. استخدم الشكل نفسه لكل صور المنتجات، مثل الوضع الطولي 4:5. ثم اختر Image shape مطابقًا في Theme settings > Product cards حتى لا يُقص شيء.
4. أضف Mobile image إلى شرائح عرض الشرائح وإلى Image banner. الصورة الطولية للموبايل أصغر حجمًا وتبدو أفضل من صورة عريضة مقصوصة لتناسب الشاشة.
5. اجعل فيديوهات الصورة الرئيسية قصيرة، أقل من 10 ثوانٍ، ومضغوطة وبدون صوت.
6. استخدم PNG فقط للرسومات ذات الخلفية الشفافة، مثل الشعارات. واستخدم JPEG للصور. وSVG هو الأفضل للشعارات.

النص البديل (Alt text)

النص البديل (Alt text) وصف قصير للصورة. تقرؤه قارئات الشاشة، وتستخدمه محركات البحث.

1. في لوحة تحكم Shopify، افتح منتجًا واختر صورة ثم اختر Edit alt text. صف ما في الصورة: "عارضة أزياء ترتدي معطفًا من الصوف بلون جملي، منظر أمامي".
2. افعل الشيء نفسه مع الصور في أقسامك. يمكنك ضبط النص البديل لصورة مرفوعة من Content > Files.
3. تجنب العبارات الزائدة مثل "صورة عن" وتجنب حشو الكلمات المفتاحية.
4. الصور الزخرفية لا تحتاج إلى وصف. اتركه فارغًا.
5. في قسم Logo list، املأ Brand name لكل شعار. فهو يُقرأ كوصف للصورة.

التطبيقات (Apps)

كل تطبيق تثبّته يمكن أن يضيف كودًا إلى متجرك، حتى عندما يبدو غير مرئي.

1. ثبّت التطبيقات التي تستخدمها فقط. أزل التطبيقات التي جرّبتها وتخلّيت عنها، وتأكد أنها لم تترك كودًا خلفها (Online Store > Themes > Edit code، أو اسأل دعم التطبيق).
2. فضّل الميزات المدمجة في Rawnaq على التطبيقات. قائمة الرغبات والمقارنة والمعاينة السريعة ودردشة WhatsApp وشريط الشحن المجاني وشريط الإعلانات ودليل المقاسات وطلبات عودة المنتج للمخزون موجودة بالفعل في الثيم.
3. تطبيقات النوافذ المنبثقة وأدوات الدردشة وتطبيقات التقييمات هي عادةً الأثقل. أبقِ واحدًا من كل نوع على الأكثر.
4. بعد تثبيت تطبيق أو إزالته، اختبر سرعة متجرك مرة أخرى.

محتوى الصفحة

1. اجعل الصفحة الرئيسية مركّزة. خمسة إلى تسعة أقسام تُحمَّل أسرع، ويصل المتسوقون إلى المقصود.
2. استخدم نافذة منبثقة واحدة وليس عدة نوافذ. راجع Theme settings > Popups.
3. اختر خطين على الأكثر.
4. اجعل عروض الشرائح ثلاث أو أربع شرائح فقط. التشغيل التلقائي متوقف افتراضيًا لسبب.

قِس الأداء

1. استخدم تقرير Shopify نفسه: تعرض صفحة Online Store > Themes درجة سرعة المتجر الإلكتروني للثيم المنشور لديك.
2. لفحص مفصّل، استخدم Google PageSpeed Insights على عنوان متجرك الحقيقي. اختبر الموبايل والكمبيوتر معًا.
3. اختبر بعد كل تغيير كبير، مثل تطبيق جديد أو عرض شرائح جديد أو فيديو.

مفيد أن تعرف

• تتغير درجات السرعة بحسب المحتوى الذي تضيفه. فقد يحصل متجر جميل بصور ضخمة على درجة أقل من الثيم نفسه.
• المتسوقون الحقيقيون أهم من الدرجات. افتح متجرك على هاتف عادي وباتصال إنترنت عادي.
• التباين مسؤوليتك أنت أيضًا. عندما تغيّر الألوان في Theme settings > Colors، تأكد أن النص سهل القراءة على كل خلفية، خصوصًا النص فوق الصور.
• ضع النص فوق الصور فقط عند وجود تباين كافٍ. استخدم Overlay opacity لتغميق الصورة خلف النص الأبيض.
• استخدم نصًا واضحًا للروابط والأزرار. عبارة "تسوّق الفساتين" تقول أكثر من "اضغط هنا"، للمتسوقين ولقارئات الشاشة.
• أضف ترجمة مكتوبة أو نصًا كاملًا للفيديوهات المهمة.