أولئك الذين يتابعون أخبار صناعة تكنولوجيا المعلومات يدركون "الصفحات السريعة" من Google و Yandex: صفحات AMP و Turbo. تم إطلاق سراحهم منذ أكثر من عامين ، لكن لم يحدث ضجيج كبير في السوق. أنا مدير استوديو الويب AlkoDesign. قررنا أن نتذكر هذه الأدوات وتبادل نتائج تنفيذها.



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



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

نحن في AlkoDesign.ru نعمل مع بوابة معلومات واحدة كبيرة. (سنفعل بدون أسماء). كانت إحدى المهام المحددة لنا هي: زيادة عدد الزيارات وتقليل نسبة الفشل. دون التفكير مرتين ، قررنا استخدام الصفحات السريعة من Google و Yandex.

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

النظرية

AMP و Turbo Pages هي تقنية صفحة متنقلة معجلة تم تطويرها بواسطة مطورين مستقلين ويتم الترويج لها بنشاط بواسطة كل من محركات البحث. يتم تحميل هذه الصفحات بشكل أسرع من صفحة إصدار الجوال للموقع.

صفحات AMP google.ru

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

تجد محركات البحث هذه العلامات الخاصة ومعلومات ذاكرة التخزين المؤقت فيها. بعد ذلك ، عندما يبحث المستخدم عن شيء ما ، يقوم المستعرض في الخلفية بتحميل المعلومات من CDN إلى إطار iframe خاص ، وعند النقر فوق الارتباط ، يفتح صفحة تم تحميلها بالفعل في نافذة خاصة.

عند استخدام أي CMS على الموقع ، تحتاج لصفحات AMP إلى إنشاء قالب منفصل خاص بك لعرض البيانات وفقًا لمتطلبات وضع علامات على صفحات AMP.

ياندكس توربو الصفحات

الفرق الرئيسي من AMP هو أن محتوى صفحات Turbo لا يؤخذ من صفحات الموقع ، ولكن من موجز RSS خاص.

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

بصراحة ، الإعداد بسيط قدر الإمكان. إذا كان عدد الصفحات صغيرًا (10-20) ، فيمكنك إنشاء موجز RSS لـ Yandex بنفسك ، دون إشراك مبرمج. صحيح ، في هذه الحالة سيتم أيضًا تحديثها يدويًا.

سرعة تحميل صفحة Turbo حوالي 15 مرة أسرع من المعتاد. علاوة إضافية (وليست الأخيرة) - إذا تعطل الموقع ، على سبيل المثال ، بسبب الإصابة أو هجوم DDoS ، ستستمر صفحات Turbo في فتحه وسيظل المحتوى متاحًا للمستخدمين.

يتم تصنيف الصفحات التي تحتوي على AMP و Turbo أعلى استعلامات بحث أخرى نظرًا لأنها تفي بمتطلبات التحميل السريع.

ميزات AMP و Turbo Pages

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

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

بمساعدة علامات AMP و Turbo ، يمكنك تطبيق القائمة الجانبية ، دائري ، تقديم النموذج ، المحتوى القابل للتنزيل ، الإعلان والمزيد. يرتبط كل مكون بمكتبة js الخاصة به ، والتي يجب أن تكون متصلاً لاستخدامها على الموقع.

ميزات الصفحة توربو

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

مزايا صفحات Turbo هي أنه بعد تطبيقها على موقعك:

• معدل ترتد ينخفض. عندما يزور أحد المستخدمين موقعك ، وبسبب إنترنته السيئ لفترة طويلة لا يمكنه فتح صفحتك ، فقد لا ينتظر انتظار تحميلها وإغلاقها والعودة إلى نتائج البحث مرة أخرى للعثور على موقع آخر أسرع. وبالتالي ، يرتفع معدل الارتداد ، وكلما ارتفع معدل الارتداد ، زاد وضعك في نتائج البحث.
• حركة المرور المحمول ينمو. اليوم ، يعرف الكثير من المستخدمين بالفعل أن المواقع التي تحمل أيقونة صاروخ يتم تحميلها بسرعة كبيرة وبالتالي ينقرون عليها بنشاط. يمنحك هذا ميزة على المنافسين ويسمح لك بزيادة حركة المرور إلى موقعك من الأجهزة المحمولة.
• يتم تقليل تحميل الاستضافة. إذا كان الموقع يحتوي على عدد كبير من الزيارات ، فسيكون هذا العنصر مناسبًا أيضًا. نظرًا لأن تنزيل المحتوى ليس من استضافتك ، ولكن من خوادم Yandex ، يتم تقليل التحميل. في الوقت نفسه ، تستخدم Yandex شبكة توصيل المحتوى الخاصة بها (CDN) لإنشاء صفحات Turbo وتخزينها ، مما يزيد من سرعة تحميل المحتوى.

