تحسين سرعة Shopify: مؤشرات الويب الأساسية في عام 2026

متجر Shopify الذي يستغرق تحميله 4 ثوانٍ يفقد ما يقرب من 25% من زواره المحتملين قبل انتهاء عرض الصفحة. وفي 6 ثواني يرتفع هذا الرقم إلى 50%. والأهم من ذلك بالنسبة لتحسين محركات البحث: تم الآن تضمين مؤشرات الويب الأساسية من Google في خوارزمية ترتيب البحث - حيث تحتل المتاجر ذات درجات LCP وINP وCLS الضعيفة مرتبة أقل لنفس الكلمات الرئيسية مقابل المنافسين الأسرع.

في عام 2026، يتطلب تحسين سرعة Shopify معالجة مجموعة الأداء الكاملة: تسليم الصور، وتنفيذ JavaScript، وموارد حظر العرض، والبرامج النصية التابعة لجهات خارجية، ومقياس INP الناشئ الذي يقيس الآن جودة التفاعل. يوفر هذا الدليل التقنيات المحددة التي تنقل متاجر Shopify من منطقة "بحاجة إلى تحسين" إلى منطقة "جيدة" عبر جميع مؤشرات الويب الأساسية.

الوجبات الرئيسية

• يعد LCP (أكبر رسم محتوى) الذي يزيد عن 2.5 ثانية هو أكثر فشل Core Web Vital شيوعًا في متاجر Shopify
• الصورة الرئيسية هي عنصر LCP في 80%+ من تخطيطات المنتج والصفحة الرئيسية في Shopify - قم بتحسينها على وجه التحديد
• حل INP (التفاعل مع الطلاء التالي) محل FID في عام 2024 - فهو يقيس جميع تفاعلات الصفحة، وليس التفاعلات الأولى فقط
• البرامج النصية للتطبيقات هي القاتل الأساسي للأداء - يبلغ متوسط كل تطبيق 30-100 كيلو بايت و150-300 مللي ثانية من وقت الحظر
• يتعامل CDN الأصلي الخاص بـ Shopify مع تسليم الصور، لكن تحديد التنسيق (WebP vs AVIF) يتطلب تكوينًا صريحًا
• يحدث CLS عادةً بسبب الصور التي لا تحتوي على أبعاد، والتضمينات المتأخرة في التحميل، وإعادة تدفق تبديل الخطوط
• متوسط وقت العرض السائل على خوادم Shopify هو 50-200 مللي ثانية - تضاعف القوالب المعقدة هذا
• يرتبط تحسين LCP لمدة ثانية واحدة بتحسين معدل التحويل بنسبة 10-15% للتجارة الإلكترونية

---

قياس الأداء الحالي الخاص بك

قبل التحسين، قم بالقياس. بدون خط الأساس، لا يمكنك قياس التحسن أو تحديد الفرص ذات التأثير الأعلى.

أدوات القياس الأساسية:

قراءة رؤى PageSpeed بشكل صحيح:

تعرض PageSpeed ​​Insights كلاً من "بيانات المختبر" (المحاكاة والتحكم) و"البيانات الميدانية" (المستخدمون الحقيقيون من Chrome). لأغراض التصنيف، تستخدم Google البيانات الميدانية (CrUX). تعتبر البيانات المعملية مفيدة لتشخيص الإصلاحات واختبارها، لكن البيانات الميدانية تخبرك بالموقف الفعلي.

حدود مؤشرات أداء الويب الأساسية:

إجراء قياس أساسي:

1. افتح PageSpeed Insights (pagespeed.web.dev)
2. اختبر هذه الصفحات الرئيسية: الصفحة الرئيسية، صفحة المجموعة الأساسية، صفحة المنتج الأكثر مبيعًا، صفحة سلة التسوق
3. قم بتسجيل قيم LCP وINP وCLS لكل من الهاتف المحمول وسطح المكتب
4. قم بأخذ لقطة شاشة لقسمي الفرص والتشخيصات
5. هذا هو خط الأساس الخاص بك – قم بإعادة الاختبار بعد كل جولة تحسين

---

تحسين LCP: مشكلة صورة البطل

يقيس LCP وقت عرض أكبر عنصر محتوى مرئي بالكامل. في متاجر Shopify، تكون هذه دائمًا هي الصورة الرئيسية على الصفحة الرئيسية أو صورة المنتج الرئيسية على صفحات المنتج.

** تشخيص عنصر LCP الخاص بك **:

