Although currently, large videos take time to load hence AMP best practices mention keeping video less than 4MB size.
I think the news sites can make great use of this, as they keep on adding new photos to a story, and give a status update. Like we are used to seeing the Whatsapp status updates, the news stories can also be used in such a way to keep people updated on the news story.
In case if front end breaks on AMP page, check if CSS limit is exhausting. If CSS limit is reached 50kb 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.
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/.
Google AMP Roadshow Mumbai 2018 happened at ITC Maratha hotel. There was a small meet-and-greet before the main event for Partners / Speakers and an opportunity to solve queries before the event. Here’s what happened.
Oct 26th, Partners event
This was one day before the main AMP Roadshow event. Google team asked us to meet with AMP queries to make meeting fruitful and productive. After the quick introduction, we had a discussion about our queries.
I discussed Bing’s announcement of AMP Support but not having any sign of AMP results in bing.com searches. After a long discussion, we came to the conclusion that Bing only supports news related AMP pages.
While discussing the infinite scroll, I got to know about <amp-next-page>, however, it’s still in beta so not ready for production.
I discussed some CSS related issue with AMP images and how we can solve and contribute to the AMPhtml project itself.
After the meeting, I had better insights into AMP.
Oct 27th, AMP Roadshow (Main Event)
After registration, all the people who were mostly developers started to come in.
Here is the summary of what Google AMP team shared in the event.
Raghu Simha started with Introduction & Keynote – covering AMP basics and general working of AMP.
Matt Ludwig talked about “AMP: A library for beautiful responsive sites” – how people can start using https://www.ampstart.com/ to create AMP Pages with prebuilt templates of blog, ecommerce, art & food.
Cathy talked about “Advanced interactivity with AMP” – covering new components for interactivity like flying carpet, fx examples.
Sohani Rao talked about “AMP in production” – a journey of AMP page development to Shipping AMP page.
After lunch Avneet Singh delivered a talk about “Advertising & AMP” – in which he explained what kind of ad networks are supported along with header bidding.
Yuxuan Zhou talked about “Progressive Web AMPs” and some cool implementations that my team felt was very simple and efficient way.
Dipak Parikh talked about “What’s next in AMP?” explaining new components and possibilities with AMP.
About my talk, it started with a question “how many of you know WordPress?”. Surprisingly more than 50% people raised their hands! As I was talking about AMP Plugin and how it was collaboratively built by Google, Automattic, and XWP team, followed by the live demo of the plugin on my laptop.
I showed people how they can use AMP plugin’s 3 template modes (classic, paired and native). Since plugin generates required CSS for the page using CSS tree shaking, I showed a demo of CSS extraction and its informative log in the ‘view-source’ of the page with weight/size of each CSS files and how much CSS in total got included on AMP page.
Apart from this, I showed people how they can see the network panel to see the timing part of page and AMP sanitization/tag replacement process. Network’s timeline panel is very helpful for the developer I believe for the optimization of the page. Showed a little example of <amp-sidebar> and how it can be added just for AMP pages in WordPress theme code. Closed my presentation by showing how many sites use classic, paired and native mode. In the Q&A Panel Discussion, Google AMP team & I got to hear some basic and some advanced level questions. Some of them included support for CMSes other than WordPress, basic analytics questions, etc.
Followed by Q&A session, began the CodeLab where Google AMP team shared some examples to start AMP customization on. While doing so, developers were getting their queries solved by Google AMP team.
The day ended with this Group picture. This was a nice experience for me. 🙂
