كيفية تحسين أساسيات الويب الحيوية على Shopify

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

في هذه المقالة ، سننظر في كيفية تحسين نقاط Core Web Vitals الخاصة بك في متجر Shopify الخاص بك. لقد حاولنا جعل العديد من هذه التوصيات قابلة للتنفيذ بدون مطور ، لكن بعضها يتطلب تنفيذًا فنيًا متخصصًا.

سنقوم بتقسيم كل مقياس أساسي للويب بدوره ، وشرح العوامل التي تؤثر على أدائهم ، ثم نوضح لك كيفية تحسين كل مقياس CWV في أي متجر Shopify.

انقر فوق العناوين أدناه للانتقال مباشرة إلى هذا القسم:

• كيف يتم حساب حيوية الويب الأساسية Shopify
• كيفية تحسين LCP On Shopify
• كيفية تحسين CLS On Shopify
• كيفية تحسين FID في Shopify
• Shopify تطبيقات حيوية الويب الأساسية

ما هي أساسيات الويب الأساسية

دعونا نلخص بإيجاز ماهية "أساسيات الويب الأساسية".

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

نتائج Core Web Vitals لها تأثير مباشر على تصنيفات محرك البحث.

LCP - أكبر طلاء محتوى

ما المدة التي يستغرقها ظهور أكبر عنصر في صفحتك على الشاشة؟

CLS - تغيير التخطيط التراكمي

إلى أي مدى يتحول تخطيط الصفحة أثناء تحميل الصفحة؟

FID - أول تأخير للإدخال

كم من الوقت تستغرق الصفحة حتى تستجيب للتفاعلات؟

كيف يتم حساب حيوية الويب الأساسية Shopify

من المهم أن تفهم كيف تحسب Google نتائج Core Web Vitals لأن هذا يؤثر على كيفية إجراء تحسينات ذات مغزى. تأتي بيانات Core Web Vitals من بيانات CrUX التي تقيس أداء زوار الموقع الحقيقيين باستخدام متصفح الويب Chrome. وهذا ما يسمى "البيانات الميدانية".

لكل مقياس من مقاييس CWV ، هناك حد أدنى لمتوسط ​​النقاط تحتاج إلى الوصول إليه حتى لا يتم وضع علامة "ضعيف" عليها. يعتمد هذا على متوسط ​​الدرجات المسجلة مقابل مجموعات من الصفحات. من المهم أن تفهم أن موقع Shopify الخاص بك لم يتم تسجيله مقابل مقياس أساسيات الويب الأساسية ؛ عناوين URL على موقع الويب الخاص بك هي.

عندما يفشل متجر Shopify الخاص بك في مقياس Core Web Vitals ، ستعرض لك Search Console عينة من عناوين URL التي تأثرت بالمشكلة. يساعدك هذا في تضييق نطاق المشكلة وتطبيق تحسين الهدف. قبل البدء في أي عمل تحسين لـ Core Web Vitals في متجر Shopify الخاص بك ، حدد أولاً مجالات التحسين التي ستكون أكثر تأثيرًا. لا تضيع وقتك في العمل الذي لن يؤدي إلى نتيجة إيجابية.

Shopify نصائح تحسين المقاييس الحيوية الأساسية للويب

تدور أساسيات الويب الأساسية حول تقديم المحتوى والموارد الأكثر أهمية في أسرع وقت ممكن.

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

كيفية تحسين LCP على Shopify

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

لتحسين LCP على متجر Shopify يساعد على فهم العوامل التي تؤثر على LCP. هناك أربع مراحل يتم إجراؤها لتحميل عنصر LCP الخاص بك.

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

• تأخير تحميل المورد. يستغرق المتصفح وقتًا طويلاً لبدء تنزيل العنصر
• تأخير عرض العنصر. بعد أن يتم تنزيل عنصر LCP بواسطة المستعرض ، يستغرق الأمر وقتًا طويلاً لعرض العنصر على الصفحة.

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

كيفية البحث عن عنصر LCP في أي صفحة Shopify

