Emily opened her talk with the suggestion that neither websites nor web apps serve the user needs adequately. Websites need to reload, while web apps have their downfalls too.
She suggests that we need to be focused on progressive web apps (PWAs) instead.
This has been really pushed forward by the development community – and they don’t often talk to SEOs. At the same time, we as SEOs fail to speak to devs about these things too. Perhaps that’s because web apps rely on javascript, so we as SEOs try to avoid it.
Javascript is also really hard for search engines, as well. But Emily suggests we are in a position to make a real difference here, but that we are well under prepared for this because search engine crawlers struggle.
Crawling and indexing
Crawling and indexing is the main issue that Google has with javascript. Even if Google tells us it can handle it, don’t believe it, says Emily.
What we can do, she suggests, is render it ourselves, meaning Google doesn’t have to, by using server side rendering.
You need to also have server side rendering, for the user’s benefit, but it’s best to have it render server side and then client side for Google.
Isomorphic javascript is code that can run on both the client side and the server side. It’s a spectrum, though – you might not have shared code for everything, or you might have shared code for every single part of your site.
An alternative option to this is to use a headless browser, which is like having a client render your javascript, but it doesn’t require a user interface. So you can render the initial state of the page and cache it. Solutions like Rendertron will do this for you.
Emily’s least favourite option for this is that you only focus on Google (and no other search engines) and you focus on making their rendering the best. Google has stated that their rendering service is built off the Chrome 41 service, so your content needs to render in Chrome 41.
You can use Fetch and Render, but this has issues of sometimes not matching what you would see as a user.
It’s worth noting that if you only focus on Google, other search engines will struggle to crawl it.
Engagement
This is where we think about making our web experiences a little more app like.
So what does PWA mean? It means it has the ability to prompt the user to install the website onto their homescreen, then when the user decides to launch your app, it can launch outside of the traditional web experience. You can even set it up to send push notifications, like a regular native app.
You can also allow the content to be delivered offline – and with PWA, it can be a different experience for offline users than for online users.
In one example from The Guardian, users were given a crossword instead of the offline dinosaur game when a user was outside of wifi or internet connection.
So how do you do all of this?
The first thing you need is an App Manifest, which is a simple JSON file you link to in your head. It just tells the client what logos to use, how to launch, etc. it tells the system what we need to install when we install a website.
The next thing is a service worker. This is kind of like an air traffic controller for the server. When we request an image, it doesn’t go to the server, it goes to the service worker which reviews the request and works out what to do – e.g. to get the image and also to save it in the local cache. So when it’s reloaded, the user can access the image quickly – and this is also how the offline experience happens too.
The final thing you need is an HTTPS mobile friendly website. It must be HTTPS because service workers are so powerful. You can use it without security in place.
Takeaway: your website doesn’t have to depend on javascript if you don’t want it to – a vanilla website can become a PWA.
Measurement
It’s important to measure the effects of these investments.
Page speed is the main one. You’re trying to make your site faster – she recommends Performance Analyser for Analytics as a way of integrating this information.
You should also measure how many people are accessing your progressive web app. You can measure ‘launches’ by tagging up your launch URL. Also think about how to record offline traffic, and measuring push notifications (which is something Emily hopes Google will start building into Analytics).