عيوب Turbo - في وظائف محدودة:

• نماذج الملاحظات غير مدعومة ، ولا توجد إمكانية لطلب سلع أو خدمات. هذا يمكن أن يسمى أهم ناقص ، لأنه بالنسبة للصفحة المقصودة أو المتجر عبر الإنترنت ، سيكون استخدام صفحات التوربو غير مناسب ، لأنك ما زلت غير قادر على تلقي الطلبات منها.
• تم تصميم الموقع وفقًا لقالب صغير الحجم محدد مسبقًا. عند النقر فوق الارتباط المميز برمز "Turbo" ، سيظهر المحتوى الخاص بك في صفحة مبسطة تم إنشاؤها بواسطة محرك البحث ، ولن يرى أحد تصميم موقع الويب الفريد الخاص بك. لذلك ، يجب عليك هنا الاختيار بين السرعة العالية لتحميل الموقع والتصميم الفريد لجهازك المحمول أو إصدار التكييف.

ميزات AMP

• إنشاء صفحات "سهلة" ؛
• يحفظ محرك البحث إصدارات خفيفة الوزن من الصفحات على خوادمه ؛
• تقدم Yandex صفحات توربو لأصحاب الهواتف الذكية في بحث أو موجز أخبار ؛
• بفضل سرعة التنزيل العالية ، تتحسن تجربة المستخدم والمؤشرات السلوكية.

بعد إنشاء صفحات AMP ، ذهبت Google إلى أبعد من ذلك. قام بنقل جميع المواقع إلى نظام تصنيف جديد - Google Mobile Friendly. الآن يعتمد ترتيب المواقع بشكل أساسي على إصدار الجوال للموقع. إذا كان من الممكن في وقت سابق إنشاء نسخة سطح المكتب من الموقع ولعقها دون عمل نسخة قابلة للتكيف ، أو كحل أخير ، للموقع المحمول. الآن عند تطوير موقع ، يجب إيلاء اهتمام خاص للإصدار التكيفي.

إعداد البيانات

لصفحات AMP

يجب وصف جميع الصور الموجودة على الصفحة بعلامة <amp-img> خاصة ، مما يجعل من الصعب على المستخدم إدراج الصور من خلال محرر نصوص.

أيضًا ، إذا كنت تستخدم دائريًا أو lightbox ، فأنت بحاجة إلى إدراج نظائرها من مكونات amp. لتنفيذ هذه الوظيفة ، تم تنفيذ معالج يقوم ، باستخدام التعبيرات العادية ، باستبدال علامات HTML القياسية بالعلامات المستخدمة في مواصفات amp.

ميزة أخرى يجب أن تتعلق في المقام الأول بمحرر نص ، نظرًا لأن أنماط التحرير الموجودة هناك تكون مضمنة. العناصر ذات السمات مثل style = "color: ..." غير صالحة ، وسيؤدي تغيير اللون أو حجم الخط إلى كتابة هذه الخاصية إلى الكود.

لكي يفهم محرك البحث وجود إصدار AMP من الصفحة ، يجب أن يحتوي على رابط:

<link rel = "amphtml" href = " www.site.com/url/to/amp/document.html ">

وعلى صفحة AMP يوجد رابط للخلف:

<link rel = "canonical" href = " www.site.com/url/to/full/document.html ">

تتم كتابة أنماط Css في السطر ، ويجب ألا يتجاوز حجمها 50 كيلو بايت.

لصفحات توربو

لتوصيل صفحات Turbo ، يكفي إجراء تغييرات صغيرة على ملف التصدير الحالي وفقًا للمتطلبات الفنية:

• العنصر الجذر لملف RSS هو rss ، يجب تعيين سمة الإصدار الخاصة به على 2.0.
• داخل عنصر rss هو عنصر القناة ، والذي يتضمن معلومات حول المصدر ومحتوياته.

يشار إلى ما يلي:

• معلومات حول الموقع المصدر - يتم نقل المعلومات في عنصر القناة.
• معلومات الرسالة - يتم نقل البيانات في عنصر العنصر.
• محتوى الصفحة توربو

في صفحة turbo ، يمكنك تضمين عناصر إضافية مثل: رأس الصفحة ، الروابط ، الصور ، الفيديو ، زر المشاركة ، علامات الاقتباس ، الجداول ، إلخ. يمكنك أيضًا توصيل بعض أنظمة تحليلات الويب.

