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

الاطّلاع على مزايا وفوائد دعم AMP في تطبيق Next.js

Houssein Djirdeh

AMP عبارة عن إطار عمل لمكوّنات الويب يضمن تحميلًا سريعًا للصفحات. يحتوي الإصدار 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 فقط مناسبًا لك، ستحتاج إلى معرفة ما إذا كان يمكن تمثيل جميع رموز الواجهة الأمامية في رمز HTML لصفحات AMP أم لا:

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

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

الخلاصة

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