AMP چیست ؟ و نحوه AMP کردن وردپرس با افزونه

Posted by

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

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

ما در این مقاله‌ قصد داریم بگوییم amp چیست؟ و درباره‌ی راه اندازی amp در وردپرس صحبت کنیم. با ما همراه شوید.

AMP چیست؟

درسال 2015 شرکت گوگل از پروژه بسیار هوشمند به‌نام Accelerated Mobile Pages یا به اختصار AMP رو نمایی کرد که هدف ‌اصلی اِی اِم پی بهینه‌سازی و افزایش سرعت سایت‌ها در تلفن همراه است . اِی اِم پی این اجازه را به کاربر می‌دهد تا تجربه سریع‌تری در وب‌گردی داشته باشند . در ابتدا اِی اِم پی برای بهینه سازی فیس‌بوک استفاده شده‌ بود ولی بعد از گذشت سال‌ها تبدیل به یک پلتفرم پرقدرت شده است نکته جالب این است که اِی اِم پی open source است و خیلی از خبرگزاری‌های بزرگ از آن استفاده می‌کنند. سایت‌هایی که در گوگل amp شده باشند لوگوی زیر را کنار خود دارند .

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

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

هدف اصلی AMP

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

مزایای AMP برای سایت‌های وردپرسی

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

2. افزایش رتبه سئو: گوگل و سایر موتورهای جستجو، سرعت بارگذاری را به عنوان یکی از فاکتورهای رتبه‌بندی در نظر می‌گیرند. بنابراین، پیاده‌سازی AMP می‌تواند به بهبود رتبه سایت در نتایج جستجو کمک کند.

3. کاهش نرخ پرش: با بهبود سرعت بارگذاری، کاربران کمتر سایت را ترک می‌کنند و نرخ پرش کاهش می‌یابد.

4. سازگاری با موبایل: با توجه به افزایش استفاده از دستگاه‌های موبایل، AMP اطمینان می‌دهد که سایت شما برای کاربران موبایل بهینه است.

چالش‌های پیاده‌سازی AMP

با وجود مزایای فراوان، پیاده‌سازی AMP بدون چالش نیست. برخی از چالش‌های رایج عبارتند از:

1. محدودیت‌های طراحی: صفحات AMP دارای محدودیت‌هایی در استفاده از CSS و JavaScript هستند، که ممکن است سفارشی‌سازی طراحی را محدود کند.

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

3. نیاز به نگهداری: صفحات AMP نیاز به مانیتورینگ و به‌روزرسانی منظم دارند تا اطمینان حاصل شود که به درستی کار می‌کنند.

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

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

چه سایت هایی نباید از AMP استفاده کنند؟

در واقع AMP برای سایت های خبری و وبلاگی و عموماً سایت هایی که محتوا محور هستند استفاده می‌شود و برای سایت‌های فروشگاهی استفاده از amp پیشنهاد نمی‌شود. ( البته به نظر من گاهاً شرکت‌ها یا فروشگاه‌های بزرگ از این تکنولوژی استفاده می‌کنند.)

نحوه عملکرد AMP در وردپرس

1. محدودیت در کدها:
AMP از یک نسخه بهینه‌سازی‌شده از HTML، CSS و JavaScript استفاده می‌کند. این چارچوب، اجرای کدهای سنگین و غیرضروری را محدود می‌کند. به عنوان مثال، از اجرای جاوااسکریپت بلاک‌کننده (Blocking JavaScript) جلوگیری می‌کند و از Lazy Loading برای تصاویر استفاده می‌نماید. این محدودیت‌ها باعث می‌شود صفحات سبک‌تر و سریع‌تر بارگذاری شوند.

2. استفاده از کش:
یکی از ویژگی‌های کلیدی AMP، استفاده از شبکه توزیع محتوا (CDN) گوگل است. هنگامی که یک صفحه AMP ایجاد می‌شود، نسخه بهینه‌سازی‌شده آن در CDN گوگل ذخیره می‌شود. هنگام درخواست کاربر، صفحه از کش بارگذاری می‌شود، که باعث کاهش زمان لود و بهبود سرعت می‌گردد.

