AMP افزونه شتاب دهنده نسخه موبایل وردپرس برای افزایش سرعت

اگر می خواهید از تکنولوژی AMP برای سرعت بخشیدن به نسخه موبایل وب سایت خود استفاده کنید، افزونه AMP از بهترین افزونه های AMP وردپرس برای انجام این کار است.

Google Accelerated Mobile Pages (AMP) یک کتابخانه متن باز است که به شما کمک می کند تا یک نسخه سریع تر، سبک وزن تر و با اسکرول روان تر از صفحات وب خود برای کاربرانی که از طریق دستگاه تلفن همراه از سایت شما بازدید می کنند، ایجاد کنید. AMP بسیار کاربرپسند است و کاملاً با وردپرس سازگار می باشد.

به طور خلاصه، Google AMP Project  به شما امکان می دهد یک نسخه سبک وزن تر از سایت خود را با استفاده از AMP HTML ایجاد کنید. این فرآیند بیشتر المان هایی که باعث می شود سایت وردپرس شما کندتر شود (جاوا اسکریپت ، اسکریپت های شخص ثالث و غیره) را از بین می برد.

Google AMP مزایای زیادی دارد، اگرچه دارای اشکالات احتمالی نیز هست.

جوانب مثبت شامل موارد زیر است:

• بهبود سئو: بدیهی ترین فایده Google AMP افزایش سرعت وردپرس است. از آنجا که سرعت یکی از فاکتورهای مهم سئو است، نتایج بهتری در SERP به دست خواهید آورد.
• تجربه کاربری بهتر: تخمین زده می شود که اگر وب سایت برای دستگاه های تلفن همراه بهینه سازی نشده باشد، 33 درصد از کل فروشها شکست می خورد. Google AMP ایجاد صفحات وب تلفن همراه کاربر پسند را آسان می کند تا از این مشکلات جلوگیری کند.
• افزایش عملکرد سرور: Google AMP از برخی از ویژگیهای بهینه سازی کلیدی گوگل بهره می برد و میزان استفاده از پهنای باند برای تصاویر را تا 50٪ (بدون تأثیر در کیفیت تصویر) کاهش می دهد و رندر سمت سرور را افزایش می دهد. AMP با کاهش بار روی سرور، به بهبود عملکرد سایت شما کمک می کند.

از طرف دیگر، برخی معایب استفاده از Google AMP عبارت است از:

• محدودیت CSS و JS: اگرچه Google AMP شما را قادر می سازد تا زمان بارگذاری صفحات را کاهش دهید اما این می تواند به ضرر المان های برندینگ شما باشد. AMP گرافیک های با کیفیت بالا ، انیمیشن ها و سایر عناصری که از CSS و JavaScript استفاده می کنند را حذف می کند.
• فقط صفحات کش شده نمایش داده می شوند: سرعت بالای Google AMP را می توان تا حدی به این واقعیت نسبت داد که گوگل را قادر می سازد نسخه های کش شده صفحات وب شما را نمایش دهد. به همین دلیل ممکن است کاربران شما همیشه به آخرین نسخه محتوای شما دسترسی نداشته باشند.
• قابلیت های درآمد از آگهی ها محدود شده است: اگرچه Google AMP تبلیغات را پشتیبانی می کند، روند اجرای آنها نسبتاً پیچیده است. همچنین دارای پتانسیل محدود برای ادغام با پلتفرم های تبلیغاتی خارجی است.

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

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

آموزش افزونه AMP و نحوه افزایش سرعت نسخه موبایل وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه در پیشخوان وردپرس زیرمنوی جدیدی به نام “AMP” اضافه می شود.

با کلیک بر روی این زیرمنو وارد صفحه تنظیمات افزونه مشابه شکل زیر می شوید.

در این صفحه سه مد Template وجود دارد که نوع تجربه AMP که یک سایت می تواند ارائه کند را تعیین می کند و عبارتند از:

