اینترنت

استفاده از فریم ورک APM گوگل در طراحی صفحات وب

AMP یا همان Accelerated Mobile Page به معنی افزایش سرعت بارگذاری صفحات در موبایل است. پروژه AMP یک فریم ورک متن باز و جدید است که به طور کامل از فناوری های موجود در وب ساخته شده است.

 

AMP یا Accelerated Mobile Pages

در اویل سال ۲۰۱۶ میلادی بود که گوگل ابزار جدیدی را با نام AMP منتشر کرد. با توجه به افزایش روز افزون استفاده از تلفن های همراه بسیاری از افراد برای دسترسی به محتوای موجود در دنیای وب از تلفن های همراه خود استفاده می کنند و آمار استفاده از موبایل روند رو به رشد خود را طی می کند. در نتیجه سرعت بارگذاری صفحات در موبایل از اهمیت ویژه ای برخوردار است. گوگل به تازگی از فرم ورک AMP رونمایی کرده است و هدف از ارائه آن ابزار بهبود عملکرد صفحات وب حاوی متن, تصاویر، فیلم، انیمیشن و…. در موبایل است.

هدف از این فناوری گوگل ارائه راه حلی سریع و بهینه برای کاربران است تا به راحتی بتوانند، محتوای صفحات وب، به ویژه سایت هایی که دارای متن زیادی هستند (مانند سایت های خبری) را به آسانی مشاهده کنند.

 

فریم ورک AMP

AMP یا همان Accelerated Mobile Page به معنی افزایش سرعت بارگذاری صفحات در موبایل است. پروژه AMP یک فریم ورک متن باز و جدید است که به طور کامل از فناوری های موجود در وب ساخته شده است. این پروژه که به وسیله گوگل و توییتر انجام شده است، به برنامه نویسان کمک می کند  صفحات HTML با حجم کم ایجاد کنند. این کد ها به راحتی در صفحات موبایل لود می شوند، تا با لود سریع محتوای صفحات وب به راحتی برای کاربران قابل مشاهده باشد.

شرکت های مختلفی مانند WordPress ، LinkedIn ،APPLE ، Pinterest و شرکت های دیگری که در حوزه فناوری های تحت وب فعالیت می کنند در این پروژه شرکت کرده اند تا همگام با این فناوری گوگل در جهت سهولت کاربران طراحی وب سایت خود گام بردارند.

چگونه AMP باعث افزایش سرعت صفحات وب سایت می شود ؟

همان طورd که گفته شد AMP یک فریم ورک متن باز است که موجب بهینه سازی کد های HTML در طراحی سایت می شود. کد های AMP سرعت بارگذاری بسیار بالایی دارند و باعث بارگذاری سریع صفحات وب می شوند و خواندن صفحات وب را برای کاربران تسهیل می بخشند.

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

آمپ، ای ام پی در نتایج جستجو AMP

 

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

 

نحوه نمایش AMP در نتایج جستجوی گوگل

اکنون که با استاندارد AMP آشنا شدیم به نحوه نمایش این صفحات در موتور های جستجو می پردازیم. در حال حاضر AMP روی تلفن همراه هدف گذاری کرده است و بنا بر پیش نمایش نشان داده شده در سایت رسمی گوگل سایت هایی که توسط فریم ورک AMP نوشته شده اند دارای لینک آبی رنگ هستند. با انتخاب لینک به راحتی به صفحه مورد نظر منتقل می شوید و جابجایی در صفحات و مطالعه محتوای صفحه به راحتی صورت خواهد گرفت. قطعا گوگل در نسخه ای رسمی در سال ۲۰۱۶ طراحی مناسبی برای صفحاتی که با AMP نوشته شده اند در نظر میگیرد.

با توجه به این موضوع سایت های خبری مانند BBC و CNN نیز هم اکنون به این سیستم مجهز شده اند کافیست عبارت iran را بوسیله موبایل خود در گوگل جستجو کنید تا در بخش Top Stories نمونه هایی از نحوه نمایش AMP را مشاهده نمایید. در این بخش یک اسلایدر قرار داده شده که اطلاعات خود را مستقیما از صفحاتی با ساختار کدنویسی AMP دریافت میکند.

 

نحوه طراحی وب سایت بر اساس استاندارد AMP

در مرحله اول شما باید صفحات AMP سایت خود را بسازید و صفحه سایت خود را بر اساس استاندارد های AMP طراحی کنید. شما به راحتی می توانید با ابزار Developer tools گوگل کروم از استاندارد کدهای خود بر اساس فریم ورک AMP آگاه شوید. پلاگین های وردپرس که برای ایجاد صفحات AMP نوشته شده اند به شما کمک خواهند کرد تا به راحتی صفحات داینامیکی بر اساس استاندارد های AMP برای وب سایت خود طراحی کنید.

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

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

 

این نوشته یک پست میهمان بوده و توسط شرکت هاست ایران نگاشته شده است.

امیررضا نصیری

امیررضا هستم، دانشجوی ارشد نرم‌افزار و مدیر بایت گیت و دلیکس. عاشق کامپیوتر و هر چی که بهش ربط داره! دوست دارم همه چیزو یاد بگیرم و اونا رو یاد بدم. امیدوارم از مطالب سایت استفاده کنید و لذت ببرید. » بیشتر آشنا شوید!

نوشته های مشابه

دیدگاهتان را بنویسید

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