From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web

#SearchLove @goutaste
From
Website to
Web-App:
Index,
Optimize &
Audit

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 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 Website Web App Lifecycle
Images: http://bit.ly/2rouUqH

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

What is a Progressive Web App?
Responsive Secure Fast
Downloadable Works Offline Push Notifications

Why are they 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
Photo: https://visualhunt.com/f/photo/3943667382/a851db711b/

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
Photo: http://bit.ly/javascript-cat

Photo: http://bit.ly/2rEGvlW

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

You’ll Still See Plenty of Great Web
Apps That Look Like This in Google

Or This…
GIF: http://bit.ly/OOH-CAT

We (SEOs) Can Help

Indexing Optimizing Auditing
Clean URLs
Canonicals
Rendering
Mobile Friendly
SERP CTR
Speed
Crawling & Indexing
“App-iness”
Speed
Engagement

INDEXING

1. Clean URLs
Photo: https://visualhunt.com/f/photo/5542857895/8f186be4b0/

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

Outweb.IO :
An Indexing Sob Story

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

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

Long Live the History API
Leverage HTML5
pushState()
Change URLs in the
address bar without
reloading the whole page
Great for Search Engines
& users (hello, sharing!)
https://css-tricks.com/using-the-html5-history-api/

Canonicals.
Canonicals Everywhere.
https://yoast.com/rel-canonical/

3. Rendering

Welcome to the JavaScript Web
View Source Inspect Element

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

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

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

Say a prayer to
the god of your
choice &
hope Google
figures out your
client-side
JavaScript?

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

#SearchLove @goutasteInline vs. External vs. Bundled makes a difference:
https://goralewicz.com/blog/javascript-seo-experiment/
@bart_goralewicz
Many JS Frameworks Still Struggle To Make It In
Time Without Additional Optimizations

Client Side vs. Server Side Rendering

Client Side Rendering
Bonus
Slide!
Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/

Server Side Rendering
Bonus
Slide!
Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/

Schedule
Crawl Index Rank
Render!
Known
URLs
Internet
If We Render on Our Server…

Client Side vs. Server Side Rendering
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

But Without Any Client-Side, We’re Reloading
the Whole Page on Each Nav For Our Users

WTF Is “Isomorphic JavaScript”?

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

Why Isomorphic?
Perceived
Performance

Why Isomorphic?
Perceived
Performance
SEO

Why Isomorphic?
Perceived
Performance
SEO Maintainability

Isomorphism is a Spectrum
@spikebrehm http://bit.ly/isomorphic-deck

Ye Olde Days
(multi-page applications)
Circa 2011
(single-page applications)
Today
(Hybrid apps)
JavaScript Web – A History
https://www.slideshare.net/spikebrehm/2014-0313fluent/20-
Ye_olde_daysfatserver_thinclient
Bonus
Slide!
@spikebrehm

SSR With Vue.js
@addyosmani https://youtu.be/aCMbSyngXB4

Configuring SSR With React

Use Headless Browsers to render initial state for
users & search engines
http://bit.ly/headless-chrome
Your Other Options?

Your Other Options?
(or similar)

This solution
leverages
prerender.io!
http://bit.ly/moz-angularjs

OPTIMIZATION

1. Optimize for “Mobile Friendliness”

Improve Mobile Usability
Remove Flash
Configure
ViewPorts
Tt!
Use Legible
Font Size
Space Out Touch
Elements
Search Console Mobile Usability Report: support.google.com/webmasters/answer/6101188?hl=en

Interstitials VS Banners
Mobile Friendly!NOT Mobile Friendly!

2. Optimize SERP CTR with Structured Data
https://developers.google.com/search/docs/data-types/books
 News/
Articles
 Books
 Courses
 Datasets
 Events
 Fact Check
 Local
Business
 Top Places
(beta)
 Music
 Podcasts
 Products
 Recipes
 Reviews
 TV
 Movies
 Videos
 Live (beta)
 Software
(beta)

Schema
moz.com/blog/json-ld-for-beginners

3. Optimize for Mobile Speed

#SearchLove @goutasteSource: @lukew

Do The Basics
Put Everything on a Diet:
– Smaller files
– Compress everything
– Less unnecessary files
– Less overall requests
– Don’t send code the
page doesn’t need
GIF: https://visualhunt.com/photo/44460/

New in Chrome Dev Tools (“Coverage” Tab)
Keep Track of Potential JS & CSS Savings

“I’m a Wordpress
Theme with 23 JS
libraries & 20
stylesheets!”

Improving Page Speed with Images
Sprites File Size Responsive
Images.org
Image Server
Quality: 85%
Width: 300px
Quality: 70%
Width: 150px
Quality: 326 PPI
Width: 200px

1. First Paint 2. First Contentful Paint
“Is it happening?”
@addyosmani http://bit.ly/performance-kpis

Make it Happen Faster:
Speed Up Time to FP & FCP
 Inline critical CSS &
JS
 Remove all render-
blocking scripts
from the <head>
https://youtu.be/6Ljq-Jn-EgU

“Is it useful?” “Is it useable?”
3. First Meaningful
Paint
4. Time to Interactive
@addyosmani http://bit.ly/performance-kpis

One of the
Issues With
Server-Side
Rendering is
The Trade-
Off With
Time to
Interactive
Simulated Slow Networkhttps://youtu.be/6Ljq-Jn-EgU

Make it Useable Faster:
Minimize Time Between FMP & TTI
 Ship less JS

 Ship less JS
 Break up existing JS
