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

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

حسين جردية

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

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

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

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

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

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

تتوفر لصفحات AMP استراتيجيتَين أساسيتَين لضمان السرعة:

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

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

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

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

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

التجربة الآن: اطّلِع على كيفية استخدام صفحات AMP في Next.js لتجربة الطريقتين بنفسك.

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

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

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

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

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

الخلاصة

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