بخش های اصلی

آموزش AMP

آموزش AMP - AMP چیست ؟

AMP راهی برای بالا بردن سرعت اجرای صفحات وب با ساختار استاتیک می باشد که سرعت رندر صفحات را بالاتر می برد. AMP در عمل شامل ۳ بخش می باشد که در این سرفصل به توضیح آنها خواهیم پرداخت:

ساختار HTML در AMP

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

<!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 مراجعه نمایید). این عناصر سفارشی به نام کامپوننت های AMP HTML شناخته می شوند و سعی دارند در حالی که ساختار را حفظ می کنند، قابلیت های خاصی را در اختیار ما بگذارند.

بعنوان مثال تگ amp-img بطور کامل در مرورگرهایی که با آن سازگاری ندارند هم اجرا می شود.

ساختار JS در AMP

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

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

تکنیک های اجرایی دیگر مانند sandbox به منظور اجرای iframe، از قبل در صفحات برنامه ریزی و پیاده سازی می شوند تا اجرایی سریعتر را داشته باشیم، همچنین از اجرای CSS های خاص در آنها جلوگیری می شود.

GOOGLE AMP CACHE

GOOGLE AMP CACHE یک شبکه تحویل محتوا بر پایه Proxy برای شناسایی و تحویل صفحات AMP معتبر می باشد. این بخش وظیفه بازخوانی صفحات AMP HTML معتبر را دارد و آنها را Cache کرده و بصورت خودکار عملیات بهینه سازی را برای بالا بردن سرعت اجرا، بر روی آنها انجام می دهد. هنگام استفاده از GOOGLE AMP CACHE تمامی تصاویر و فایل های JS از مبدا اصلی و با استفاده از HTTP 2.0 فراخوانی می شوند تا باعث بالا رفتن سرعت اجرایی گردند. 

ساختار Cache با یک سیستم اعتبار سنجی ساخته شده است که تایید می کند، صفحات مورد نظر به درستی اجرا خواهند شد، و اجرای آنها به منابع خارجی بستگی ندارد. سیستم اعتبارسنجی به منظور بررسی یک سری آیتم های خاص AMP HTML اجرا می گردد تا آنها را اعتبارسنجی نماید.

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

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

مبحث آموزشی

آموزش AMP

Learn Accelerated Mobile Pages

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد