Google I/O is a three day developer event held near the main Mountain View offices of Google. Part 1 focused on Google Assistant. Here is part 2 of my notes, on VR and AR (because they are fun) then web. More to come in later posts.

VR/AR

Tour Creator

• I previously posted a blog on 360 Photos for Ecommerce, but now a new 360 view tour creator allows 360 photos to be annotated!
• Initially proposed for kids to create tours of their own favorite areas, I think it also has interesting application for merchants with physical stores to share information about their stores to encourage more foot traffic to the stores. I updated my previous 360 photo as a tour demo.

Multi-user AR Apps

• ARcore (an AR library for Android) now supports “Cloud Anchors”, which allows multiple users to share objects anchored at the same position via different AR views.

• The same article describes plane detection improvements. This has interesting potential for sharing more product information for products on shelves in stores. Just point your camera at the products, and it can detect the packaging image and superimpose an animation over the top. Another novel way to do ads or educate on your product.

WebXR

• WebXR is the next generation of web standards for AR and VR on the web.
• Webxr is available as a beta in chrome 67 can can be enabled in via a chrome flag. More AR capabilities coming in Chrome canary over the coming weeks.
• Magic window supported, which allows a user with a mouse to scroll around a scene, or if on a mobile device (phone or tablet), to move the device around to look around the scene, or use a headset for a full VR experience.
• HTC Vive and Oculus are supported, as well as Google Daydream and Cardboard.
• AR experiences can also be added directly into a web page, such as trying furniture in a real room, with superimposed information icons.
• See github.com/immersive-web for more details, with feedback welcome.
• AR code is very similar to VR code – the main differences are aspects like in AR the camera position is linked directly to the device in the real world (in VR you may be able to teleport to a new location).
• There is a new “hit test” API that returns objects a ray from goes through (ordered by distance front the ray source) so you can look at things.
• I learnt a new term, “reticle”, which is an image drawn over a scene, like cursors to show the positioning of things in the real world (e.g. the location on the ground you are about to drop your new virtual couch).
• Finally there was more work (with no ETA as of yet) around improving the accuracy of anchoring AR objects in the real world as the camera moves around in a space, increasing its knowledge of the space.

Web

Improving Web Speed

• As a result of AMP project learnings, work is underway on “Web Packaging”. This will allow caching of digitally signed content from a web site, so it can be delivered from say a Google or Pinterest cache, but a browser can trust that it is authentic content from the origin and so display the origin’s domain name and URL. Experimenters can turn on the “signed exchanges” flag in Chrome to test early drafts.
• Analysis showed 25% of websites could save 250kb of images, leading to 4 “Feature Policies” being considered (mandating explicit sizes on images, modern image formats, prohibiting downscaling, require compression, … some Chrome flags already available to test these features). For example, a size policy could state CSS must be 50kb or less (as dictated by AMP). Such tools can help stop the “boiling frog” syndrome where a site gets slowly slower over time as more changes are made.
• There was also a sneak peek of Portals – making navigation between pages easier.

WordPress

• Large and growing percentage of web is hosted by WordPress, so improving WordPress improves the web.
• As a result, Google has been working with Automatic and others in the WordPress ecosystem to speed up WordPress sites using an AMP plugin developed by Google.
• The plugin simplifies AMP adoption, performing automatic CSS tree shaking (reduced 128kb of CSS to 9kb for one site). Some changes are too complicated to automate and thus need some manual tweaking (e.g. complex menu JavaScript cannot be auto-ported), but the bulk of the changes needed to make a WordPress site AMP compatible are built into the free plugin.

Polymer 3.0

• Web components are in all mainstream browsers.
• Polymer 3.0 has cleaned up polyfills, JS modules now used, and the release is now distributed via NPM.
• Components built more like other systems, so easier to interoperate with React etc.
• Polymer-modulizer converts v2 code to v3 for you (to migrate your Polymer 2 projects).
• LitElement and LitHtml – uses native JavaScript literal strings (not JSX) to leverage native JavaScript functionality rather than extending the language with a pre-processor.
• New polymer components are now supported, updated to use the new material design changes. There is also a new PWA starter kit.
• Future ideas: CSS shadow parts – theming for web components; custom element scoping (registry) – previously all custom elements were global; package name maps to allow package names which are mapped to URLs; looking into HTML modules – continuing to write modules as html markup; template instantiation – fastest way to create DOM – looking to allow dynamic parts to be injected, so should be fast to update as well.

Web Assemblies

• Web Assemblies is extending scripting languages available in browsers beyond JavaScript.
• Works with C (and C++), with more programming languages coming soon.
• Emscripten.org builds web assemblies for you.
• A demo of Autocad in web browser was shown! (The Autocad code base was quoted as “older than the internet itself”, and was demoed as a web assembly, available in a web browser).
• This will allow many more programming languages to be used beyond JavaScript to build extended functionality.

Search

• Next generation of image search is coming via Google Lens: “…new features…roll out at the end of May…the shopping results were impressive…found a match for all three items [in one photo], showed options for where to buy them, and recommended similar items” – Wired magazine. Cool!
• Structured Data is information that makes it easier for web crawlers to understand the purpose of the page (e.g. a recipe, a podcast, a news article, a product for sale etc) and then build experiences customized for that particular type of data.
• Rakuten got x2.7 traffic increase using Structured Data with recipes (structured markup allowed Google to display a recipe picture and cooking time in web search results, increasing engagement).
• Meta tags in <head> are not important for ranking (I think due to protect against keyword stuffing abuse), but do help in other ways, such as discovering the canonical URL and page title.
• Podcast markup now allows Google web search to offer a podcast player in search results.
• Speed is a ranking factor, but also very important once customer on site as well. So worry about speed!
• The Google Search Console gives you information about your site, including where things are going wrong.
• All text after “#” in URLs is ignored (different text is not considered a different page), so use the JavaScript history API to change page URLs for different pages if you want them all to appear in search.
• It is important to decide what to index vs what not to index. Search crawling bots like <a…> tags with href=… attributes more than a <span…> tag with an onclick=… attribute holding JavaScript, so use <a…> instead of <span…> even if you are using onclick=… instead of href=…, if you want the linked followed by the crawler.
• Avoid listing redundant URLs for the same page as it can degrade your rankings (on the suspicion you are trying to track the search engines).
• Beware if the session id is in the URL (as it looks like you are providing the same page multiple times).
• Google is moving the crawler to behaving like a mobile device as more users are now accessing the internet from mobile devices than desktops.
• More than 50% of web is hosted by CMS systems, so Google is working more with CMS vendors like WordPress.
• Google wants to make it easier to access search console from within CMS platforms, so search console now has an API.
• Wix used the search console API to create an “achievements” sidebar. Squarespace also provides built in report of clicks and impressions (users are not aware that the data comes from the Google Search Console).
• There is an indexing API which can be used to submit pages upon change instead of waiting for the next crawl. In Wix, pages are submitted with immediate feedback to determine if in search results. So can develop a page, publish it, and get feedback on its quality immediately (e.g. if search rejects the page markup due to problems).
• For user generated content to help control spam, if you support <a href=…> generated by user content, add rel=nofollow to tell search crawler it’s not a good link to follow. That way your site become less of an attack by spammers (as it does not help them), and search does not penalize you for spammy links you did not create.

There is more to come on identity, Google Pay, and Google Cloud Platform services.