كيف تضمن صفحات AMP السرعة في تطبيق Next.js

التعرّف على مزايا وسلبيات إتاحة صفحات AMP في تطبيقك المُنشئ باستخدام Next.js

Houssein Djirdeh

AMP هو إطار عمل لمكونات الويب يضمن loadingتحميل الصفحات بسرعة. يتضمّن إطار عمل Next.js ميزات مدمجة متوافقة مع AMP.

ما الذي ستتعلمه؟

يوضّح هذا الدليل أولاً كيف يضمن تنسيق AMP تحميل الصفحات بسرعة، ثم يشرح الطرق المختلفة التي يمكنك من خلالها استخدام تنسيق AMP في تطبيق Next.js، ثم يساعدك في تحديد الأسلوب الأنسب لك.

يستهدف هذا الدليل مطوّري الويب الذين قرّروا استخدام Next.js ولكنهم غير متأكّدين مما إذا كانوا سيوفّرون صفحات AMP.

كيف تضمن صفحات AMP تحميل الصفحات بسرعة

تتّبع صفحات AMP إستراتيجيتَين رئيسيتين لضمان السرعة:

كيفية استخدام AMP في Next.js

تتوفّر طريقتان لاستخدام AMP في Next.js:

  • يتيح لك منهج AMP المختلط إنشاء نسخة AMP مصاحبة لأي صفحة Next.js.
  • يتيح لك منهج AMP فقط جعل صفحات AMP هي الخيار الوحيد لصفحة معيّنة.

على الرغم من أنّ Next.js يُعتبر عادةً إطار عمل React، من المهمّ معرفة أنّه عند استخدام Next.js لعرض صفحات AMP، لن يعود بإمكانك تشغيل مكوّنات React من جهة العميل لأنّ مكوّنات React ليست مكوّنات AMP صالحة. بعبارة أخرى، لم يعُد Next.js إطار عمل React ، بل هو محرّك لإنشاء النماذج من جهة الخادم لإنشاء صفحات AMP.

كيفية تحديد ما إذا كنت تريد استخدام صفحات AMP المختلطة أو صفحات AMP فقط

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

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

  • اطّلِع على طريقة عمل AMP للتعرّف على القيود المعمارية العميقة والتحسينات الإلزامية في AMP.
  • اطّلِع على علامات HTML لمعرفة علامات HTML التي يسمح بها AMP ويحظرها، تصفَّح كتالوج مكوّنات AMP للاطّلاع على المكوّنات المخصّصة التي أنشأها مجتمع AMP لحلّ حالات الاستخدام الشائعة، واطّلِع على amp-script للتعرّف على كيفية استخدام JavaScript المخصّصة لتنفيذ الميزات التي لا يتوافق معها AMP حاليًا.

حتى إذا لم تنجح صفحات AMP فقط في صفحتك، قد يكون من المفيد استخدام صفحات AMP كلما أمكن ذلك، وذلك بسبب السرعة المضمونة لصفحات AMP HTML وذاكرات التخزين المؤقت لصفحات AMP. يقدّم نهج AMP المختلط في Next.js طريقة لعرض صفحات AMP بشكل مشروط. ومع ذلك، يؤدي ذلك أيضًا إلى زيادة تكلفة الصيانة لأنّه يتطلّب منك الاحتفاظ بنسختَين من كل صفحة.

الخاتمة

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