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 VisitorsTop 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 UserTop 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 ENGAGEMENTof 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/ user100% increase in session duration 80% improvement in load time

30% higher Conversion Rate than native app in Tier 3 cities20% 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 ConsiderSEO for Web Apps


Web Apps rely on JavaScript & JavaScript is hard for us

Photo: http://bit.ly/javascript-cat

#SearchLove @goutastePhoto: 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 URLsPhoto: 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


The DOM


Welcome to the JavaScript WebView Source Inspect Element


Welcome to the JavaScript WebView 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 ThatGooglebot 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 RenderingBonus

Slide!

Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/


Server Side RenderingBonus

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?


SEO


Why Isomorphic?


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)


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 FlashConfigure 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 WordpressTheme with 23 JS libraries & 20 stylesheets!”


Improving Page Speed with Images

Sprites File Size ResponsiveImages.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

Paint4. 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


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-introImage: 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 WorkersService 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

#SearchLove @goutaste1. 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/googlebot-fetch

Fetch & Render As Googlebot

https://www.google.com/webmasters/tools/googlebot-fetch


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 HelpfulBut 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

Paint4. Time to Interactive

http://bit.ly/performance-kpis@addyosmani


MeasuringThe 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

https://developer.mozilla.org/en-US/docs/Web/API/History_API


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)

https://developers.google.com/web/progressive-web-apps/checklist

https://www.browserstack.com/

https://www.browserling.com/

http://browsershots.org/



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, Catleesiof the Great Scratching post, Breaker of Treats and Mother of Cuddles”

};


Super-Smart, Helpful People

@ipullrank

@samccone@slightlylate

Technical SEO

PerformancePWAs

@_developitCreator of Preact

@addyosmaniPWAs

@theLarkInnWebpack

@bart_goralewiczJS SEO

@maxxeightTechnical & JS SEO

@jonoaldersonWeird shit

@justinrbriggsJS SEO

@dsottimanoTechnical & JS SEO

@suzzicksMobile

Marketing

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