يدعم AMP الآن تقنية تُعرف باسم عرض جانب الخادم (SSR)، يمكنك تطبيقها على صفحات AMP لجعلها أسرع في التحميل. أظهرت الاختبارات اللاحقة على منصة يينغباو السحابية الذكية لبناء المواقع أن مؤشر FCP الشائع زاد بنسبة تصل إلى 50%. لقد استخدم Google AMP Cache هذه التقنية لفترة، ولكن يمكنك الآن استخدامها في نطاقك الخاص! إذا كنت تستخدم AMP لتوفير تجربة موقع رئيسي، فإن تثبيت هذا التحسين الإضافي يصبح بالغ الأهمية. حتى إذا كنت تستخدم "إعداد AMP المزدوج" الذي يتضمن صفحات AMP وغير AMP، فإن هذه التقنية تضمن للمستخدمين الحصول على أفضل أداء إذا لم يتم استخدام ذاكرة تخزين AMP مؤقت، مثل مستخدمي تطبيق Twitter.
SSR هي تقنية لتحسين وقت رسم المحتوى الأول (FCP) في أطر عمل عرض جانب العميل (مثل React أو Vue.js). عيب عرض جانب العميل هو الحاجة إلى تنزيل كل JavaScript المطلوب لعرض الصفحة أولاً. وهذا يؤخر الوقت الذي يمكن للمستخدمين فيه رؤية المحتوى الفعلي للصفحة. للتخفيف من ذلك، يدعم React وVue.js التصيير المسبق لـ DOM على الخادم عند طلب التنقل. ثم يحصل JavaScript الخاص بالعميل على التصيير، وتُعرف هذه العملية باسم (إعادة) التميه. سيمكن المستخدمين من رؤية المحتوى بشكل أسرع.
يعمل مبدأ AMP SSR على إزالة كود قالب AMP وعرض تخطيط الصفحة على الخادم. يُستخدم كود قالب AMP لمنع القفز المحتوى عند تحميل الصفحة. فهو يخفي محتوى الصفحة حتى يتم تنزيل إطار AMP وإنشاء تخطيط الصفحة. وبالتالي، تواجه صفحات AMP نفس المشكلة مثل أطر عمل العميل الأخرى: يتم حجب العرض حتى يتم تنزيل JavaScript. من خلال إزالة كود القالب، يمكن لـ AMP SSR جعل وقت FCP أسرع بنسبة 50%. هذا هو الفرق بين ملف AMP وإصداره المعروض على الخادم:
يمكنك التعرف على صفحات AMP المعروضة على الخادم من خلال سمة التحويل في عنصر html:
<html amp transformed =“self; v = 1”>
ملاحظة: تضيف ذاكرة تخزين AMP مؤقت علامتها الخاصة، على سبيل المثال، يضيف Google AMP Cache:
<html amp transformed =“google; v = 1”>
بعد تعيين هذه السمة، سيعتبر برنامج التحقق من الصحة أن AMP المعروض على الخادم صالح. تحسينات AMP المعروضة على الخادم تكسر قواعد مواصفات AMP، مما يجعل المستند غير صالح، وهذا هو سبب الحاجة إلى هذه العلامة الجديدة للإشارة إلى هذه الحالة. بمجرد أن تكون العلامة والتحسينات في مكانهاما، يعتبر المستند صالحًا، وستكون سعيدًا.
كيفية عرض AMP على الخادم؟
ليس من المنطقي كتابة AMP المعروض على الخادم يدويًا. بدلاً من ذلك، استخدم أدوات لتحويل ملفات AMP تلقائيًا إلى إصدارات معروضة على الخادم، تمامًا مثل المترجم. من الناحية المثالية، يحدث هذا التحويل مقدمًا قبل طلب المستخدم للمستند. ومع ذلك، يمكنك أيضًا تشغيله عند الطلب (مع التأكد من تخزين النتائج مؤقتًا لتجنب تشغيل التحويل مرارًا وتكرارًا).
حاليًا، هناك نوعان من الأدوات المتاحة لعرض AMP على الخادم:
1. مُحسّن AMP: مكتبة NodeJs لإنشاء AMP مُحسّن.
2. حزمة AMP: أداة سطر أوامر مكتوبة بلغة Go، يمكن استخدامها مع تبادل التوقيعات.
ملاحظة: لن تقوم هذه الأدوات بتنفيذ عرض على الخادم فحسب، بل ستقوم أيضًا بتنفيذ تحسينات أخرى، مثل التحميل المسبق لإطار AMP وإعادة ترتيب الرأس.
يدعم Next.js عرض AMP على الخادم
نحن متحمسون للغاية لأن أحدث إصدار من Next.js 9 يدعم عرض AMP على الخادم. الآن، يعمل Next.js 9 افتراضيًا على تحسين AMP المعروض لصفحات AMP-first وAMP المختلطة. وهذا يجعل Next.js خيارًا رائعًا لبناء صفحات AMP.
ما هي الخطوة التالية؟
نخطط للقيام بشيئين كبيرين في المستقبل:
1. خيارات الإطار المدار ذاتيًا لـ AMP (v0.js). نعم، لقد فعلت ذلك بشكل صحيح، لن تحتاج بعد الآن إلى تنزيل AMP من cdn.ampproject.org. سيكون لهذا فائدتان:
· وقت تفاعل أسرع: لن يتطلب تنزيل إطار AMP إنشاء اتصال HTTPS ثانٍ مع cdn.ampproject.org.
· ضمان جودة أبسط: يمكنك التحكم في متى يتم التبديل إلى إصدار جديد من AMP.
ولكن لاحظ أن لأسباب تتعلق بالخصوصية، ستقوم ذاكرة تخزين AMP مؤقت بإعادة كتابة عناوين URL لنصوص AMP لتتناسب مع أصل التخزين المؤقت عند تقديم صفحات AMP مخزنة مؤقتًا.
2. تكامل WordPress: سيقدم الإصدار 1.3 من الملحق الرسمي لـ AMP دعم عرض AMP على الخادم جاهزًا للاستخدام خارج الصندوق.
عرض AMP على الخادم مناسب للجميع
إذا كنت تنشر صفحات AMP، فيجب عليك نشر صفحات AMP المعروضة على الخادم. مثل تصغير HTML أو CSS، يجب أن يكون تشغيل مُحسّن AMP أو محول Go جزءًا طبيعيًا من سلسلة البناء/التصيير. يحدث تحسن كبير في أداء التصيير في وقت FCP، ولكن الأهم من ذلك هو تجربة المستخدم.
لإنشاء موقع ويب محمول باستخدام AMP بسهولة دون الحاجة إلى الإعدادات المذكورة أعلاه، قم بزيارة www.eyingbao.com، منصة يينغباو السحابية الذكية لبناء المواقع والتسويق، لتجربة وإنشاء مجانًا، أو اتصل بخط المساعدة الساخن: 4006552477 خط خدمة العملاء: 15600002121
مقالات ذات صلة



منتجات ذات صلة