لتحسين LCP ، تحتاج إلى معرفة أي عنصر على الصفحة هو LCP. هذا سهل Shopify. ما عليك سوى الانتقال إلى PageSpeed ​​Insights وتحليل عنوان URL الذي تحتاجه للعثور على LCP من أجله. عند انتهاء التقرير ، مرر إلى أسفل وابحث في قسم "التشخيص". سيكون هناك صف يسمى "أكبر عنصر رسم محتوى". قم بتوسيع هذا لمعرفة التفاصيل حول ما هو عنصر LCP في هذه الصفحة.

لا تقم بتحميل عنصر LCP

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

في متاجر Shopify ، عادةً ما يكون عنصر LCP في صفحة المنتج هو صورة المنتج الرئيسية. أو في منشور مدونة ، من المحتمل أن يكون عنصر LCP صورة رأس مدونة. ستضيف بعض سمات Shopify تلقائيًا تحميلًا كسولًا لكل صورة ، حتى تلك التي تظهر في الجزء المرئي من الصفحة. قم بمراجعة كل من قوالب Shopify الخاصة بك واكتشف ماهية عنصر LCP. إذا ظهرت في الجزء المرئي من الصفحة ، فتأكد من عدم تضمين السمة أدناه في علامة HTML:

تحميل = "كسول"

قم بالتحميل المسبق لعنصر LCP

يمكنك استخدام rel = ”preload” لإخبار متصفحات الويب بتنزيل مورد معين في أسرع وقت ممكن. من خلال تطبيق rel = ”preload” على عنصر LCP الخاص بك ، سيعطي المتصفح الأولوية لتحميل هذا المورد في الصفحة.

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

استخدم صور Nextgen

تنسيقات الصور الجديدة مثل WebP تكون أصغر في حجم الملف من التنسيقات التقليدية مثل JPG و PNG. إذا كان عنصر LCP الخاص بك عبارة عن صورة ، فسيؤدي استخدام تنسيق صورة Nextgen إلى تسريع وقت التنزيل. حيثما أمكن ، استخدم صور WebP ، ولكن تذكر تضمين احتياطي للمتصفحات القديمة التي لا تدعم صور الجيل التالي.

ستعمل سمات Shopify الجديدة تلقائيًا على تحويل صورك إلى WebP وتقديمها إلى المتصفحات المناسبة.

تأكد من تضمين عنصر LCP في استجابة HTML الأولية

قم بتقليل "تأخير تحميل الموارد" عن طريق التأكد من تسليم عنصر LCP الخاص بك ضمن استجابة HTML الأولية. إذا تم تحميل عنصر LCP في الصفحة بواسطة مصدر خارجي (مثل برنامج نصي JS) ، فسيستغرق المستعرض وقتًا أطول ليبدأ تنزيل عنصر LCP.

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

تخلص من موارد حظر العرض

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

سيعرض لك تقرير Lighthouse موارد حظر العرض لأي صفحة. لذا فأنت بحاجة إلى تحديد البرامج النصية وأوراق الأنماط التي تحظر التجسيد ، ثم تحسين طريقة تسليمها.

القضاء على JS حظر العرض

تحتاج أولاً إلى فهم سمتين تدعى "تأجيل" و "غير متزامن". يمكن إرفاق سمات HTML هذه بنصوص برمجية خارجية وإخبار المتصفح بموعد تنزيل / تنفيذ المورد.

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

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

تخلص من أوراق أنماط CSS التي تحظر العرض

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

يكمن الحل في تضمين CSS المهم المطلوب لعرض قسم الجزء المرئي من الصفحة من صفحتك عن طريق تضمينه في علامة نمط في رأسك . ثم أضف الكود أدناه إلى من theme.l Liquid.js لتحميل ورقة الأنماط الرئيسية الخاصة بك بشكل غير متزامن.

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

قبل إصدار هذا إلى متجرك المباشر ، جرب سمة اختبار للتحقق من أن صفحتك لا تزال تظهر بشكل مرئي بشكل صحيح.

كيفية تحسين CLS On Shopify

تدور CLS حول مقدار تغير تخطيط الصفحة أثناء تحميل الصفحة. عادةً ما يكون السبب هو الصور التي تنقل المحتوى أثناء تحميله وعرضه.

أضف سمات العرض والارتفاع إلى صورك

