AMP

AMP is supported by Zephyr 7.11 and above.

AMP (Accelerated Mobile Pages) is a special format of website pages, which allows improving the loading speed and performance. Check the AMP FAQ for more information.

AMP usage recommendations #

Since the AMP format has specific limitations:

  • No JavaScript allowed
  • 75 KB maximum CSS size
  • changed HTML markup (like <amp-img> instead of <img>)

so its usage is very limited at the moment.

AMP page on Zephyr:

  • disables any animations, visual effects, complex interactions, hover states
  • hides some complex theme elements (like Grid Filter)
  • changes layout of some theme elements for "Mobiles first" displaying (like Menu)

That's why we recommend enabling AMP on simple pages with the minimum interactive elements, like blog articles.

How to enable AMP on your website for mobiles #

  1. Install the AMP plugin, this is the best way for WordPress sites.
  2. Go to AMP > Settings and select "Transitional" template mode. Also, enable the "Redirect mobile visitors to AMP" option.
    2601.png
  3. In the "Supported Templates" section select types, which have the relevant frontend pages (like Posts, Pages, Portfolio).
    2602.png
  4. Click the "Save Changes" button.
  5. Also, we recommend go to Theme Options > Advanced > Website Performance and click the "Auto Optimize" button. This helps to decrease the global CSS file size.
    2603.png

Now when you open your website page (of selected content types only) on a mobile device, you will see the AMP version of that page. It should load quickly.

How to test AMP work for specific page #

When you enable AMP as described above, you can see the "AMP" menu in the admin bar:

2604.png

Click "View AMP version" to see the page in AMP format. If the page is fully supported, you'll see the green check:

2605.png

If the page has some issues, you'll see the yellow sign:

2606.png

In most cases, the reason is 3rd-party plugins or custom modifications.