AMP یک پروژه سرعت بخشیدن به صفحات موبایل است که توسط گوگل ایجاد و پشتیبانی می شود؛ یک استاندارد آزاد برای هر ناشر است که به وسیله آن می تواند سرعت بارگزاری صفحات را در دستگاه های موبایلی افزایش داد.
در تاریخ 24 فوریه 2016، گوگل رسما لیست AMP را در نتایج جستجوی خود قرار داد.صفحاتی که از کدگذاری AMP استفاده می کنند، در جاهای خاصی از نتایج جستجو ظاهر می شوند و یا با علامت مخصوص AMP به نمایش در می آیند.
AMP شامل AMP HTML، کتابخانه AMP JS و حافظه (Cache) گوگل AMP می باشد.زمانی که صفحه وب برای استفاده موبایلی بهینه نباشد، خطر افزایش شاخص های منفی بالا می رود؛ اگر صفحه در حداکثر 3ثانیه بارگزاری نشود، 30 درصد از کاربران صفحه را ترک می کنند.محصول نهایی AMP بازدهی سایت ها را در اینترنت به شدت بهبود بخشید.این تکنولوژی با تکنولوژی های موجود و شرکت های بزرگ اینترنتی همکاری می کند.
این تکنولوژی فقط به تکنیک هایی برای ایجاد صفحات محدود نمی شود، در واقع شامل HTML معمولی با چندین محدودیت و اضافه شدن برچسب های تخصصی است و کارهای اضافه بیشتری نیاز ندارد.AMP JS این اطمینان را ایجاد می کند که محتوا با سرعت و وضوح بارگزاری شوند، در حالی که محتواهایی مانند تبلیغات در اولویت قرار نمی گیرند.این تکنولوژی کشف کرد که محتویاتی که به سرعت بارگزاری می شوند، سریعتر هم خوانده می شود.
نحوه ساخت AMP وب سایت
1-ساختن صفحه AMP HTML
2- تگ تصویر
3- اصلاح ارائه و لایه
4- پیش نمایش و اعتباربخشی
5- آماده کردن صفحه برای کشف و توزیع
6- قدم های پایانی پیش از انتشار
1-ساختن صفحه AMP HTML
در داخل سایت AMPProject.Org قطعه کد HTML وجود دارد که باید آن را باید به عنوان یک فایل با پسوند HTML کپی و ذخیره کنید.محتوای در تگ body نسبتا آسان است.اما در تگ head در صفحه، کدهای بسیار اضافه تری موجود استکه ممکن است بلافاصله آشکار نشود.
2- تگ تصویر
اکثر تگ های HTML را می توان به طور مستقیم در AMP HTML به کار برد، اما تگ های خاصی مانند تگ <img> جایگزین تگ های مساوی یا کمی سفارشی از AMP HTML می شود(و برخی از تگ ها ممنوع می باشند).
3- اصلاح ارائه و لایه
صفحات وب، صفحات وب می باشند که برای بخش ظاهری صفحه از مشخصات عمومی Css استفاده می شود.عناصر ظاهری از کلاس یا Inline Stylesheet در <head> استفاده می کند که <Style amp-Custom> نام دارد.
هر صفحه AMP فقط می تواند یک Stylesheet واحد جاسازی شده داشته باشد و چندین Selector مشخص که شما اجازه استفاده از آن را ندارید.
4- پیش نمایش و اعتباربخشی
پیش نمایش
پیش نمایش در صفحه AMP مانند پیش نمایش هر سایت استاتیک HTML است.هیچ چیز از پیش طراحی شده یا قدم دیگری نیاز نیست.شما می توانید انتخاب کنید:
- باز کردن صفحه در مرورگر به طور مستقیم از file system (بعضی از عناصر ممکن است به خاطر اشکال در XMLHttpRequests کار نکنند).
- استفاده از وب سرور محلی مانند Apache2 یا Nginx.
اعتبار بخشی
بعدی اینکه، اطمینان حاصل کنید صفحه AMP واقعا معتبر باشد.
5- آماده کردن صفحه برای کشف و توزیع
در برخی موارد، ممکن است شما یک صفحه مشابه با هر دو نسخه با AMP و هم بدون این تکنولوژی داشته باشید،برای مثال مقاله خبری.این را در نظر بگیرید: اگر جستجوی گوگل نسخه بدون Amp صفحه را پیدا کند، چگونه می تواند بفهمد که یک نسخه AMP هم وجود دارد؟
ربط دادن صفحات به وسیله <link>:
برای پیاده سازی صفحه non-AMP و AMP باید با آنها مانند یک زوج رفتار کرد؛ ما اطلاعات صفحه AMP را در صفحه non-AMP اضافه می کنیم و بالعکس، و این کار را در قالب برچسب <link> و در <head> انجام می دهیم.
اگر فقط یک صفحه باشیم چطور؟
اگر شما فقط یک صفحه داشته باشید، و آن هم یک صفحه AMP باشد.شما بازهم باید یک لینک استاندارد استفاده کنید، لینکی که به سادگی به نوع این صفحه اشاره می کند.
"این نکته را مد نظر داشته باشید که در این 5 مرحله قطعه کدهایی در تگ های مختص به خود وجود دارند که می توانید با جستجویی ساده این قطعه ها را بدست بیاورید.وب سایت ampproject.Org که وب سایت رسمی AMP می باشد، می تواند در این راه به شما کمک کند".
نحوه نصب 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 تشکیل شده باشد.این عناصر سفارشی می تواند جاوا اسکریپت را در هسته تشکیل دهند، اما آنها باید به طور خاصی طراحی شوند تا اطمینان حاصل شود که تداخلی در عملکرد صفحه وب به وجود نمی آورند.
منابعی نظیر iframeها، تبلیغات یا تصاویر باید اندازه خود را درون HTML تعیین کنند تا AMP بتواند اندازه آنها را در هر بخش و موقعیت آنها پیش از دانلود تمامی منبع، شناسایی کند.Amp پیش از اینکه منابع دانلود شود، طرح و لایه صفحه را بارگزاری می کند.
AMP اجازه نمی دهد که مکانیزم های توسعه رندر کردن صفحه را بلاک کنند.AMP برای گسترش مواردی همچون Instagram، Tweets، lightboxes و غیره، سودمند می باشد.این چیزها نیازمند درخواست های http اضافه هستند و این درخواست ها توانایی مسدود کردن لایه های صفحه و رندر کردن را ندارند.