Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#SearchLove @goutaste
FromWebsite toWeb-App:
Fantastic Optimisations
andWhere to Find Them
#SearchLove @goutaste
So Many Format Options to Display
Your Content on “The Internet”
#SearchLove @goutaste
How DoYou Choose?
#SearchLove @goutaste
Websites Have Great Reach
11.4
4.0
Monthly Unique Visitors
Top 1k web properties vs. top 1k apps
Dat...
#SearchLove @goutaste
Native Apps Have Great Engagement
9.3
188.6
Average Minutes Per User
Top 1k web properties vs. top 1...
#SearchLove @goutaste
Can We Have The Best of Both?
The REACH of
a website
The ENGAGEMENT
of an app
Image: http://bit.ly/p...
#SearchLove @goutaste
What is a Web App?
Traditional Multipage Website Single Page App Lifecycle
Images: http://bit.ly/2ro...
#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
Cont...
#SearchLove @goutaste
What is a Progressive Web App?
Responsive Secure Fast
Downloadable Works Offline Push Notifications
#SearchLove @goutaste
Why are PWAs popular?
Mobile sales increased by 18% YoY
43% increase in sessions/ user
100% increase...
#SearchLove @goutaste
The Web is Becoming Full of Web Apps & PWAs
Image © 2016 Warner Bros All Rights Reserv
#SearchLove @goutaste
Current & Imminent PWAs
Source: Google I/O 2017
#SearchLove @goutaste
But Lots of People Don’t Consider
SEO for Web Apps
Image © 2016 Warner Bros All Rights Reserv
#SearchLove @goutaste
Web Apps rely on JavaScript &
JavaScript is hard for us
Image © 2016 Warner Bros All Rights Reserv
#SearchLove @goutaste
“But I’m not a developer…”
Image © 2016 Warner Bros All Rights Reserv
#SearchLove @goutaste
Things Are Changing, But
JavaScript is Also Hard for Search Engines*
*Search Engines means more than...
#SearchLove @goutaste
So You’ll Still See Plenty of Great
Web Apps That Look Like This
Only one page
indexed,
despite more...
#SearchLove @goutaste
Or Sometimes This…
Image © 2016 Warner Bros All Rights Reserved
#SearchLove @goutaste
We Can Help
Image © 2016 Warner Bros All Rights Reserv
#SearchLove @goutaste
MeasurementEngagementCrawling & Indexing
URLs
Rendering
“App-iness”
Speed/
Performance
Speed
‘Instal...
#SearchLove @goutaste
1. CRAWLING & INDEXING
Image © 2016 Warner Bros All Rights Reserv
#SearchLove @goutaste
Web Apps Don’t Have to Change URLs to
Change Content on the Page
Even on the finance tab, the URL st...
#SearchLove @goutaste
But a Web Page Needs a URL To Get Indexed
Crawling & Indexing
No /finance URL
existed, so no
/financ...
#SearchLove @goutaste
Old Linking Habits of JS-Heavy Web Applications
By default:
https://example.com/#/foo
For deprecated...
#SearchLove @goutaste
https://example.com/foo
https://example.com/foo
Death of the Hash & Hash-Bang
By default:
https://ex...
#SearchLove @goutaste
Long Live the History API
 Change URLs in the
address bar without
reloading the whole
page
 Allow ...
