Category: AMP

Categories
AMP AMP WP

Signed Exchange to retain publisher brand in AMP

Signed Exchange to retain publisher brand identity in Google AMP.

Searching for results in Google is now mostly showing AMP pages. Clicking on these results/amp pages are opening quite instantly. It’s due to the AMP Cache that Google uses to deliver preloaded content. The downside of this was, it was not keeping the brand identity in the browser URL or the address bar.

Thanks to the signed exchange, we can put a stop to the loss of brand identity.

Here is an example of the same:

There are some tools you can use to have for your site as well as explained here. But the easiest way to do it would be to use CloudFlare AMP Real URL on click option.

Categories
AMP AMP WP

Optimization of videos for AMP Stories

Quick Summary –

  • AMP Plugin 1.2 and latest has AMP Stories feature for WordPress Ecosystem.
  • Transcoder Plugin is available for Video Optimization in both free and premium plans.
  • Optimize videos up to 90% smaller in file size than original using Transcoder.
  • The Transcoder 1.3 plugin will be available for people in next week.

A few days back I wrote about the Possibilities with AMP Stories. While looking at many AMP Video Stories, it occurred to me that people with slower internet will have problems loading videos on AMP Stories. According to AMP Stories Best Practices, if videos in AMP Stories are less than 4MB, then it will perform well. However, not all people can optimize videos always.

I came to know that AMP Team is already working on integrating Jetpack VideoPress (https://github.com/ampproject/amp-wp/issues/3045) but it’s a paid service and requires premium plan to use it. I knew that at rtCamp have already built Transcoder plugin which transcodes / optimizes video as soon as its uploaded in WordPress and stores the optimized video (mp4) back to it’s attachment meta. Good thing is it can be used in Normal WordPress setup also and it is not dependent on any other plugin.

Transcoder development team and I discussed on how we can use transcoder with AMP Stories after AMP Plugin v1.2 release with AMP Stories that has Gutenberg Editor for adding AMP Story pages.
I came to know that transcoder plugin has ability to optimize video for up-to 90%.

As mentioned here – https://rtmedia.io/blog/transcoder-for-amp-video-stories/ this transcoder is available in beta for everyone to test. In the next week I believe we will have both AMP v1.3 plugin (currently has RC release) and Transcoder 1.3 plugin (currently in beta) released for people.

Categories
AMP AMP WP

Amplify WordPress Site

Some quick tips for WordPress developers to do “WP to AMP” conversion.

Follow these steps:

  1. Install Official AMP plugin
  2. Use AMP in Transitional mode (formerly Paired mode)
  3. 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.

Ref – https://gist.github.com/pradeep910/b25525034289ab0bc2b7fa0896f4ac90#file-rt-amp-gravity-form-fix-php-L13-L24

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/.