From Web Site to Web App: Fantastic Optimisations and Where To Find Them

#SearchLove @goutaste
From Website to Web-App:
Fantastic Optimisations
andWhere to Find Them

So Many Format Options to Display
Your Content on “The Internet”

How Do You Choose?

Websites Have Great Reach
11.4
4.0
Monthly Unique Visitors
Top 1k web proper+es vs. top 1k apps
Data: comScore Mobile Metrix Age 18+ June 2016

Native Apps Have Great Engagement
9.3
188.6
Average Minutes Per User
Top 1k web proper+es vs. top 1k apps
Data: comScore Mobile Metrix Age 18+ June 2016

Can We Have The Best of Both?
The REACH of
a website
The ENGAGEMENT
of an app
Image: hGp://bit.ly/platypus-keytar

What is a Web App?
TradiNonal MulNpage Website Single Page App Lifecycle
Images: hGp://bit.ly/2rouUqH

What is a Single Page Web App?
bit.ly/app-shell-img

What is a Single Page Web App?
bit.ly/app-shell-img
Single page
persists with
branding
elements
Content changes
without full
page reload

What is a Progressive Web App?
Responsive Secure Fast
Downloadable Works Oﬄine Push NoNﬁcaNons

Why are PWAs popular?
Mobile sales increased by 18% YoY
43% increase in sessions/ user
100% increase in session duraNon 80% improvement in load Nme
30% higher Conversion Rate than
naNve app in Tier 3 ciNes
20% of PWA bookings are from
users who’d uninstalled naNve app
Homepage loads completely in .8
seconds
Customer acquisiNon cost is 10X less Shoppers spend 20% more Hme
than on previous mobile site
40% lower bounce rate than on
previous mobile site
hGps://www.pwastats.com/

The Web is Becoming Full of Web Apps & PWAs
Image © 2016 Warner Bros All Rights Reserved

Current & Imminent PWAs
Source: Google I/O 2017

But Lots of People Don’t Consider
SEO for Web Apps

Web Apps rely on JavaScript &
JavaScript is hard for us

“But I’m not a developer…”

Things Are Changing, But
JavaScript is Also Hard for Search Engines*
*Search Engines means more than just Google

So You’ll Still See Plenty of Great
Web Apps That Look Like This
Only one page
indexed, despite
more content!

Or Sometimes This…

We Can Help

MeasurementEngagementCrawling & Indexing
URLs
Rendering
“App-iness”
Speed/ Performance
Speed
‘Installs’
Ofﬂine & Messages
What We’ll Cover Today

1. CRAWLING & INDEXING

Web Apps Don’t Have to Change URLs to
Change Content on the Page
Even on the ﬁnance tab, the URL still stays the same
Crawling & Indexing

But a Web Page Needs a URL To Get Indexed
Crawling & Indexing
No /ﬁnance URL
existed, so no /ﬁnance
page got indexed!

Old Linking Habits of JS-Heavy Web Applications
By default:
https://example.com/#/foo
For deprecated AJAX crawling scheme:
https://example.com/#!foo
(And ?_escaped_fragment=foo)
Crawling & Indexing

hJps://example.com/foo
hJps://example.com/foo
Death of the Hash & Hash-Bang
By default:
https://example.com/#/foo
For deprecated AJAX crawling scheme:
https://example.com/#!foo
(And ?_escaped_fragment=foo)
Crawling & Indexing

Long Live the History API
!  Change URLs in the
address bar without
reloading the whole
page
!  Allow for eﬀec:ve use
of the “back” bu?on
hGps://css-tricks.com/using-the-html5-history-api/
Crawling & Indexing

Canonicals.
Canonicals Everywhere.
hGps://yoast.com/rel-canonical/
Crawling & Indexing

Let’s talk about rendering…
Crawling & Indexing

Welcome to the JavaScript Web
View Source Inspect Element
Crawling & Indexing

Welcome to the JavaScript Web
View Source Inspect Element
Original HTML The DOM as it was interpreted by
the browser.
Crawling & Indexing

Schedule
Crawl Index Rank
Known
URLs
Internet
Ye Olde Days*
*and many search engines today
Crawling & Indexing

Schedule
Crawl Index Rank
Render!
Known
URLs
Internet
How Google Can Work Today
Crawling & Indexing

Crawling & Indexing

