From Web Site to Web App: Fantastic Optimisations and Where To Find Them
-
Upload
mobilemoxie -
Category
Marketing
-
view
225 -
download
0
Transcript of 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
#SearchLove@goutaste
So Many Format Options to Display Your Content on “The Internet”
#SearchLove@goutaste
How Do You Choose?
#SearchLove@goutaste
Websites Have Great Reach
11.4
4.0
MonthlyUniqueVisitorsTop1kwebproper+esvs.top1kapps
Data:comScoreMobileMetrixAge18+June2016
#SearchLove@goutaste
Native Apps Have Great Engagement
9.3
188.6
AverageMinutesPerUserTop1kwebproper+esvs.top1kapps
Data:comScoreMobileMetrixAge18+June2016
#SearchLove@goutaste
Can We Have The Best of Both?
TheREACHofawebsite
TheENGAGEMENTofanapp
Image:hGp://bit.ly/platypus-keytar
#SearchLove@goutaste
What is a Web App?
TradiNonalMulNpageWebsite SinglePageAppLifecycle
Images:hGp://bit.ly/2rouUqH
#SearchLove@goutaste
What is a Single Page Web App?
bit.ly/app-shell-img
#SearchLove@goutaste
What is a Single Page Web App?
bit.ly/app-shell-img
Single page persists with
branding elements
Content changeswithout fullpage reload
#SearchLove@goutaste
What is a Progressive Web App?
Responsive Secure Fast
Downloadable WorksOffline PushNoNficaNons
#SearchLove@goutaste
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/
#SearchLove@goutaste
The Web is Becoming Full of Web Apps & PWAs
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
Current & Imminent PWAs
Source:GoogleI/O2017
#SearchLove@goutaste
But Lots of People Don’t Consider SEO for Web Apps
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
Web Apps rely on JavaScript & JavaScript is hard for us
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
“But I’m not a developer…”
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
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
#SearchLove@goutaste
So You’ll Still See Plenty of Great Web Apps That Look Like This
Only one page indexed, despite more content!
#SearchLove@goutaste
Or Sometimes This…
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
We Can Help
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
MeasurementEngagementCrawling & Indexing
URLs
Rendering
“App-iness”
Speed/ Performance
Speed
‘Installs’
Offline & Messages
What We’ll Cover Today
#SearchLove@goutaste
1. CRAWLING & INDEXING
Image © 2016 Warner Bros All Rights Reserved
#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
#SearchLove@goutaste
But a Web Page Needs a URL To Get Indexed
Crawling & Indexing
No /finance URL existed, so no /finance
page got indexed!
#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
#SearchLove@goutaste
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
#SearchLove@goutaste
Long Live the History API
! ChangeURLsintheaddressbarwithoutreloadingthewholepage
! Allowforeffec:veuseofthe“back”bu?on
hGps://css-tricks.com/using-the-html5-history-api/
Crawling & Indexing
#SearchLove@goutaste
Canonicals.
Canonicals Everywhere.hGps://yoast.com/rel-canonical/
Crawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
Let’s talk about rendering…
Crawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
Welcome to the JavaScript Web ViewSource InspectElement
Crawling & Indexing
#SearchLove@goutaste
Welcome to the JavaScript Web ViewSource InspectElement
OriginalHTML TheDOMasitwasinterpretedbythebrowser.
Crawling & Indexing
#SearchLove@goutaste
Schedule
Crawl Index Rank
KnownURLs
Internet
Ye Olde Days*
*andmanysearchenginestoday
Crawling & Indexing
#SearchLove@goutaste
Schedule
Crawl Index Rank
Render!
KnownURLs
Internet
How Google Can Work Today Crawling & Indexing
#SearchLove@goutaste
Crawling & Indexing
#SearchLove@goutaste
Crawling & Indexing
Search Engines can render JS now. It’s not a
problem for SEO.
“ “ - A Developer You Probably Work With
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
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
#SearchLove@goutaste
Crawling & Indexing
And What About Other Search Engines?
@bart_goralewicz hGps://moz.com/blog/search-engines-ready-for-javascript-crawling
#SearchLove@goutaste
So, say a prayer to the god of your choice & hope Google figures out your JavaScript?
Crawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
You Have A Few (Better) Options
Crawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
Option #1: You Handle The “Rendering” Before Google Has To
& send Google something they can understand without rendering
Crawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
Client Side vs. Server Side Rendering
Crawling & Indexing
#SearchLove@goutaste
Schedule
Crawl Index Rank
Render!
KnownURLs
Internet
How Google Can Work Today Crawling & Indexing
#SearchLove@goutaste
Schedule
Crawl Index Rank
Render!
KnownURLs
Internet
But if we render, Google doesn’t have to Crawling & Indexing
#SearchLove@goutaste
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
#SearchLove@goutaste
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)
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
Option #1a: “Isomorphic JavaScript”
Crawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
WTF Is “Isomorphic JavaScript”?
JavaScriptcodethatcanrunonboththeclientandtheserver.Synonyms:UniversalJavaScript,SharedJavaScript,PortableJavascript
Crawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
Isomorphism is a Spectrum
@spikebrehm hGp://bit.ly/isomorphic-deck
Crawling & Indexing
#SearchLove@goutaste
Isomorphism is a Spectrum Crawling & Indexing
#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
#SearchLove@goutaste
Crawling & Indexing
github.com/GoogleChrome/rendertron
Or Leverage Existing Solutions That Do This For You
Prerender.io
#SearchLove@goutaste
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/
#SearchLove@goutaste
Use Feature
Detection &
“Polyfills”
hGps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Crawling & Indexing
#SearchLove@goutaste
hGps://www.google.com/webmasters/tools/googlebot-fetch
Test in Chrome 41 and Fetch & Render
Crawling & Indexing
#SearchLove@goutaste
Fetch & Render As Any Bot
@maxxeight hGps://technicalseo.com/seo-tools/fetch-render/
Crawling & Indexing
#SearchLove@goutaste
2. ENGAGEMENT
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
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
#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
#SearchLove@goutaste
Offline in Action
EngagementCrawling & Indexing
#SearchLove@goutaste
The offline experience
your web-app delivers can
even be different from
the online experience
EngagementCrawling & Indexing
#SearchLove@goutaste
Offline-Only Content EngagementCrawling & Indexing
#SearchLove@goutaste
PWAs = Death to the Dino
(SomeoneelsemadethisillustraNon,andIphotographedit.NowIcannotrememberwho.SORRY.)
EngagementCrawling & Indexing
#SearchLove@goutaste
EngagementCrawling & Indexing
Basic PWA Technical Requirements
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
1. App Manifest
hGp://bit.ly/webapp-manifest
Chrome Dev Tools ViewJSON file you link to in your <head>
EngagementCrawling & Indexing
#SearchLove@goutaste
2. Service Worker
WebApp Network
Cache
ServiceWorker
Get/hero.png
Iborrowedthisanalogyfrom@jeffposnick
EngagementCrawling & Indexing
#SearchLove@goutaste
2. Service Worker
WebApp Network
Cache
ServiceWorker
Get/hero.png
Iborrowedthisanalogyfrom@jeffposnick
EngagementCrawling & Indexing
#SearchLove@goutaste
2. Service Worker
WebApp Network
Cache
ServiceWorker
Get/hero.png
Iborrowedthisanalogyfrom@jeffposnick
EngagementCrawling & Indexing
#SearchLove@goutaste
2. Service Worker
WebApp Network
Cache
ServiceWorker
Get/hero.png
Iborrowedthisanalogyfrom@jeffposnick
EngagementCrawling & Indexing
#SearchLove@goutaste
3. https Mobile Friendly Website
EngagementCrawling & Indexing
#SearchLove@goutaste
#SearchLove@goutaste
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
#SearchLove@goutaste
PWAs ‘By Default’ via React, Preact, or Vue CLIs
Preact CLI
@addyosmani hGps://youtu.be/aCMbSyngXB4
EngagementCrawling & Indexing
create-react-app vue init pwa
#SearchLove@goutaste
Lighthouse
EngagementCrawling & Indexing
#SearchLove@goutaste
Speeding Things Up
EngagementCrawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
Source:@lukew
EngagementCrawling & Indexing
#SearchLove@goutaste
EngagementCrawling & Indexing
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
EngagementCrawling & Indexing
#SearchLove@goutaste
Service Workers
Can Speed Up Sites
on Repeat Views
EngagementCrawling & Indexing
#SearchLove@goutaste
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
EngagementCrawling & Indexing
#SearchLove@goutaste
Cache App ‘Shell’
hGps://developers.google.com/web/fundamentals/architecture/app-shell
EngagementCrawling & Indexing
#SearchLove@goutaste
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
EngagementCrawling & Indexing
#SearchLove@goutaste
But That Doesn’t Mean You Are Done & Can Avoid Optimising for Performance
EngagementCrawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
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
EngagementCrawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
EngagementCrawling & Indexing
hGps://images.guide@addyosmani
hGps://images.guide
#SearchLove@goutaste
Best Practices for Fast First Load
" InlinemostcriNcalCSS&JS
" Removeallrender-blockingscriptsfromthe<head>
hGps://youtu.be/6Ljq-Jn-EgU
EngagementCrawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
But I’ve Done All This & My First
Paint Times Are ROCKING
“ “ - Someone in the audience
EngagementCrawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
OneoftheIssuesWithServer-SideRenderingis
TheTrade-OffWithTimeto
InteracHve
SimulatedSlowNetworkhGps://youtu.be/6Ljq-Jn-EgU
#SearchLove@goutaste
OneoftheIssuesWithServer-SideRenderingis
TheTrade-OffWithTimeto
InteracHve
SimulatedSlowNetworkhGps://youtu.be/6Ljq-Jn-EgU
#SearchLove@goutaste
TTI has a �high
correlation with
conversion rates
bit.ly/google-measure-performance
EngagementCrawling & Indexing
#SearchLove@goutasteSeeAlso:hGp://bit.ly/code-splitng-webpackREADTHISTOSTART:hGps://survivejs.com/webpack/building/code-splitng/
EngagementCrawling & Indexing
" BreakupexisNngJSintosmallerchunks(“CodeSplitng”)
Make it Useable Faster: Minimise Time Between FMP & TTI
#SearchLove@goutaste
" BreakupexisNngJSintosmallerchunks(“CodeSplitng”)
" FollowthePRPL(‘purple’)PaGern*
hGp://bit.ly/push-render-precache-lazyload
*”push”referencesH/2pushandrequiresh?p2
EngagementCrawling & Indexing
Make it Useable Faster: Minimize Time Between FMP & TTI
#SearchLove@goutaste
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
EngagementCrawling & Indexing
#SearchLove@goutaste
Link Rel=Preload
EngagementCrawling & Indexing
Commonly used for Web Fonts; Also great for critical JS & CSS files
VS
hGps://speakerdeck.com/addyosmani/the-browser-hackers-guide-to-instant-loading
#SearchLove@goutaste
Subjective Performance
Improves Engagement, Too
How do we make waits feel faster?
EngagementCrawling & Indexing
Image © 2016 Warner Bros All Rights Reserved
#SearchLove@goutaste
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
EngagementCrawling & Indexing
#SearchLove@goutaste
Progress Bars
hGp://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
EngagementCrawling & Indexing
#SearchLove@goutaste
MEASUREMENT3. MEASUREMENT
Image © 2016 Warner Bros All Rights Reserved
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
#SearchLove@goutaste
WebPageTest Has More Useful Feedback EngagementCrawling & Indexing Measurement
PROTIP:Trywebpagetest.org/easyforthroGled,low-enddevice
#SearchLove@goutaste
Performance Tab in Chrome Dev Tools
EngagementCrawling & Indexing Measurement
(Formerly Called ‘Timeline’)
More Simulated ‘Lab’ Testing
#SearchLove@goutaste
Reality: Load metrics aren’t a single number & real user metrics paint a fuller picture
hGps://youtu.be/6Ljq-Jn-EgU
EngagementCrawling & Indexing Measurement
#SearchLove@goutasteLearnmoreaboutusingPerformanceObserver:hGps://developers.google.com/web/updates/2017/06/user-centric-performance-metrics
EngagementCrawling & Indexing Measurement
But beware of survivorship bias
Track Real Users’ Load Times with Browser APIs (like PerformanceObserver)
#SearchLove@goutaste
Measuring “Installs” from the Chrome
PWA Install Banner
EngagementCrawling & Indexing Measurement
#SearchLove@goutaste
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'); } });});
EngagementCrawling & Indexing Measurement
#SearchLove@goutaste
Measuring “Launches”Add a tracking parameter to your “start_url” in the App Manifest
EngagementCrawling & Indexing Measurement
#[email protected]/track-offline
How Do You Record Offline “Traffic”?
EngagementCrawling & Indexing Measurement
#SearchLove@goutaste
Measuring Push Notifications
bit.ly/GA-push-tracking
EngagementCrawling & Indexing Measurement
#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”
};
#SearchLove@goutaste
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@goutaste
One Last Thing… Image © 2016 Warner Bros All Rights Reserved
BonusSlide!
#SearchLove@goutastehGps://caniuse.com/#search=service%20workers
BonusSlide!
#SearchLove@goutaste
Official Safari Support is Coming “Soon”…
hGps://jakearchibald.github.io/isserviceworkerready/
BonusSlide!
#SearchLove@goutaste
Polyfills for Safari & Older
Browsers
hGps://github.com/mathiasbynens/cache-polyfill
BonusSlide!
#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
BonusSlide!
#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/
BonusSlide!