أسهل حل لـ CLS هو التأكد من أن علامات img تُخرج سمات عرض وارتفاع صريحين. يتم تطبيق هذه السمات على صورة HTML وتخبر المتصفح بعرض الصورة وارتفاعها. باستخدام هذه المعلومات ، يمكن للمتصفح حساب نسبة أبعاد الصورة وأبعادها ، وحجز المساحة اللازمة لتلك الصورة. هذا يمنع التخطيط من التحول عند إضافة الصورة إلى الصفحة.

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

 height="{{img.height}}" width="{{img.width}}

انظر إلى القوالب السائلة التي تستخدمها لصفحة Shopify الرئيسية والمجموعات والمنتجات والمدونات وتأكد من أن علامات img تشير إلى سمات العرض والارتفاع.

تحسين الخطوط الخاصة بك

يمكن أن تتسبب خطوط الويب الرائعة التي تقوم بتحميلها من أماكن مثل خطوط Google في حدوث مشكلات في CLS بسبب مشكلة تسمى FOUS (وميض نص غير منظم). هذا هو المكان الذي يقوم فيه مستعرض الويب في البداية بتحميل خط احتياطي ، ثم عندما يتم تحميل خط الويب الرئيسي ، يتم عرض النص مما يتسبب في حدوث تغيير في التخطيط.

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

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

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

كيفية تحسين FID في Shopify

في تجربتنا ، FID هو مقياس Core Web Vital الأقل شيوعًا الذي نراه يؤثر Shopify مخازن. فكر في FID كطريقة لقياس مدى استجابة الصفحة أثناء التحميل. لا شيء يحبط المستخدمين أكثر من النقر / النقر ولا يحدث شيء.

FID مشابه لمقياس آخر يسمى إجمالي وقت الحظر (TBT). يقيس TBT الوقت بين بدء عرض الصفحة (First Contentful Paint أو FCP) ووقت استجابة الصفحة (Time to Interactive أو TTI).

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

ما هو الفرق بين FID و TBT

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

نظرًا لأنه لا يمكنك قياس FID عند اختبار صفحاتك الخاصة ، يجب عليك بدلاً من ذلك قياس TBT.

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

تقليل تأثير تعليمات الطرف الثالث

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

تقليل وقت تنفيذ JavaScript

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

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

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

مثل التصغير ، فإن ضغط js يقلل من حجم الملف ويسرع من سرعة تنفيذ متصفح الويب للكود.

تصغير عمل الخيط

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

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

كيفية قياس أداء أساسيات الويب الحيوية

أنت الآن تفهم كيفية تحسين Core Web Vitals في متجر Shopify الخاص بك ، بعد ذلك تحتاج إلى معرفة كيفية قياس تقدم Core Web Vitals.

Search Console

أسرع طريقة لمعرفة كيفية أداء متجر Shopify الخاص بك حاليًا لـ Core Web Vitals هي من خلال Search Console. انتقل إلى تقرير Core Web Vitals من القائمة اليمنى للحصول على بيانات حول كيفية أداء موقعك حاليًا. سيتضمن تفصيلاً للمكان الذي تواجه فيه أي مشكلات في "أساسيات الويب الأساسية" ويعرض لك عينة من عناوين URL المتأثرة.

Pagespeed Insights / المنارة

إن Pagespeed Insights هي أداة مجانية من Google تتيح لك قياس سرعة الصفحة لأي صفحة. قم بتشغيل Shopify URLs من خلال الأداة للحصول على تحليل مفصل لأدائك جنبًا إلى جنب مع الإجراءات الموصى بها لتحقيق درجة أعلى.

تقرير CrUX

CrUX هي مجموعة بيانات Google الخاصة بالسرعة / الأداء لملايين الصفحات الحقيقية. يمكنك الوصول إلى بيانات CrUX لمتجر Shopify الخاص بك باستخدام Google CrUX Data Studio Dashboard. توفر لوحة القيادة تفصيلاً مفصلاً لكيفية أداء موقعك عبر مقاييس Core Web Vitals على مدار الـ 16 شهرًا الماضية.

ماذا تعني كل مصطلحات CWV؟

عندما تبدأ في إلقاء نظرة على Core Web Vitals ، ستصادف الكثير من المصطلحات المعقدة ، وإليك ما تعنيه كلها:

أساسيات الويب الأساسية Shopify التطبيقات

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

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

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

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