5. #SearchLove @goutaste
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
6. #SearchLove @goutaste
Can We Have The Best of Both?
The REACH of
a website
The ENGAGEMENT
of an app
Image: hGp://bit.ly/platypus-keytar
9. #SearchLove @goutaste
What is a Single Page Web App?
bit.ly/app-shell-img
Single page
persists with
branding
elements
Content changes
without full
page reload
11. #SearchLove @goutaste
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/
23. #SearchLove @goutaste
Web Apps Don’t Have to Change URLs to
Change Content on the Page
Even on the finance tab, the URL still stays the same
Crawling & Indexing
24. #SearchLove @goutaste
But a Web Page Needs a URL To Get Indexed
Crawling & Indexing
No /finance URL
existed, so no /finance
page got indexed!
25. #SearchLove @goutaste
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
27. #SearchLove @goutaste
Long Live the History API
! Change URLs in the
address bar without
reloading the whole
page
! Allow for effec:ve use
of the “back” bu?on
hGps://css-tricks.com/using-the-html5-history-api/
Crawling & Indexing
31. #SearchLove @goutaste
Welcome to the JavaScript Web
View Source Inspect Element
Original HTML The DOM as it was interpreted by
the browser.
Crawling & Indexing
36. #SearchLove @goutaste
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
44. #SearchLove @goutaste
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.
“
“
-- Jeff Whelpley
Crawling & Indexing
50. #SearchLove @goutaste
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
58. #SearchLove @goutaste
The App-Like Web: Progressive Web Apps
EngagementCrawling & Indexing
Launch from homescreen/
Fullscreen mode
Send push notifications“Install” web app:
Add to Homescreen web banner
62. #SearchLove @goutaste
PWAs = Death to the Dino
(Someone else made this illustraNon, and I photographed it. Now I cannot remember who. SORRY.)
EngagementCrawling & Indexing
77. #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
EngagementCrawling & Indexing
81. #SearchLove @goutaste
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 offline” button)
hGp://bit.ly/sw-caching
EngagementCrawling & Indexing
108. #SearchLove @goutaste
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”
};
114. #SearchLove @goutaste
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!
115. #SearchLove @goutaste
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 Polyfill for ^this: https://github.com/
boyofgreen/manUp.js/
Bonus
Slide!