أداء الويب هو عامل حاسم في إنشاء تجربة تسوق سلسة لعملائك. في هذه المقالة، سأوضح لك كيفية تحقيق أعلى النقاط في Web Vitals مثل أكبر محتوى مرئي (LCP) ووقت الحظر الإجمالي (TBT) باستخدام Cloudflare. تتراوح هذه التكوينات من تعديلات بسيطة إلى تحسينات متقدمة.
Lighthouse Best Practice for Ecommerce Websites
قبل الخوض في التفاصيل، تأكد من تقييم أداء موقعك الحالي باستخدام أداة مثل Google PageSpeed Insights . سيساعدك ذلك في تتبع التحسينات بعد تطبيق هذه الإعدادات. لماذا تعتبر Web Vitals مهمة تقيس Web Vitals الجوانب الرئيسية لتجربة المستخدم. إليك نظرة سريعة على أهم المقاييس التي سنركز عليها:
المقياس
ماذا يقيس
لماذا هو مهم
LCP
الوقت المستغرق لتحميل أكبر عنصر مرئي
يؤثر على تصور المستخدمين لسرعة الموقع
TBT
الوقت المحجوز بواسطة مهام JavaScript الطويلة
يؤثر على التفاعل والاستجابة
CLS
تغيير التخطيط أثناء تحميل الصفحة
يضمن الاستقرار البصري وسهولة الاستخدام
من خلال تحسين إعدادات Cloudflare الخاصة بك، يمكنك رفع هذه النقاط بشكل كبير، مما يؤدي إلى تجربة أسرع وأكثر جذبًا لزوار موقعك.
Score of the Website Before Optimization
الخطوة 1: إعداد نطاقك على Cloudflare وتفعيل CDN
لبدء تحسين أداء موقعك باستخدام Cloudflare، يجب عليك أولاً التأكد من إعداد نطاقك بشكل صحيح على منصتهم وأن ميزة شبكة توصيل المحتوى (CDN) مفعلة.
كيفية تفعيل CDN في Cloudflare
تسجيل الدخول إلى حسابك في Cloudflare واختر نطاقك.
انتقل إلى قسم DNS.
ضمن سجلات DNS، ابحث عن سجل A أو CNAME لنطاقك.
اضغط على رمز السحابة البرتقالي بجوار السجل لتفعيل ميزة Proxy Cloud. عند التفعيل، سيتحول الرمز إلى البرتقالي الساطع، مشيرًا إلى أن نطاقك قد تم توجيهه الآن عبر CDN الخاص بـ Cloudflare.
DNS & CDN Config For a Shop Domain
ملاحظة خاصة لمستخدمي Selldone
إذا كنت تستخدم Selldone، فستحتاج إلى إعداد نطاقك بشكل صحيح للتكامل مع CDN الخاص بـ Cloudflare. يضمن ذلك أن CDN الخارجي لدى Selldone يعمل بسلاسة مع موقعك، مما يوفر محتوى مؤقت بكفاءة مع الحفاظ على التوافق مع منصة Selldone. خطوات الإعداد لـ Selldone:
قم بإعداد نطاقك المخصص في لوحة معلومات Selldone.
تأكد من أن CDN الخارجي يشير إلى Cloudflare من خلال إعداد سجلات DNS الخاصة بك بشكل صحيح.
تأكد من أن إعدادات Cloudflare مفعلة بالكامل، بما في ذلك حالة Proxy Cloud. ستضمن هذه الخطوات أن موقعك المدعوم من Selldone يستفيد بالكامل من ميزات تحسين الأداء من Cloudflare.
الخطوة 2: ميزة اختبار السرعة في Cloudflare
يوفر Cloudflare أداة مدمجة لإختبار السرعة تقدم رؤى قيمة حول أداء موقعك. تقيس هذه الميزة المقاييس الرئيسية مثل وقت التحميل، والاستجابة، وتحسينات السرعة العامة بعد تنفيذ خدمات Cloudflare.
Test Page Speed by Cloudflare
الخطوة 3: تفعيل رؤى المستخدم في الزمن الحقيقي في Cloudflare
فهم سلوك المستخدمين لديك في الوقت الحقيقي أمر حيوي لتحسين تجربتهم على موقعك. تسمح لك ميزة رؤى المستخدم في الزمن الحقيقي (RUN) من Cloudflare بتتبع البيانات الحية حول كيفية تفاعل الزوار مع موقعك، مما يوفر مقاييس قابلة للتطبيق لتحسين الأداء وسهولة الاستخدام.
Enable RUM in Cloudflare - It will add a js inline your website
الخطوة 4: تفعيل كافة ميزات التحسين في Cloudflare
لزيادة أداء موقعك إلى أقصى حد، قم بتفعيل ميزات التحسين المتاحة في Cloudflare ضمن علامة التبويب السرعة. تم تصميم هذه الميزات لتحسين أوقات التحميل، وتقليل استخدام عرض النطاق الترددي، وتعزيز تجربة المستخدم الشاملة بسهولة.
Enable Optimization Options in Cloudflare
بعض من أهم الميزات لتسريع الموقع تحتاج إلى ترخيص PRO. تأكد من تفعيل “خطوط Cloudflare” و “Rocket Loader”
Cloudflare Fonts
الخطوة 5: نتائج فورية مع خطة Cloudflare المجانية
حتى مع خطة Cloudflare المجانية، يمكنك ملاحظة تحسينات كبيرة في الأداء من خلال تفعيل الميزات الصحيحة. لقد طبقت هذه التحسينات على marketplace.hanscristy.com، وكانت النتائج فورية. لم تؤدي التغييرات فقط إلى تحسين مقاييس Web Vitals مثل LCP و TBT، بل أيضًا عززت تجربة المستخدم العامة.
Improvement in LPC / TBT / FCP of a Shop Built by Selldone
الخطوة 6: كيف تؤثر تحسينات Cloudflare و Selldone على الأداء في الحياة الواقعية
دعني أشرح لك كيف تتعاون تحسينات Cloudflare وتقنيات Selldone المخصصة لإنشاء أداء لا مثيل له، حتى في سيناريوهات الاختبار الصعبة.
فهم التحديات مع اختبارات الأداء
تم تصميم أدوات مثل Lighthouse و GTmetrix وما شابه بشكل أساسي لصفحات ثابتة أو مواقع الويب التي تُظهر المحتوى على جانب الخادم. ومع ذلك، تعمل Selldone بشكل مختلف:
100% PWA: كل جانب من جوانب منصة Selldone—موقعها الرئيسي، لوحة التحكم، المتجر، وأكثر—تم بناؤه كتطبيق ويب تقدمي (PWA). هذا يعني أن جميع عمليات التحميل تتم على جانب العميل، مما يمنح المستخدمين مرونة هائلة في تصميم لوحات التحكم والمتاجر المخصصة.
تحميل نطاق ديناميكي: يمكن للمستخدمين تحميل Selldone على أي نطاق دون القلق بشأن تنفيذ خلفية معقدة. يتولى النظام التعامل مع كل شيء بشكل ديناميكي، يتم تسليمه كملف جافا سكريبت واحد.
تقدم هذه النهج الفريدة مرونة وسرعة ولكنها تخلق تحديات فريدة عند اختبارها مع أدوات مصممة لصفحات تم عرضها على الخادم.
لماذا Selldone أسرع 10-100 مرة في الحياة الواقعية
بينما تعتمد الصفحات الثابتة على الخادم لعرض HTML لكل طلب من المستخدم، فإن نهج PWA لدى Selldone مختلف جوهريًا: استرجاع بيانات فعال:
بدلاً من عرض صفحات كاملة على الخادم، تقوم Selldone بإرسال هيكل JSON خفيف يحتوي على البيانات المطلوبة.
على سبيل المثال، عندما ينقر المستخدم على منتج، تسترجع المنصة فقط البيانات اللازمة (مثل تفاصيل المنتج) بدلاً من إعادة تحميل أو عرض الصفحة بأكملها.
لا توجد تأخيرات في عرض الخادم:
على عكس منصات مثل WooCommerce، حيث يمكن أن يؤدي كل نقرة لتحفيز عرض الخادم، تتجنب Selldone هذا الاختناق تمامًا. يتم التعامل مع كل شيء على جانب العميل، مما يقلل من زمن الانتظار بشكل كبير.
ميزة سرعة الوقت الحقيقي:
يختبر المستخدمون انتقالات صفحات شبه فورية. هذه السرعة في الحياة الواقعية تجعل المنصة تبدو أسرع بكثير مقارنة بمواقع الويب التي يتم عرضها على الخادم، حتى إذا كانت نتائج الاختبارات التقليدية لا تعكس تمامًا هذه الميزة.
تجاوز الاختناقات التقنية
تحقيق نقاط اختبار عالية لتطبيقات PWA المعروضة على جانب العميل كان تاريخيًا تحديًا بسبب:
تأخيرات تنفيذ JavaScript: يعتمد العرض على جانب العميل بشدة على JavaScript، وهو ما تعاقب عليه أدوات الاختبار في كثير من الأحيان.
تحميل المحتوى الديناميكي: على عكس HTML الثابت، يمكن أن يظهر تحميل المحتوى الديناميكي بشكل أبطأ في الاختبارات الاصطناعية.
لكنك تقوم Selldone بتجاوز هذه القيود لأول مرة على الإنترنت من خلال الجمع بين:
تحسينات Cloudflare (مثل Rocket Loader™ وضغط Brotli) لتبسيط تسليم الأصول.
هندسة PWA المتقدمة لاسترجاع البيانات وعرضها في الوقت الحقيقي.
الأداء الواقعي مقابل الدرجات الاصطناعية
بينما قد تظهر الاختبارات الاصطناعية درجات منخفضة لمنصات عرض العميل مثل Selldone، يعكس الأداء الواقعي قصة مختلفة. توفر لوحة التحكم والمتجر لدى Selldone تجربة أسرع 10-100 مرة مقارنة بمنصات العرض على الخادم، مما يجعلها الحل المثالي لاحتياجات التجارة الإلكترونية العصرية.
Selldone.com PWA - Single Page Application progress over time
إذا كنت ترغب في محاكاة إعدادات Cloudflare التي نستخدمها للحصول على أداء مثالي، إليك قائمة بالميزات المفعلة:
Selldone.com Cloudflare Optimize Speed Config
Selldone Blog Post Page Score - 100 in Mobile and PC
مصطلحات أداء الويب
إليك شرح سهل الفهم لمصطلحات أداء الويب في Web Vitals:
LCP (أكبر محتوى مرئي)
يقيس LCP كم من الوقت يستغرق تحميل أكبر جزء مرئي من صفحة الويب (مثل صورة كبيرة أو عنوان) بحيث يتم رؤيته من قبل المستخدمين. اعتبره الزمن الذي يستغرقه موقعك ليشعر بأنه “جاهز” لبدء القراءة أو التفاعل.
CLS (تغيير تخطيط تراكمي)
يتتبع CLS مدى حركة العناصر بشكل غير متوقع على صفحة الويب أثناء تحميلها. على سبيل المثال، إذا تم تغيير موقع زر ما للوهلة التي تنوي الضغط عليه - فهذا تغيير في التخطيط. تعني الدرجة المنخفضة لـ CLS أن موقعك يبدو مستقراً وسلسًا.
INP (الاستجابة إلى رسم التالي)
يقيس INP مدى سرعة استجابة صفحة الويب لتفاعلات المستخدم، مثل النقر على زر أو الكتابة في شريط البحث. تعني INP الأسرع أن موقعك يشعر بأنه تفاعلي ولن يشعر المستخدمون بالإحباط أثناء انتظارهم لتنفيذ الإجراءات.
TBT (وقت الحظر الإجمالي)
يحسب TBT المدة التي تكون فيها صفحتك غير مستجيبة أثناء التحميل، مثل عندما يحاول المستخدم التمرير أو النقر ولكن لا يحدث شيء. تعني الدرجة المنخفضة لـ TBT أن صفحتك أفضل في multitasking، مما يسمح للمستخدمين بالتفاعل بسلاسة أثناء تحميل المحتوى.
أضف تعليق