Crawling & Indexing
Search Engines can
render JS now. It’s not a
problem for SEO.
“ “
- A DeveloperYou ProbablyWorkWith

But Uh… Good LuckWith That
Googlebot may only be willing to wait 4-5 sec for your JS to render…
hGps://maxxeight.com/tests/js-Nmer/ @maxxeight
Crawling & Indexing

Crawling & Indexing
AndWhat About Other Search Engines?
@bart_goralewicz hGps://moz.com/blog/search-engines-ready-for-javascript-
crawling

So, say a prayer
to the god of
your choice &
hope Google
ﬁgures out your
JavaScript?
Crawling & Indexing

You Have A Few
(Better) Options
Crawling & Indexing

Option #1:You Handle The “Rendering”
Before Google Has To
& send Google something they can understand without rendering
Crawling & Indexing

Client Side vs. Server Side Rendering
Crawling & Indexing

Schedule
Crawl Index Rank
Render!
Known
URLs
Internet
But if we render, Google doesn’t have to
Crawling & Indexing

Server Side RenderingYour Content
h?ps://www.youtube.com/watch?v=0wvZ7gakqV4
If you search for any compeNNve keyword terms, it’s always
going to be server rendered sites. And the reason is because
although Google does index client-side rendered HTML, it’s not
perfect yet and other search engines don’t do it as well.
So if you care about SEO, you s+ll need to
have server-rendered content.
“
“
-- Jeﬀ Whelpley
Crawling & Indexing

AfterYour Server-Rendered Content Loads, Then
Boot UpYour Client-Side JS On Top for Further Nav
Crawling & Indexing
(OtherwiseYou Lose the Beneﬁts of a Single Page App)

Option #1a:“Isomorphic JavaScript”
Crawling & Indexing

WTF Is “Isomorphic JavaScript”?
JavaScript code that can run on
both the client and the server.
Synonyms: Universal JavaScript, Shared JavaScript,
Portable Javascript
Crawling & Indexing

Isomorphism is a Spectrum
@spikebrehm hGp://bit.ly/isomorphic-deck
Crawling & Indexing

Isomorphism is a Spectrum
Crawling & Indexing

Use Headless Browsers to render & serialize
initial state of the page. Serve this to users
without JS & to search engines.
hGp://bit.ly/headless-chrome
Option #1b?
Crawling & Indexing

Crawling & Indexing
github.com/GoogleChrome/rendertron

Or Leverage Existing Solutions
That Do This ForYou
Prerender.io

Option #2: Focus Only on Getting Google
to RenderYour Client-side JS Effectively
“ “
Crawling & Indexing
hGps://www.chromestatus.com/features#milestone%3C%3D41
hGps://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?preﬁx=Win/310958/

Use
Feature
Detection
&
“Polyfills”
hGps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyﬁlls
Crawling & Indexing

hGps://www.google.com/webmasters/tools/
googlebot-fetch
Test in Chrome 41
and Fetch & Render
Crawling & Indexing

Fetch & Render As Any Bot
@maxxeight hGps://technicalseo.com/seo-tools/fetch-render/
Crawling & Indexing

2. ENGAGEMENT

Remember this?
Mobile sales increased by 18% YoY
43% increase in sessions/ user
100% increase in session duraNon 80% improvement in load Nme
30% higher Conversion Rate than
naNve app in Tier 3 ciNes
20% of PWA bookings are from
users who’d uninstalled naNve app
Homepage loads completely in .8
seconds
Customer acquisiNon cost is 10X less Shoppers spend 20% more Hme
than on previous mobile site
40% lower bounce rate than on
previous mobile site
hGps://www.pwastats.com/
EngagementCrawling & Indexing

The App-Like Web: Progressive Web Apps
Launch from homescreen/
Fullscreen mode
Send push notiﬁcations“Install” web app:
Add to Homescreen web banner

Offline in Action

The offline
experience
your web-app
delivers can
even be
different from
the online
experience

Offline-Only Content

PWAs = Death to the Dino
(Someone else made this illustraNon, and I photographed it. Now I cannot remember who. SORRY.)

Basic PWA Technical Requirements

1. App Manifest
hGp://bit.ly/webapp-manifest
Chrome Dev ToolsViewJSON ﬁle you link to in your <head>

2. Service Worker
Web App Network
Cache
Service Worker
Get /hero.png
I borrowed this analogy from @jeﬀposnick