افتح Chrome DevTools > علامة تبويب الأداء > سجل تحميل الصفحة. ابحث عن علامة "LCP" في المخطط الزمني. بدلاً من ذلك: في وحدة تحكم DevTools، قم بتشغيل:

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP element:', lastEntry.element);
  console.log('LCP time:', lastEntry.startTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });

تسلسل تحسين الصورة الرئيسية:

الخطوة 1 – تقديم الحجم الصحيح: يقبل CDN الخاص بـ Shopify معلمات الحجم في عناوين URL للصور. لا تعرض مطلقًا صورة بعرض 2000 بكسل على شاشة هاتف محمول بحجم 400 بكسل.

<!-- Shopify Liquid: responsive hero image -->
<img
  src="{{ section.settings.image | image_url: width: 1200 }}"
  srcset="{{ section.settings.image | image_url: width: 400 }} 400w,
          {{ section.settings.image | image_url: width: 800 }} 800w,
          {{ section.settings.image | image_url: width: 1200 }} 1200w,
          {{ section.settings.image | image_url: width: 1600 }} 1600w"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  width="1200"
  height="600"
  alt="{{ section.settings.image.alt | escape }}"
  fetchpriority="high"
  loading="eager"
>

الخطوة 2 - تحميل الصورة الرئيسية مسبقًا: أضف علامة رابط التحميل المسبق خصيصًا لصورة البطل. وهذا يخبر المتصفح بإحضارها في الأولوية القصوى، قبل أن يواجه علامة الصورة في HTML.

<!-- In theme.liquid <head> -->
{% if request.page_type == 'index' %}
  <link rel="preload"
    as="image"
    href="{{ section.settings.hero_image | image_url: width: 1200 }}"
    imagesrcset="{{ section.settings.hero_image | image_url: width: 400 }} 400w,
                 {{ section.settings.hero_image | image_url: width: 800 }} 800w,
                 {{ section.settings.hero_image | image_url: width: 1200 }} 1200w"
    imagesizes="(max-width: 768px) 100vw, 80vw"
  >
{% endif %}

الخطوة 3 - التأكد من تنسيق WebP: يخدم CDN الخاص بـ Shopify WebP بشكل افتراضي عندما يدعمه المتصفح. تحقق من خلال التحقق من رأس استجابة نوع المحتوى لعناوين URL للصور. يعمل WebP على تقليل حجم الملف بنسبة 25-35% مقارنة بصيغة JPEG ذات الجودة المكافئة.

الخطوة 4 - إزالة الرسوم المتحركة للصورة البطل: الرسوم المتحركة CSS التي يتم تشغيلها عند تأخير التحميل LCP. إذا كان لبطلك تأثير تلاشي أو انزلاق للداخل، فسيتم تحميل الصورة تقنيًا ولكنها ليست "مرئية" حتى تكتمل الرسوم المتحركة - تعتبر المتصفحات ذلك بمثابة تأخير LCP. قم إما بإزالة الرسوم المتحركة على البطل أو استخدم animation-delay: 0 وanimation-duration: 0.001s لجعلها فورية عند التحميل الأولي.

تحسين LCP لصفحة المنتج:

تحدد صورة المنتج الرئيسية LCP على صفحات المنتج. أضف fetchpriority="high" وloading="eager" إلى صورة المنتج الأساسي. تأكد من صحة أبعاد الصورة (سمات العرض/الارتفاع) لمنع تغييرات التخطيط التي يمكن أن تتداخل مع قياس LCP.

---

تحسين INP: تحسين التفاعل

يقيس INP (التفاعل مع الطلاء التالي) الوقت بين تفاعلات المستخدم (النقرات، الضغطات على المفاتيح، النقرات) والاستجابة المرئية التالية. يعني ارتفاع INP أن متجرك يبدو بطيئًا في التفاعل معه - الأزرار تبدو بطيئة في الاستجابة، والمرشحات التي تتأخر، وتحديثات سلة التسوق التي تستغرق وقتًا طويلاً.

تشخيص مشكلات INP:

في Chrome DevTools > علامة تبويب الأداء، ابحث عن "المهام الطويلة" (علامات حمراء في المخطط الزمني للموضوع الرئيسي). المهام التي تتجاوز 50 مللي ثانية هي "مهام طويلة" تحظر الموضوع الرئيسي وتؤخر الاستجابات لمدخلات المستخدم.

مرتكبو INP الشائعون في متاجر Shopify:

