Pradeep Sonawane

Category: 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.

  • Google AMP Ads and standard webpages

    Google AMP Ads and standard webpages

    Have you ever tried using amp ads on non-amp/standard webpages? Sounds weird given that amp components are supposed to be used on amp pages only. However, the way amp is evolving, there is a possibility that we could use amp as a Framework also.

    At first, I did an experiment of using amp-ad component on a standard html (non-amp) page. For which I used amp runtime script which also adds amp-ad under the hood, and ultimately uses gpt JS library for ads.

    Why I did this? So basically I wanted to get coding simplified for myself. Whenever we want to use ads on website, we have to use gpt JS and write a bunch of code with size mapping for responsive ads, check for visibility of ads, element’s presence in DOM etc. I figured if amp-ad is already doing it, and amp is made for optimized page rendering and no content blocking.

    My team and I worked on this idea and made a WordPress plugin that people can use and integrate amp ads on on-amp pages also, obviously it will work on AMP without any code changes. Basically same code base for both and Non-AMP. You can give it a try in WordPress with this plugin AMP Admanager. Currently greaterkashmir.com is showing ads using this plugin.

    On the similar lines, AMP pages team is working on Bento AMP which basically make AMP a framework to use on Non-AMP pages.

  • Optimization of videos for AMP Stories

    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.

  • Possibilities with AMP Stories in WordPress

    Possibilities with AMP Stories in WordPress

    See this live in action here

    After Snapchat, WhatsApp, Facebook, Instagram and now Youtube stories, we have a way to use “stories” or “status” feature in WordPress also.

    For this, we will need:

    1. Latest official AMP 1.2.0 plugin which has this AMP Stories (beta) feature
    2. Latest Gutenberg plugin (The one merged into WP 5.0 is old.)

    Here are some AMP Stories examples:

    1. https://www.washingtonpost.com/graphics/2018/business/amp-stories/self-driving-car-waymo-robo-taxi/
    2. https://time.com/amp-stories/time-100-2019/
    3. https://storiestests.netlify.com/traveltips2
    4. https://vacayholics.com/8impressive-attractions-of-the-river-nile
    5. https://tappable.co/s/tokyo/story.html
    6. https://foodaciously.com/amp/recipe/black-beans-and-sweet-potatoes-falafels/story
    7. https://www.nationalgeographic.com/amp-stories/amp-maori-new-year-story/

    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.

  • Amplify WordPress Sites

    Amplify WordPress Sites

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