گوگل از فناوری AMP برای کاهش زمان بارگذاری نتایج جستجو در گوگل با استفاده از موبایل ها استفاده می کند و با ساخت سایت AMP می توانید سرعت بارگذاری سایتتان را روی گوشی کاربر افزایش دهید.
AMP فریم ورکی برای ساخت سایت های موبایلی سریع تر است و درحال حاضر، ۴۳ درصد از نتایج جستجو را شامل می شود. تغییردادن سایتتان به AMP می تواند آن را ازنظر ترافیکی بسیار تقویت کند. AMP چگونه کار می کند؟
AMP چیست؟
اگر تابه حال با استفاده از گوشی تان مقاله ای خبری را از میان نتایج جستجو در گوگل باز کرده باشید، احتمالا قبلا با AMP رو به رو شده اید. آن سایت از قبل در «حافظه ی نهان» (Catch) گوگل ذخیره شده است: بنابراین، URL آن مقاله با www.google.com/amp شروع می شود: ولی هِدِر آن نام واقعی سایت و لینکی به صفحه ی غیر AMP آن سایت را دربر می گیرد.
همچنین، ممکن است متوجه شده باشید که صفحه خیلی سریع یا تقریبا بلافاصله بارگذاری می شود. این فناوری پرچم دار وب سایت های موبایلی AMP نام دارد. AMP درواقع فریم ورک کامپوننت وب (web component framework) مشابه React و Angular و Vue است، با این تفاوت که تمرکز آن فریم ورک ها روی اپلیکیشن های بسیار سفارشی سازی شده ی وب است؛ ولی AMP را به گونه ای طراحی کرده اند تا فریم ورکی سبک برای صفحات موبایلی باشد.
بسیاری از موارد غیرضروری از صفحه ی وب حذف می شوند تا آن صفحه در فریم ورک AMP قرار بگیرد و این کار محدودیت های خودش را دارد. AMP متن باز است و می توانید بدون مداخله ی گوگل از آن استفاده کنید؛ ولی یکپارچگی AMP با کروم و جستجوی گوگل آن را از هر فریم ورک دیگری سریع تر می کند.
AMP به قدری رایج است که احتمالا فایل اسکریپت استفاده شده برای بارگذاری آن از قبل در حافظه ی نهان ذخیره خواهد شد. حتی پیش از بازکردن یکی از نتایج گوگل، بعضی از محتویات AMP نمایش داده می شود و درنتیجه، صفحات تقریبا به سرعت بارگذاری می شوند.
یکپارچگی هایی نیز با جستجوی گوگل وجود دارد که به جای اینکه صفحه ی شما را در فهرست نتایج نشان دهد، آن را در جعبه ای خاص به تصویر می کشد و هر صفحه ای که AMP آن فعال باشد، با بولت صاعقه درکنار آن نمایش داده خواهد شد.
مواردی مثل مقاله های خبری نیز می توانند به شکل نوارگردان نمایش داده شوند و علامت صاعقه را می توان در گوشه ی هر جعبه مشاهده کرد. این نوارگردان با داده های ساختارمند تغذیه می شود که برای قرارگرفتن صفحات AMP در فهرست نتایج گوگل ضروری هستند.
AMP چگونه کار می کند؟
در AMP از عناصر HTML بهینه سازی شده به صورت اختصاصی برای خودِ AMP استفاده می شود و شما مجبور هستید از آن ها استفاده کنید. برای مثال، عکس های معمولی دو مشکل ایجاد می کنند:
بارگذاری عکس سبب تغییر چینش عناصر صفحه می شود و نیازمند محاسبه ی مجدد سنگین است و AMP باید عکس ها را به کندی بارگذاری کند. بنابراین، باید به جای استفاده از تگ معمولی <img /> از تگ <amp-img /> استفاده کنید:
<amp-img src=”welcome.jpg” alt=”Welcome” height=”400″ width=”800″></amp-img>
تعداد زیادی کامپوننت های دیگر برای بسیاری از محتواهای دیگر مثل ویدئو و تبلیغات و محتوای داینامیک وجود دارند که به کدهای HTML مخصوص AMP نیاز دارند. با این حال، مرورگرها نمی دانند چگونه این کامپوننت ها را پردازش کنند و برای این کار باید این کد را بارگذاری کنید:
<script async src=”https://cdn.ampproject.org/v0.js”></script>
گفتنی است برای استفاده از بعضی کدهای HTML مانند انجام تنظیمات ویووپورت رسپانسیو (Responsive Viewport) و لینک دهی به نسخه ی HTML معمولی صفحه در AMP به تغییر آن ها نیازی نیست. شما باید همه ی این نکات را رعایت کنید تا صفحه ی AMP شما با استانداردهای گوگل مطابقت داشته باشد.
گوگل سایت AMP شما را در حافظه ی نهانش ذخیره و آن را از پیش بارگذاری می کند تا زمان بارگذاری را کاهش دهد. این اقدام بسیار عالی است؛ ولی در نوار URL، به جای نام وب سایت شما که درواقع هاست اصلی پیج است، google.com به عنوان هاست نمایش داده می شود.
به صورت پیش فرض، سایت شما به صورت AMP به مخاطب نمایش داده می شود؛ ولی می توانید از تبادل نشان دار (Signed Exchange) استفاده کنید که روشی برای دورزدن این مسئله و داشتن چند URL اضافی است. شما می توانید با استفاده از تبادل نشان دار، محتوایتان را با تأیید مجوز TLS نشان دار کنید که از ادمین شما می آید. زمانی که مجوز TSL را تأیید کردید، مرورگر می تواند URL سایت شما را حتی با وجود ذخیره شده در حافظه ی نهان گوگل و پشتیبانی شدن از CDN گوگل نمایش دهد.
محدودیت های AMP
فناوری AMP قطعا باعث افزایش سرعت بارگذاری سایت شما روی گوشی می شود؛ ولی محدودیت های زیادی نیز دارد. برای مثال، AMP استفاده از جاوااسکریپت را شدیدا محدود می کند. تمامی جاوااسکریپت به طور هم زمان اجرا می شود و شما می توانید از هر نوع جاوااسکریپت سفارشی خارج از <amp-script> استفاده کنید؛ هرچند عملکردش هنوز در حد آزمایشی است.
شما باید از دیگر کامپوننت هایی بهره ببرید که سایت را اینتراکتیو می کنند. هرچند AMP می تواند کارهای زیادی انجام دهد، amp-list محتوا را از نقطه ی پایانی JSON فچ و آن را به شکل یک قالب رندر می کند. انجام این کار با vanilla JS از اهمیت زیادی برخوردار است.
تمام کاری که AMP می کند، اجتناب از محاسبات مجدد و افزایش تمرکز روی بهینه سازی رندرینگ است؛ بنابراین، چندین محدودیت دارد. تمامی منابع باید اندازه ی ثابتی داشته باشند؛ یعنی تغییر اندازه با CSS نداشته باشیم و تمامی CSS باید درون برنامه ای (inline) باشد. این بدان معنا است که به جای بودن در فایلی خارجی، باید در هِدِر و حداکثر حجمش ۵۰ کیلوبایت باشد. به علاوه، نمی توان از اصلاح کننده ی اصلی در CSS استفاده کرد؛ زیرا استایلینگ ضروری AMP را اووررایت (Overwrite) می کند.
چنین محدودیت هایی باعث می شود AMP بیشتر برای موبایل مناسب باشد تا دستگاه های دیگر؛ زیرا امکان ایجاد نرم افزار پیچیده ی تحت وب با آن امکان پذیر نیست. با این حال، برای نمایش محتواهایی که در اصل برای بارگذاری آن ها طراحی شده است، بسیار رضایت بخش کار می کند؛ مانند اخبار، مقاله ها و هرچیز دیگری که بتوان با وردپرس اجرا کرد.
چگونه باید وبسایتتان را AMP کنید؟
اگر نخواهید تمام سایتتان را با سایت AMP جایگزین کنید، باید سایت خود را به شکل AMP بازسازی کنید و سایت قبلی را هم دست نخورده نگه دارید. برای AMP کردن سایت خود باید به صفحات غیر AMP با لینک مرکزی (Canonical) لینک دهید تا گوگل بتواند سایت شما را ببیند.
AMP قالب های متعددی برای شما فراهم می آورد تا فرایند AMP کردن سایت خود را آغاز کنید. ازآنجاکه AMP تنها برای موبایل طراحی شده است؛ ولی محدود به آن نیست، طراحی شما در کل بسیار ساده تر خواهد بود. شما می توانید کامپوننت های موجود در کاتالوگ کامپوننت این قالب ها را مرور و کامپوننتی را انتخاب کنید که فکر می کنید AMP از آن پشتیبانی می کند و می توانید سایت خود را به آن منتقل کنید.
اگر از وردپرس استفاده می کنید، می توانید با استفاده از افزونه (Plug-in)، از AMP استفاده کنید. دو افزونه ی وردپرسی محبوب موجود هستند: افزونه ی رسمی و افزونه ی Third-party. گفتنی است افزونه ی دومی قابلیت های بیشتری از افزونه ی اولی دارد. این پلاگین ها نسخه هایی باریک شده از هر مقاله ای فراهم می آورند که برای نمایش داده شدن به وسیله ی گوگل آماده هستند.
مورد دیگری که باید انجام دهید، فراهم آوردن داده های ساختارمند برای صفحه ی AMP است. این کار نیازمند داشتن چند JSON در هِدِر صفحه ی شما است که اطلاعاتی از آن صفحه به گوگل می دهند. شما می توانید از ابزار آزمون داده های ساختارمند آن ها استفاده کنید تا از صحت این نوع داده هایتان مطمئن شوید. به علاوه، این ابزارها پیش نمایش مناسبی از تفسیر محتوای شما به دست گوگل فراهم می آورند. پیشنهاد می کنیم از انطباق نوع مقاله، سرتیتر، توضیح و عکس ها و قرارگیری آن ها در جای صحیح خود مطمئن شوید.
شما باید از ابزار اعتبارسنجی AMP گوگل برای بررسی سینتکس (syntax) خود استفاده کنید. این ابزار به شما می گوید که آیا صفحه ی AMP شما صحیح است یا خیر و پیش نمایشی از سایت شما در نتایج جستجو نشان می دهد که بسته به نوع نتایج به صورت زیر است:
وقتی سایت AMP شما آماده ی کار است، با استفاده از کد rel=”amphtml” به نسخه ی AMP هر صفحه در هِد سایت معمولی خود لینک دهید:
<link rel=”amphtml” href=”https://www.example.com/url/to/amp/document.html”>
به علاوه باید لینکی از سایت معمولی در سایت AMP خود قرار دهید:
<link rel=”canonical” href=”https://www.example.com/url/to/full/document.html”>
سپس صفحات AMP در نتایج جستجوی گوگل دست یافتنی و نمایش دادنی خواهند بود؛ با این حال، ممکن است اندکی طول بکشد تا گوگل آن را در حافظه ی نهان خود ذخیره کند. فرستادن نقشه ای به روز از سایتتان برای سرویس Search Console گوگل ایده ی هوشمندانه ای است و به گوگل این امکان را می دهد که مستقیما از فعال شدن سایت AMP شما باخبر شود و نسخه های AMP شده از صفحات شما تهیه کند.
منبع: زومیت.