1. نصوص برمجية ثقيلة للتطبيقات: قم بمراجعة التطبيقات التي تقوم بتحميل أكثر من 500 عقدة DOM، وأدوات الدردشة التي تعمل على تهيئة أطر عمل JavaScript كبيرة
2. منطق منتقي المتغير: جافا سكريبت معقد يعيد حساب الأسعار والصور والتوفر عند اختيار المتغير
3. تحديثات درج سلة التسوق: جلب درج سلة التسوق وإعادة عرضه في كل إجراء إضافة إلى سلة التسوق
4. تهيئة تطبيق البحث: ابحث في التطبيقات التي تنشئ فهارسًا كبيرة عند تحميل الصفحة

تقنيات تقليل INP:

التقنية الأولى - تأجيل جافا سكريبت غير الهامة:

<!-- Defer app scripts that are not needed for initial interaction -->
<script src="https://third-party-app.com/widget.js" defer></script>

<!-- Or load after first user interaction -->
<script>
  document.addEventListener('click', function loadHeavyScript() {
    const script = document.createElement('script');
    script.src = 'https://heavy-app.com/widget.js';
    document.body.appendChild(script);
    document.removeEventListener('click', loadHeavyScript);
  }, { once: true });
</script>

التقنية 2 - تحسين اختيار المتغير:

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

التقنية 3 - تحسين استدعاءات واجهة برمجة تطبيقات سلة التسوق:

حالة عربة التسوق في ذاكرة التخزين المؤقت في JavaScript بدلاً من إعادة جلب العربة الكاملة في كل تفاعل. استخدم Shopify Cart API (/cart.js) للحصول على التحديثات وتحديث DOM بشكل متزايد بدلاً من إعادة عرض درج سلة التسوق بالكامل.

---

تحسين CLS: منع تغييرات التخطيط

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

** تشخيص CLS **:

في Chrome DevTools، قم بتمكين "Layout Shift Regions" في لوحة Rendering. أعد تحميل الصفحة - يتم تمييز تغييرات التخطيط باللون الأزرق. انقر فوق أي منطقة إزاحة لمعرفة العنصر الذي تم إزاحته ومتى وبأي حجم.

أسباب CLS الشائعة على Shopify:

1. صور بدون أبعاد واضحة: لا يمكن للمتصفح حجز مساحة قبل تحميل الصورة، مما يتسبب في إعادة التدفق.

<!-- Wrong: browser doesn't know the dimensions until image loads -->
<img src="{{ product.featured_image | image_url: width: 600 }}" alt="{{ product.featured_image.alt }}">

<!-- Correct: browser reserves exactly the right space -->
<img
  src="{{ product.featured_image | image_url: width: 600 }}"
  width="{{ product.featured_image.width | at_most: 600 }}"
  height="{{ product.featured_image.height | times: 600 | divided_by: product.featured_image.width }}"
  alt="{{ product.featured_image.alt | escape }}"
>

2. تأخر تحميل خطوط الويب مما يتسبب في حدوث FOUT (فلاش نص غير منمق):

/* Add font-display: swap or optional to all @font-face declarations */
@font-face {
  font-family: 'YourFont';
  src: url('your-font.woff2') format('woff2');
  font-display: swap; /* Text visible in fallback font, swaps when loaded */
}

3. المحتوى الديناميكي المُدرج فوق المحتوى الموجود: أشرطة الشعارات، أو إشعارات ملفات تعريف الارتباط، أو أدوات التطبيق التي تظهر فوق البطل تدفع المحتوى إلى الأسفل. استخدم CSS position: sticky أو قم بتخصيص مساحة مسبقًا للمحتوى الديناميكي.

4. ** أشرطة إعلانات Shopify **: تقوم العديد من سمات Shopify بتحميل محتوى شريط الإعلانات ديناميكيًا بعد عرض الصفحة. استخدم CSS min-height في حاوية شريط الإعلانات لحجز مساحة قبل تحميل المحتوى.

---

إدارة البرامج النصية للجهات الخارجية

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

تدقيق تحميل البرنامج النصي الخاص بك:

1. افتح Chrome DevTools > علامة تبويب الشبكة
2. أعد تحميل الصفحة مع مسح ذاكرة التخزين المؤقت (Ctrl+Shift+R)
3. قم بالتصفية حسب نوع "JS".
4. الترتيب حسب الحجم تنازليًا
5. حدد كافة البرامج النصية التي لم يتم تقديمها من cdn.shopify.com — وهي نصوص برمجية تابعة لجهات خارجية

