from website to web app - indexing, optimizing, and auditing experiences for the new mobile web
TRANSCRIPT
![Page 1: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/1.jpg)
#SearchLove @goutaste
From Website to Web-App:
Index, Optimize &
Audit
![Page 2: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/2.jpg)
#SearchLove @goutaste
So Many Format Options to Display Your Content on “The Internet”
![Page 3: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/3.jpg)
#SearchLove @goutaste
How Do You Choose?
![Page 4: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/4.jpg)
#SearchLove @goutaste
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
![Page 5: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/5.jpg)
#SearchLove @goutaste
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
![Page 6: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/6.jpg)
#SearchLove @goutaste
Can We Have The Best of Both?
The REACH of a website
The ENGAGEMENTof an app
Image: http://bit.ly/platypus-keytar
![Page 7: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/7.jpg)
#SearchLove @goutaste
What is a Web App?
Traditional Website Web App Lifecycle
Images: http://bit.ly/2rouUqH
![Page 8: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/8.jpg)
#SearchLove @goutaste
What is a Web App?
bit.ly/app-shell-img
![Page 9: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/9.jpg)
#SearchLove @goutaste
What is a Progressive Web App?
Responsive Secure Fast
Downloadable Works Offline Push Notifications
![Page 10: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/10.jpg)
#SearchLove @goutaste
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/
![Page 11: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/11.jpg)
#SearchLove @goutaste
The Web is Becoming Full of Web Apps
Photo: https://visualhunt.com/f/photo/3943667382/a851db711b/
![Page 12: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/12.jpg)
#SearchLove @goutaste
Current & Imminent PWAs
Source: Google I/O 2017
![Page 13: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/13.jpg)
#SearchLove @goutaste
But Lots of People Don’t ConsiderSEO for Web Apps
![Page 14: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/14.jpg)
#SearchLove @goutaste
Web Apps rely on JavaScript & JavaScript is hard for us
Photo: http://bit.ly/javascript-cat
![Page 15: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/15.jpg)
#SearchLove @goutastePhoto: http://bit.ly/2rEGvlW
![Page 16: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/16.jpg)
#SearchLove @goutaste
Even Though Things Are Changing, JavaScript is Also Still Hard for Search Engines*
*Search Engines means more than just Google
![Page 17: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/17.jpg)
#SearchLove @goutaste
You’ll Still See Plenty of Great Web Apps That Look Like This in Google
![Page 18: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/18.jpg)
#SearchLove @goutaste
Or This…
GIF: http://bit.ly/OOH-CAT
![Page 19: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/19.jpg)
#SearchLove @goutaste
We (SEOs) Can Help
![Page 20: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/20.jpg)
#SearchLove @goutaste
Indexing Optimizing Auditing
Clean URLs
Canonicals
Rendering
Mobile Friendly
SERP CTR
Speed
Crawling & Indexing
“App-iness”
Speed
Engagement
![Page 21: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/21.jpg)
#SearchLove @goutaste
INDEXING
![Page 22: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/22.jpg)
#SearchLove @goutaste
1. Clean URLsPhoto: https://visualhunt.com/f/photo/5542857895/8f186be4b0/
![Page 23: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/23.jpg)
#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
![Page 24: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/24.jpg)
#SearchLove @goutaste
Outweb.IO :An Indexing Sob Story
![Page 25: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/25.jpg)
#SearchLove @goutaste
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)
![Page 26: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/26.jpg)
#SearchLove @goutaste
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
![Page 27: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/27.jpg)
#SearchLove @goutaste
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/
![Page 28: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/28.jpg)
#SearchLove @goutaste
Canonicals.
Canonicals Everywhere.
https://yoast.com/rel-canonical/
![Page 29: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/29.jpg)
#SearchLove @goutaste
3. Rendering
![Page 30: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/30.jpg)
#SearchLove @goutaste
The DOM
![Page 31: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/31.jpg)
#SearchLove @goutaste
Welcome to the JavaScript WebView Source Inspect Element
![Page 32: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/32.jpg)
#SearchLove @goutaste
Welcome to the JavaScript WebView Source Inspect Element
Original HTML The DOM as it was interpreted by the browser.
![Page 33: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/33.jpg)
#SearchLove @goutaste
Schedule
Crawl Index Rank
Known URLs
Internet
Ye Olde Days*
*and many search engines today
![Page 34: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/34.jpg)
#SearchLove @goutaste
Schedule
Crawl Index Rank
Render!
Known URLs
Internet
How Google Can Work Today
![Page 35: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/35.jpg)
#SearchLove @goutaste
Say a prayer to the god of your choice & hope Google figures out your client-side JavaScript?
![Page 36: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/36.jpg)
#SearchLove @goutaste
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
![Page 37: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/37.jpg)
#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
![Page 38: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/38.jpg)
#SearchLove @goutaste
Client Side vs. Server Side Rendering
![Page 39: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/39.jpg)
#SearchLove @goutaste
Client Side RenderingBonus
Slide!
Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/
![Page 40: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/40.jpg)
#SearchLove @goutaste
Server Side RenderingBonus
Slide!
Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/
![Page 41: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/41.jpg)
#SearchLove @goutaste
Schedule
Crawl Index Rank
Render!
Known URLs
Internet
If We Render on Our Server…
![Page 42: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/42.jpg)
#SearchLove @goutaste
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
![Page 43: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/43.jpg)
#SearchLove @goutaste
But Without Any Client-Side, We’re Reloading the Whole Page on Each Nav For Our Users
![Page 44: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/44.jpg)
#SearchLove @goutaste
WTF Is “Isomorphic JavaScript”?
![Page 45: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/45.jpg)
#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
![Page 46: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/46.jpg)
#SearchLove @goutaste
Why Isomorphic?
Perceived Performance
![Page 47: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/47.jpg)
#SearchLove @goutaste
Why Isomorphic?
Perceived Performance
SEO
![Page 48: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/48.jpg)
#SearchLove @goutaste
Why Isomorphic?
Perceived Performance
SEO Maintainability
![Page 49: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/49.jpg)
#SearchLove @goutaste
Isomorphism is a Spectrum
@spikebrehm http://bit.ly/isomorphic-deck
![Page 50: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/50.jpg)
#SearchLove @goutaste
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
![Page 51: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/51.jpg)
#SearchLove @goutaste
SSR With Vue.js
@addyosmani https://youtu.be/aCMbSyngXB4
![Page 52: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/52.jpg)
#SearchLove @goutaste
Configuring SSR With React
@addyosmani https://youtu.be/aCMbSyngXB4
![Page 53: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/53.jpg)
#SearchLove @goutaste
Use Headless Browsers to render initial state for users & search engines
http://bit.ly/headless-chrome
Your Other Options?
![Page 54: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/54.jpg)
#SearchLove @goutaste
Your Other Options?
(or similar)
![Page 55: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/55.jpg)
#SearchLove @goutaste
Your Other Options?
(or similar)
![Page 56: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/56.jpg)
#SearchLove @goutaste
This solution leverages prerender.io!
http://bit.ly/moz-angularjs
![Page 57: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/57.jpg)
#SearchLove @goutaste
OPTIMIZATION
![Page 58: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/58.jpg)
#SearchLove @goutaste
1. Optimize for “Mobile Friendliness”
![Page 59: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/59.jpg)
#SearchLove @goutaste
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
![Page 60: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/60.jpg)
#SearchLove @goutaste
Interstitials VS Banners
Mobile Friendly!NOT Mobile Friendly!
![Page 61: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/61.jpg)
#SearchLove @goutaste
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)
![Page 62: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/62.jpg)
#SearchLove @goutaste
Schema
moz.com/blog/json-ld-for-beginners
![Page 63: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/63.jpg)
#SearchLove @goutaste
3. Optimize for Mobile Speed
![Page 64: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/64.jpg)
#SearchLove @goutasteSource: @lukew
![Page 65: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/65.jpg)
#SearchLove @goutaste
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/
![Page 66: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/66.jpg)
#SearchLove @goutaste
New in Chrome Dev Tools (“Coverage” Tab)Keep Track of Potential JS & CSS Savings
![Page 67: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/67.jpg)
#SearchLove @goutaste
“I’m a WordpressTheme with 23 JS libraries & 20 stylesheets!”
![Page 68: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/68.jpg)
#SearchLove @goutaste
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
![Page 69: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/69.jpg)
#SearchLove @goutaste
1. First Paint 2. First Contentful Paint
“Is it happening?”
@addyosmani http://bit.ly/performance-kpis
![Page 70: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/70.jpg)
#SearchLove @goutaste
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
![Page 71: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/71.jpg)
#SearchLove @goutaste
“Is it useful?” “Is it useable?”3. First Meaningful
Paint4. Time to Interactive
@addyosmani http://bit.ly/performance-kpis
![Page 72: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/72.jpg)
#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
![Page 73: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/73.jpg)
#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
![Page 74: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/74.jpg)
#SearchLove @goutaste
Make it Useable Faster:Minimize Time Between FMP & TTI
Ship less JS
![Page 75: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/75.jpg)
#SearchLove @goutaste
Make it Useable Faster:Minimize Time Between FMP & TTI
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
![Page 76: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/76.jpg)
#SearchLove @goutaste
Make it Useable Faster:Minimize Time Between FMP & TTI
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
![Page 77: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/77.jpg)
#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!
![Page 78: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/78.jpg)
#SearchLove @goutaste
• 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
![Page 79: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/79.jpg)
#SearchLove @goutaste
Bonus Slide!
![Page 80: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/80.jpg)
#SearchLove @goutaste
![Page 81: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/81.jpg)
#SearchLove @goutaste
4. Optimize for Mobile Presentation & Engagement
![Page 82: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/82.jpg)
#SearchLove @goutaste
HTTPS Will Be Table Stakes
http://bit.ly/chrome-https
![Page 83: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/83.jpg)
#SearchLove @goutaste
HTTPS
http://bit.ly/aleyda-https
![Page 84: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/84.jpg)
#SearchLove @goutaste
Service WorkersService Workers are so powerful, browsers require HTTPS for you to register them
![Page 85: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/85.jpg)
#SearchLove @goutaste
Service Workers Add Performance
Boosts on Repeat Visits
![Page 86: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/86.jpg)
#SearchLove @goutaste
Cache App ‘Shell’Bonus
Slide!
https://developers.google.com/web/fundamentals/architecture/app-shell
![Page 87: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/87.jpg)
#SearchLove @goutaste
Service Workers Can Even Give
Websites Offline Functionality
![Page 88: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/88.jpg)
#SearchLove @goutaste
![Page 89: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/89.jpg)
#SearchLove @goutaste
When Combined With An App Manifest
![Page 90: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/90.jpg)
#SearchLove @goutaste
Web App Manifest
http://bit.ly/webapp-manifest
Chrome Dev Tools
JSON file you link to in your <head>
![Page 91: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/91.jpg)
#SearchLove @goutaste
![Page 92: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/92.jpg)
#SearchLove @goutaste
Service Workers + App Manifest Enables “Installing” Websites
![Page 93: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/93.jpg)
#SearchLove @goutastehttps://caniuse.com/#search=service%20workers
![Page 94: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/94.jpg)
#SearchLove @goutaste
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
![Page 95: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/95.jpg)
#SearchLove @goutaste
Create PWAs ‘By Default’ via React, Preact, or Vue.js
Preact CLI
@addyosmani https://youtu.be/aCMbSyngXB4
![Page 96: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/96.jpg)
#SearchLove @goutaste
AUDITING
![Page 97: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/97.jpg)
#SearchLove @goutaste1. Audit for Crawling & Indexing Issues
![Page 98: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/98.jpg)
#SearchLove @goutaste
‘Lab Test’ Troubleshooting
• Fetch & Render
• Fetch & Render as any bot w/ timeout
• Compare Source & ‘outerHTML’
• Headless Chrome
![Page 99: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/99.jpg)
#SearchLove @goutaste
https://www.google.com/webmasters/tools/googlebot-fetch
Fetch & Render As Googlebot
![Page 100: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/100.jpg)
#SearchLove @goutaste
Fetch & Render As Any Bot
@maxxeight https://technicalseo.com/seo-tools/fetch-render/
![Page 101: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/101.jpg)
#SearchLove @goutaste
Compare Source & ‘outerHTML’
@justinrbriggs https://www.briggsby.com/auditing-javascript-for-seo/
![Page 102: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/102.jpg)
#SearchLove @goutaste
2. Audit for App-iness
![Page 103: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/103.jpg)
#SearchLove @goutaste
PWA Checklist
http://bit.ly/pwa-checklist
![Page 104: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/104.jpg)
#SearchLove @goutaste
Lighthouse
![Page 105: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/105.jpg)
#SearchLove @goutaste
3. Audit for Speed
![Page 106: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/106.jpg)
#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
![Page 107: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/107.jpg)
#SearchLove @goutaste
WebPageTest Has More Useful Feedback
![Page 108: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/108.jpg)
#SearchLove @goutaste
Performance Tab in Chrome Dev Tools(Formerly Called ‘Timeline’)
![Page 109: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/109.jpg)
#SearchLove @goutaste
1. First Paint 2. First Contentful Paint
“Is it happening?”
http://bit.ly/performance-kpis@addyosmani
![Page 110: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/110.jpg)
#SearchLove @goutaste
“Is it useful?” “Is it useable?”3. First Meaningful
Paint4. Time to Interactive
http://bit.ly/performance-kpis@addyosmani
![Page 111: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/111.jpg)
#SearchLove @goutaste
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
https://youtu.be/6Ljq-Jn-EgU
![Page 112: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/112.jpg)
#SearchLove @goutaste
Reality:Load metrics aren’t a single number
https://youtu.be/6Ljq-Jn-EgU
![Page 113: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/113.jpg)
#SearchLove @goutaste
Real User Metrics (RUM) Paint a Fuller Picture
https://youtu.be/6Ljq-Jn-EgU
![Page 114: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/114.jpg)
#SearchLove @goutaste
Indexing
Optimizing
Auditing
![Page 115: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/115.jpg)
#SearchLove @goutaste
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
![Page 116: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/116.jpg)
#SearchLove @goutaste
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
![Page 117: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/117.jpg)
#SearchLove @goutaste
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)
![Page 118: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/118.jpg)
#SearchLove @goutaste
![Page 119: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/119.jpg)
#SearchLove @goutaste
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”
};
![Page 120: From Website to Web App - Indexing, Optimizing, and Auditing Experiences for the New Mobile Web](https://reader035.vdocument.in/reader035/viewer/2022062219/5a660ea07f8b9a214f8b4eff/html5/thumbnails/120.jpg)
#SearchLove @goutaste
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