• حالت استاندارد: در این حالت، افزونه AMP سایت ها را قادر می سازد که AMP را به عنوان تنها نسخه محتوای خود در اختیار داشته باشند. در این حالت هیچ URL اختصاصی AMP در سایت وجود ندارد و کل سایت به صورت AMP ارائه می شود. به همین ترتیب کوئری amp? در انتهای URL ها وجود نخواهد داشت.
• گذار: در این حالت، قالب ها می توانند پشتیبانی از AMP را داشته باشند. به عبارت دیگر سایتها را قادر می سازد تا از Template ها و استایل های قالب خود در هر دو محتوای AMP و غیر AMP استفاده کنند. صاحبان سایت می توانند از AMP و غیر AMP به طور یکسان استفاده کنند و کاربران نهایی متوجه چیزی نشوند. در این حالت از کوئری amp? منحصراً برای نسخه AMP URL ها استفاده می شود.
• خواننده: این حالت همان حالت کلاسیک نسخه های قدیمی افزونه AMP است. رفتار نسخه های قبلی افزونه AMP در حالت کلاسیک این بود که پاسخ های AMP را در template های پایه (با نوار آبی رنگ در بالای صفحه) ارائه می کردند که از template های موجود در قالب فعال شما مجزا بود. یعنی صفحات در طرح بندی قالب و محتوای ساده تر تحویل داده می شود. در این حالت، URL های نوشته های AMP به /amp/ و برگه ها به amp? ختم می شود. و در هر دو حالت نامک “amp” می تواند به چیز دیگری تغییر کند.

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

اگر گزینه خواننده را انتخاب کنید، در قسمت قالب های پشتیبانی شده می توانید انواع محتوا شامل نوشته ها، برگه ها، رسانه و محصولات (اگر دارای یک فروشگاه WooCommerce هستید) را انتخاب کنید تا به صورت AMP ارائه شوند. پس از آن، در پیشخوان وردپرس به مسیر نمایش » AMP بروید تا مشاهده کنید که سایت شما با استفاده از AMP در دستگاه های تلفن همراه به چه شکل خواهد بود.

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

اگر قالب شما از این موضوع پشتیبانی کند، افزونه AMP از آیکون یا لوگو سایت شما نیز می تواند استفاده می کند.

پس از آنکه تغییرات مورد نظر خود را اعمال کردید، روی دکمه ذخیره تغییرات کلیک کنید.

در هر دو حالت گذار و خواننده اگر به فرانت اند سایت مراجعه کرده و یک نوشته را باز کنید و /amp/ را به انتهای URL اضافه کنید مانند زیر:

نسخه AMP سبک شده آن صفحه به شما نشان داده می شود.

ادغام افزونه AMP و Yoast SEO

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

اگر از افزونه Yoast SEO استفاده می کنید، می توانید این افزونه را با AMP ادغام کنید. برای این کار باید افزونه Glue for Yoast SEO & AMP را نصب و فعال سازی کنید.

این افزونه یک add-on برای افزونه های Yoast SEO و AMP است. پس از فعال سازی، برای پیکربندی تنظیمات افزونه، باید در پیشخوان وردپرس به مسیر سئو »AMP مراجعه کنید.

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

در تب Design ، می توانید رنگ ها و گزینه های طراحی را انتخاب کنید. همچنین می توانید یک آرم و یک تصویر هدر پیش فرض را بارگذاری کنید که در صورت داشتن یک تصویر دارای ویژگی خاص خود ، استفاده می شود.

می توانید به تب Analytics بروید تا آی دی گوگل آنالیتیکس خود را اضافه کنید.

فراموش نکنید که برای ذخیره تغییرات، بر روی دکمه ذخیره تنظیمات کلیک کنید.

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

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

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

URL های معتبر و شاخص خطا

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

بعضی المان ها به مؤلفه های AMP تبدیل می شوند. به عنوان مثال <img> به <amp-img> تبدیل شده و نودهای نامعتبر مانند <script> از بین می روند.

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

AMP کتابخانه بزرگی از مؤلفه ها را ارائه می دهد. اما تگ ها و ویژگی هایی نیز وجود دارند که اجازه آنها را نمی دهد. اگر یک توسعه دهنده هستید، باید نود های نامعتبر که باید از بین بروند را شناسایی کرده و سپس مؤلفه ها یا عملکرد مناسب را برای جایگزینی هر یک از آنها بیابید.

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

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

URL های معتبر AMP

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

در این صفحه می توانید URL را بررسی مجدد کرده یا با کلیک بر روی جزئیات به صورت عمیق تر وارد مسأله شده و بفهمید مشکل از کجاست.

شاخص خطا

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

برای دسترسی به این صفحه در پیشخوان وردپرس به مسیر AMP » شاخص خطا بروید.

این فهرست برای پیدا کردن انواع خاصی از خطاها بسیار مفید است.

به عنوان مثال می خواهید اندازه استایل شیت ها را کاهش دهید. با استفاده از این ابزار ، می توانید خطاهای CSS را اعتبارسنجی کنید تا ببینید آیا با وجود افزونه AMP هنوز هم بیش از 75KB هستند یا خیر. با استفاده از فیلتر بر اساس نوع خطا، می توانید “خطاهای CSS” را فیلتر کنید.

امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.

دانلود افزونه