3. https Mobile Friendly Website

You don’t need to be a SPA or use a JS framework.
A normal site with Vanilla JS can become a PWA.

PWAs ‘By Default’ via React, Preact, or Vue CLIs
Preact CLI
@addyosmani hGps://youtu.be/aCMbSyngXB4
create-react-app vue init pwa

Lighthouse

Speeding Things Up

Source: @lukew

Improved Engagement With Speed
hGp://wpostats.com

#SearchLove @goutaste @addyosmani
“The bloat of your baseline defines how
much headroom you have for app code”
How much is taken up by your framework?
hGp://bit.ly/pwas-the-new-normal

Service
Workers
Can Speed
Up Sites
on Repeat
Views

self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(
[
'/css/bootstrap.css',
'/css/main.css',
'/js/bootstrap.min.js',
'/js/jquery.min.js',
'/offline.html'
]
);
})
);
});
Set UpYour Service Worker to
Cache Essential Assets At Install
hGp://bit.ly/sw-caching

Cache App ‘Shell’
hGps://developers.google.com/web/fundamentals/architecture/app-shell

Set UpYour Service Worker to Cache
Essential Assets on User Interaction
document.querySelector('.cache-article').addEventListener('click', function(event) {
event.preventDefault();
var id = this.dataset.articleId;
caches.open('mysite-article-' + id).then(function(cache) {
fetch('/get-article-urls?id=' + id).then(function(response) {
// /get-article-urls returns a JSON-encoded array of
// resource URLs that a given article depends on
return response.json();
}).then(function(urls) {
cache.addAll(urls);
});
});
});
(ex.“save for ofﬂine” button)
hGp://bit.ly/sw-caching

But That Doesn’t Mean You Are Done &
Can Avoid Optimising for Performance

Still Do The Basics
Put Everything on a Diet:
–  Minify JS & CSS files
–  Compress files & images
–  Less unnecessary files
–  Less unnecessary markup
(ie code comments)
–  Don’t send code that this
page doesn’t need

hGps://images.guide @addyosmani
hGps://images.guide

Best Practices for
Fast First Load
"  Inline most criNcal
CSS & JS
"  Remove all render-
blocking scripts
from the <head>
hGps://youtu.be/6Ljq-Jn-EgU

But I’ve Done
All This & My First
Paint Times Are
ROCKING
“ “
- Someone in the audience

One of the
Issues With
Server-Side
Rendering is
The Trade-
Oﬀ With
Time to
InteracHve
Simulated Slow Network hGps://youtu.be/6Ljq-Jn-EgU

TTI has a
high
correlation
with
conversion
rates
bit.ly/google-measure-performance

#SearchLove @goutaste See Also: hGp://bit.ly/code-splitng-webpack
READ THIS TO START: hGps://survivejs.com/webpack/building/code-splitng/
" Break up exisNng JS
into smaller chunks
(“Code Splitng”)
Make it Useable Faster:
Minimise Time Between FMP & TTI

" Break up exisNng JS
into smaller chunks
(“Code Splitng”)
"  Follow the PRPL
(‘purple’) PaGern*
hGp://bit.ly/push-render-precache-lazyload
*”push” references H/2 push and requires h?p2
Make it Useable Faster:
Minimize Time Between FMP & TTI

Link Rel=Preload
Pre-load is like saying, “Hey, browser! Here’s a resource you’re going to need later on, so start loading it now.”
•  Pre-load can specify the download “as” =
•  "script", JavaScript file
•  "style", Stylesheet
•  "image", image file
•  “font”, font file
•  ”video", video file
•  "document” html document for embedding
•  And more…
bit.ly/what-is-rel-preload
HTTP/2 + Preload = Moves the ‘start download’ time of a critical asset closer to initial request

Link Rel=Preload
Commonly used forWeb Fonts; Also great for critical JS & CSS ﬁles
VS
hGps://speakerdeck.com/addyosmani/the-browser-hackers-guide-to-instant-loading

Subjective
Performance
Improves
Engagement,Too
How do we make waits feel faster?

For 2 Sec+ Waits: Progress Bars
Chris Harrison, ZhiquanYeo, Scott E. Hudson
Carnegie Mellon
hGp://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
Progress bars with backwards
decelerating bands feel
12% faster

Progress Bars
hGp://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf

MEASUREMENT3. MEASUREMENT