#SearchLove @goutaste
Canonicals.
Canonicals Everywhere.
https://yoast.com/rel-canonical/
Crawling & Indexing
Image © 2016...
#SearchLove @goutaste
Let’s talk about rendering…
Crawling & Indexing
Image © 2016 Warner Bros All Rights Reserv
#SearchLove @goutaste
Welcome to the JavaScript Web
View Source Inspect Element
Crawling & Indexing
#SearchLove @goutaste
Welcome to the JavaScript Web
View Source Inspect Element
Original HTML The DOM as it was interprete...
#SearchLove @goutaste
Schedule
Crawl Index Rank
Known
URLs
Internet
Ye Olde Days*
*and many search engines today
Crawling ...
#SearchLove @goutaste
Schedule
Crawl Index Rank
Render!
Known
URLs
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 ...
#SearchLove @goutaste
But Uh… Good LuckWith That
Googlebot may only be willing to wait 4-5 sec for your JS to render…
http...
#SearchLove @goutaste
Crawling & Indexing
AndWhat About Other Search Engines?
@bart_goralewicz https://moz.com/blog/search...
#SearchLove @goutaste
So, say a
prayer
to the god of
your choice &
hope Google
figures out
your
JavaScript?
Crawling & Ind...
#SearchLove @goutaste
You Have A Few
(Better) Options
Crawling & Indexing
Image © 2016 Warner Bros All Rights Reserv
#SearchLove @goutaste
Option #1:You Handle The “Rendering”
Before Google Has To
& send Google something they can understan...
#SearchLove @goutaste
Client Side vs. Server Side Rendering
Crawling & Indexing
#SearchLove @goutaste
Schedule
Crawl Index Rank
Render!
Known
URLs
Internet
How Google Can Work Today
Crawling & Indexing
#SearchLove @goutaste
Schedule
Crawl Index Rank
Render!
Known
URLs
Internet
But if we render, Google doesn’t have to
Crawl...
#SearchLove @goutaste
Server Side Rendering Your Content
https://www.youtube.com/watch?v=0wvZ7gakqV4
If you search for any...
#SearchLove @goutaste
After Your Server-Rendered Content Loads,
Then Boot Up Your Client-Side JS On Top for
Further Nav
Cr...
#SearchLove @goutaste
Option #1a:“Isomorphic JavaScript”
Crawling & Indexing
Image © 2016 Warner Bros All Rights Reserv
#SearchLove @goutaste
WTF Is “Isomorphic JavaScript”?
JavaScript code that can run on
both the client and the server.
Syno...
#SearchLove @goutaste
Isomorphism is a Spectrum
@spikebrehm http://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 J...
#SearchLove @goutaste
Crawling & Indexing
github.com/GoogleChrome/rendertron
Or Leverage Existing Solutions
That Do This F...
#SearchLove @goutaste
Option #2: Focus Only on Getting Google
to RenderYour Client-side JS Effectively
“ “
Crawling & Inde...
#SearchLove @goutaste
Use
Feature
Detection
&
“Polyfills”
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-...
#SearchLove @goutaste
https://www.google.com/webmasters/tools/go
oglebot-fetch
Test in Chrome 41
and Fetch & Render
Crawli...
#SearchLove @goutaste
Fetch & Render As Any Bot
@maxxeight https://technicalseo.com/seo-tools/fetch-render/
Crawling & Ind...
#SearchLove @goutaste
2.
ENGAGEMENT
Image © 2016 Warner Bros All Rights Reserv
#SearchLove @goutaste
Remember this?
Mobile sales increased by 18% YoY
43% increase in sessions/ user
100% increase in ses...
#SearchLove @goutaste
The App-Like Web: Progressive Web Apps
EngagementCrawling & Indexing
Launch from homescreen/
Fullscr...
#SearchLove @goutaste
Offline in Action
EngagementCrawling & Indexing
#SearchLove @goutaste
The offline
experience
your web-app
delivers can
even be
different from
the online
experience
Engage...
#SearchLove @goutaste
Offline-Only Content
EngagementCrawling & Indexing
#SearchLove @goutaste
PWAs = Death to the Dino
(Someone else made this illustration, and I photographed it. Now I cannot r...
#SearchLove @goutaste
EngagementCrawling & Indexing
Basic PWA Technical Requirements
Image © 2016 Warner Bros All Rights R...
#SearchLove @goutaste
1. App Manifest
http://bit.ly/webapp-manifest
Chrome Dev Tools ViewJSON file you link to in your
<he...
#SearchLove @goutaste
2. Service Worker
Web App Network
Cache
Service Worker
Get /hero.png
I borrowed this analogy from @j...
#SearchLove @goutaste
2. Service Worker
Web App Network
Cache
Service Worker
Get /hero.png
I borrowed this analogy from @j...
#SearchLove @goutaste
2. Service Worker
Web App Network
Cache
Service Worker
Get /hero.png
I borrowed this analogy from @j...
#SearchLove @goutaste
2. Service Worker
Web App Network
Cache
Service Worker
Get /hero.png
I borrowed this analogy from @j...
#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.
En...
#SearchLove @goutaste
PWAs ‘By Default’ via React, Preact, or Vue CLIs
Preact CLI
@addyosmani https://youtu.be/aCMbSyngXB4...
#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
http://wpostats.com
#SearchLove @goutaste@addyosmani
“The bloat of your baseline defines how
much headroom you have for app code”
How much is ...
#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(func...
#SearchLove @goutaste
Cache App ‘Shell’
https://developers.google.com/web/fundamentals/architecture/app-shell
EngagementCr...
#SearchLove @goutaste
Set UpYour Service Worker to Cache
Essential Assets on User Interaction
document.querySelector('.cac...
#SearchLove @goutaste
But That Doesn’t Mean You Are Done &
Can Avoid Optimizing for Performance
EngagementCrawling & Index...
#SearchLove @goutaste
Still Do The Basics
Put Everything on a Diet:
– Minify JS & CSS files
– Compress files &
images
– Le...
#SearchLove @goutaste
EngagementCrawling & Indexing
https://images.guide@addyosmani
https://images.guide
#SearchLove @goutaste
Best Practices for
Fast First Load
 Inline most critical
CSS & JS
 Remove all render-
blocking scr...
#SearchLove @goutaste
But I’ve Done
All This & My First
Paint Times Are
ROCKING
“ “
- Someone in the audience
EngagementCr...
#SearchLove @goutaste
One of the
Issues With
Server-Side
Rendering is
The Trade-
Off With
Time to
Interactive
Simulated Sl...
#SearchLove @goutaste
One of the
Issues With
Server-Side
Rendering is
The Trade-
Off With
Time to
Interactive
Simulated Sl...
#SearchLove @goutaste
TTI has a
high
correlation
with
conversion
rates
bit.ly/google-measure-performance
EngagementCrawlin...
#SearchLove @goutasteSee Also: http://bit.ly/code-splitting-webpack
READ THIS TO START: https://survivejs.com/webpack/buil...
#SearchLove @goutaste
Break up existing JS
into smaller chunks
(“Code Splitting”)
 Follow the PRPL
(‘purple’) Pattern*
h...
#SearchLove @goutaste
Link Rel=Preload
• Pre-load can specify the download “as” =
• "script", JavaScript file
• "style", S...
#SearchLove @goutaste
Link Rel=Preload
EngagementCrawling & Indexing
Commonly used for Web Fonts; Also great for critical ...
#SearchLove @goutaste
Subjective
Performance
Improves
Engagement,Too
How do we make waits feel
faster?
EngagementCrawling ...
#SearchLove @goutaste
For 2 Sec+ Waits: Progress Bars
Chris Harrison, Zhiquan Yeo, Scott E. Hudson
Carnegie Mellon
http://...
#SearchLove @goutaste
Progress Bars
http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
Engagemen...
#SearchLove @goutaste
MEASUREMENT3. MEASUREMENT
Image © 2016 Warner Bros All Rights Reserv
#SearchLove @goutastetestmysite.thinkwithgoogle.com
These
are the
basics
we all still
get
wrong
PageSpeed Tool Scores Aren...
#SearchLove @goutaste
WebPageTest Has More Useful Feedback
EngagementCrawling & Indexing Measurement
PRO TIP: Try webpaget...
#SearchLove @goutaste
Performance Tab in
Chrome Dev Tools
EngagementCrawling & Indexing Measurement
(Formerly Called ‘Time...
#SearchLove @goutaste
Reality:
Load metrics aren’t a single number
& real user metrics paint a fuller
picture
https://yout...
#SearchLove @goutasteLearn more about using PerformanceObserver:
https://developers.google.com/web/updates/2017/06/user-ce...
#SearchLove @goutaste
Measuring
“Installs” from the
Chrome PWA
Install Banner
EngagementCrawling & Indexing Measurement
#SearchLove @goutaste
Measuring “Installs”
window.addEventListener('beforeinstallprompt', function(e) {
// beforeinstallpr...
#SearchLove @goutaste
Measuring
“Launches”
Add a tracking
parameter to your
“start_url” in the
App Manifest
EngagementCraw...
#SearchLove @goutastebit.ly/track-offline
How DoYou 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”...
#SearchLove @goutaste
Super-Smart, Helpful People
@ipullrank
@samccone@slightlylate
Technical SEO
PerformancePWAs & Perf
@...
Upcoming SlideShare
Loading in …5
×

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

5,361 views

Published on

App-like websites can improve page speed and user engagement, but they also rely heavily on JavaScript and JS frameworks that can make many ‘SEO basics’ more technically complex. Emily will walk you through often-missed tactics to make web-apps indexable, optimised, and performant on mobile devices.

Published in: Marketing

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

  1. 1. #SearchLove @goutaste FromWebsite toWeb-App: Fantastic Optimisations andWhere to Find Them
  2. 2. #SearchLove @goutaste So Many Format Options to Display Your Content on “The Internet”
  3. 3. #SearchLove @goutaste How DoYou Choose?
  4. 4. #SearchLove @goutaste 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
  5. 5. #SearchLove @goutaste 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
  6. 6. #SearchLove @goutaste Can We Have The Best of Both? The REACH of a website The ENGAGEMENT of an app Image: http://bit.ly/platypus-keytar
  7. 7. #SearchLove @goutaste What is a Web App? Traditional Multipage Website Single Page App Lifecycle Images: http://bit.ly/2rouUqH
  8. 8. #SearchLove @goutaste What is a Single Page Web App? bit.ly/app-shell-img
  9. 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
  10. 10. #SearchLove @goutaste What is a Progressive Web App? Responsive Secure Fast Downloadable Works Offline Push Notifications
  11. 11. #SearchLove @goutaste 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/
  12. 12. #SearchLove @goutaste The Web is Becoming Full of Web Apps & PWAs Image © 2016 Warner Bros All Rights Reserv
  13. 13. #SearchLove @goutaste Current & Imminent PWAs Source: Google I/O 2017
  14. 14. #SearchLove @goutaste But Lots of People Don’t Consider SEO for Web Apps Image © 2016 Warner Bros All Rights Reserv
  15. 15. #SearchLove @goutaste Web Apps rely on JavaScript & JavaScript is hard for us Image © 2016 Warner Bros All Rights Reserv
  16. 16. #SearchLove @goutaste “But I’m not a developer…” Image © 2016 Warner Bros All Rights Reserv
  17. 17. #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
  18. 18. #SearchLove @goutaste So You’ll Still See Plenty of Great Web Apps That Look Like This Only one page indexed, despite more content!
  19. 19. #SearchLove @goutaste Or Sometimes This… Image © 2016 Warner Bros All Rights Reserved
  20. 20. #SearchLove @goutaste We Can Help Image © 2016 Warner Bros All Rights Reserv
  21. 21. #SearchLove @goutaste MeasurementEngagementCrawling & Indexing URLs Rendering “App-iness” Speed/ Performance Speed ‘Installs’ Offline & Messages What We’ll Cover Today
  22. 22. #SearchLove @goutaste 1. CRAWLING & INDEXING Image © 2016 Warner Bros All Rights Reserv
  23. 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. 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. 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
  26. 26. #SearchLove @goutaste 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
  27. 27. #SearchLove @goutaste 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
  28. 28. #SearchLove @goutaste Canonicals. Canonicals Everywhere. https://yoast.com/rel-canonical/ Crawling & Indexing Image © 2016 Warner Bros All Rights Reserv
  29. 29. #SearchLove @goutaste Let’s talk about rendering… Crawling & Indexing Image © 2016 Warner Bros All Rights Reserv
  30. 30. #SearchLove @goutaste Welcome to the JavaScript Web View Source Inspect Element Crawling & Indexing
  31. 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
  32. 32. #SearchLove @goutaste Schedule Crawl Index Rank Known URLs Internet Ye Olde Days* *and many search engines today Crawling & Indexing
  33. 33. #SearchLove @goutaste Schedule Crawl Index Rank Render! Known URLs Internet How Google Can Work Today Crawling & Indexing
  34. 34. #SearchLove @goutaste Crawling & Indexing
  35. 35. #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 Reserv
  36. 36. #SearchLove @goutaste 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
  37. 37. #SearchLove @goutaste Crawling & Indexing AndWhat About Other Search Engines? @bart_goralewicz https://moz.com/blog/search-engines-ready-for-javascript- crawling
  38. 38. #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 Reserv
  39. 39. #SearchLove @goutaste You Have A Few (Better) Options Crawling & Indexing Image © 2016 Warner Bros All Rights Reserv
  40. 40. #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
  41. 41. #SearchLove @goutaste Client Side vs. Server Side Rendering Crawling & Indexing
  42. 42. #SearchLove @goutaste Schedule Crawl Index Rank Render! Known URLs Internet How Google Can Work Today Crawling & Indexing
  43. 43. #SearchLove @goutaste Schedule Crawl Index Rank Render! Known URLs Internet But if we render, Google doesn’t have to Crawling & Indexing
  44. 44. #SearchLove @goutaste 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
  45. 45. #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 Reserv
  46. 46. #SearchLove @goutaste Option #1a:“Isomorphic JavaScript” Crawling & Indexing Image © 2016 Warner Bros All Rights Reserv
  47. 47. #SearchLove @goutaste 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 Image © 2016 Warner Bros All Rights Reserv
  48. 48. #SearchLove @goutaste Isomorphism is a Spectrum @spikebrehm http://bit.ly/isomorphic-deck Crawling & Indexing
  49. 49. #SearchLove @goutaste Isomorphism is a Spectrum Crawling & Indexing
  50. 50. #SearchLove @goutaste 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
  51. 51. #SearchLove @goutaste Crawling & Indexing github.com/GoogleChrome/rendertron Or Leverage Existing Solutions That Do This For You Prerender.io
  52. 52. #SearchLove @goutaste 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/
  53. 53. #SearchLove @goutaste Use Feature Detection & “Polyfills” https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills Crawling & Indexing
  54. 54. #SearchLove @goutaste https://www.google.com/webmasters/tools/go oglebot-fetch Test in Chrome 41 and Fetch & Render Crawling & Indexing
  55. 55. #SearchLove @goutaste Fetch & Render As Any Bot @maxxeight https://technicalseo.com/seo-tools/fetch-render/ Crawling & Indexing
  56. 56. #SearchLove @goutaste 2. ENGAGEMENT Image © 2016 Warner Bros All Rights Reserv
  57. 57. #SearchLove @goutaste 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
  58. 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
  59. 59. #SearchLove @goutaste Offline in Action EngagementCrawling & Indexing
  60. 60. #SearchLove @goutaste The offline experience your web-app delivers can even be different from the online experience EngagementCrawling & Indexing
  61. 61. #SearchLove @goutaste Offline-Only Content EngagementCrawling & Indexing
  62. 62. #SearchLove @goutaste PWAs = Death to the Dino (Someone else made this illustration, and I photographed it. Now I cannot remember who. SORRY.) EngagementCrawling & Indexing
  63. 63. #SearchLove @goutaste EngagementCrawling & Indexing Basic PWA Technical Requirements Image © 2016 Warner Bros All Rights Reserv
  64. 64. #SearchLove @goutaste 1. App Manifest http://bit.ly/webapp-manifest Chrome Dev Tools ViewJSON file you link to in your <head> EngagementCrawling & Indexing
  65. 65. #SearchLove @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick EngagementCrawling & Indexing
  66. 66. #SearchLove @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick EngagementCrawling & Indexing
  67. 67. #SearchLove @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick EngagementCrawling & Indexing
  68. 68. #SearchLove @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick EngagementCrawling & Indexing
  69. 69. #SearchLove @goutaste 3. https Mobile Friendly Website EngagementCrawling & Indexing
  70. 70. #SearchLove @goutaste
  71. 71. #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 & Indexing Image © 2016 Warner Bros All Rights Reserv
  72. 72. #SearchLove @goutaste PWAs ‘By Default’ via React, Preact, or Vue CLIs Preact CLI @addyosmani https://youtu.be/aCMbSyngXB4 EngagementCrawling & Indexing create-react-app vue init pwa
  73. 73. #SearchLove @goutaste Lighthouse EngagementCrawling & Indexing
  74. 74. #SearchLove @goutaste Speeding Things Up EngagementCrawling & Indexing Image © 2016 Warner Bros All Rights Reserved
  75. 75. #SearchLove @goutaste Source: @lukew EngagementCrawling & Indexing
  76. 76. #SearchLove @goutaste EngagementCrawling & Indexing Improved Engagement With Speed http://wpostats.com
  77. 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? http://bit.ly/pwas-the-new-normal EngagementCrawling & Indexing
  78. 78. #SearchLove @goutaste Service Workers Can Speed Up Sites on Repeat Views EngagementCrawling & Indexing
  79. 79. #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 http://bit.ly/sw-caching EngagementCrawling & Indexing
  80. 80. #SearchLove @goutaste Cache App ‘Shell’ https://developers.google.com/web/fundamentals/architecture/app-shell EngagementCrawling & Indexing
  81. 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) http://bit.ly/sw-caching EngagementCrawling & Indexing
  82. 82. #SearchLove @goutaste But That Doesn’t Mean You Are Done & Can Avoid Optimizing for Performance EngagementCrawling & Indexing Image © 2016 Warner Bros All Rights Reserv
  83. 83. #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
  84. 84. #SearchLove @goutaste EngagementCrawling & Indexing https://images.guide@addyosmani https://images.guide
  85. 85. #SearchLove @goutaste 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 EngagementCrawling & Indexing Image © 2016 Warner Bros All Rights Reserved
  86. 86. #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 Reserv
  87. 87. #SearchLove @goutaste One of the Issues With Server-Side Rendering is The Trade- Off With Time to Interactive Simulated Slow Networkhttps://youtu.be/6Ljq-Jn-EgU
  88. 88. #SearchLove @goutaste One of the Issues With Server-Side Rendering is The Trade- Off With Time to Interactive Simulated Slow Networkhttps://youtu.be/6Ljq-Jn-EgU
  89. 89. #SearchLove @goutaste TTI has a high correlation with conversion rates bit.ly/google-measure-performance EngagementCrawling & Indexing
  90. 90. #SearchLove @goutasteSee Also: http://bit.ly/code-splitting-webpack READ THIS TO START: https://survivejs.com/webpack/building/code-splitting/ EngagementCrawling & Indexing Break up existing JS into smaller chunks (“Code Splitting”) Make it Useable Faster: Minimize Time Between FMP & TTI
  91. 91. #SearchLove @goutaste 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 EngagementCrawling & Indexing Make it Useable Faster: Minimize Time Between FMP & TTI
  92. 92. #SearchLove @goutaste 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 EngagementCrawling & Indexing
  93. 93. #SearchLove @goutaste Link Rel=Preload EngagementCrawling & Indexing Commonly used for Web Fonts; Also great for critical JS & CSS files VS https://speakerdeck.com/addyosmani/the-browser-hackers-guide-to-instant-loading
  94. 94. #SearchLove @goutaste Subjective Performance Improves Engagement,Too How do we make waits feel faster? EngagementCrawling & Indexing Image © 2016 Warner Bros All Rights Reserv
  95. 95. #SearchLove @goutaste 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 EngagementCrawling & Indexing
  96. 96. #SearchLove @goutaste Progress Bars http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf EngagementCrawling & Indexing
  97. 97. #SearchLove @goutaste MEASUREMENT3. MEASUREMENT Image © 2016 Warner Bros All Rights Reserv
  98. 98. #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
  99. 99. #SearchLove @goutaste WebPageTest Has More Useful Feedback EngagementCrawling & Indexing Measurement PRO TIP: Try webpagetest.org/easy for throttled, low-end device
  100. 100. #SearchLove @goutaste Performance Tab in Chrome Dev Tools EngagementCrawling & Indexing Measurement (Formerly Called ‘Timeline’) More Simulated ‘Lab’Testing
  101. 101. #SearchLove @goutaste Reality: Load metrics aren’t a single number & real user metrics paint a fuller picture https://youtu.be/6Ljq-Jn-EgU EngagementCrawling & Indexing Measurement
  102. 102. #SearchLove @goutasteLearn more about using PerformanceObserver: https://developers.google.com/web/updates/2017/06/user-centric-performance-metrics EngagementCrawling & Indexing Measurement But beware of survivorship b Track Real Users’ Load Times with Browser APIs (like PerformanceObserver)
  103. 103. #SearchLove @goutaste Measuring “Installs” from the Chrome PWA Install Banner EngagementCrawling & Indexing Measurement
  104. 104. #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
  105. 105. #SearchLove @goutaste Measuring “Launches” Add a tracking parameter to your “start_url” in the App Manifest EngagementCrawling & Indexing Measurement
  106. 106. #SearchLove @goutastebit.ly/track-offline How DoYou Record Offline “Traffic”? EngagementCrawling & Indexing Measurement
  107. 107. #SearchLove @goutaste Measuring Push Notifications bit.ly/GA-push-tracking EngagementCrawling & Indexing Measurement
  108. 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” };
  109. 109. #SearchLove @goutaste 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

×