3. استفاده از تگ‌های محدود:
AMP از یک مجموعه محدود از تگ‌های HTML و CSS استفاده می‌کند که برای نمایش محتوا و طراحی صفحه بهینه‌سازی شده‌اند. این تگ‌ها از اجرای کدهای غیرضروری جلوگیری کرده و اطمینان می‌دهند که صفحه به طور کارآمد بارگذاری شود.

4. لینک‌دهی به صفحات AMP:
وب‌سایت‌ها با استفاده از تگ <link rel="amphtml"> در هدر صفحات خود، به نسخه‌های AMP صفحاتشان لینک می‌دهند. این تگ به موتورهای جستجو مانند گوگل کمک می‌کند تا نسخه‌های AMP را شناسایی و به کاربران موبایل نمایش دهند.

5. اولویت‌بندی محتوا:
AMP محتوای اصلی صفحه را اولویت‌بندی می‌کند تا کاربران سریع‌تر به اطلاعات مهم دسترسی پیدا کنند. این امر با استفاده از تگ‌های خاص AMP مانند <amp-img> برای تصاویر و <amp-video> برای ویدیوها انجام می‌شود.

نحوه AMP کردن وردپرس با افزونه

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

گام 1: انتخاب و نصب افزونه

1. ورود به پیشخوان وردپرس: ابتدا به پیشخوان وردپرس خود وارد شوید.

2. نصب افزونه: از منوی کناری، به بخش افزونه‌ها > افزودن افزونه بروید.

3. جستجوی افزونه: در قسمت جستجو، عبارت “AMP for WP” یا افزونه مورد نظر خود را وارد کنید.

4. نصب و فعال‌سازی: پس از یافتن افزونه، روی دکمه نصب اکنون کلیک کنید و سپس آن را فعال کنید.

گام 2: تنظیمات اولیه افزونه

1. ورود به تنظیمات افزونه: پس از فعال‌سازی، از منوی کناری به بخش AMP بروید.

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

3. سفارشی‌سازی قالب: افزونه‌هایی مانند AMP for WP امکان سفارشی‌سازی قالب AMP را فراهم می‌کنند. می‌توانید رنگ‌ها، فونت‌ها و سایر عناصر طراحی را مطابق با برند خود تنظیم کنید.

گام 3: تست و بهینه‌سازی

1. مشاهده صفحات AMP: برای مشاهده صفحه AMP، به یکی از پست‌ها یا صفحات سایت خود بروید و در انتهای آدرس URL، /amp را اضافه کنید. به عنوان مثال:
https://www.yoursite.com/your-post/amp.2. ابزار تست گوگل: از ابزار AMP Test Tool گوگل استفاده کنید تا اطمینان حاصل کنید که صفحات AMP شما معتبر هستند و هیچ خطایی ندارند.

3. بهینه‌سازی عملکرد: در صورت نیاز، تصاویر را بهینه کنید، از Lazy Loading استفاده کنید و کدهای اضافی را حذف نمایید.

گام 4: یکپارچه‌سازی با سایر افزونه‌ها

افزونه‌های AMP مانند AMP for WP با بسیاری از افزونه‌های محبوب وردپرس سازگار هستند. به عنوان مثال:

Google Analytics: برای ردیابی آمار بازدیدکنندگان.
AdSense: برای نمایش تبلیغات.
Contact Form 7: برای فرم‌های تماس.

گام 5: نگهداری و به‌روزرسانی

1. به‌روزرسانی افزونه: همیشه افزونه AMP را به آخرین نسخه به‌روز کنید.

2. پشتيبانی منظم: به طور منظم از سایت خود پشتیبان‌گیری کنید.

3. مانیتورینگ عملکرد: به طور مداوم عملکرد صفحات AMP را بررسی کنید.

گام 6: به‌روزرسانی و نگهداری

پس از پیاده‌سازی AMP، مهم است که افزونه و تنظیمات آن را به‌روز نگه دارید. به‌روزرسانی‌های منظم افزونه نه تنها ویژگی‌های جدید را اضافه می‌کنند، بلکه مشکلات امنیتی و باگ‌ها را نیز برطرف می‌نمایند.

1. به‌روزرسانی افزونه: همیشه افزونه AMP را به آخرین نسخه به‌روز کنید.

