كيفية تعزيز أداء تطبيق الواجهة الأمامية

أداء الواجهة الأمامية من قبل ديميتريس كيرياكاكيس

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

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

فلنفترض أنك قمت مؤخرًا بإنشاء موقع ويب أو تطبيق الواجهة الأمامية باستخدام إطار JS حديث (Angular ، React ، VueJS وما إلى ذلك). كيف يمكننا التأكد من أن الأداء لن يعيق نجاحه؟

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

  • منارة جوجل كروم
  • Speedcurve

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

يتم تضمين Lighthouse في أدوات تطوير Chrome الخاصة بك ، وبتحليل موقع الويب الخاص بك / تطبيق الويب ، يمكن أن يوفر لك بعض التلميحات المفيدة حول كيفية رفعه.

يمكن أن توفر لك منارة Chrome بعض التلميحات المفيدة حقًا

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

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

صور

الصور هي جزء أساسي من كل موقع. في المتوسط ​​، تشكل الصور أكثر من 60٪ من البيانات التي يتم تحميلها على صفحات الويب. نظرًا لأن هذا المكون هو عنصر حاسم في جميع مواقع الويب تقريبًا ، فإن تحسين الصور هو ، في رأيي ، أهم شيء ، وربما أقل ثمارًا معلقة.

1. تغيير حجم الصور الخاصة بك وجعلها تستجيب.

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

تخطيطات استجابة تحتاج الصور استجابة

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

بالطبع يمكنك استخدام كود HTML5 الذي تم إنشاؤه في أي تطبيق أو موقع أمامي. بالإضافة إلى ذلك ، إذا كنت في لعبة gulp ، فيمكنك أتمتة هذه العملية باستخدام المكون الإضافي المستجيب.

2. تأكد من أنها كسول تحميل.

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

بغض النظر عن الإطار الذي تستخدمه ، يمكنك العثور على مكون إضافي يمكنه تحميل الصور بك كسول (على سبيل المثال ، v-lazy-image في VueJS) ، ومع ذلك يمكنك إنشاء تطبيقك الخاص أيضًا. فقط تأكد من أنك تستخدم الطريقة الحديثة لاكتشاف عندما يدخل عنصر أو يخرج منفذ عرض المستعرض ، واجهة برمجة تطبيقات IntersesectionObserver.

المكافأة: استخدم CDN لتسليم الصور

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

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

CSS و JS و HTML

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

1. تحسين وثيقة HTML الرئيسية

HTML هو العمود الفقري لكل تطبيق ويب تقريبًا. عندما يتعلق الأمر بالرجوع إلى الموارد ضمن مستند HTML ، فهناك بعض الممارسات الجيدة التي يجب عليك اتباعها. يوصى بـ:

  • ضع مراجع CSS أعلى رأس مستند HTML لضمان العرض التدريجي.
  • ضع سمات JavaScript في أسفل نص HTML وتفضل تحميل البرنامج النصي غير المتزامن. سيمنع هذا أي علامات