Some quick tips for WordPress developers to do “WP to AMP” conversion.
Follow these steps:
- Install Official AMP plugin
- Use AMP in Transitional mode (formerly Paired mode)
- Check “Disable Admin Bar on AMP pages” checkbox.
This should give you amp site at /?amp page. You can also choose which pages to make AMP ready.
1. Custom Javascript
Custom Javascript will be removed so any code that relies on this custom javascript needs to created separately in AMP.
Refer Gravity Form AMP Support Script.
Use a wrapper function to add AMP related markup which doesn’t work in AMP page.
Google Analytics can be added from backend option.
Ref – https://amp-wp.org/documentation/playbooks/analytics/
2. CSS limit (< 50kb <75kb)
Note: CSS limit increased later from 50kb to 75KB. Read here.
In case if front end breaks on AMP page, check if CSS limit is exhausting. If CSS limit is reached 50kb 75kb then next files will not be loaded.
To handle this, create chunks of CSS like homepage, archive, single, etc. and load them only on the pages which require these CSS using wp_enqueue_style()
Note: Admin bar css is of 17KB, so cross check if you have disabled Admin bar on AMP pages.
3. Some of the known problems
If popups are not working
use https://amp.dev/documentation/examples/components/amp-lightbox/
If external sources/embeds are not working like Vuukle, Outbrain, etc.
use their amp valid code conditionally for AMP pages. In case of iframes, need to use <amp-iframe>, however, it can’t use self domain iframe and gives error that you can see in console, so it can be used as bitly url.
You must have seen this slide from Google AMP Roadshow 2018 that shows how to configure AMP Plugin.
However, AMP Plugin has changed a little. You can see/read resources and documentation here – https://amp-wp.org/.
