افزایش سرعت بارگذاری صفحات وب در موبایل با AMP

افزایش سرعت بارگذاری صفحات وب در موبایل با AMP

Amp چیست ؟

یک تفکر از روی تجربه می‌گوید کاربرانی که با گوشی هوشمند خود اقدام به باز کردن یک وب سایت می کنند احتمالاً عجله دارند تا در سریع ترین زمان ممکن به اطلاعاتی که به دنبال آن هستند دست یابند، پس باید محتوای وب سایت هم با کمترین جزئیات و زائده ها در سریع ترین زمان ممکن به آن ها نمایش داده شود.

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

این مشکلات مخصوصاً در وب سایت های فارسی بسیار دیده می شود. مدیران وب سایت ها به دلیل کم اطلاعی تمایل دارند هر چه که در نسخه بزرگ (Desktop) وب سایت نمایش داده می شود را نیز در نسخه موبایل آن بگنجانند و نمی دانند این موضوع درصد بالایی از کاربرانی که با موبایل وارد وب سایت شده اند را فراری می دهد.

به دلیل وجود چنین مسائلی، گوگل با هدف افزایش رضایت کاربران تصمیم گرفت تکنیکی را به برنامه نویسان و طراحان معرفی کند که هنگام نمایش وب سایت در موبایل فقط متن ها و تصاویر را در ساده ترین شکل ممکن و سریع ترین زمان ممکن به آن ها نمایش دهد و نام این تکنیک را AMP گذاشت که مخفف واژه Accelerated Mobile Pages نیز می باشد.

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

ساختار یک صفحه AMP چیزی نیست به جز HTML، CSS و JavaScript

amp چیست و چه کاربردی دارد

AMP چگونه کار می کند؟

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

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

البته مستندانی جهت پیاده سازی این تکنیک در زبان های برنامه نویسی مختلف ارائه شده است که می بایست آن ها مطالعه کنید.

بنابراین اگر تصمیم دارید در طراحی سایت خود از تکنیک amp بهره‌مند شوید بهتر است به صفحه رسمی amp در سایت github مراجعه

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

فرق بین طراحی سایت واکنش گرا (Responsive) و amp

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

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

نقش AMP در سئو چیست؟

براساس گفته های Richard Gingras که مدیریت اخبار و محصولات در گوگل را بر عهده دارد سایت هایی که از فریم ورک AMP در آن‌ها استفاده شده دارای رتبه بالاتری هستند.

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

یکی از دلایلی که AMP باعث افزایش رتبه ی یک وب سایت می شود این است که تعداد کلیک ها و بازدیدهای صفحات مختلف سایت را به دلیل بالا بودن سرعت بازشدن آن ها افزایش می دهد زیرا این افزایش سرعت، فعالیتی کاربر پسند است و مطمئناً کاربر بعد از یک‌بار بازدید از سایت به دلیل سرعت بالا مرتباً از دیگر صفحات نیز بازدید می کند که در این بین محتویات سایت هم تأثیر مستقیمی بر دیدگاه کاربر دارد و بنابراین محتویات وب سایت نیز هر روز باید بروزرسانی شوند.

برنامه نویس و طراح

به عنوان یک طراح و برنامه نویس وب بعد از اینکه تصمیم گرفتید وب سایت خود را براساس استانداردهای AMP طراحی کنید می توانید با استفاده از Developer Tools گوگل کروم مطمئن شوید که صفحات سایتتان را براساس AMP استاندارد سازی کرده اید. این قابلیت باعث می شود زمانی که کاربر با تلفن همراه خود از سایت شما بازدید می کند به جای اینکه 22 ثانیه و شاید بیشتر منتظر بماند 7 ثانیه منتظر می ماند تا سایت شما بارگذاری شود.

آیا AMP را می توان برای تمام وب سایت ها به کار برد؟

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

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

جهت اطلاع از جدید ترین مطالب سایت پیشنهاد می کنیم عضو خبرنامه شوید