** ورقة عمل تدقيق البرنامج النصي **:

تنفيذ نمط "التحميل على التفاعل":

// Load chat widget only when user tries to interact with chat button
// This saves 180KB and 450ms for users who never use chat

const chatButton = document.getElementById('chat-trigger');
chatButton.addEventListener('click', function() {
  // Load Intercom (or whatever chat app) here
  window.Intercom('boot', { app_id: 'your_app_id' });
}, { once: true });

استراتيجية تحميل البرنامج النصي الموصى بها حسب الفئة:

---

تحسين موضوع Shopify

تؤثر قوالب Liquid الخاصة بموضوعك وبنية JavaScript بشكل كبير على الأداء.

** تحسين عرض القسم **:

Shopify يعرض الأقسام من جانب الخادم عبر Liquid. تعمل الأقسام المعقدة التي تحتوي على العديد من عمليات البحث عن حقول التعريف أو الحلقات الكبيرة أو استدعاءات القوالب المتداخلة على زيادة وقت استجابة الخادم. الملف الشخصي للأقسام الخاصة بك:

1. في theme.liquid، أضف {% render 'timer' %} قبل وبعد الأقسام الثقيلة (قم بإنشاء مقتطف timer.liquid الذي سيخرج Date.now())
2. قارن بين الطوابع الزمنية لتحديد الأقسام التي تستغرق وقتًا أطول في العرض
3. تحسين الأقسام باهظة الثمن: نتائج ذاكرة التخزين المؤقت باستخدام المتغيرات السائلة، وتقليل الحلقات المتداخلة، وتبسيط المنطق الشرطي

بنية جافا سكريبت:

تستخدم سمات Shopify الحديثة (Dawn وSense وRefresh) بنية JavaScript خفيفة الوزن. تجنب القوالب التي تقوم بتحميل أطر عمل JavaScript ثقيلة (القوالب المعتمدة على jQuery تضيف 30 كيلو بايت+، والقوالب المعتمدة على React تضيف 100 كيلو بايت+) للصفحات التي يعرضها الخادم بشكل أساسي في Shopify.

تحسين CSS:

يستخدم قالب Shopify's Dawn خصائص CSS المخصصة والحد الأدنى من الخصوصية. تستفيد السمات التي تحتوي على ملفات CSS كبيرة (أكثر من 100 كيلو بايت) من:

• إزالة CSS غير المستخدمة (PurgeCSS أو تحذير CSS المدمج غير المستخدم في Shopify)
• تقسيم CSS وتحميل الأنماط الخاصة بالقسم بشكل مشروط
• تضمين CSS المهم في علامات <style> في <head> للأنماط الموجودة في الجزء العلوي

** تكوين التحميل البطيء **:

قم بتطبيق loading="lazy" على جميع الصور الموجودة أسفل الجزء المرئي من الصفحة. القاعدة المهمة: لا تقم مطلقًا بتطبيق التحميل البطيء على صورة LCP (عادةً صورة المنتج الأول أو البطل). يتعامل موضوع Dawn الخاص بـ Shopify مع هذا بشكل صحيح - تأكد من أن المظهر الخاص بك يفعل ذلك أيضًا.

---

مراقبة الأداء بعد التحسين

تحسين الأداء ليس مشروعًا لمرة واحدة. تؤثر عمليات تثبيت التطبيقات الجديدة وتحديثات السمات وإضافات المحتوى بشكل مستمر على الأداء.

إعداد المراقبة التلقائية:

1. قم بإعداد تنبيهات Google Search Console لتدهور مؤشرات أداء الويب الأساسية
2. استخدم Caliber أو SpeedCurve لاختبار الأداء اليومي الآلي مع التنبيه
3. قم بجدولة عمليات فحص PageSpeed ​​Insights الشهرية عبر أكثر من 5 صفحات رئيسية
4. أضف اختبارات الأداء إلى عملية تحديث السمة الخاصة بك: اختبرها قبل وبعد كل تحديث للسمة

ميزانية الأداء:

تحديد القيم القصوى لـ:

• إجمالي وزن الصفحة: 1.5 ميجابايت للجوال، 2.5 ميجابايت لسطح المكتب
• حمولة جافا سكريبت: 500 كيلو بايت تم تحليلها/تنفيذها
• LCP: 2.5 ثانية كحد أقصى
• عدد نصوص الطرف الثالث: الحد الأقصى 8

