SearchLove London 2017 | Emily Grossman | From Website to Web-App: Fantastic Optimisations and Where to Find Them

#SearchLove @goutaste
FromWebsite toWeb-App:
Fantastic Optimisations
andWhere to Find Them

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

How DoYou Choose?

Websites Have Great Reach
11.4
4.0
Monthly Unique Visitors
Top 1k web properties 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 properties 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: http://bit.ly/platypus-keytar

What is a Web App?
Traditional Multipage Website Single Page App Lifecycle
Images: http://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 Offline Push Notifications

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

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

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
Image © 2016 Warner Bros All Rights Reserved

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’
Offline &
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 finance tab, the URL still stays the
same
Crawling & Indexing

But a Web Page Needs a URL To Get Indexed
Crawling & Indexing
No /finance URL
existed, so no
/finance 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

https://example.com/foo
https://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 effective use
of the “back” button
https://css-tricks.com/using-the-html5-history-api/
Crawling & Indexing

Canonicals.
Canonicals Everywhere.
https://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 Developer You Probably Work With

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

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

So, say a
prayer
to the god of
your choice &
hope Google
figures 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 Rendering Your Content
https://www.youtube.com/watch?v=0wvZ7gakqV4
If you search for any competitive 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 still need to
have server-rendered content.
“
“
-- Jeff Whelpley
Crawling & Indexing

After Your Server-Rendered Content Loads,
Then Boot Up Your Client-Side JS On Top for
Further Nav
Crawling & Indexing
(Otherwise You Lose the Benefits 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 http://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.
http://bit.ly/headless-chrome
Option #1b?
Crawling & Indexing

Crawling & Indexing
github.com/GoogleChrome/rendertron
Or Leverage Existing Solutions
That Do This For You
Prerender.io

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

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

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

Fetch & Render As Any Bot
@maxxeight https://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 duration 80% improvement in load time
30% higher Conversion Rate than
native app in Tier 3 cities
20% of PWA bookings are from
users who’d uninstalled native app
Homepage loads completely in .8
seconds
Customer acquisition cost is 10X less Shoppers spend 20% more time
than on previous mobile site
40% lower bounce rate than on
previous mobile site
https://www.pwastats.com/
EngagementCrawling & Indexing

The App-Like Web: Progressive Web Apps
Launch from homescreen/
Fullscreen mode
Send push notifications“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 illustration, and I photographed it. Now I cannot remember who. SORRY.)

Basic PWA Technical Requirements

1. App Manifest
http://bit.ly/webapp-manifest
Chrome Dev Tools ViewJSON file you link to in your
<head>

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

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 https://youtu.be/aCMbSyngXB4
create-react-app vue init pwa

Lighthouse

Speeding Things Up

Source: @lukew

Improved Engagement With Speed
http://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?
http://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 Up Your Service Worker to
Cache Essential Assets At Install
http://bit.ly/sw-caching

Cache App ‘Shell’
https://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 offline” button)
http://bit.ly/sw-caching

But That Doesn’t Mean You Are Done &
Can Avoid Optimizing 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

https://images.guide@addyosmani
https://images.guide

Best Practices for
Fast First Load
 Inline most critical
CSS & JS
 Remove all render-
blocking scripts
from the <head>
https://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-
Off With
Time to
Interactive
Simulated Slow Networkhttps://youtu.be/6Ljq-Jn-EgU

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

#SearchLove @goutasteSee Also: http://bit.ly/code-splitting-webpack
READ THIS TO START: https://survivejs.com/webpack/building/code-splitting/
Break up existing JS
into smaller chunks
(“Code Splitting”)
Make it Useable Faster:
Minimize Time Between FMP & TTI

Break up existing JS
into smaller chunks
(“Code Splitting”)
 Follow the PRPL
(‘purple’) Pattern*
http://bit.ly/push-render-precache-lazyload
*”push” references H/2 push and requires http2
Make it Useable Faster:
Minimize Time Between FMP & TTI

Link Rel=Preload
• 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 for Web Fonts; Also great for critical JS & CSS files
VS
https://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, Zhiquan Yeo, Scott E. Hudson
Carnegie Mellon
http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
Progress bars with
backwards decelerating
bands feel
12% faster

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

MEASUREMENT3. MEASUREMENT

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

WebPageTest Has More Useful Feedback
PRO TIP: Try webpagetest.org/easy for throttled, 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
https://youtu.be/6Ljq-Jn-EgU

#SearchLove @goutasteLearn more about using PerformanceObserver:
https://developers.google.com/web/updates/2017/06/user-centric-performance-metrics
But beware of survivorship b
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 @goutastebit.ly/track-offline
How DoYou 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
PerformancePWAs & 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

SearchLove London 2017 | Emily Grossman | From Website to Web-App: Fantastic Optimisations and Where to Find Them

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (16)

Ähnlich wie SearchLove London 2017 | Emily Grossman | From Website to Web-App: Fantastic Optimisations and Where to Find Them

Ähnlich wie SearchLove London 2017 | Emily Grossman | From Website to Web-App: Fantastic Optimisations and Where to Find Them (20)

Mehr von Distilled

Mehr von Distilled (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

SearchLove London 2017 | Emily Grossman | From Website to Web-App: Fantastic Optimisations and Where to Find Them