ستساعدك المقالة التالية: كيفية الحصول على 90+ نتيجة أساسية لأهمية الويب لمتجر التجارة الإلكترونية (دراسة حالة)
في هذا المنشور ، ستتعلم كيفية الحصول على 90+ درجة على Google Core Web Vitals (سطح المكتب والجوال) لمتجر التجارة الإلكترونية حتى إذا كنت تستخدم الكثير من المكونات الإضافية.
عندما أصدرت Google لأول مرة تقييم أساسيات الويب، بدأ العديد من مالكي متاجر التجارة الإلكترونية في الذعر.
على عكس موقع المحتوى الأساسي أو المدونة ، فإن متجر التجارة الإلكترونية عبارة عن صور ثقيلة و يتطلب العديد من العناصر الوظيفية لإغلاق عملية بيع. وكل ميزة مضافة يبطئ موقعك.
على سبيل المثال، يمكن أن تستغرق الدردشة المباشرة من 6 إلى 10 ثوانٍ ليتم تحميلها من تلقاء نفسها. يمكن أن يستغرق تحميل تتبع البريد الإلكتروني الأساسي باستخدام Klaviyo من ثانيتين إلى ثانيتين. حتى إضافة ملف Facebook يمكن أن يستغرق تحميل بكسل مائة مللي ثانية.
لا يهم ما إذا كانت التعليمات البرمجية الخاصة بك تستخدم التحميل المؤجل أو غير المتزامن. كل عنصر إضافي على موقع الويب الخاص بك سيكون له تأثير سلبي على حيوية الويب الأساسية الخاصة بك.
الآن وفقًا لمقاييس البحث ، 96٪ من المواقع التي تم اختبارها في الولايات المتحدة تفشل في تقييم أساسيات الويب من Google لسطح المكتب أو الجوال أو كليهما.
ومعدل الفشل متساوي أعلى لمتاجر التجارة الإلكترونية بسبب الوظيفة المطلوبة لإجراء المعاملات عبر الإنترنت.
في هذا المنشور ، سأوضح لك الخطوات الدقيقة التي اتخذتها تحقيق 90+ تصنيف Google Core Vitals لموقعي الإلكتروني لمتجر التجارة الإلكترونية المكون من 7 أرقام.
احصل على دورة تدريبية مصغرة مجانية حول كيفية بدء متجر تجارة إلكترونية ناجح
إذا كنت مهتمًا ببدء عمل تجاري إلكتروني ، فقد أعددت ملف حزمة شاملة من الموارد هذا سوف يساعدك إطلاق متجرك الإلكتروني من الصفر. تأكد من الاستيلاء عليها قبل أن تغادر!
ما هي Google Core Vitals؟
Google Core Web Vitals هي مجموعة من العوامل التي تدمجها Google في تصنيفات البحث لها قياس جودة تجربة المستخدم.
تتكون Google Core Vitals من 3 مكونات.
- أكبر رسم محتوى (تتطلب Google 2.5 ثانية أو أقل) – هذا قياس للمدة المستغرقة لمشاهدة أكبر جزء من المحتوى المعروض على شاشتك. في الأساس ، هو مدى سرعة تحميل موقعك.
- أول تأخير في الإدخال (تتطلب Google 100 مللي ثانية أو أقل) – هذا مقياس لاستجابة صفحتك وقابليتها للاستخدام. على وجه التحديد ، يقيس Google التأخير بين نقر الزائر على ميزة تفاعلية ومدى سرعة استجابة الصفحة لتلك النقرة.
- التحول في التخطيط التراكمي (تتطلب Google درجة 1 أو أقل) – هذا قياس لمدى استقرار صفحتك أثناء تحميلها. هل يتحرك المحتوى الخاص بك لأعلى ولأسفل أثناء عرض الصفحة؟ هذا هو مقياس Google Core Web Vital الوحيد الذي لا علاقة له بسرعة الصفحة. إنه أيضًا أصعب تصحيح إذا كنت لا تعرف ما تفعله.
الأقسام المتبقية من هذا المنصب سوف بالتفصيل بالضبط كيف أصلحت هذه المقاييس الثلاثة لمتجر التجارة الإلكترونية الخاص بي لتحقيق أ 90+ نقاط Google Core Vitals على كل من سطح المكتب والجوال.
متجر التجارة الإلكترونية المستخدم في دراسة الحالة هذه
معظم مالكي متاجر التجارة الإلكترونية موجودون إما على Shopify أو WooCommerce أو BigCommerce أو Shift4Shop و تنطبق كل هذه الاستراتيجيات بغض النظر عن النظام الأساسي الذي تستخدمه.
يقع متجر الشكل 7 الخاص بي في BumblebeeLinens.com. لا تتردد في قم بتشغيل اختبار سرعة صفحة Google على متجري كما تقرأ هذا المنشور لرؤية نتائجي مباشرة.
أولاً ، يستخدم متجري العديد من ملفات أحدث أجراس وصفارات التجارة الإلكترونية لأنني أقوم بتدريس دورة التجارة الإلكترونية في متجر مربح عبر الإنترنت.
في الحقيقة، أنا أعامل متجري مثل المختبر لاختبار الميزات الجديدة فور ظهورها والإبلاغ عنها في هذه المدونة.
هنا الإضافات والخدمات الذي أديره في متجري لدراسة الحالة هذه.
- Klaviyo – منصة تسويق البريد الإلكتروني الخاصة بي
- بوستسكريبت – منصة تسويق الرسائل القصيرة الخاصة بي
- Vizury – مزود إخطارات الدفع الخاص بي
- ManyChat – My Facebook مزود التسويق عبر Messenger الذي ينفذ الدردشة المباشرة الخاصة بي
- Gorgias – برنامج خدمة العملاء الخاص بي الذي يتعامل مع جميع مراسلات العملاء.
- Spin To Win Popup – مغناطيس الرصاص الأساسي لمتجري
- Facebook بكسل – يتتبع كل مبيعاتي من Facebook
- تحليلات كوكل – يتتبع مبيعات موقع الويب الخاص بي
- إخطار Slide Up – يقدم دليلاً اجتماعياً من خلال عرض المبيعات فور ورودها
للمتعة فقط ، هذه هي سرعة تحميل موقعي بدون أي تحسينات.
هذه هي السرعة التي تعمل بها مع التحسينات أنا على وشك أن أعلمك كيفية التنفيذ.
كيفية إصلاح مشاكل الطلاء ذو المحتوى الكبير (LCP) ومشاكل تأخير الإدخال الأول (FID)
درجات LCP و FID المنخفضة هي بسبب سرعات الصفحة البطيئة. إذا كان بإمكانك جعل موقع الويب الخاص بك أسرع ، فسيتم إصلاح كل من درجات LCP و FID الخاصة بك.
بالنسبة لـ 99٪ من متاجر التجارة الإلكترونية هناك ، تحدث مشكلات LCP و FID بسبب …
- تحميل JavaScript و CSS الذي يحظر العرض – بدون أي تحسين ، يتم تحميل ملفات جافا سكريبت و css بالتتابع مما قد يمنع العرض المرئي لصفحتك. أفضل طريقة لتسريع جافا سكريبت الخاص بك هي التحميل البطيء لشفرتك أو تأجيل العرض حتى لا يحظر أي شيء.
- تحميل الصور الكبيرة و / أو مقاطع الفيديو – كلما كانت صورك أكبر وأعلى دقة ، كلما استغرق تحميلها وقتًا أطول. يجب ألا تقوم أبدًا بتحميل صورة أكبر مما هو معروض على موقع الويب الخاص بك. أيضًا ، يجب عدم تحميل أي صورة غير مرئية على الشاشة مطلقًا.
- خادم بطيء – لا ينبغي أن يكون الخادم البطيء مشكلة مع المنصات المستضافة بالكامل مثل Shopify أو BigCommerce أو Shift4Shop ولكن إذا كنت تستخدم WooCommerce ، فإن الذهاب مع مضيف أسرع مثل WPEngine يمكن أن يسرع موقعك بشكل كبير.
على مستوى عالٍ ، إذا عالجت المشكلات الثلاثة المذكورة أعلاه ، فسيكون لديك موقع ويب سريع للغاية.
كيفية تحقيق سرعة تحميل صفحة ثانية واحدة
يوجد أدناه ملف قائمة كاملة من تحسينات السرعة الخاصة بي جنبا إلى جنب مع تصنيف 1-5 حيث 5 تشير إلى أعلى تأثير على تحسين السرعة.
بشكل عام ، يجب عليك التركيز على 5 وتنفيذ الجزئين 1 و 2 فقط إذا كان لديك وقت أو إذا كنت شرجيًا فائقًا 🙂
إذا أردت أن تعرف كيف حققت سرعة تحميل للصفحة 1 ثانية، يمكنك القفز مباشرة إلى المدافع الكبيرة بتقييم 5 :)!
تمكين التخزين المؤقت للمستعرض (التصنيف 1 من 5)
يخبر التخزين المؤقت للمتصفح متصفح العميل بـ الصور المخبأة والعناصر الأخرى من موقع الويب الخاص بك على الجهاز المحلي للمستخدم لجعل تصفح موقع الويب الخاص بك أسرع بعد تحميل الصفحة الأولية.
يجب أن يكون التخزين المؤقت للمتصفح دائما قيد التشغيل ولكن يرجى ملاحظة أن المتصفح التخزين المؤقت لن يؤثر على Google Core Web Vitals. تهتم Google فقط بكيفية تحميل موقع الويب الخاص بك من حالة باردة تمامًا.
تصغير ملفات CSS / JS (التصنيف 1 من 5)
تصغير CSS / JS الخاص بك يزيل كل المساحة البيضاء من ملفات CSS وجافا سكريبت لحفظ بضع بايت هنا وهناك.
بشكل عام ، يتم تصغير ملفات CSS / JS الخاصة بك لن يؤدي إلى تحسين سرعة صفحتك بشكل كبير.
قم بإجراء هذا التحسين إذا كنت تحاول ذلك تخلص من كل مللي ثانية أخيرة من السرعة من موقعك.
دمج ملفات HTML و CSS و JS (التصنيف 2 من 5)
يمكن أن يكون لدمج ملفات HTML و CSS و JS في عدد أقل من الملفات تأثير على سرعة صفحتك بسبب يجب على الخادم إحضار ملفات أقل.
ولكن باستخدام أحدث تقنيات خادم الويب ، يمكن جلب ملفات متعددة في نفس الوقت بالتوازي مع ملفات يخفف هذا التحسين بشكل كبير. لن أقضي الكثير من الوقت في هذا.
تنظيف عمليات إعادة التوجيه الخاصة بك (التقييم 2 من 5)
موقع الويب الخاص بك يتغير باستمرار وأحيانًا قد يكون لديك عمليات إعادة توجيه من صور و / أو صفحات معينة إلى صور أخرى.
على سبيل المثال، عندما قمت بترحيل جميع صفحاتي من http: // إلى https: // منذ عدة سنوات ، قمت بإصدار 301 عملية إعادة توجيه من صفحات وصور معينة إلى نظيراتها الآمنة كحل سريع.
ستؤدي كل عملية إعادة توجيه على صفحتك إلى إبطاء موقعك لذا تأكد من استخدام أداة مثل GTMetrix لاكتشاف أي عمليات إعادة توجيه على عناصر صفحتك وإزالتها.
استخدم مضيف ويب أسرع (التقييم 3 من 5)
إذا كنت تستخدم منصة مفتوحة المصدر مثل WooCommerce أو Magento ، قد تكون غريزتك الأولى هي رمي الأموال على خادم جديد تمامًا لإصلاح مشكلات سرعة صفحتك.
ولكن في معظم الأحيان ، خادم أسرع لن تحل مشاكل السرعة الخاصة بك. ومع ذلك ، إذا كنت تستخدم حاليًا استضافة مشتركة رخيصة، VPS أو خادم مخصص يمكن أن يحدث فرقًا كبيرًا.
استخدم CDN (التقييم 2-3 من 5)
تقوم شبكات توصيل المحتوى أو شبكات CDN بتخزين نسخ متعددة من موقع الويب الخاص بك وصورك على خوادم متعددة في جميع أنحاء العالم بحيث يتم تسليم المحتوى الخاص بك عن طريق أقرب خادم موجود جغرافيًا.
إذا كان لديك عملاء في جميع أنحاء العالم وكان موقعك ثقيل الصورة للغاية، فإن استخدام CDN قد يكون له تأثير كبير على سرعة صفحتك.
ولكن بالنسبة للمواقع الأصغر مثل موقعي التي تخدم الولايات المتحدة بشكل أساسي ، فإن استخدام CDN له فقط امتداد تأثير هامشي على سرعة الصفحة.
تحميل الصور والنصوص الأكبر حجمًا مسبقًا (التقييم 3 من 5)
مقاييس مثل “أكبر رسم محتوى” قياس سرعة أكبر عنصر على صفحتك. نتيجة لذلك ، من المنطقي “التحميل المسبق” لأكبر العناصر على صفحتك بواسطة تقديم تلميحات في كود HTML الخاص بك.
تلميحات التحميل المسبق هي تعليمات في كود HTML الخاص بك تخبر المتصفح ما هي الموارد الأكثر أهمية للصفحة.
على سبيل المثال ، إذا كان لديك صورة البداية الكبيرة، فمن المنطقي بدء تحميل هذه الصورة أولاً لتحسين LCP الخاص بك.
في حين أن التحميل المسبق لعناصر مهمة على موقعك قد يساعد في نقاط LCP الخاصة بك ، لن يكون لها تأثير على سرعة صفحتك الإجمالية.
تقليص صورك (التقييم 4 من 5)
يستخدم معظم مالكي متاجر التجارة الإلكترونية الجدد أحجام الصور التي هي أكبر بكثير مما هو مطلوب. إذا كان موضوع متجرك عبر الإنترنت يستخدم 1000 × 1000 صورة ، فلا يجب عليك أبدًا تحميل صورة أكبر من 1000 × 1000.
إذا كان موقع الويب الخاص بك يستخدم ملف نفس الصورة على صفحات متعددة بأحجام مختلفة، يجب عليك إنشاء صورة منفصلة (وأصغر) لكل إصدار.
على سبيل المثال، يتم عرض صورة منتج على متجري بالحجم الكامل ، حجم 50٪ ، حجم 33٪ وحجم 25٪ حسب الصفحة.
نتيجة لذلك ، لدي 4 ملفات صور مختلفة (1 لكل حجم) على موقعي و أعرض فقط أصغر صورة مطلوبة دون فقدان الجودة.
بالإضافة إلى ذلك ، يجب عليك ضغط جميع ملفات JPG الخاصة بك إلى ملف بحد أقصى 50 جودة في Photoshop (أو أي برنامج صور تستخدمه).
ضغط صفحاتك وتخزينها مؤقتًا (التقييم 4 من 5)
إذا كنت تستخدم نظامًا أساسيًا مستضافًا بالكامل مثل Shopify أو BigCommerce أو Shift4Shop ، من المحتمل أن تكون صفحاتك مضغوطة بالفعل ومخبأة بالكامل قبل أن يتم تقديمهم.
ولكن إذا كنت تستخدم نظامًا أساسيًا مفتوح المصدر مثل WooCommerce، تأكد من استخدام مكون إضافي مثل WP Rocket.
الفسفور الابيض صاروخ سوف عرض جميع صفحات الويب الخاصة بك مسبقًا بحيث يعرض متجرك صفحات ثابتة تتطلب القليل من استخدام وحدة المعالجة المركزية أو لا تتطلب استخدامًا على الإطلاق.
سوف WP صاروخ أيضا ضغط صفحة الويب الخاصة بك 90٪ من حجمه.
استخدم عددًا أقل من المكونات الإضافية التي تحمل رمزًا خارجيًا (التصنيف 4 من 5)
كل مكون إضافي تضيفه إلى موقع الويب الخاص بك سوف يبطئها. نتيجة لذلك ، يجب أن تكون حذرًا للغاية عندما تقرر تثبيت أداة برمجية جديدة.
ميزات تبدو غير ضارة يمكن في بعض الأحيان إبطاء موقعك بشكل كبير!
على سبيل المثالمضيفا أ Facebook زر المشاركة أو أ Pinterest يمكن أن يتسبب زر التثبيت في تنزيل جزء جديد من كود جافا سكريبت من مصدر خارجي.
لأزرار مثل Twitterو Facebook أو Pinterestو أستخدم دائمًا إصدارات “غير جافا سكريبت” التي لا تتطلب تعليمات برمجية محملة خارجيًا.
إذا كنت تريد إضافة ملف Facebook زر المشاركة إلى موقعك ، يجب عليك استخدام النسخة ذات الارتباط التشعبي كما هو مبين أدناه.
تحميل صورك وكود جافا سكريبت الكسول (التقييم 5 من 5) – الأهم!
عندما يتعلق الأمر بتحسين سرعة تحميل صفحتك ، يجب عليك ذلك حمِّل فقط عناصر موقعك المطلوبة أو المرئية.
على سبيل المثال، إذا كانت هناك صورة مدفونة 5 مخطوطات لأسفل في صفحتك ، فلا يجب عليك عرض تلك الصورة حتى يقوم عميلك بجعلها بعيدة بما يكفي لرؤيتها.
وبالمثل بالنسبة لرمز جافا سكريبت ، يجب ألا تقوم بتحميل أي وظائف لموقع الويب الخاص بك حتى يحتاج بالفعل إلى التحميل.
كيفية تحميل كسول Javascript و CSS Code
التحميل البطيء لصورك هو أمر بسيط إلى حد ما وتحتوي معظم السمات بالفعل على تحميل بطيء للصور.
لكن كيف يمكنك ذلك تحميل رمز جافا سكريبت كسول بأمان على موقعك؟
إليك سر كيف أفعل ذلك.
لكل صفحة على موقعي ، أقوم بتحميل العناصر المرئية لموقعي أولاً. بعد ذلك ، أقوم فقط بتحميل شفرة جافا سكريبت الوظيفية على موقعي بمجرد أن يتخذ المستخدم إجراءً على الصفحة.
على سبيل المثال، إذا ذهبت إلى Bumblebee Linens الآن ، ستلاحظ أن موقع الويب الخاص بي يتم تحميله بسرعة فائقة (أحيانًا في أقل من ثانية).
ولكن إذا قمت بالنقر فوق الصفحة أو تحريك الماوس أو تمريرهعندها فقط يتم تحميل الدردشة المباشرة مع وظائف “التسوق” الأخرى في متجري.
بمعنى آخر ، أنا كسول في تحميل وظيفة عربة التسوق لموقعي فقط عندما يتخذ المستخدم إجراءً أو يتسوق في متجري.
نتيجة لذلك ، يتم تحميل صفحتي بسرعة فائقة لأن أقوم فقط بتحميل عناصر HTML / CSS الرسومية من موقعي.
من وجهة نظر المستخدم ، تجربة التسوق مثالية لأن كل صفحة يتم تحميلها بسرعة البرق. وفي الوقت نفسه ، ترى Google أيضًا صفحة تحميل سريعة أيضًا.
كيفية تنفيذ تحميل Javascript Lazy
الخطوة الأولى المطلوبة للتحميل البطيء لجافا سكريبت الخاص بك هي معرفة ما يمكن تحميله كسول دون كسر موقعك.
تذكر ، يجب عليك تحميل جميع الشفرات “الأساسية” إلى موقعك حتى لا تتأثر تجربة التسوق “المرئية” لعميلك.
نتيجة لذلك ، يجب عليك تحميل كل جزء من التعليمات البرمجية التي يؤثر على تقديم العناصر الرسومية من موقعك.
إليك كيفية اكتشاف ما هو ضروري.
انتقل إلى GTMetrix و تحليل مخطط الشلال الخاص بك. سيخبرك مخطط الشلال الخاص بك بكل شيء يتم تحميله على صفحتك والمدة التي يستغرقها التحميل.
وفقًا للرسم البياني أعلاه ، فإن klaviyo_subscribe.js يأخذ 450 مللي ثانية للتحميل. بالإضافة إلى ذلك ، فإن klaviyo_subscribe.css يأخذ مكانًا آخر 420 مللي ثانية.
Klaviyo هي أداة التسويق عبر البريد الإلكتروني الخاصة بي وأنا أعلم حقيقة ذلك لا يؤثر Klaviyo على عرض موقعي على الإطلاق.
نتيجة لذلك ، يمكنني بسهولة تحميل كسول Klaviyo دون التأثير على العناصر المرئية للصفحة.
في الواقع ، إزالة كود Klaviyo سوف يحلق لمدة ثانية كاملة تقريبًا من سرعة صفحتي!
باستخدام GTMetrix ، قم بإنشاء قائمة بكود التحميل البطيء هذا ليس مطلوبًا لعرض العناصر المرئية لموقعك ثم تحميل الكود كسول عند حدوث أي من الأحداث التالية.
- حركة الفأرة
- تمرير الصفحة
- شاشة تعمل باللمس
إليك مقتطف الشفرة الصغير الذي يوضح تطبيق جافا سكريبت الخاص بي.
نشاط الوظيفة () {
defer (// أضف جميع عناصر جافا سكريبت البطيئة هنا) ؛
ActivityEvents.forEach (الوظيفة (eventName) {
document.removeEventListener (eventName، activity، true) ؛
}) ؛
}
// مصفوفة من أحداث DOM التي يجب تفسيرها على أنها
//نشاط المستخدم.
var activityEvents = [
‘mousedown’, ‘mousemove’, ‘keydown’, ‘scroll’,
‘touchstart’
]؛
window.onload = الوظيفة () {
// أضف هذه الأحداث إلى المستند.
// سجل وظيفة النشاط كمعامل المستمع.
ActivityEvents.forEach (الوظيفة (eventName) {
document.addEventListener (اسم الحدث ، نشاط ، صحيح) ؛
}) ؛
}
بمجرد تنفيذ هذه الخطوة ، يجب أن تكون قادرًا على ذلك تحقيق سرعات تحميل أقل للصفحة 1 ثانية على الهاتف المحمول وسطح المكتب!
كيفية إصلاح مشاكل تغيير التخطيط التراكمي
90٪ من مشكلات تغيير التخطيط التراكمي ستكون بسبب السببين التاليين.
تحميل العناصر بدون أبعاد
معلمات حجم الصورة هي التي تسمح لمتصفح الويب معرفة حجم المحتوى أثناء تحميله.
على سبيل المثال، إذا حددت أبعاد الصورة في كود HTML الخاص بك ، فسيقوم المتصفح بحجز مساحة لصورتك أثناء تحميلها حتى لا تقفز الصفحة.
ومع ذلك ، إذا كانت معلمات الحجم مفقودة ، لا يتم إجراء أي حجز وسيتعين على الصفحة إعادة ترتيب نفسها عندما يتم تحميل الصورة أخيرًا.
الحل البسيط لهذه المشكلة هو حدد أبعاد كل عنصر على موقعك كما هو مبين أدناه.
ديناميكي إضافة المحتوى مع جافا سكريبت
العديد من Shopify الإضافات تستخدم جافا سكريبت ل عرض الميزات ديناميكيًا على موقع الويب الخاص بك. وأحيانًا يتم تحميل هذه الشفرة في وقت متأخر مما قد يؤدي إلى دفع صفحتك لأعلى ولأسفل.
على سبيل المثال، إذا كنت تعرض إعلانات على موقعك ، فقد يقفز موقعك لأعلى ولأسفل أثناء تحميل الإعلان.
أفضل طريقة لمنع حدوث ذلك هي خصص مساحة على صفحتك مسبقًا لعرض المحتوى المضاف.
قد تكون إضافة مساحة بيضاء معروضة مسبقًا مشكلة بالنسبة لبعض المكونات الإضافية ، لذا تأكد من ذلك الوصول إلى منشئ البرنامج المساعد إذا كانت هذه مشكلة في متجرك.
كيفية حل مشكلات CLS الأكثر تعقيدًا
كما ذكرنا سابقًا ، يمكن حل 90٪ من مشكلات CLS عن طريق إضافة أبعاد إلى عناصرك. لكن يمكن أن يكون حل الـ 10٪ المتبقية صعبًا للغاية بدون استخدام مجموعة محددة من الأدوات.
لمواقع بلدي ، حرفيا استغرقني 3 أسابيع لإصلاح مشكلات CLS الخاصة بي لأن اختبار Google Page Speed لا يعكس درجات CLS التي تم قياسها في المجال.
على سبيل المثال، حصلت مدونتي على MyWifeQuitHerJob.com على درجات CLS مثالية في اختبار معمل سرعة الصفحة ولكنها فشلت في اختبار CLS في هذا المجال.
إذا كنت لا تعرف ما أتحدث عنه ، إليك تحليل سريع لاختبار سرعة صفحة Google.
أعلى نتيجة هي البيانات التي تم جمعها من مستخدمين حقيقيين باستخدام متصفح Chrome. النتيجة السفلية هي الاختبار تعمل في ظروف مثالية.
عندما لا تتطابق الدرجات 2 ، فمن الصعب إصلاحها لأن Google لا تخبرك بما هو الخطأ. في الواقع ، يمكنك الحصول على درجة CLS مثالية في المختبر ولكن تفشل تماما CLS في الميدان.
إليك ما لا تخبرك به Google عن CLS.
اختبار سرعة الصفحة فقط يقيس CLS الخاص بك في الجزء المرئي من الصفحة في ظل ظروف مثالية. في الحياة الواقعية ، المستخدم هو التمرير لأعلى ولأسفل من المحتمل أن يكون اتصال الإنترنت أبطأ بكثير.
من أجل حل مشكلات CLS الخاصة بك ، يجب عليك محاكاة اتصال بطيء والتصرف كمستخدم بشري حقيقي!
كيفية محاكاة مستخدم حقيقي لإصلاح CLS
أفضل طريقة للقيام بذلك هي باستخدام ملف المدمج في مصحح أخطاء Chrome.
إليك كيفية تصحيح مشكلات CLS خطوة بخطوة.
الخطوة 1: أظهر Chrome Debugger
الخطوة الثانية: إبطاء سرعة الشبكة
في علامة التبويب “الشبكة” ، خنق سرعة الصفحة وصولا إلى “Slow 3G”. سيؤدي ذلك إلى إبطاء تحميل سرعة الصفحة بشكل كبير حتى تتمكن من اكتشاف تغيرات التخطيط بسهولة.
الخطوة 3: عرض مناطق التحول في التخطيط
انقر فوق علامة التبويب “الأداء” ثم تأكد من أن تم تحديد مربع “مناطق تغيير التخطيط” تحت عنوان “التقديم”.
الخطوة 4: تحديث الصفحة
بمجرد إعداد Chrome Debugger ، قم بتحديث الصفحة وانتقل لأعلى ولأسفل على صفحتك كمستخدم حقيقي.
تأكد أنك ابحث عن المناطق المميزة باللون الأزرق التي تشير إلى تحول التخطيط.
الخطوة 5: تحليل الجدول الزمني للأداء
إذا رأيت تغييرات في التخطيط على موقعك عند التحميل ، فقم بإلقاء نظرة فاحصة التكبير في الجدول الزمني لتحميل صفحتك.
في المثال أدناه ، يتحول التخطيط بسبب أنا أقوم بالتحميل بخط مختلف ينقل الصفحة إلى أسفل قليلاً لأن الخط الجديد أكبر.
يمكنك إجراء هذه الاختبارات على مناطق مختلفة من صفحتك عدة مرات تحديد وإصلاح مشكلات “تغيير التخطيط التراكمي” بسهولة.
الجزء الأصعب هو تشخيص مكان تكمن مشاكل CLS لأن اختبار سرعة الصفحة من Google يحسب فقط الجزء المرئي من صفحتك.
يمكنك تحقيق 90+ من النقاط الحيوية الأساسية للويب لمتجر التجارة الإلكترونية
إذا اتبعت جميع التوجيهات أعلاه ، يمكنك ذلك تحقيق سرعات تحميل أقل من 1 ثانية للصفحة وحقق تصنيف 90+ على Core Web Vitals لكل من الأجهزة المحمولة وسطح المكتب.
بشكل عام ، يجب عليك دائمًا اجعل موقعك على الويب بسيطًا قدر الإمكان وتجنب استخدام المكونات الإضافية بأي ثمن!
اسأل نفسك ما إذا كنت بحاجة ماسة إلى ميزة معينة قبل تنفيذه. ثم ابحث عن حلول لا تتطلب إضافة كود جافا سكريبت إضافي لموقعك.
نظرًا لأنني شرجي فائق ، فقد قمت بالفعل بفحص الكود المصدري لكل مكون إضافي أقوم بتثبيته بالإضافة إلى مكالمات الشبكة التي تجري.
ذات مرة ، استخدمت بشكل أعمى مكونًا إضافيًا كان يرسل معلومات موقع الويب الخاص بي حرفيًا إلى العديد من شبكات الإعلانات و بيع معلومات العملاء الخاصة بي بدون علمي!
لا تنتج معظم مشكلات سرعة الصفحة عن المظهر الخاص بك ولكن بواسطة الإضافات التي تثبتها. كن حذرا وسعيد البيع!
هل أنت مستعد لتكون جادًا بشأن بدء عمل تجاري عبر الإنترنت؟
إذا كنت تفكر حقًا في بدء نشاطك التجاري عبر الإنترنت ، فعليك التحقق من الدورة التدريبية المصغرة المجانية الخاصة بي كيفية إنشاء متجر متخصص على الإنترنت في 5 خطوات سهلة.
في هذه الدورة التدريبية المصغرة لمدة 6 أيام ، أكشف عن الخطوات التي اتخذتها أنا وزوجتي لكسبها 100 ألف دولار في غضون عام واحد فقط. أفضل ما في الأمر أنه مجاني وستتلقى نصائح واستراتيجيات أسبوعية للتجارة الإلكترونية!
الوظائف ذات الصلة في SEO التجارة الإلكترونية
عن ستيف تشو
ستيف تشو هو مؤثر معروف للغاية في مجال التجارة الإلكترونية وقام بالتدريس آلاف الطلاب كيفية بيع المنتجات المادية بفعالية عبر الإنترنت في ProfitableOnlineStore.com.
مدونته ، MyWifeQuitHerJob.com، وقد تم عرضه في Forbes، Inc، The New York Times، Entrepreneur و MSNBC.
إنه أيضًا أ مؤلف مساهم لـ BigCommerce و Klaviyo و ManyChat و Printful و Privy و CXL و Ecommerce Fuel و GlockApps و Privy و Social Media Examiner و Web Designer Depot و Sumo وغيرها من المنشورات التجارية الرائدة.
بالإضافة إلى ذلك ، فإنه يدير شعبية بودكاست التجارة الإلكترونيةزوجتي تركت وظيفتها وهي أ أفضل 25 عرضًا تسويقيًا على الإطلاق Apple المدونة الصوتية.
للبقاء على اطلاع دائم بأحدث اتجاهات التجارة الإلكترونية ، يدير Steve ملف 7 الرقم متجر التجارة الإلكترونية، BumblebeeLinens.com مع زوجته ويضع على مؤتمر التجارة الإلكترونية السنوي مُسَمًّى قمة البائعين.
ستيف حاصل على درجة البكالوريوس والماجستير في الهندسة الكهربائية من جامعة ستانفورد. على الرغم من تخصصه في الهندسة الكهربائية ، فقد أمضى جزءًا كبيرًا من تعليمه في الدراسات العليا في دراسة ريادة الأعمال وآليات إدارة الأعمال الصغيرة.
