Google IO 2017 – Web Development Notes

Lighthouse is being integrated directly into dev tools

Firebase now gives a real time analytics. Cloud functions for Firebase sounds like Akamai for small node functions, like resizing images. But being able to handle these tasks in a global, cached environment.

Google IO: state of the mobile web

Chrome’s mission: move the web platform forward

Real world javascript language performance: key focus for this past year. How does V8 perform in real world scenarios, not just perfect testing spaces.  35% increase in performance since last year on Android

scroll anchoring: page jumps after content loads after page renders, such as a banner ad. This locks the screen, even when content loads at the top. Scroll anchoring can reduce 3 page jumps per load on average.

AMP: Accelerated Mobile Pages. improve mobile experience.

  • On average, AMP pages load in less than a second and use 10x less data
  • LinkedIN found people were 10% more likely to read an article when it is AMP .
  • amp-bind: merchants can build e-commerce experiences
  • Progressive web apps: app focused experiences, reliable, fast, engaging.

Mobile Twitter just relaunched as a PWA

  • Fast loading on slow networks, less data, works well on smart phones.
  • Data saver mode can reduce data downloads by 70%
  • Introducing Twitter Lite | Twitter Blogs

Twitter Lite is a more accessible, faster and more affordable way for people to use Twitter when they are on slow mobile networks, have expensive data plans and with limited storage on their mobile device.

PWAs can be added to the home screen. Developers can soon control the home page button prompt. They can be displayed in app launcher, android settings, android intents, notifications, and launch as a full-screen immersive view

Mobile payments

  • 123B in US alone
  • paymentRequest – simple web payments within Chrome
  • paymentRequest can now use more forms of payment. paypal, alipay, samsung pay… could this integrate quickbooks payments?

Media

  • 70% of internet traffic is video.
  • Biograf: This is a sample video-rich PWA app
  • Notice this has an airplane mode and allows video download
  • Workbox is a tool to better manage service workers

Polymer 2.0 launches today. 10% faster and 80% smaller

Ola Cabs

India’s largest ride sharing app. They are using PWA. over 1m daily rides. 110 cities and 600k drivers. They needed to work with customers that use low cost phones, minimal data plans, and bad connections to reach the entire customer base.

Off line and caching provides faster performance with low data loads. They used polymer for fast web components, Shadow DOM, and HTML import.

  • They rely heavily on cache, but also have an initial load of 1.3 seconds.
  • They strategically load components to only get critical elements first.
  • They are using workbox, they cache these elements for repeated use.
  • Now, they are only requesting new data, such as transaction information.
  • They have a 100 score in lighthouse
  • 20% of their PWA bookings come from users that previously uninstalled their Android app

AMP to PWA

<amp-install-serviceworker>. This takes an AMP page and allows it to install a service worker so a user shifts to a PWA when they click. This gives the fast initial page load of an AMP page and prepares the browser to make the second page load just as fast.

Let’s say someone shares a PWA page with a friend. We’d want the friend to have a fast page load, but if they go to a PWA page as the first experience, they won’t get the acceleration via the service worker. So we could do some detection at the page load to see if the service worker is available, if not, move to the AMP experience of that page.

Shadow DOM and iFrames

Use shadowDOM to update an AMP page with new content to create a fast, progressive web app

This is good for a site that has a lot of static content, such as our marketing site. it wouldn’t be logical for an application, such as QBO

Mobile Vaani, get feedback on your product design via this network for rural India.

Improve your WordPress site by forcing plugins to put JS at the bottom of the page

WordPress makes it easy to add features by installing plugins. While most of these are well designed, they often use WordPress defaults that are not the greatest for accessibility or performance. One of the key elements of making your site load faster is to put the JavaScript at the bottom of the page, just before closing the body tag.
Continue Reading Improve your WordPress site by forcing plugins to put JS at the bottom of the page