2. پشتيبانی منظم: به طور منظم از سایت خود پشتیبان‌گیری کنید تا در صورت بروز مشکل، بتوانید به نسخه قبلی بازگردید.

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

بهترین افزونه های AMP در وردپرس

برای استفاده از AMP در وردپرس افزونه‌های زیادی وجود دارد که ما در این مقاله قصد داریم 3 تا از بهترین آن ها را به شما معرفی کنیم و با نحوه‌ی کار آن‌ها آشنا شوید :

افزونه AMP
افزونه AMP for WP
افزونه weeblrAMP

با ما همراه شوید تا با نحوه‌ی استفاده AMP در وردپرس آشنا شوید :

1- افزونه AMP

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

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

در ابتدا باید در قسمت “افزودن افزونه‌” کلمه “AMP” را جست و جو کنید و افزونه مشخص شده را نصب و فعال نمایید.

پس از نصب این افزونه در منوی پیشخوان گزینه “AMP” اضافه خواهد شد که شما بعد از ورود به این قسمت باید روی گزینه “Open Wizard” را کلیک کنید.

در مرحله بعد وارد صفحه خوش‌آمدگویی می‌شوید . بر روی گزینه “بعدی” کلیک نمایید .

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

در مرحله بعد گزینه “استاندارد” را انتخاب نمایید و بعدی را بزنید.

صفحه‌ی بعدی برای مرور گزینه هایی است که انتخاب کردیم در آن صفحه هم گزینه “بعدی” را انتخاب کنید

اکنون سایت شما آماده شده است و بر روی گزینه “پایان” کلیک نمایید .

سایت شما AMP شده است.

مزایا و معایب :

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

2- افزونه AMP for WP

این افزونه نیمه رایگان بوده و تفاوت آن با افزونه رسمی وردپرس این است که کارایی بیشتری در اختیار کاربران قرار می‌دهد

با این افزونه شما قادر هستید که :

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

برای شروع باید در قسمت افزودن افزونه‌ کلمه “AMP for WP” را جست و جو کنید و افزونه مشخص شده را نصب و فعال نمایید.

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

همانطور که مشاهده می‌کنید در این جا قسمت پیکربندی تنظیمات , طراحی , و اکستنشن‌ها قرار دارند . در این قسمت میتوانید تغیراتی که نیاز دارید انجام دهید.

مزیت و معایب:

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

3- افزونه weeblrAMP

یکی دیگر از افزونه‌های amp که در این زمینه ایجاد شده‌است و همانند افزونه‌ی قبلی که معرفی کردیم نیز هم رایگان و هم نسخه پولی آن ارائه شده است افزونه‌ی weeblr AMP است . در نسخه رایگان ویژگی هایی مانند:

پشتیبانی از تمام بخش‌ها و صفحات وردپرس که شامل پست ها , دسته بندی ها و ……
تجزیه و تحلیل
قابلیت اضافه کردن تبلیغات
سازگاری با Yoast SEO, Jetpack, Beaver Builder و Elementor

برای شروع باید در قسمت افزودن افزونه‌ کلمه “weeblrAMP” را جست و جو کنید و افزونه مشخص شده را نصب و فعال نمایید.

پس از نصب و فعال سازی گزینه‌ی جدیدی در منوی پیشخوان به نام ” weeblr AMP” اضافه می‌شود که از طریق آن میتوانید تنظیمات خود را اعمال نمایید.

به طور کلی این افزونه پس از انتخاب دکمه “ذخیره تغییرات” تنظیمات پیش‌فرض را برای amp کردن سایت برقرار میکند ولی شما می‌توانید با آزمون و خطا می‌توانید amp خود را شخصی سازی کنید. به‌زودی آموزش کامل این افزونه در سایت قرار داده می‌شود.

مزایا و معایب:

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

نحوه‌ی تست صفحات AMP

برای تست صفحات amp شرکت گوگل یک سایت را معرفی کرده‌است که به کمک آن می‌توان دانست که سایتی amp شده است یا خیر ؟ تنها کافی است سایت (تست صفحات amp) را باز کرده و در کادر مشخص شده لینک سایت مورد نظر را وارد کنید و گزینه”TEST URL” را انتخاب نمایید.

