PWA vs. AMP: Which Option is Best for My Business?

cnxt_dev
cnxt_dev
2018/05/28 08:00

PWA or AMP which one choose

Understand the key differences between PWA and AMP in order to enhance your brand’s mobile experience.

If there’s one thing that all marketers know to be true, it’s that mobile comes first.

A user’s mobile experience with your brand matters more than anything else and should be a top priority in any business, regardless of size or industry.

If you’ve recently been researching ways to enhance your brand’s mobile experience, you’ve more than likely come across two terms, namely Progressive Website Apps (PWA) and Accelerated Mobile Pages (AMP).

While these two concepts may seem similar, there are some key differences.

Let us outline them below.

Differences between PWA and AMP

Progressive website apps

PWAs are web pages that are made to look like mobile apps. Using similar navigations, design concepts, interactions and features, progressive web apps give you the best of both websites and mobile apps.

A PWA is essentially a mobile-responsive website with the added features of an app, giving users an app-like experience on the mobile web. Zomato.com is an excellent example of a PWA. It’s important to mention that PWAs aren’t a replacement for apps as they aren’t able to do absolutely everything that an app’s able to do.

PWA features:

  • Compatible with all device types
  • Compatible with most browsers
  • Push notification and content caching capabilities
  • Can be accessed via HTTPS
  • Fast load times
  • Doesn’t require installation
  • Bookmark or pin PWA to device home screen

PWA pros:

  • No installations or updates necessary
  • Service Worker technology means faster load times
  • Can be accessed offline
  • Can be indexed, shared or linked to
  • Secure
  • Cheaper to develop than an app
  • Reduced development time

PWA cons:

  • Not all browser types are supported
  • Not all functionality is available on all devices due to support issues
  • Native features such as SMS and calls and access to functions such as cameras and calendars are not supported

Accelerated mobile pages

Developed using JavaScript, AMP is an open source platform that has been approved by Google.

The main goal of AMP is to speed up website load times by allowing businesses to build web pages that only display the most crucial information, leaving out the fancy features that can be found on an HTML site. AMP makes it easier for businesses to create faster, mobile-friendly content that won’t slow down a user’s mobile device.

In early 2016, Google added AMP into its mobile search results due to the increased demand for faster, more convenient mobile experiences.

AMP features:

  • Increases website speed on mobile
  • Enhance mobile SEO efforts

AMP pros:

  • Website caching and loading is improved
  • Useful for websites that publish high volumes of content
  • Supports all ad formats
  • Websites with AMP versions usually shown above other mobile search results

AMP cons:

  • Only JavaScript from AMP library can be used
  • Streamlined cascading style sheets necessary
  • User activity can’t be tracked
  • Not suitable for ecommerce sites

PWA vs. AMP: What should you use?

When it comes to deciding which option is best for your business, you need to look at the type of website you’re currently running.

If your site is mainly content based or you have a site that has mostly static content and isn’t too media heavy then AMP is probably the best route to go.

Websites that have a lot more functionality such as ecommerce sites should definitely be looking at PWA first as they are focused on engagement just as much as load times.

Many websites owners will opt to use both PWA and AMP as both options provide them with different benefits that will help enhance their brand’s mobile experience and boost their SEO efforts.

Setting up AMP

Below are the steps you would follow to setup AMP on your WordPress site:

  1. Install AMP plugin. Install the AMP plugin by Automattic, which will automatically generate AMP-compatible versions of all your posts. You can see what your AMP posts will look like by adding ‘amp’ to the end of post URLs. The AMP for WP — Accelerated Mobile Pages plugin can be added on for further functionality.
  2. Link AMP plugin to Google Analytics. In order to be able to track your AMP posts in Google Analytics, you will need to add your tracking ID under the Analytics settings tab of your AMP plugin.
  3. Validate AMP setup. To make sure that everything is working correctly, you can navigate to https://validator.ampproject.org/ and paste the AMP URL in the URL field. This tool will highlight any errors. You can also use https://search.google.com/test/amp to test a few of your AMP pages.
  4. Submit for indexation. If you are using the Google Search Console tool above, you can automatically submit important AMP pages to Google using the “submit to Google” button. If you would prefer not to submit each of the URLs, you can simply add them to your XML sitemap and Google will index them automatically.

You will be able to keep an eye on all of your accelerated mobile pages from your Google Search Console.

You can also test the difference between the speed of your standard mobile pages and your AMP pages using WebPageTest.

Setting up PWA

Setting up a Progressive Web App requires the assistance of an experienced developer and isn’t as simple as setting up AMP pages.

In order to get started you’re going to need the following:

  • The latest version of Chrome
  • A web server
  • The relevant code
  • A text editor
  • Basic knowledge of HTML, CSS, JavaScript, and Chrome DevTools

You will find detailed instructions on how to go about creating a PWA here.

Both PWA and AMP are powerful and effective ways to improve your mobile site performance and increase user engagement provided they are setup and implemented correctly.

What will you be using? AMP, PWA or both?