الممارسة

نحن نطبق AMP على الموقع

بالنظر إلى أننا بعيدون عن المبتدئين في مجال تكنولوجيا المعلومات ، لم يكن إدخال الصفحات أمرًا صعبًا.

لقد أنشأنا قالبًا منفصلًا للموقع باستخدام العلامات اللازمة من مواصفات AMP و Turbo. ثم أنشأنا إنشاء الصفحة التلقائي.



مباشرة بعد إدخال الصفحات السريعة ، أطلقنا شيكًا عبر Google و Yandex. بعد البدء ، وجدوا أخطاء إضافية تم حلها بنجاح.

تقديم صفحات توربو

لتنفيذ صفحات Turbo على الموقع ، تمت دراسة مواصفات التنسيق. قوالب محددة لإنشاء رؤوس صفحات توربو والإشارة إلى صور إضافية. تم تطوير وحدة متخصصة لنظام إدارة المحتوى (CMS) ، والتي تولد ملفات بيانات RSS ، وفقًا للوثائق التقنية في ياندكس ( partner.news.yandex.ru/tech.pdf ).

نظرًا لإضافة المواد الموجودة على الموقع باستمرار ، يتم أيضًا تحديث تحديث موجز ويب لـ RSS بصفحات توربو عن طريق تشغيل البرنامج النصي للتحديث على CRON. نظرًا لخصائص المشروع ، تقرر إنشاء عدة خلاصات RSS ، لكل منها لنوع المحتوى الخاص بها.
في إعدادات الوحدة النمطية ، يمكنك تحديد أقسام الموقع التي تريد تصديرها إلى RSS ، وتحديد بيانات إضافية للتصدير. يتم تعيين تكرار تحديثات موجز ويب RSS لصفحات التوربو حسب تواتر مهمة CRON.

بعد اجتياز التحقق من صحة RSS بواسطة Yandex ، تمت إضافة صفحات Turbo إلى الفهرسة.

النتائج

ترتد

بعد إدخال صفحات AMP و Turbo ، تغيرت المقاييس السلوكية.

للربع ، كان معدل ترتد الموقع العام 14.2 ٪ . يتم اعتبار جميع الزوار هنا ، بما في ذلك مستخدمي سطح المكتب.



وكان معدل الارتداد لأصحاب الهواتف الذكية الذين وصلوا إلى الصفحات العادية 23.7 ٪ لهذا الربع .



كان معدل الارتداد لزوار صفحات Turbo لنفس الفترة 6.2٪.



وهذا يعني ، من حيث معدل الارتداد ، تفقد الصفحات العادية أكثر من ضعف الصفحات التوربينية: 23.7 في المائة مقابل 6.2 في المائة مع صفحات توربو وإجمالي 14.2 في المائة .

الحضور

منذ تقديم صفحات AMP و Turbo ، قمنا بزيادة حركة المرور إلى البوابة مرتين .

سرعة تنزيل الصفحة

الإضافة الرئيسية هي زيادة في سرعة تحميل الصفحة بنسبة 3 إلى 10 مرات . نمت على الفور بسبب التخزين المؤقت.

وأيضا:

• انخفاض تحميل الخادم
• نمت العوامل السلوكية (AMP لا يؤثر بشكل مباشر على المواقف في العضوية).

الخلاصة: نحن نقدم إلى المكان وبحكمة

حيث يكون من الضروري نقل المحتوى إلى المستخدم في أسرع وقت ممكن وبطريقة بسيطة.

في حالتنا ، كانت نتيجة التنفيذ:

• انخفض معدل الرفض بشكل عام بنسبة 2 مرات ؛
• زيادة الحضور بنسبة 2 مرات ؛
• زادت سرعة التحميل 3-10 مرات

لمن لم يستخدم Turbo بعد:

• التجارة الإلكترونية لأنه لا يوجد سلة. (حاليا قيد التطوير)
• الصفحة المقصودة ، لأن أي أزرار ونماذج على الصفحات غير مدعومة

من هم مثاليون صفحات توربو:

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

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

AMP و Turbo Pages هي تقنية شيقة لاستخدامها بحكمة. يمكن استخدامه للإصدار "السهل" للجوال من الموقع ، أو لأقسام معينة لا تتطلب وظائف عالية. وبالطبع ، يعد هذا حلاً رائعًا لمواقع المعلومات والمدونات والمجلات عبر الإنترنت.