تؤدي كل ثانية إضافية في وقت تحميل الجوّال إلى انخفاض معدل التحويل بنسبة 7% تقريبًا. وتستخدم جوجل مؤشرات الأداء الأساسية (Core Web Vitals) كإشارة تصنيف مؤكدة. ومع ذلك، لا تزال معظم متاجر Shopify تستغرق من 4 إلى 6 ثوانٍ للتحميل على الجوّال. الخبر السار: الوصول إلى وقت LCP أقل من 2.5 ثانية ليس سحرًا، بل هو قائمة تحقق من 12 نقطة يمكن لمعظم المتاجر إكمالها في غضون 10–15 يوم عمل.
إليك القائمة مرتبة حسب الأولوية.
1. تحويل صور البطل (Hero Images) إلى صيغة WebP/AVIF مع استخدام خاصية srcset المتجاوبة
عادة ما تكون صورة البطل في صفحتك الرئيسية هي عنصر LCP. يمكن لملف JPEG بحجم 600 كيلوبايت أن ينخفض إلى 80 كيلوبايت بصيغة WebP دون أي فقدان ملحوظ في الجودة. استخدم خاصية srcset ليقوم الجوّال بجلب نسخة بحجم 768 بكسل بدلاً من النسخة الأصلية الخاصة بسطح المكتب. هذا الإجراء وحده يقلل غالبًا من وقت LCP بنسبة 30–40%.
2. التحميل المسبق لصورة البطل والخط الأساسي
أضف <link rel="preload" as="image" href="hero.webp"> في ملف theme.liquid لصورة البطل على الصفحة الرئيسية. وينطبق الأمر نفسه على خطك الرئيسي. ستبدأ المتصفحات في جلب هذه العناصر فورًا، قبل تحليل بقية كود HTML.
3. استخدم font-display: swap وقم بتجزئة خطوطك
تحمّل معظم القوالب أكثر من 5 أوزان لخطوط جوجل، بينما على الأرجح أنك تستخدم وزنين فقط. قم بتجزئة ملفات خطوطك لتقتصر فقط على الأوزان والحروف التي تحتاجها فعليًا. أضف font-display: swap ليتم عرض النص فورًا بخط بديل بينما يتم تحميل الخط المخصص.
4. تأجيل تحميل ملفات JavaScript غير الضرورية
أضف defer أو async لكل ملف نصي (script) غير ضروري للرسم الأولي للصفحة. تتضمن معظم حزم القوالب نصوصًا لعروض الشرائح والنوافذ المنبثقة والرسوم المتحركة التي لا تحتاج إلى التشغيل قبل عرض الصفحة.
5. تدقيق كل تطبيق من طرف ثالث
يمكن لكل تطبيق Shopify تقوم بتثبيته أن يحقن JavaScript عبر خاصية تضمين التطبيق في theme.liquid. تضيف بعض التطبيقات أكثر من 100 كيلوبايت من كود JS المتزامن. استخدم علامة التبويب "التغطية" (Coverage) في أدوات مطوري كروم لمعرفة مقدار ما يتم استخدامه فعليًا من كل نص برمجي. قم بتأجيل أو إزالة التطبيقات التي لا تحقق عوائد تبرر تأثيرها على السرعة.
إذا كان التطبيق يحقن 200 كيلوبايت من JS لميزة تستخدمها في 0.1% من الصفحات، فقم بتأجيلها أو إزالتها. لا يوجد حل وسط.
6. نقل أدوات عرض التقييمات إلى ما أسفل الجزء المرئي (Below the fold)
غالبًا ما تظهر أدوات Yotpo وStamped وJudge.me في الجزء العلوي من الصفحة وتعيق LCP. انقل عرض الأداة إلى مشغل تحميل مؤجل (lazy-load) يعمل فقط عندما يتجاوز المستخدم 50% من الصفحة. التقييمات مهمة، لكن لا يجب أن يتم عرضها في أول ثانيتين.
7. حجز مساحة للعناصر التي تسبب إزاحة في التخطيط
الهدف هو تحقيق CLS (إزاحة التخطيط التراكمي) أقل من 0.1. الأسباب الشائعة: الصور التي يتم تحميلها مؤخرًا بدون أبعاد محددة، أشرطة إثبات الحالة الاجتماعية التي تظهر متأخرًا، وخطوط الويب التي يتم تبديلها وتغيير حجم النص. أضف عرضًا وارتفاعًا محددين لكل صورة، واحجز مساحة للافتات، واضبط مقاييس الخط البديل حتى لا يتغير النص عند تحميل الخط المخصص.
8. تضمين CSS الحرج (Inline Critical CSS)
يجب تضمين كود CSS اللازم لعرض الجزء العلوي من الصفحة مباشرة داخل وسم <head>. أما بقية الكود فيمكن تحميله بشكل غير متزامن. هذا يلغي رحلة ذهاب وإياب واحدة تحظر العرض ويحسن عادةً وقت LCP بمقدار 200–400 مللي ثانية.
9. إزالة حلقات Liquid غير المستخدمة
غالبًا ما تحتوي القوالب المخصصة على أقسام Liquid تقوم بعمل حلقة (loop) عبر كل منتج على الصفحة الرئيسية حتى عندما يكون 12 منتجًا فقط مرئيًا. قم بتدقيق ملف sections.json الخاص بصفحتك الرئيسية وأزل المنطق غير المستخدم.
10. استخدم التحميل المؤجل الأصلي للصور الموجودة أسفل الجزء المرئي
أضف loading="lazy" لكل صورة ليست في إطار العرض الأول. تتعامل المتصفحات مع هذا أصليًا الآن، دون الحاجة لمكتبة JavaScript. هذا يقلل من وزن الصفحة الأولي بنسبة 50% أو أكثر في صفحات المجموعات والمنتجات.
11. تقليم حزم JavaScript غير المستخدمة
استخدم علامة التبويب "التغطية" في أدوات مطوري كروم لتحديد الكود الذي يتم إرساله ولكن لا يتم استخدامه. معظم حزم القوالب ترسل 200–400 كيلوبايت من JS بينما يتم استخدام 80–120 كيلوبايت فقط في أي صفحة معينة. قم بعمل "Tree-shake" أو تقسيم للكود.
12. قياس الأداء على أجهزة جوّال حقيقية
أداة Lighthouse على جهاز Macbook تخدعك. قم بتشغيل WebPageTest على هاتف أندرويد حقيقي متوسط الفئة (مثل Moto G Power أو Pixel 6a) عبر اتصال 4G محدود السرعة. هذا هو المكان الذي يتسوق فيه عملاؤك حقًا. قد تعني درجات Lighthouse التي تتجاوز 90 على سطح المكتب 40–50 فقط على الجوّال الحقيقي.
بطاقة تقييم ما قبل الإطلاق
قبل أي عمل على تحسين السرعة، التقط هذه الأرقام الأساسية من أداة PageSpeed Insights للجوّال:
- LCP (الهدف <2.5 ثانية)
- CLS (الهدف <0.1)
- INP (الهدف <200 مللي ثانية)
- FCP (الهدف <1.8 ثانية)
- إجمالي وزن الصفحة (الهدف <1 ميجابايت)
- وزن JavaScript (الهدف <200 كيلوبايت)
بعد إكمال قائمة النقاط الاثنتي عشرة، أعد الاختبار وقارن النتائج. تشهد معظم المتاجر تحرك جميع المؤشرات الستة إلى النطاق الأخضر في غضون 10–15 يوم عمل.
هل تحتاج إلى مساعدة في التنفيذ؟
نحن ننفذ قائمة التحقق هذه للعلامات التجارية على Shopify كل أسبوع. تحقق معظم المشاريع تحسينات ملموسة في مؤشرات الأداء الأساسية في غضون 10–15 يوم عمل. أرسل لنا رابط متجرك، وسنرسل لك فيديو مجانيًا عبر منصة Loom يشرح أفضل 5 فرص لتحسين متجرك تحديدًا.
Comments (0)