#SearchLove @goutaste
From Website to Web-App:
Index, Optimize &
Audit
#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
Monthly Unique VisitorsTop 1k web properties vs. top 1k apps
Data: comScore Mobile Metrix Age 18+ June 2016
#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
#SearchLove @goutaste
Can We Have The Best of Both?
The REACH of a website
The ENGAGEMENTof an app
Image: http://bit.ly/platypus-keytar
#SearchLove @goutaste
What is a Web App?
Traditional Website Web App Lifecycle
Images: http://bit.ly/2rouUqH
#SearchLove @goutaste
What is a Web App?
bit.ly/app-shell-img
#SearchLove @goutaste
What is a Progressive Web App?
Responsive Secure Fast
Downloadable Works Offline Push Notifications
#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/
#SearchLove @goutaste
The Web is Becoming Full of Web Apps
Photo: https://visualhunt.com/f/photo/3943667382/a851db711b/
#SearchLove @goutaste
Current & Imminent PWAs
Source: Google I/O 2017
#SearchLove @goutaste
But Lots of People Don’t ConsiderSEO for Web Apps
#SearchLove @goutaste
Web Apps rely on JavaScript & JavaScript is hard for us
Photo: http://bit.ly/javascript-cat
#SearchLove @goutastePhoto: http://bit.ly/2rEGvlW
#SearchLove @goutaste
Even Though Things Are Changing, JavaScript is Also Still Hard for Search Engines*
*Search Engines means more than just Google
#SearchLove @goutaste
You’ll Still See Plenty of Great Web Apps That Look Like This in Google
#SearchLove @goutaste
Or This…
GIF: http://bit.ly/OOH-CAT
#SearchLove @goutaste
We (SEOs) Can Help
#SearchLove @goutaste
Indexing Optimizing Auditing
Clean URLs
Canonicals
Rendering
Mobile Friendly
SERP CTR
Speed
Crawling & Indexing
“App-iness”
Speed
Engagement
#SearchLove @goutaste
INDEXING
#SearchLove @goutaste
1. Clean URLsPhoto: https://visualhunt.com/f/photo/5542857895/8f186be4b0/
#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
#SearchLove @goutaste
Outweb.IO :An Indexing Sob Story
#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)
#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
#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/
#SearchLove @goutaste
Canonicals.
Canonicals Everywhere.
https://yoast.com/rel-canonical/
#SearchLove @goutaste
3. Rendering
#SearchLove @goutaste
The DOM
#SearchLove @goutaste
Welcome to the JavaScript WebView Source Inspect Element
#SearchLove @goutaste
Welcome to the JavaScript WebView Source Inspect Element
Original HTML The DOM as it was interpreted by the browser.
#SearchLove @goutaste
Schedule
Crawl Index Rank
Known URLs
Internet
Ye Olde Days*
*and many search engines today
#SearchLove @goutaste
Schedule
Crawl Index Rank
Render!
Known URLs
Internet
How Google Can Work Today
#SearchLove @goutaste
Say a prayer to the god of your choice & hope Google figures out your client-side JavaScript?
#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
#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
#SearchLove @goutaste
Client Side vs. Server Side Rendering
#SearchLove @goutaste
Client Side RenderingBonus
Slide!
Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/
#SearchLove @goutaste
Server Side RenderingBonus
Slide!
Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/
#SearchLove @goutaste
Schedule
Crawl Index Rank
Render!
Known URLs
Internet
If We Render on Our Server…
#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
#SearchLove @goutaste
But Without Any Client-Side, We’re Reloading the Whole Page on Each Nav For Our Users
#SearchLove @goutaste
WTF Is “Isomorphic JavaScript”?
#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
#SearchLove @goutaste
Why Isomorphic?
Perceived Performance
#SearchLove @goutaste
Why Isomorphic?
Perceived Performance
SEO
#SearchLove @goutaste
Why Isomorphic?
Perceived Performance
SEO Maintainability
#SearchLove @goutaste
Isomorphism is a Spectrum
@spikebrehm http://bit.ly/isomorphic-deck
#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
#SearchLove @goutaste
SSR With Vue.js
@addyosmani https://youtu.be/aCMbSyngXB4
#SearchLove @goutaste
Configuring SSR With React
@addyosmani https://youtu.be/aCMbSyngXB4
#SearchLove @goutaste
Use Headless Browsers to render initial state for users & search engines
http://bit.ly/headless-chrome
Your Other Options?
#SearchLove @goutaste
Your Other Options?
(or similar)
#SearchLove @goutaste
Your Other Options?
(or similar)
#SearchLove @goutaste
This solution leverages prerender.io!
http://bit.ly/moz-angularjs
#SearchLove @goutaste
OPTIMIZATION
#SearchLove @goutaste
1. Optimize for “Mobile Friendliness”
#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
#SearchLove @goutaste
Interstitials VS Banners
Mobile Friendly!NOT Mobile Friendly!
#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)
#SearchLove @goutaste
Schema
moz.com/blog/json-ld-for-beginners
#SearchLove @goutaste
3. Optimize for Mobile Speed
#SearchLove @goutasteSource: @lukew
#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/
#SearchLove @goutaste
New in Chrome Dev Tools (“Coverage” Tab)Keep Track of Potential JS & CSS Savings
#SearchLove @goutaste
“I’m a WordpressTheme with 23 JS libraries & 20 stylesheets!”
#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
#SearchLove @goutaste
1. First Paint 2. First Contentful Paint
“Is it happening?”
@addyosmani http://bit.ly/performance-kpis
#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
#SearchLove @goutaste
“Is it useful?” “Is it useable?”3. First Meaningful
Paint4. Time to Interactive
@addyosmani http://bit.ly/performance-kpis
#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
#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
#SearchLove @goutaste
Make it Useable Faster:Minimize Time Between FMP & TTI
Ship less JS
#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
#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
#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!
#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
#SearchLove @goutaste
Bonus Slide!
#SearchLove @goutaste
#SearchLove @goutaste
4. Optimize for Mobile Presentation & Engagement
#SearchLove @goutaste
HTTPS Will Be Table Stakes
http://bit.ly/chrome-https
#SearchLove @goutaste
HTTPS
http://bit.ly/aleyda-https
#SearchLove @goutaste
Service WorkersService Workers are so powerful, browsers require HTTPS for you to register them
#SearchLove @goutaste
Service Workers Add Performance
Boosts on Repeat Visits
#SearchLove @goutaste
Cache App ‘Shell’Bonus
Slide!
https://developers.google.com/web/fundamentals/architecture/app-shell
#SearchLove @goutaste
Service Workers Can Even Give
Websites Offline Functionality
#SearchLove @goutaste
#SearchLove @goutaste
When Combined With An App Manifest
#SearchLove @goutaste
Web App Manifest
http://bit.ly/webapp-manifest
Chrome Dev Tools
JSON file you link to in your <head>
#SearchLove @goutaste
#SearchLove @goutaste
Service Workers + App Manifest Enables “Installing” Websites
#SearchLove @goutastehttps://caniuse.com/#search=service%20workers
#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
#SearchLove @goutaste
Create PWAs ‘By Default’ via React, Preact, or Vue.js
Preact CLI
@addyosmani https://youtu.be/aCMbSyngXB4
#SearchLove @goutaste
AUDITING
#SearchLove @goutaste1. Audit for Crawling & Indexing Issues
#SearchLove @goutaste
‘Lab Test’ Troubleshooting
• Fetch & Render
• Fetch & Render as any bot w/ timeout
• Compare Source & ‘outerHTML’
• Headless Chrome
#SearchLove @goutaste
https://www.google.com/webmasters/tools/googlebot-fetch
Fetch & Render As Googlebot
#SearchLove @goutaste
Fetch & Render As Any Bot
@maxxeight https://technicalseo.com/seo-tools/fetch-render/
#SearchLove @goutaste
Compare Source & ‘outerHTML’
@justinrbriggs https://www.briggsby.com/auditing-javascript-for-seo/
#SearchLove @goutaste
2. Audit for App-iness
#SearchLove @goutaste
PWA Checklist
http://bit.ly/pwa-checklist
#SearchLove @goutaste
Lighthouse
#SearchLove @goutaste
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
#SearchLove @goutaste
WebPageTest Has More Useful Feedback
#SearchLove @goutaste
Performance Tab in Chrome Dev Tools(Formerly Called ‘Timeline’)
#SearchLove @goutaste
1. First Paint 2. First Contentful Paint
“Is it happening?”
http://bit.ly/performance-kpis@addyosmani
#SearchLove @goutaste
“Is it useful?” “Is it useable?”3. First Meaningful
Paint4. Time to Interactive
http://bit.ly/performance-kpis@addyosmani
#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
#SearchLove @goutaste
Reality:Load metrics aren’t a single number
https://youtu.be/6Ljq-Jn-EgU
#SearchLove @goutaste
Real User Metrics (RUM) Paint a Fuller Picture
https://youtu.be/6Ljq-Jn-EgU
#SearchLove @goutaste
Indexing
Optimizing
Auditing
#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
#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
#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)
#SearchLove @goutaste
#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”
};
#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