AMP

What is AMP?

AMP Plugin for WordPress

Is my site compatible?

Any site is “compatible” with the AMP plugin, it will do it’s best to filter and process through your site for AMP compliance… but going AMP means accepting significant sacrifices. And even then your site may still not look or work correctly if it cannot meet the requirements.

  • Non-AMP javascript is not allowed.
    • This has a much bigger impact than you may know. This includes the javascript used by your theme and plugins. Blatently removing JS will cause many aspects of your site to stop working.
    • AMP offers a suite of components that use their native JS to deliver some of that functionality back to you. But at this point the AMP plugin does not handle those conversions… and probably never will as JS conversion is far too comprehensive and differences in programming styles would create too many hurdles.
  • Tree-Shaking = AWESOME! AMP’s 50kb limit = BAHHHH!
    • The AMP protocol requires that the entirity of your CSS fall under their 50kb limit. Most sites use anywhere from 50kb to 1000kb with many redundant (cascading) styling rules
    • The AMP plugin does an amazing job of filtering through your pages and stylesheets to determine what CSS is necessary, then filters out the rest. The Tree-Shaking process works well to reduce the CSS weight, but in our tests we have discovered that most themes still come in over the 50kb limit, even with minimal content (more content sometimes means more CSS used).
  • Forms must meet stringent requirements.
    • You can use forms that submit using GET, but is you are to use POST your form must have several changes made to it’s attributes, follow the rules of MAP… oh, and SSL is required.
    • In our tests we have found that basic POST forms may work fine, especially the basic wp forms. But GET forms are often missing some required attributes, and any form handled by JS without proper fallbacks in place will probably not work.

Installation

  • Login into wp-admin and open Plugins.
  • Select “Add New”.
  • Enter “amp” into the Search Plugins field.
  • Select the AMP plugin from the search results.
  • Click “Install Now”
  • When the plugin is finished installing, click the “Activate” link.

AMP Settings & Validation

Start by clicking AMP/General to open the editor. Under Template Mode, check the Native radio button. This enables the entire site (minus woo cart/checkout pages) to be AMP compliant. Be sure to click the Save Changes button.

After you enable Native AMP, you may see a warning about validation errors. This is the AMP plugin doing it’s job… almost.

Though they do have an “Auto-Approve” feature for validation what they call “errors” that the plugin fixes, it still always manages to require some interaction. These errors are mostly just normal website programming that doesn’t fit the AMP protocol, and their fixes are mostly filters that change them to be compliant. This sound simple, but believe me… it is not.

Despite the auto-approval setting, you may still have to approve the errors/fixes manually to make that final step towards validation. Click on AMP/Error Index to handle these approvals.

The easiest way to be sure you have the best start you can, I suggest you click the checkbox below the Bulk Actions drop-down to select all entries. Next choose Approve from the drop-down, and click Apply. Repeat this procedure on each page by clicking the navigation button at the top right of the table. Once you have approved all entries, you will be fully AMPed.

As you build your site, AMP will continue searching for and fixing the invalidations. You may need to check this page and approve any new errors that come up to keep your new pages/edits vaildating.