into smaller chunks
(“Code Splitting”)
See Also: http://bit.ly/code-splitting-webpack
http://bit.ly/performance-kpis

 Ship less JS
 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

#SearchLove @goutasteRead: bit.ly/http2-intro
Image: kinsta.com/learn/what-is-http2/#goal_of_creating_http2
HTTP/2 enables full request & response multiplexing
Bonus
Slide!

• Pre-load can specify the download “as” =
• "script",
• "style",
• "image",
• "media",
• "document”
bit.ly/what-is-rel-preload
Rel=“Preload”
HTTP/2 + PreLoad = Moves the ‘start download’ time of a critical asset closer to initial request

Bonus
Slide!

4. Optimize for Mobile Presentation & Engagement

HTTPS Will Be Table Stakes
http://bit.ly/chrome-https

HTTPS
http://bit.ly/aleyda-https

Service Workers
Service Workers are so powerful, browsers require HTTPS for you to register them

Service
Workers Add
Performance
Boosts on
Repeat Visits

Cache App ‘Shell’
Bonus
Slide!
https://developers.google.com/web/fundamentals/architecture/app-shell

Service Workers
Can Even Give
Websites Offline
Functionality

When Combined With An App Manifest

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

Service Workers + App Manifest
Enables “Installing” Websites

#SearchLove @goutastehttps://caniuse.com/#search=service%20workers

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

Create PWAs ‘By Default’ via React, Preact, or Vue.js
Preact CLI

AUDITING

1. Audit for Crawling & Indexing Issues

‘Lab Test’
Troubleshooting
• Fetch & Render
• Fetch & Render as
any bot w/ timeout
• Compare Source &
‘outerHTML’
• Headless Chrome

https://www.google.com/webmasters/tools/go
oglebot-fetch
Fetch & Render
As Googlebot

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

Compare Source & ‘outerHTML’
@justinrbriggs https://www.briggsby.com/auditing-javascript-for-seo/

2. Audit for App-iness

PWA Checklist
http://bit.ly/pwa-checklist

Lighthouse

3. Audit for Speed

#SearchLove @goutastetestmysite.thinkwithgoogle.com
These are
the basics
we all still
get wrong
PageSpeed Scores Aren’t All That Helpful
But the Advice Can Still Tell You a Lot

WebPageTest Has More Useful Feedback

Performance Tab in Chrome Dev Tools
(Formerly Called ‘Timeline’)

1. First Paint 2. First Contentful Paint
“Is it happening?”
http://bit.ly/performance-kpis@addyosmani

“Is it useful?” “Is it useable?”
3. First Meaningful
Paint
4. Time to Interactive
http://bit.ly/performance-kpis@addyosmani

Measuring
The Metric
First Paint
First Contentful Paint
First Meaningful Paint
Time to Interactive
The Tool
Chrome DevTools 60+ Performance Observer Tab
Chrome DevTools 60+ Performance Observer Tab
Track loading of ‘Hero’ Elements (scripts)
github.com/GoogleChrome/tti-polyfill

Reality:
Load metrics aren’t a single number

Real User Metrics (RUM) Paint
a Fuller Picture

Indexing
Optimizing
Auditing

INDEXING CHECKLIST
 Make content crawlable:
 Server-side or hybrid rendering
 If you can’t:
 Headless Chrome pre-rendering
 Prerender.io or similar
 Make sure your client-side JS renders in
4-5 seconds or less & test rigorously
 Provide clean URLs
 Leverage the History API
 No hashes or hashbangs
 Reconsider/ migrate ‘escaped
fragments’
 Clarify everything with Canonicals

OPTIMIZATION CHECKLIST
 Optimize for Mobile Friendly
 Fonts/ tap targets
 No intrusive interstitials
 Optimize for CTR with Schema
 Optimize for Speed KPIs (FP, FCP, FMP, TTI):
 Minimize & compress code & images
 Inline critical CSS & JS
 Remove all render-blocking scripts from the <head>
 Break up existing JS into smaller chunks (“Code Splitting”)
 Follow the PRPL (‘purple’) Pattern
 Optimize for Engagement & UX
 HTTPS
 Service Worker & App Manifest (progressive web app
features)
 App shell caching
 Offline Caching
 Installable
 Load as full screen
 Push notifications
 Polyfills for unsupported browsers

AUDITING CHECKLIST
 Audit for Crawling & Indexing
 Fetch & Render (Googlebot)
 Fetch & Render As Any Bot
 Compare Source & Outer HTML
 Headless Chrome
 Audit for App-iness
 Checklist:
https://developers.google.com/web/progressive-web-
apps/checklist
 Lighthouse
 Cross-browser testing
 BrowserStack.com, Browserling.com or BrowserShots.org to
ensure your PWA is cross browser compatible.
 Audit for Speed
 PageSpeed Tool
 WebPage Test, Chrome Dev Tools
 Actual User Data (Real User Metrics)

Thank You!
var me = {
name: “Emily Grossman”,
title: “Director of App Strategy”,
work: “MobileMoxie”,
twitter: “@goutaste”
};
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
@_developit
Creator of Preact
@addyosmani
PWAs
@theLarkInn
Webpack
@bart_goralewicz
JS SEO
@maxxeight
Technical & JS SEO
@jonoalderson
Weird shit
@justinrbriggs
JS SEO
@dsottimano
Technical & JS SEO
@suzzicks
Mobile

From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web

Similar to From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web (20)

More from MobileMoxie

More from MobileMoxie (17)

Recently uploaded

Recently uploaded (20)

From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web

Editor's Notes