في سعينا المستمر لتحقيق سرعة الصفحة، غالبًا ما نجد أنفسنا نعود إلى نفس النقطة. على الرغم من الجهود التي تبذلها فرق المنتج والتسويق والنمو لتحفيز فرق التكنولوجيا، غالبًا ما يتم تأجيل المهام التي يمكن أن تحسن أداء الموقع بسبب الحاجة إلى إعادة البناء، وحتى عند الانتهاء منها، فإنها لا تؤدي دائمًا إلى نتائج كاملة. في هذه الدورة، من المفيد النظر في بعض وجهات النظر الثاقبة حول تحقيق الأداء الحقيقي. على سبيل المثال، ما هي الدروس التي يمكن أن نتعلمها من سرعة React.js وVue.js أو امتدادات SSR (العرض من جانب الخادم) مثل Next.js وNuxt.js مقارنة بالمنصات الأخرى؟ ألم يحن الوقت لتحسين ميغابايت لملفات jQuery وCSS؟ متى ستستيقظ الشركات الكبيرة التي تضحي بأداء الويب الخاص بها لصالح مطوري الواجهة الأمامية غير المطلعين؟ دعونا نتناول هذه الأسئلة واحدا تلو الآخر.
لماذا تتميز المواقع المستندة إلى Next.js وNuxt.js بالسرعة؟
تتميز منصات Next وNuxt، وهي هياكل صديقة لتحسين محركات البحث مبنية على React وVue، بسرعة الأداء. لكن لماذا هذه المنصات سريعة جدًا؟
React.js وVue.js هي أطر عمل مبنية على المكونات والتي تقسم كل صفحة إلى مكونات فرعية، كما هو موضح أدناه.
لنأخذ مثالاً واقعيًا لتوضيح هذه النقطة: صفحة قائمة التجارة الإلكترونية. يمكن اعتبار صفحة القائمة هذه أنها تحتوي على المكونات الفرعية التالية:
- رأس
- القائمة
- معلومات إدخال القائمة
- صفحة العنوان
- التفصيلي
- عدد المنتجات
- الفرز
- فلتر الفئات
- حدد ميزانيتك
- فرز
- بطاقات المنتجات
- صورة المنتج
- تفاصيل المنتج
- اسم المنتج
- سعر المنتج
- سعر يتوسطه خط
- سعر البيع
- معدل الخصم
- معلومات الحملة
- ترقيم الصفحات
- محتوى الفئة
- معلومات إدخال القائمة
- تذييل
عند إنشاء تطبيق قائم على المكونات باستخدام Nuxt.js، يتم ترميز كل مكون من هذه المكونات بشكل منفصل ويتم تضمينه في الصفحة الرئيسية. على سبيل المثال، خذ بعين الاعتبار ملفًا يسمى ProductPhoto.js. مهما كانت الوظائف المطلوبة لصور المنتج (العرض الدائري، عرض الصور سريع الاستجابة، وما إلى ذلك)، فإن كود JS مكتوب داخل هذا المكون. وبالمثل، يتم تضمين ملفات CSS التي يستخدمها هذا المكون فقط. وهذا يعني أنه سيتم تنفيذ الملفات التي يتطلبها كل مكون فقط في حالة استخدام المكون.
كيف يتم التعامل مع هذه العملية حاليًا على معظم منصات الويب؟
يتضمن ملف script.js تعليمات برمجية لكل شيء بدءًا من العضوية والمرشحات وصفحات سلة التسوق وحتى القائمة التي يتم تشغيلها على جميع الصفحات. النتائج؟
مواقع الويب مع أ ملف JS بحجم 3 ميجابايت وملف CSS بحجم 1.5 ميجابايت ملف. لا تكمن المشكلة الرئيسية في أحجام الملفات فحسب، بل في حقيقة أنه لا يمكنك أن تتوقع أن تقوم وحدة المعالجة المركزية (CPU) لجهاز محمول يعمل بنظام Android بتنفيذ آلاف الأسطر من التعليمات البرمجية خلال أجزاء من الثانية. من خلال تشغيل التعليمات البرمجية التي تحتاجها فقط، يمكنك تحقيق مكاسب في الأداء.
كيفية التخلص من موارد حجب العرض؟
واليوم، يستخدم 32% من أفضل مليون موقع ويب مكتبة الخطوط Font Awesome، والتي يبلغ متوسط حجمها حوالي 1 كيلو بايت. مع الأخذ في الاعتبار أن التحميل غير المتزامن ليس مفضلاً بسبب تأثير النقر، فكر في عدد الخطوط المرئية على الشاشة الأولى للصفحة عند فتحها على الهاتف المحمول أو سطح المكتب. وجدت دراسة قصيرة أجريت على 250 منصة مختلفة أن متوسط 50 رمزًا مستخدمًا (الأكثر شيوعًا: عربة التسوق، المستخدم، القائمة، الإشعارات). وبالتالي، لتحميل أربعة أيقونات فقط دون مشاكل، نقوم بتحميل المكتبة بأكملها.
كيف تدير أطر عمل JS المتقدمة هذا؟ من خلال استيراد تنسيق SVG فقط للأيقونات المستخدمة في المكون ذي الصلة، مما يلغي الحاجة إلى تحميل الخط بالكامل أو مكتبات CSS.
ماذا يخبرنا استخدام Bootstrap مقابل React JS؟
تمتلك مكتبة Bootstrap JS حصة سوقية تبلغ 26% عبر جميع المواقع في جميع أنحاء العالم، في حين يبلغ استخدام React حوالي 4%. يشتهر Bootstrap بمرونته وسهولة استخدامه، مما يتيح التطوير السريع. ومع ذلك، تأتي هذه المرونة بتكلفة: يتم تضمين وظائف JS العامة وتغطية التعليمات البرمجية الشاملة ووظائف الميزات التي قد لا تستخدمها أبدًا في مشروعك.
لذا، دعونا نسأل: ما الذي يعنيه زيادة الاستخدام بنسبة تزيد عن 100% من تشير أعلى 10,000 إلى أعلى 1,000 موقع؟ إنه يوضح أن الأفضل يحولون التفاصيل لصالحهم ليكونوا أفضل.
باختصار، بدلاً من إعادة كتابة مواقعنا باستخدام تقنيات مثل التالي، Nuxt، Angular، React، Vueوما إلى ذلك، يجب أن نفهم ما تفعله هذه التقنيات بشكل صحيح من أجل السرعة وتطبيق أفضل الممارسات هذه على تطبيقات الويب الخاصة بنا.