عندما يتجاوز أي مقياس الميزانية، يجب التحقيق والمعالجة قبل الإصدار التالي.

---

الأسئلة المتداولة

ما هو أسرع قالب Shopify لـ Core Web Vitals في 2026؟

يسجل قالب Dawn الرسمي الخاص بـ Shopify أعلى النتائج باستمرار في اختبارات Core Web Vitals لأنه تم تصميمه خصيصًا لتحقيق الأداء - Vanilla JavaScript، والحد الأدنى من CSS، وعدم وجود jQuery، وعرض القسم الفعال. من بين السمات المدفوعة، تحقق Prestige وImpulse وTurbo (بواسطة Out of the Sandbox) نتائج جيدة باستمرار. ومع ذلك، يعد اختيار السمة أمرًا ثانويًا بالنسبة للتكوين: فالمتجر المُحسّن جيدًا على القالب المتوسط ​​يتفوق على المتجر الذي تم تكوينه بشكل سيئ على القالب الأسرع.

كم عدد تطبيقات Shopify التي تعتبر كثيرة جدًا بالنسبة للأداء؟

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

هل تعكس نتيجة سرعة متجر Shopify عبر الإنترنت في المشرف بدقة مؤشرات الويب الأساسية لـ Google؟

لا. تستخدم نقاط سرعة المشرف في Shopify منهجية مختلفة عن مؤشرات أداء الويب الأساسية من Google. إنه مفيد بشكل مباشر ولكنه لا يرتبط بدقة ببيانات CrUX (المستخدم الحقيقي) في Search Console. استخدم دائمًا PageSpeed ​​Insights (الذي يعرض بيانات CrUX) وتقرير مؤشرات أداء الويب الأساسية في Google Search Console كمصادر موثوقة لقياس الأداء لأغراض تحسين محركات البحث.

هل يمكنني استخدام CDN بالإضافة إلى CDN المدمج في Shopify؟

تستخدم البنية التحتية لـ Shopify بالفعل شبكة CDN الخاصة بـ Fastly لتسليم الأصول. يمكن أن تؤدي إضافة CDN (Cloudflare) آخر أمام Shopify إلى تحسين الأداء للمناطق التي تعاني من نقص الخدمات بواسطة شبكة Fastly's PoP، ولكنها تتطلب تكوينًا دقيقًا لتجنب قواعد التخزين المؤقت المتضاربة. لا يرى معظم التجار مكاسب كبيرة في الأداء من إضافة Cloudflare إلى Shopify. إذا كانت قاعدة عملائك الأساسية موجودة في منطقة جغرافية حيث يكون أداء متجرك ضعيفًا، فاختبر Cloudflare على هذا الجمهور تحديدًا.

كم من الوقت تتحسن نتائج مؤشرات أداء الويب الأساسية في Search Console بعد التحسينات؟

يستخدم تقرير مؤشرات أداء الويب الأساسية في Google Search Console نافذة متجددة مدتها 28 يومًا لبيانات المستخدم الحقيقية من Chrome. وستبدأ التحسينات التي تم إجراؤها اليوم في الظهور في التقرير خلال فترة الـ 28 يومًا التالية. يتخلف التقرير عن أدائك الفعلي - قد لا ينعكس الإصلاح الذي تم تنفيذه اليوم بشكل كامل في تقرير Search Console لمدة تتراوح بين 28 و35 يومًا. استخدم PageSpeed ​​Insights والاختبارات المعملية للحصول على تعليقات فورية حول فعالية التحسين.

---

الخطوات التالية

يتطلب تحقيق نتائج "جيدة" لمؤشرات الويب الأساسية والحفاظ عليها في متجر Shopify الذي يضم العديد من التطبيقات وكتالوجات المنتجات الكبيرة والموضوعات المعقدة اهتمامًا فنيًا مستمرًا.

تتضمن خدمات تحسين السرعة في Shopify من ECOSIRE تدقيقًا شاملاً للأداء، ومعالجة LCP/INP/CLS، وإدارة البرامج النصية التابعة لجهات خارجية، وتحسين السمات، ومراقبة الأداء الشهرية للحفاظ على نتائج Core Web Vitals.

احصل على تدقيق مجاني لمؤشرات أداء الويب الأساسية لمتجر Shopify الخاص بك واحصل على خريطة طريق للتحسين محددة الأولويات في غضون 48 ساعة.