توسعه وب AMP: چیست؟

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

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

با AMP در اکتبر سال 2015، گوگل ابتکار AMP یا Accelerated Mobile Pages را با منبع باز آغاز کرد که هدف آن این است که با حذف آن به اصول اولیه، رندر محتوای وب در دستگاه های تلفن همراه را سریعتر کند. تیم پیشرو این پروژه توسط Tech Lead Malte Ubl مدیریت می شود، که توضیح می دهد که چگونه AMP صفحات بارگذاری سریع را ممکن می کند:

1. بارگذاری تنبل

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

2. اندازه منابع استاتیک

AMP نیاز دارد که اندازه عناصر صفحه در نشانه گذاری تعریف شود و به آن اجازه می دهد تا محدوده منطقه ای را که اشغال می کند از قبل تعیین کند. به آنها یک فضای اختصاصی در صفحه با استفاده از یک کادر یا قاب درون خطی (به اختصار iframe) بدون بارگیری منابع واقعی اختصاص داده می شود.

3. جاوا اسکریپت غیر همگام

از طریق جاوا اسکریپت AMP، برنامه‌های افزودنی به صورت ناهمزمان (یعنی نه به طور همزمان) از طریق یک برچسب اسکریپت بارگذاری می‌شوند تا از مسدود کردن سایر عناصر ضروری در صفحه جلوگیری کنند. iframe آنها بلافاصله رزرو می شود و پس از بارگیری برنامه های افزودنی با محتوا پر می شود. به عنوان مثال، یک ویدیوی یوتیوب جاسازی شده بلافاصله در صفحه ای که مشاهده می کنید بارگیری نمی شود. در عوض، جاوا اسکریپت ناهمگام ابتدا تمام متن و عناصر بومی آن صفحه را اجرا می‌کند، فضایی با iframe به‌عنوان جای‌بانی برای ویدیوی YouTube رزرو می‌کند، سپس پس از اتمام بارگیری همه عناصر صفحه، ویدیو را بارگیری می‌کند.

4. کنترل بخش CSS

تمام CSS موجود در AMP باید درون خط باشد و نباید بزرگتر از 50 کیلوبایت باشد. تیم پروژه AMP از طریق آزمایش (یعنی ایجاد واقعی صفحات وب) به این اندازه رسید و به این نتیجه رسید که این اندازه برای ساخت یک صفحه پیچیده به اندازه کافی بزرگ است، اما به اندازه کافی بزرگ نیست که از همان شیوه نامه برای یک صفحه کامل استفاده کند. سایت اینترنتی. استفاده از همان شیوه نامه به فضای بیشتری نیاز دارد و بنابراین بارگذاری زمان بیشتری می برد.

5. هیچ درخواست HTTP تا زمانی که فونت ها شروع به دانلود نکنند

در نتیجه ویژگی‌های جاوا اسکریپت ناهمگام و CSS درون خطی، فونت‌ها مستقل از هر درخواست HTTP دانلود می‌شوند، بنابراین از هرگونه فلش محتوای بدون سبک (FOUC) جلوگیری می‌شود. FOUC ظاهر مختصری از محتوای یک مرورگر وب قبل از دریافت اطلاعات سبک از CSS خارجی است. به عبارت دیگر، AMP مانع از مشاهده زودهنگام محتوایی می‌شود که آنطور که در نظر گرفته شده به نظر نمی‌رسد.

6. اولویت بندی منابع

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

7. پیش بارگذاری

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

8. پیش واکشی

برخلاف بارگذاری اولیه، این تابع منابع را برای اقدام احتمالی بعدی که کاربر ممکن است انجام دهد واکشی می کند. این شامل واکشی منابع در پس‌زمینه یا در زمان بیکاری است که ممکن است بعداً مورد نیاز باشد و ذخیره آنها در حافظه پنهان مرورگر. هنگامی که یک صفحه اجرا شد، شروع به دانلود منابع اضافی می کند که در صورت درخواست کاربر به آسانی در دسترس قرار می گیرند (به عنوان مثال وقتی کاربر روی پیوندی به یک صفحه از پیش واکشی شده خارجی کلیک می کند، وب سایت می تواند آن صفحه را فورا بارگیری کند).

9. پیش اجرا

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

10. درک سرعت

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

بارگیری سریع رعد و برق

برخی از وب‌سایت‌ها از زمان راه‌اندازی آن در سال 2015، AMP را پذیرفته‌اند. اگر از طریق Google در دستگاه تلفن همراه خود جستجو کنید، متوجه چرخ و فلک از داستان‌های برتر و هر یک از آنها لوگوی رعد و برق ریز می‌شوید. این بدان معناست که این صفحات AMP بهینه شده اند. مزیت آشکار AMP سرعت است. این منجر به افزایش احتمال کلیک کاربران بر روی صفحه شما می شود و ترافیک و به طور بالقوه تبدیل بیشتری ایجاد می کند. زمان بارگذاری کمتر نیز به معنی نرخ پرش پایین تر است که احتمال بسته شدن فروش را افزایش می دهد.

نواقص پیاده سازی AMP

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

آیا AMP برای شما مناسب است؟

پروژه Accelerated Mobile Pages سعی در حل مشکل کند بارگذاری صفحات موبایل دارد. مجهز به ویژگی هایی است که به آنها اجازه می دهد محتوا با سرعت رعد و برق بارگذاری شود تا کاربران از مرور سریع تلفن همراه لذت ببرند. اما چارچوب AMP نیز دارای چالش هایی است، به ویژه برای تبلیغ کنندگان و توسعه دهندگان. در حالی که پیشرفت‌های فناوری می‌تواند بسیار هیجان‌انگیز باشد، ضروری است که یک گام به عقب بردارید و تجزیه و تحلیل کنید که چگونه این موارد بر وب‌سایت یا کسب‌وکار شما در درازمدت تأثیر می‌گذارند. AMP یک راه حل امیدوارکننده است، اما از خود بپرسید: آیا این راه حلی است که در حال حاضر به آن نیاز دارید؟