مراحل ساخت AMP سایت

۳D illustration of three arrows hitting the center of a modern target with depth of field effect. Conceptual image over black background with room for text on the left side. Concept of competitive excellence.

سرفصل محتوا

  • مراحل ساخت AMP سایت
    • چگونگی ساخت AMP سایت
      • ۱-ساختن صفحه AMP HTML
      • ۲- تگ تصویر
      • ۳- اصلاح ارائه و لایه
      • ۴- پیش نمایش و اعتباربخشی
      • ۵- آماده کردن صفحه واسه کشف و پخش
  • چگونگی نصب AMP روی سایت وردپرسی
  • تنظیمات بیشتر AMP
  • AMP JS
    • ساخت AMP سایت واسه کشف و پخش
    • تنظیمات AMP سایت
    • تکنولوژی AMP سایت چیجوری کار می کنه؟

مراحل ساخت AMP سایت

همونطور که قبلا در مطلب AMP یا Accelerated Mobile Pages چیه؟ گفتیم ، AMP یه پروژه سرعت بخشیدن به صفحات موبایله که بوسیله گوگل ایجاد و پشتیبانی می شه؛

یه استاندارد آزاد واسه هر ناشره که از طریق اون می تونه سرعت بارگزاری صفحات رو در دستگاه های موبایلی بالا برد.

AMP شامل AMP HTML، کتابخونه AMP JS و حافظه (Cache) گوگل AMPه.

وقتی که صفحه وب واسه استفاده موبایلی بهینه نباشه، خطر افزایش شاخصای منفی بالا میره؛

اگه صفحه در بیشترین حد ۳ثانیه بارگزاری نشه، ۳۰ درصد از کاربران صفحه ر ترک می کنن.

محصول پایانی AMP بازدهی سایتا رو در اینترنت شدیدا بهتر کرد.

چگونگی ساخت AMP سایت

  • ساختن صفحه AMP HTML
  • تگ تصویر
  • اصلاح ارائه و لایه
  • پیش نمایش و اعتباربخشی
  • آماده کردن صفحه واسه کشف و پخش
  • قدمای پایانی قبل از منتشر کردن

۱-ساختن صفحه AMP HTML

در داخل سایت AMPProject.Org قطعه کد HTML  هست که باید اون رو باید به عنوان یه فایل با پسوند HTML کپی و ذخیره کنین.

محتوای در تگ body تقریبا آسونه ، اما در تگ head در صفحه، کدهای بسیار اضافه تری موجود استکه ممکنه بدون این دست اون دست کردن رو نشه.

۲- تگ تصویر

بیشتر تگای HTML رو میشه مستقیما در AMP HTML استفاده کرد، اما تگای خاصی مانند تگ <img> جانشین تگای مساوی  یا کمی سفارشی از AMP HTML می شه(و بعضی از تگا ممنوع هستن).

۳- اصلاح ارائه و لایه

صفحات وب، صفحات وب هستن که واسه بخش ظاهری صفحه از مشخصات عمومی Css استفاده می شه.

عناصر ظاهری از کلاس یا Inline Stylesheet در <head> استفاده می کنه که <Style amp-Custom> اسمشه.

هر صفحه AMP فقط می تونه یه Stylesheet واحد جاسازی شده داشته باشه و چندین Selector مشخص که شما اجازه به کار گیری اون رو ندارین.

۴- پیش نمایش و اعتباربخشی

پیش نمایش در صفحه AMP مانند پیش نمایش هر سایت استاتیک HTMLه.هیچی از پیش طراحی شده یا قدم دیگری نیاز نیس.شما می تونین انتخاب کنین:

  • باز کردن صفحه در مرورگر مستقیما از file system (بعضی از عناصر ممکنه به خاطر اشکال در XMLHttpRequests کار نکنن).
  • به کار گیری وب سرور محلی مانند Apache2 یا Nginx.

اعتبار بخشی ; بعدی اینکه، مطمئن شین صفحه AMP واقعا معتبر باشه.

۵- آماده کردن صفحه واسه کشف و پخش

در بعضی موارد، ممکنه شما یه صفحه مشابه با هر دو نسخه با AMP و هم بدون این تکنولوژی داشته باشین،مثلا مقاله خبری.این رو در نظر بگیرین: اگه جستجوی گوگل نسخه بدون Amp صفحه رو پیدا کنه، چیجوری می تونه بفهمه که یه نسخه AMP هم هست؟

ربط دادن صفحات از طریق <link>:

واسه اجرا صفحه non-AMP و AMP باید با اونا مانند یه زوج رفتار کرد؛ ما اطلاعات صفحه AMP رو در صفحه non-AMP اضافه می کنیم و برعکس، و این کار رو به شکل برچسب <link> و در <head> انجام می دیم.

چگونگی نصب AMP روی سایت وردپرسی

میدونید که در خیلی از دستگاه های موبایلی، بارگزاری متنا کنده.این تکنولوژی رو میشه از راه کدهای html و Javascript اجرا کرد.به زبون ساده روش کارکرد این تکنولوژی به این صورته که محتوای سایت در حافظه یا همون کش Google AMP ذخیره می شه و بعد از ورود دوباره کاربر، سایت از روی کش به سرعت لود می شه.وب سایتای معتبری مثل توییتر، لینکدین و … از این وسیله استفاده می کنن.

پشتیبانی از Google Analytics باعث شده تا AMP با توانایی جست و جوی گوگل موافق باشه.

