PWAMP – How to combine PWA and AMP for instant uploads

PWAMP is a new acronym that represents the conjunction between PWA and AMP . This union of technologies is very promising, from the point of view of the development of a future website it should be considered, especially with the arrival of the mobile-first index.

Announced way back in November 2016 , the mobile-first index represents a change of direction for Google, driven by the growth of searches from mobile devices. With this new index, Google goes from classifying websites no longer on the basis of their desktop content, but on the basis of content that can be used by mobile.

Index:

• What is the mobile-first index?
• Why is Google moving to a mobile-first index?
• How to deal with the mobile-first index
• 3 ways to speed up your mobile website
• Accelerated Mobile Pages (AMP)
• Progressive Web Applications (PWAs)
• PWAMP (Progressive Web Applications with Accelerated Mobile Pages)
• Summary

What is the mobile-first index?

For those of you who may not know what mobile-first index is or what it means to webmasters, here’s a quick rundown. Since the beginning of 2018, the way Google indexes content on the internet is based on the mobile version of your website and no longer on the desktop.

What does this mean for my website?

For many webmasters there won’t be much to do. If you have a responsive design mobile website whose content viewed on mobile is exactly the same as on desktop, then you are good to go. If however, you have:

• a dynamic mobile site (VARY header)
• a separate subdomain m. for mobile devices
• a responsive site but show users less information on a mobile device than on the desktop

then it is the case to plan a restructuring considering the logic of mobile-first .

Why is Google moving to a mobile-first index?

With the number of mobile searches surpassing those performed by desktop, it’s no secret that Google is working hard to improve the mobile web. How websites are displayed to a mobile user has long been a focal point for Google. From loading speed to improving usability and usability of content, Google wants designers and developers to think about the mobile user first.

By pushing us towards a mobile content-based index, Google is forcing (for better or worse) webmasters, designers and developers to conform to keep up with the times. While many people might say they design and develop “mobile first,” the reality is that most still focus on the desktop user experience.

This is about to change.

How to deal with the mobile-first index

If you already have a responsive mobile site that mirrors your desktop, there isn’t much you need to do. Ensuring fast page loading is an area where there can be marginal gains. Sites with fast loading on mobile devices tend to be enjoyed better and longer. In a 2016 article , Think with Google suggested that mobile sites should load in under 3 seconds . They found that the average load time of eCommerce sites in the US was 6.9 seconds. Among all the various optimizations that can be done to a website, loading speed and UX are two areas in which clear improvements can be made.

I recommend that you focus on site speed as this is one of the main areas you can improve the mobile experience with, plus speed is an important aspect of the mobile-first index.

Of course, there are other things for designers and developers to consider. To learn more, you could read the guide to load the pages of your website faster .

3 ways to speed up your mobile website

While page load speed can be a ranking factor there are very marginal gains when it comes to fast or super fast websites. If your page’s score is 85/100 on the Google Page Speed ​​Insights test or 100/100, there will be very little difference in your ranking ability. However, there are great benefits in terms of user experience:

• Improve your conversion rate
• Build customer loyalty
• Reduces the bounce rate

While none of these elements are directly (and rightfully so) a ranking factor, they could play an important role in the website’s ability to generate profit. Let’s take a look at 3 ways to speed up your mobile experience.

AMP (Accelerated Mobile Pages)

The Accelerated Mobile Pages (AMP ) project is an open source initiative from Google to improve the mobile ecosystem. Thanks to the stripped down HTML code used by AMP, web pages load much faster than normal HTML, even when the available data network is very slow.

Google caches your content to further speed up the loading and transition time from the results page to your AMP page. All of this results in a faster, leaner user experience and should, in turn, lead to better visibility in search results (you know the AMP carousel?).

Here are some pros and cons of switching to AMP:

Pro

• 1. Improve your server performance: If you see a high volume of traffic from mobile devices, switching to AMP will reduce the load on your server and improve its performance.
  2. Improved UX: A faster mobile loading experience has the effect of improving the user experience. Sites that switched to AMP reported lower bounce rates, more page time and, in some cases, increased conversions.
  3. Ad visibility – although there were some initial compatibility issues with advertisements (AdWords & Co), these have been fixed. A review of ad performance in AMP from Double Click in 2016 showed that, compared to non-AMP pages, ads on AMP led to:

• Increased visibility for publishers
• 90% + of publishers experienced higher engagement and higher conversion rates
• Most publishers have a higher eCPM (Revenue / Impressions)

Against

• 1. AMP has a small set of HTML, JavaScript and CSS elements – there are limitations to the customizations you can make and removing some key HTML, JS and CSS elements from your current site can, at times, lead to pages converting less than their counterpart. “Classic”.
  2. Sites all the same – open 10 AMP pages of different sites, they will all look the same. With AMP, the chances of customizing the site’s appearance are low.
  3. Time – plugins are available for several CMSs that make AMP validation quick, however you will need to take the time to optimize the final version, get the right AMP, and get the most out of this format. If you already have a high-performing site on mobile, it may be more convenient to spend your time on other elements.
  4. Your content will be cached on google.com, this places some restrictions on the analytics data you can extract.

I wrote a guide to implementing AMP that you might be interested in: Implementing and optimizing AMP for SEO .

PWA (Progressive Web Applications)

PWAs are an alternative to switching to AMP. In this blog I activated PWA features in November 2016 but AMP is a project that I have never married (at least in this site).

PWAs are also a good alternative to traditional native mobile apps. They are relatively easy to manage and require no special permissions and no installation as they are essentially just web pages.

Here are some of the pros and cons of PWAs:

Pro

• 1. Fast Loading: The Service Worker allows your app to load almost instantly and reliably, regardless of the type of network connection the user is using. PWA pages can also be made available offline as the content can be cached locally on the device.
  2. Phone Home Presence – PWA install banners provide the ability to allow users to quickly and seamlessly add your web app to the home screen, making it easy to start and return to your PWA.
  3. Search Engine Compatibility – Since PWAs are essentially websites, they are indexable by search engines and recognized by the Manifest.json file and Service Worker registration, unlike native applications.
  4. Linkable and Shareable – Since PWAs are essentially web pages, users are able to quickly and easily share and bookmark the URL, unlike native applications.

Against

• 1. Latest versions of Chrome, Safari, IE, Opera and Samsung Android browser support PWAs, some custom and proprietary default browsers do not support PWAs. However, compatible browsers represent more than 90% of users.
  2. There is no central download repository, like an App Store – if you are considering replacing your native app with a PWA mnsud2l, please note that the App Store is not required. The PWA is available by browsing the website.

You can find more information on PWAs on the Google Developers website or in the guide on this site: How to create a Progressive Web App – PWA.

PWAMP (Progressive Web App with Accelerated Mobile Pages)

PWAMP is a term that was first coined by Googler Gary Illyes at Seattle’s SMX Advanced in June 2017 . In his opening note, Illyes talked about the importance of mobile site speed and suggested a hybrid mix of a progressive web application – PWA and an accelerated mobile page – AMP. The ultimate goal must be to deliver a better and faster experience to mobile users.

A PWAMP site basically uses AMP HTML, CSS and stripped down Javascript and is built like a PWA. Using bare AMP code makes the pages lightweight, which ensures an extremely fast experience. Combine lightweight code with the caching benefits of a PWA and you have all the ingredients for a fast loading super site in hand!

AMP pages with PWA functionality

AMP pages can use many features of PWAs, as long as they come from your site’s domain rather than an AMP Cache on Google’s servers. This means that PWA functions will not come into play when consuming an AMP page within a platform like Google or Bing, but will be available on the next page when the user moves to your domain.

AMP as an entry point into your PWA

AMP’s unique selling point is the near instant delivery of first view, a feature that makes AMP the perfect solution for the user’s first interaction with your site.

Progressive web apps allow for more interactivity, more functionality, and more engagement, but their first load isn’t as good as in AMP. The Service Worker of the site in fact accelerates only the uploads after the first one.

A good strategy is to make the entry point on your site an AMP page, then warm up the PWA features that will activate as the user continues to navigate.

AMP as a data source for your PWA

One of the main features of AMP is that it is easy and safe to embed. If you’re building a progressive web application, you can get the same benefits and dramatically reduce backend and client complexity by using AMP pages as a data source for your PWA.

To implement a PWA in an AMP page it is necessary to load the Manifest.json file with <link rel = ”manifest” href = ”/ manifest.json”> and the Service Worker with the <amp-install-serviceworker> tag .

Let’s take a look at some of the potential pros and cons of building a PWAMP website:

Pro

• 1. Ultra-Fast Loading: Since PWAMP websites employ all the best features of AMP and PWAs, this will make them extremely fast on both first and subsequent loads. HTML, CSS and JS combined with the use of the Service Worker should be delivered to users in less than 1 second.
  2. Offline Accessible – Since PWAMP websites are configured as a PWA, users would be able to locally cache the content of one or more pages of your site for later offline reading on their device.
  3. Search engine friendly: a PWAMP site is identifiable by all search engines, which means that your content (hyper fast and of excellent quality) has the potential to rank very well.

Against

• 1. Validating a PWAMP website might be a little more complicated than validating an AMP website.

More info on PWAMP:

• howpwampworks
• integration / pwa-amp
• integration / pwa-amp / amp-to-pwa
• integration / pwa-amp / amp-as-pwa

Summary

Now is the time to evaluate what you are offering to your mobile users. Do you have a native app? Is your mobile site responsive? How fast is your current site on phones? Once you have the answers to these key questions, you will be in a better position to decide whether to switch to a PWAMP.

If people aren’t downloading your native app, if your current mobile site is split from your desktop one, or if your website is slow to load, PWAs could be a great solution that meets all your needs.

One thing clear is these are exciting times with many mobile side development opportunities. I urge you as a webmaster, marketer, designer or developer to start thinking seriously about the best options for your customers and the mobile experience you want to offer.