AMP یا Accelerated Mobile Pages چیست؟
AMP روشی برای ایجاد صفحات وب برای محتوای استاتیک است تا به سرعت لود شود. AMP در عمل شامل سه بخش متفاوت است:
- AMP HTML
- AMP JS
- Google AMP Cache
AMP HTML نوعی HTML با محدودیت هایی برای عملکرد قابل اعتماد و برخی از افزونه ها برای ساخت محتوای غنی است که معمولا فراتر از HTML معمولی است.
کتابخانه AMP JS رندر شدن سریع صفحات AMP HTML را قادر می سازد و در نهایت Google AMP Cache را می توان برای خدمت گرفتن صفحات HTML مورد استفاده قرار داد.
AMP HTML:
همانطور که قبلا نیز گفتیم، AMP HTML نوعی HTML است که با خواص AMP سفارشی توسعه یافته است. ساده ترین فایل AMP HTML شبیه کدهای زیر خواهد بود:
<!doctype html>
<html ⚡>
<head>
<meta charset=”utf-8″>
<link rel=”canonical” href=”hello-world.html”>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
</head>
<body>Hello World!</body>
</html>
اگرچه بیشتر تگ ها در یک صفحه AMP HTML همانند تگ های معمولی HTML هستند اما برخی از این تگ ها با تگ های مخصوص AMP جایگزین شده اند. این عناصر سفارشی را اجزای AMP HTML می نامند. این اجزا به اجرای آسانتر الگوهای رایج در یک روش بهتر کمک می کند. به عنوان مثال تگ amp-img می تواند پشتیبانی srcset کاملی حتی در مرورگرهایی که از آن حمایت نمی کند فراهم آورد.
AMP JS:
کتابخانه AMP JS بهترین تمرینات عملکردی AMP را اجرا می کند ، بارگذاری منابع را مدیریت می کند و تگ های سفارشی در اختیار شما قرار می دهد تا مطمئن شوید صفحه مورد نظرتان در دستگاه های موبایلی به درستی و به سرعت بارگذاری می شود. در میان بزرگترین بهینه سازی های انجام شده، واقعیت این است که این گونه موارد کار را بسیار ساده تر کرده است . بنابراین هیچ چیزی در صفحه نمی تواند چیز دیگری را از رندر شدن بازدارد. سایر تکنیک های عملکردی شامل جعبه شنی کردن(sandboxing) تمامی iframe ها ست.
Google AMP Cache:
گوگل کش AMP یک شبکه تحویل مبتنی بر پروکسی برای تحویل تمامی اسناد AMP معتبر است. این گزینه تمامی صفحات AMP HTML را بازخوانی می کند، آنها را کش می‌نماید و عملکرد صفحه را به طور خودکار بهینه سازی خواهد کرد. زمانیکه از این گزینه استفاده می شود، اسناد یعنی همه فایل های JS و تمامی تصاویر از منبع یکسانی بارگذاری می شود که از HTTP 2.0 برای بهره وری حداکثر استفاده می کند. کش همچنین دارای یک سیستم اعتبار سنجی درون ساخت است که کارکرد صفحه را تضمین می کند و به منابع خارجی بستگی ندارد. سیستم اعتبار سنجی یک سری اظهارت تایید نشانه گذاری صفحه را اجرا می کند که با مشخصات AMP HTML هماهنگ خواهد بود. نسخه دیگری از اعتبار سنجی ها در هر صفحه AMP وجود دارد. این نسخه می تواند خطاهای موجود را به طور مستقیم در کنسول مرورگر ذخیره کند و آن را گزارش دهد. این موضوع به شما اجازه می دهد بفهمید تغییرات پیچیده بر روی کدها چه تاثیری بر روی عملکرد و تجربه کاربران خواهد داشت.
منبع:https://www.ampproject.org/docs/get_started/about-amp.html