#SearchLove @goutaste testmysite.thinkwithgoogle.com
These are
the basics
we all still
get wrong
PageSpeed Tool Scores Aren’t Helpful
But the Advice Can Sometimes StillTellYou Something
EngagementCrawling & Indexing Measurement

WebPageTest Has More Useful Feedback
PRO TIP: Try webpagetest.org/easy for throGled, low-end device

Performance Tab in
Chrome Dev Tools
(Formerly Called ‘Timeline’)
More Simulated
‘Lab’Testing

Reality:
Load metrics aren’t a single number &
real user metrics paint a fuller picture
hGps://youtu.be/6Ljq-Jn-EgU

#SearchLove @goutaste Learn more about using PerformanceObserver: hGps://developers.google.com/web/
updates/2017/06/user-centric-performance-metrics
But beware of survivorship bias
Track Real Users’ Load Times with Browser APIs (like
PerformanceObserver)

Measuring “Installs”
from the Chrome
PWA Install Banner

Measuring “Installs”
window.addEventListener('beforeinstallprompt', function(e) {
// beforeinstallprompt Event fired
// e.userChoice will return a Promise.
// For more details read: https://developers.google.com/web/fundamentals/getting-started/primers/promises
e.userChoice.then(function(choiceResult) {
console.log(choiceResult.outcome);
if(choiceResult.outcome == 'dismissed') {
console.log('User cancelled home screen install');
}
else {
console.log('User added to home screen');
}
});
});

Measuring
“Launches”
Add a tracking
parameter to your
“start_url” in the
App Manifest

#SearchLove @goutaste bit.ly/track-oﬄine
How Do You Record Offline “Traffic”?

Measuring Push Notifications
bit.ly/GA-push-tracking

Thank You!
var me = {
name: “Emily Grossman”,
title: “Director of App Strategy”,
work: “MobileMoxie”,
twitter: “@goutaste”,
house: “slytherin”
};
var cat = {
name: “Daenerys Furborn of the House
Grossman, First of Her Name, the Unfed,
Queen of the Bengals, Catleesi of the
Great Scratching post, Breaker of Treats
and Mother of Cuddles”
};

Super-Smart, Helpful People
@ipullrank
@samccone @slightlylate
Technical SEO
Performance PWAs & Perf
@basgr
Performance & SEO
@addyosmani
PWAs & Chrome
@theLarkInn
Webpack
@bart_goralewicz
JS SEO
@maxxeight
Technical & JS SEO
@jonoalderson
Robots & rants
@alexisksanders
Technical & JS SEO
@eywu
Technical & JS SEO
@suzzicks
Mobile

One Last Thing…
Bonus
Slide!

#SearchLove @goutaste hGps://caniuse.com/#search=service%20workers
Bonus
Slide!

Official Safari Support is Coming “Soon”…
hGps://jakearchibald.github.io/isserviceworkerready/
Bonus
Slide!

Polyfills
for Safari
& Older
Browsers
hGps://github.com/mathiasbynens/cache-polyﬁll

Bonus
Slide!

Lancôme USA
65% of their mobile web
users are on iOS
53% increase in session
length on iOS after
launching PWA
hGps://lancome-usa.com
Bonus
Slide!

Other Specifics for iOS
•  On iOS, Home Screen icons & splash don’t come from
App Manifest
•  Specify app attributes with link tags in the <head>:
–  Icon: <link rel="apple-touch-icon" href="/custom_icon.png">
–  Launch Screen Image: <link rel="apple-touch-startup-image" href="/
launch.png">
–  App Name: <meta name="apple-mobile-web-app-title" content="AppTitle">
–  Enable stand-alone mode: <meta name="apple-mobile-web-app-capable"
content="yes">
–  Change status bar color: <meta name="apple-mobile-web-app-status-bar-
style" content="black”>
•  There’s also a Polyﬁll for ^this: https://github.com/
boyofgreen/manUp.js/
Bonus
Slide!

From Web Site to Web App: Fantastic Optimisations and Where To Find Them

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to From Web Site to Web App: Fantastic Optimisations and Where To Find Them

Similar to From Web Site to Web App: Fantastic Optimisations and Where To Find Them (20)

More from MobileMoxie

More from MobileMoxie (19)

Recently uploaded

Recently uploaded (20)

From Web Site to Web App: Fantastic Optimisations and Where To Find Them