تگ‌های قابل استفاده در AMP

اگر بخواهید به صورت دستی کدهای AMP را بنویسید می‌توانید از لیست تگ‌های زیر استفاده کنید:

4.1 The root element

4.1.1 <html>

4.2 Document metadata

4.2.1 <head>
4.2.2 <title>
4.2.4 <link>
4.2.5 <meta>
4.2.6 <style>

4.3 Sections

4.3.1 <body>
4.3.2 <article>
4.3.3 <section>
4.3.4 <nav>
4.3.5 <aside>
4.3.6 <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
4.3.7 <header>
4.3.8 <footer>
4.3.9 <address>

4.4 Grouping Content

4.4.1 <p>
4.4.2 <hr>
4.4.3 <pre>
4.4.4 <blockquote>
4.4.5 <ol>
4.4.6 <ul>
4.4.7 <li>
4.4.8 <dl>
4.4.9 <dt>
4.4.10 <dd>
4.4.11 <figure>
4.4.12 <figcaption>
4.4.13 <div>
4.4.14 <main>

4.5 Text-level semantics

4.5.1 <a>
4.5.2 <em>
4.5.3 <strong>
4.5.4 <small>
4.5.5 <s>
4.5.6 <cite>
4.5.7 <q>
4.5.8 <dfn>
4.5.9 <abbr>
4.5.10 <data>
4.5.11 <time>
4.5.12 <code>
4.5.13 <var>
4.5.14 <samp>
4.5.15 <kbd >
4.5.16 <sub> and <sup>
4.5.17 <i>
4.5.18 <b>
4.5.19 <u>
4.5.20 <mark>
4.5.21 <ruby>
4.5.22 <rb>
4.5.23 <rt>
4.5.24 <rtc>
4.5.25 <rp>
4.5.26 <bdi>
4.5.27 <bdo>
4.5.28 <span>
4.5.29 <br>
4.5.30 <wbr>

4.6 Edits

4.6.1 <ins>
4.6.2 <del>

4.7 Embedded Content

AMP HTML allows only limited embedded content except via its own tags (ex: amp-img).

4.7.8

4.7.8 <source>

4.7.15 SVG

SVG tags are not in the HTML5 namespace. They are listed below without section ids.

<svg>
<g>
<path>
<glyph>
<glyphref>
<marker>
<view>
<circle>
<line>
<polygon>
<polyline>
<rect>
<text>
<textpath>
<tref>
<tspan>
<clippath>
<filter>
<lineargradient>
<radialgradient>
<mask>
<pattern>
<vkern>
<hkern>
<defs>
<use>
<symbol>
<desc>
<title>

4.8 Links

4.9 Tabular data

4.9.1 <table>
4.9.2 <caption>
4.9.3 <colgroup>
4.9.4 <col>
4.9.5 <tbody>
4.9.6 <thead>
4.9.7 <tfoot>
4.9.8 <tr>
4.9.9 <td>
4.9.10 <th>

4.10 Forms

4.10.8 <button>

4.11 Scripting

4.11.1 <script>
4.11.2 <noscript>

4.11.3 Non-confirming features

These may be removed in future versions of AMP

<acronym>
<center>
<dir>
<hgroup>
<listing>
<multicol>
<nextid>
<nobr>
<spacer>
<strike>
<tt>
<xmp>

حرف اخر

سرعت هر سایت از ویژگی‌های مهم آن محسوب می‌شود و برای افزایش سرعت وردپرس میتوان با استفاده از تکنولوژی amp سرعت سایت خود را برای تلفن همراه تا حدود زیادی افزایش داد برای مثال اگر سایت خبری دارید باید برای شما مهم باشد که سرعت سایت شما بالا باشد که با استفاده از amp این امر امکان پذیر می‌شود. ما سعی کردیم در این مقاله سه تا از بهترین افزونه ها را برای AMP کردن سایت های وردپرسی معرفی کنیم.

لطفاٌ تجربه استفاده از این افزونه ها را برای ما بنویسید و یا اگر از روش دیگری استفاده میکنید با ما در میان بگذارید . اگر هم به مشکلی برخوردید میتوانید از تیم پشتیبانی سایت وب جامه کمک بگیرید.

Blog