مانند نصب همه افزونه های وردپرس، نصب AMP هم روی وردپرس آسونه.این افزونه که مخفف عبارت Accelerated Mobile Pagesه رو از مخزن افزونه وردپرس دانلود کرده و در فولدر پلاگینا (Plugins) بارگزاری کنین.

بعد از نصب و فعال کردن این افزونه اگه در آخر مقاله خود متن /amp رو اضافه کنین، نسخه اون رو مشاهده می کنین.

تنظیمات بیشتر AMP

واسه اعمال تنظیمات و Customize بیشتر به پلاگین AMP for WP – Accelerated Mobile Pages نیاز دارین که اون رو هم باید نصب و فعال کنین.

وقتی که اون رو فعال کردین و اگه وارد بخش نمایش AMP شید می بینید که ویژگیای بیشتری به اون اضافه شده و دستتون واسه اضافه کردن قابلیتای بیشتر بازتره.

AMP JS

کتابخونه JavaScript از تموم بهترین روش های عملکردی استفاده می کنه، که مدیریت منابع بارگزاری شده مهمترین ویژگی اون هستش.این بخش باعث می شه تا شما اطمینان داشته باشین که صفحه با سرعت هرچه بیشتر به کاربر ارائه می شه.

تکنیکای دیگری واسه افزایش کاراییه شامل پیش محاسبه (Pre-Calculating) لایه و همه عناصر اون پیش ازلود شدن منابع، غیرفعال کردن CSS Selector و همه iframeهاه.

ساخت AMP سایت واسه کشف و پخش

گاه دیده می شه که صفحه مشابه در دو نسخه با AMP و بدون اون هست. در اینجور شرایطی چیجوری میشه فهمید که علاوه بر نسخه بدون AMP نسخه دیگری هم هست؟

راه حل، ربط دادن صفحات از طریق لینکه. واسه اجرا سایتای دو نسخه ای باید با اونا مثل یه زوج رفتار کرد.

اطلاعات صفحه ای که شامل AMP است باید به صفحه بدون AMP اضافه شه. این کار با به کار گیری برچسب لینگ و در تگ head انجام می شه.

اگه تنها یه صفحه موجود باشه و اون صفحه هم دارای AMP باشه بازم نیاز به یه لینک استاندارده. این لینک باید به نوع صفحه نامبرده اشاره کنه.

تنظیمات AMP سایت

واسه اعمال یه سری تنظیمات نیاز به پلاگینای مخصوص AMP است که باید به دقت نصب و فعال شن.

پس از فعال سازی وقتی که وارد بخش نمایش AMPشوید مشاهده می شه که یه سری ویژگیای جدید اضافه شده که باعث می شه قابلیتای بیشتری واسه طراح جفت و جور شه.

AMP JS به کتابخانه های Javascript اشاره میکنه و شامل بهترین روش های عملکردیه. یکی از راه های مهم در این کتابخونه مدیریت مناسب بارگذاری شده، این روش دلیل می شه که سرعت بارگذاری صفحات تضمین شن.

از دیگر تکنیکای مورد استفاده در ساخت AMP سایت پیش محاسبات لایه ها و همینطور همه عناصر قبل از لود شدنه. میشه css selector ها رو فعال و یا غیر فعال کرد.

تکنولوژی AMP سایت چیجوری کار می کنه؟

ساخت AMP سایت در واقع ترکیبی از عناصر جور واجور واسه بهینه سازی صفحات سایته.

شاید بگید به کار گیری جاوا اسکریپت در هر صفحه دلیل می شه که بهبود قابل قبولی در هر بخش ایجاد شه اما این موضوع ممکنه با تاخیر لود صفحات همراه باشه.

واسه جلوگیری از تاخیر نامبرده، به کار گیری AMP سایت فقط به صفحات جور واجور اجازه لود میده.

این صفحات هر جاوا اسکریپتی که بوسیله وب مسترها نوشته شده رو ممنوع می سازه و یه جاوا اسکریپت قانونی رو جانشین میکنه.

این صفحات باید از عنصرهای سفارشی AMP استفاده کنن، هم اینکه اونا می تونن جاوا اسکریپت رو در هسته تشکیل.

یه سری فریما هست که اجازه میده تبلیغات و یا تصاویر با در نظر گرفتن اندازه مورد نظر درون HTML تعیین شه تا AMP قادر به شناسایی اندازه ها در هر بخش و همینطور هر موقعیت باشه.

صفحات تعاملی باید فقط از عناصر سفارشی AMP تشکیل شده باشه.

این عناصر سفارشی می تونه جاوا اسکریپت رو در هسته تشکیل، اما اونا باید به طور خاصی طراحی شن تا اطمینان انجام بشه که تداخلی در کارکرد صفحه وب به وجود نمیارن.

منابعی مثل iframeها، تبلیغات یا تصاویر باید اندازه خود رو درون HTML تعیین کنن تا AMP بتونه اندازه اونا رو در هر بخش و موقعیت اونا قبل از دانلود همه منبع، شناسایی کنه.

Amp قبل از اینکه منابع دانلود شه، طرح و لایه صفحه رو بارگزاری می کنه.

AMP اجازه نمی ده که مکانیزمای پیشرفت رندر کردن صفحه رو بلاک کنن.

AMP واسه گسترش مواردی مثل Instagram، Tweets، lightboxes و چیزای دیگه ای به جز اینا، سودمنده.

این چیزها نیازمند درخواستای http اضافه هستن و این درخواستا توانایی بستن لایه های صفحه و رندر کردن رو ندارن.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *