Google Speed Up Mobile Bucharest

This Monday, 3rd July 2017, I had the opportunity to take part into Google's Speed Up Mobile Workshop, in which there were presented some solutions that can be used to speed up your mobile pages. The event was presented as a journey for both marketing & technical teams, providing insights about the mobile landscape and trends, modern technologies, mobile assets optimizations and measurement solutions.

The first part of the event was a shared presentation in which speakers like Regina Umbach, Senior Online Sales Manager for Central Europe alongside with Mariusz Gasiewski, CEEGR Performance from Google Poland and Thomas Steiner, Customer Solutions Engineer, from Google Hamburg, made known some market insights based on data gathered by both Google and Adobe that show trends into web mobile usage and available solutions to try and improve your online assets for faster mobile loading, so that you can keep them in line with current market requirements.

One of the important insights presented in this part was, as observed by our team at MULTIDIMENSION as well, is that the expected loading time for a web page has decreased in the past two years from around 5s per page to no more than 3s. Each couple of seconds more and your bounce rate can increase with up to 20%.

Although the solutions are currently not prepared, in my honest opinion, for the current dynamicity of the market, they are still viable for several types of content publishing, so I am going to provide more details further in this post and in future posts. I also invite you to read one of my older blog posts about platform based optimization using Memcached.

The solutions presented at Google Speed Up Mobile are the following:

1) AMP – Accelerated Mobile Pages is a set of tools comprised of 3 main components:

• AMP HTML – is a setup of non-standard HTML tags which provide a different set of options and support based on AMP JS. You will see that AMP HTML is quite restrictive, but once validated it has the ability to be collected into Google Cache and served directly from there. AMP HTML has, to date, available a number of components that try to improve dynamicity, including loading iframe based dynamic content (which will, of course, load after the AMP page is loaded), and support for a number of standard animations and analytics tools. You can see more at www.ampproject.org and ampbyexample.com.
• AMP JS – is the engine that handles individually all the AMP HTML components. The libraries are loaded from Google CDN and are required to be loaded in the head of your AMP page, based on the tags used. Keep in mind they should not all be loaded at once.
• AMP CACHE – this is the caching feature, which makes the page loading on a mobile phone load directly from Google Cache, if you markup is validated. One important thing is that all AMP pages will use a canonical to the non-amp page and the non-amp page will also need to use a canonical tot the AMP page so that google can detect it and make communication between them possible.

The biggest drawback is that you cannot write any kind of JS code yourself as the script tag is not supported besides the AMP scripts and there is no way to handle dynamic content, making this solution very good for static pages, that you would not like to change often or at all, but completely useless for user session based content or dynamic data content. One other downside is that once the page is loaded in Google Cache you have no control over updating it, as it will update after future crawls, if needed.

2) PWA – Progressive Web Apps is a solution for building mobile apps using a web engine and caching data using the service worker support which is available on several browsers in full or at least a subset. A progressive web app has the ability to handle push notifications (and access to other features based on browser support) and even full offline caching, as stated above, if the browser supports it (Google Chrome, Android Browser, Opera Firefox).

One of the nice approaches presented in the workshop is making PWA apps from your AMP pages, making static content application with close to no data usage besides the initial load.

The second part of the Google Speed Up Mobile Workshop separated the tech track and the marketing track, so for me it was a detailed explanation for both PWA and AMP, presented by Thomas Steiner, which ended with a MINI-HACKATHON where I built an RSS to AMP generator and an AMP to PWA service worker enabled app, with full offline support. I will present how to do this in future posts. so give me just a bit of time to put everything together and use the widget on the right to subscribe to my posts notification newsletter.

If you have a website using one of the CMSs I usually write about (for Magento, for WordPress, for Drupal), there are solutions for using AMP, that I have not tested though, but which I invite you to try and leave me a comment bellow with your finds.