from web site to web app: fantastic optimisations and where to find them

#SearchLove@goutaste

From Website to Web-App: Fantastic Optimisations

and Where 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

MonthlyUniqueVisitorsTop1kwebproper+esvs.top1kapps

Data:comScoreMobileMetrixAge18+June2016


Native Apps Have Great Engagement

9.3

188.6

AverageMinutesPerUserTop1kwebproper+esvs.top1kapps

Data:comScoreMobileMetrixAge18+June2016


Can We Have The Best of Both?

TheREACHofawebsite

TheENGAGEMENTofanapp

Image:hGp://bit.ly/platypus-keytar


What is a Web App?

TradiNonalMulNpageWebsite SinglePageAppLifecycle

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 changeswithout fullpage reload


What is a Progressive Web App?

Responsive Secure Fast

Downloadable WorksOffline PushNoNficaNons


Why are PWAs popular? Mobilesalesincreasedby18%YoY

43%increaseinsessions/user100%increaseinsessionduraNon 80%improvementinloadNme

30%higherConversionRatethannaNveappinTier3ciNes20%ofPWAbookingsarefromuserswho’duninstallednaNveapp

Homepageloadscompletelyin.8seconds

CustomeracquisiNoncostis10Xless Shoppersspend20%moreHmethanonpreviousmobilesite

40%lowerbounceratethanonpreviousmobilesite

hGps://www.pwastats.com/


The Web is Becoming Full of Web Apps & PWAs

Image © 2016 Warner Bros All Rights Reserved


Current & Imminent PWAs

Source:GoogleI/O2017


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’

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


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

!  ChangeURLsintheaddressbarwithoutreloadingthewholepage

!  Allowforeffec:veuseofthe“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 ViewSource InspectElement

Crawling & Indexing


Welcome to the JavaScript Web ViewSource InspectElement

OriginalHTML TheDOMasitwasinterpretedbythebrowser.

Crawling & Indexing


Schedule

Crawl Index Rank

KnownURLs

Internet

Ye Olde Days*

*andmanysearchenginestoday

Crawling & Indexing


Schedule

Crawl Index Rank

Render!

KnownURLs

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 Luck With 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

And What 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 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!

KnownURLs

Internet

How Google Can Work Today Crawling & Indexing


Schedule

Crawl Index Rank

Render!

KnownURLs

Internet

But if we render, Google doesn’t have to Crawling & Indexing


Server Side Rendering Your Content

h?ps://www.youtube.com/watch?v=0wvZ7gakqV4

IfyousearchforanycompeNNvekeywordterms,it’salwaysgoingtobeserverrenderedsites.AndthereasonisbecausealthoughGoogledoesindexclient-siderenderedHTML,it’snotperfectyetandothersearchenginesdon’tdoitaswell.SoifyoucareaboutSEO,yous+llneedtohaveserver-renderedcontent.

“ “

--JeffWhelpley

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”?

JavaScriptcodethatcanrunonboththeclientandtheserver.Synonyms:UniversalJavaScript,SharedJavaScript,PortableJavascript

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 For You

Prerender.io


Option #2: Focus Only on Getting Google to Render Your Client-side JS Effectively

“ “ Crawling & Indexing

hGps://www.chromestatus.com/features#milestone%3C%3D41hGps://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win/310958/


Use Feature

Detection &

“Polyfills”

hGps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

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? Mobilesalesincreasedby18%YoY

43%increaseinsessions/user100%increaseinsessionduraNon 80%improvementinloadNme

30%higherConversionRatethannaNveappinTier3ciNes20%ofPWAbookingsarefromuserswho’duninstallednaNveapp

Homepageloadscompletelyin.8seconds

CustomeracquisiNoncostis10Xless Shoppersspend20%moreHmethanonpreviousmobilesite

40%lowerbounceratethanonpreviousmobilesite

hGps://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 EngagementCrawling & Indexing


PWAs = Death to the Dino

(SomeoneelsemadethisillustraNon,andIphotographedit.NowIcannotrememberwho.SORRY.)




Basic PWA Technical Requirements



1. App Manifest

hGp://bit.ly/webapp-manifest

Chrome Dev Tools ViewJSON file you link to in your <head>



2. Service Worker

WebApp Network

Cache

ServiceWorker

Get/hero.png

Iborrowedthisanalogyfrom@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.

EngagementCrawling & IndexingImage © 2016 Warner Bros All Rights Reserved


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 Up Your 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 Up Your 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



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

" InlinemostcriNcalCSS&JS

" Removeallrender-blockingscriptsfromthe<head>

hGps://youtu.be/6Ljq-Jn-EgU




But I’ve Done All This & My First

Paint Times Are ROCKING

“ “ - Someone in the audience




OneoftheIssuesWithServer-SideRenderingis

TheTrade-OffWithTimeto

InteracHve

SimulatedSlowNetworkhGps://youtu.be/6Ljq-Jn-EgU


TTI has a �high

correlation with

conversion rates

bit.ly/google-measure-performance


#SearchLove@goutasteSeeAlso:hGp://bit.ly/code-splitng-webpackREADTHISTOSTART:hGps://survivejs.com/webpack/building/code-splitng/


" BreakupexisNngJSintosmallerchunks(“CodeSplitng”)

Make it Useable Faster: Minimise Time Between FMP & TTI


" BreakupexisNngJSintosmallerchunks(“CodeSplitng”)

" FollowthePRPL(‘purple’)PaGern*

hGp://bit.ly/push-render-precache-lazyload

*”push”referencesH/2pushandrequiresh?p2


Make it Useable Faster: Minimize Time Between FMP & TTI


Link Rel=Preload

Pre-loadislikesaying,“Hey,browser!Here’saresourceyou’regoingtoneedlateron,sostartloadingitnow.”

•  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

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, Zhiquan Yeo, Scott E. HudsonCarnegie 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


#[email protected]

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 EngagementCrawling & Indexing Measurement

PROTIP:Trywebpagetest.org/easyforthroGled,low-enddevice


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@goutasteLearnmoreaboutusingPerformanceObserver: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


#[email protected]/track-offline

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

TechnicalSEO

PerformancePWAs&Perf

@basgrPerformance&SEO

@addyosmaniPWAs&Chrome

@theLarkInnWebpack

@bart_goralewiczJSSEO

@maxxeightTechnical&JSSEO

@jonoaldersonRobots&rants

@alexisksandersTechnical&JSSEO

@eywuTechnical&JSSEO

@suzzicksMobile

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

BonusSlide!


Official Safari Support is Coming “Soon”…

hGps://jakearchibald.github.io/isserviceworkerready/

BonusSlide!


Polyfills for Safari & Older

Browsers

hGps://github.com/mathiasbynens/cache-polyfill

BonusSlide!


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

BonusSlide!


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/

BonusSlide!

from web site to web app: fantastic optimisations and where to find them

Marketing