Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
#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 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 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/ user
100% increase...
#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 Consider
SEO for Web Apps
#SearchLove @goutaste
Web Apps rely on JavaScript & JavaScript is hard for us
Photo: http://bit.ly/javascript-cat
#SearchLove @goutaste
Photo: http://bit.ly/2rEGvlW
#SearchLove @goutaste
Even Though Things Are Changing, JavaScript is Also
Still Hard for Search Engines*
*Search Engines m...
#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...
#SearchLove @goutaste
INDEXING
#SearchLove @goutaste
1. Clean URLs
Photo: 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 st...
#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 AJA...
#SearchLove @goutaste
Death of the Hash & HashBang
By default:
https://example.com/#/foo
For deprecated AJAX crawling sche...
#SearchLove @goutaste
Long Live the History API
Leverage HTML5
pushState()
Change URLs in the
address bar without
reloadin...
#SearchLove @goutaste
Canonicals.
Canonicals Everywhere.
https://yoast.com/rel-canonical/
#SearchLove @goutaste
3. Rendering
#SearchLove @goutaste
The DOM
#SearchLove @goutaste
Welcome to the JavaScript Web
View Source Inspect Element
#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
#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 That
Googlebot may only be willing to wait 4-5 sec for your JS…
https://maxxe...
#SearchLove @goutasteInline vs. External vs. Bundled makes a difference:
https://goralewicz.com/blog/javascript-seo-experi...
#SearchLove @goutaste
Client Side vs. Server Side Rendering
#SearchLove @goutaste
Client Side Rendering
Bonus
Slide!
Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-b...
#SearchLove @goutaste
Server Side Rendering
Bonus
Slide!
Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-b...
#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 ...
#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.
Syno...
#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)
Jav...
#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-chro...
#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 Flash
Configure
ViewPorts
Tt!
Use Legible
Font Size
Space Out Touch
...
#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...
#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 fil...
#SearchLove @goutaste
New in Chrome Dev Tools (“Coverage” Tab)
Keep Track of Potential JS & CSS Savings
#SearchLove @goutaste
“I’m a Wordpress
Theme with 23 JS
libraries & 20
stylesheets!”
#SearchLove @goutaste
Improving Page Speed with Images
Sprites File Size Responsive
Images.org
Image Server
Quality: 85%
W...
#SearchLove @goutaste
1. First Paint 2. First Contentful Paint
“Is it happening?”
@addyosmani http://bit.ly/performance-kp...
#SearchLove @goutaste
Make it Happen Faster:
Speed Up Time to FP & FCP
 Inline critical CSS &
JS
 Remove all render-
blo...
#SearchLove @goutaste
“Is it useful?” “Is it useable?”
3. First Meaningful
Paint
4. Time to Interactive
@addyosmani http:/...
#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
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 s...
#SearchLove @goutaste
Make it Useable Faster:
Minimize Time Between FMP & TTI
 Ship less JS
 Break up existing JS
into s...
#SearchLove @goutasteRead: bit.ly/http2-intro
Image: kinsta.com/learn/what-is-http2/#goal_of_creating_http2
HTTP/2 enables...
#SearchLove @goutaste
• Pre-load can specify the download “as” =
• "script",
• "style",
• "image",
• "media",
• "document”...
#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 Workers
Service 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
lau...
#SearchLove @goutaste
Create PWAs ‘By Default’ via React, Preact, or Vue.js
Preact CLI
@addyosmani https://youtu.be/aCMbSy...
#SearchLove @goutaste
AUDITING
#SearchLove @goutaste
1. Audit for Crawling & Indexing Issues
#SearchLove @goutaste
‘Lab Test’
Troubleshooting
• Fetch & Render
• Fetch & Render as
any bot w/ timeout
• Compare Source ...
#SearchLove @goutaste
https://www.google.com/webmasters/tools/go
oglebot-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 Al...
#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
Paint
4. Time to Interactive
http://bit.ly/perf...
#SearchLove @goutaste
Measuring
The Metric
First Paint
First Contentful Paint
First Meaningful Paint
Time to Interactive
T...
#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:
 Hea...
#SearchLove @goutaste
OPTIMIZATION CHECKLIST
 Optimize for Mobile Friendly
 Fonts/ tap targets
 No intrusive interstiti...
#SearchLove @goutaste
AUDITING CHECKLIST
 Audit for Crawling & Indexing
 Fetch & Render (Googlebot)
 Fetch & Render As ...
#SearchLove @goutaste
#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
@_develo...
Nächste SlideShare
Wird geladen in …5
×

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

1.016 Aufrufe

Veröffentlicht am

Emily Grossman's slides from SearchLove Boston 2017.

Veröffentlicht in: Marketing
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ●●● http://ishbv.com/rockhardx/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

  1. 1. #SearchLove @goutaste From Website to Web-App: Index, Optimize & Audit
  2. 2. #SearchLove @goutaste So Many Format Options to Display Your Content on “The Internet”
  3. 3. #SearchLove @goutaste How Do You 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 Website Web App Lifecycle Images: http://bit.ly/2rouUqH
  8. 8. #SearchLove @goutaste What is a Web App? bit.ly/app-shell-img
  9. 9. #SearchLove @goutaste What is a Progressive Web App? Responsive Secure Fast Downloadable Works Offline Push Notifications
  10. 10. #SearchLove @goutaste Why are they 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/
  11. 11. #SearchLove @goutaste The Web is Becoming Full of Web Apps Photo: https://visualhunt.com/f/photo/3943667382/a851db711b/
  12. 12. #SearchLove @goutaste Current & Imminent PWAs Source: Google I/O 2017
  13. 13. #SearchLove @goutaste But Lots of People Don’t Consider SEO for Web Apps
  14. 14. #SearchLove @goutaste Web Apps rely on JavaScript & JavaScript is hard for us Photo: http://bit.ly/javascript-cat
  15. 15. #SearchLove @goutaste Photo: http://bit.ly/2rEGvlW
  16. 16. #SearchLove @goutaste Even Though Things Are Changing, JavaScript is Also Still Hard for Search Engines* *Search Engines means more than just Google
  17. 17. #SearchLove @goutaste You’ll Still See Plenty of Great Web Apps That Look Like This in Google
  18. 18. #SearchLove @goutaste Or This… GIF: http://bit.ly/OOH-CAT
  19. 19. #SearchLove @goutaste We (SEOs) Can Help
  20. 20. #SearchLove @goutaste Indexing Optimizing Auditing Clean URLs Canonicals Rendering Mobile Friendly SERP CTR Speed Crawling & Indexing “App-iness” Speed Engagement
  21. 21. #SearchLove @goutaste INDEXING
  22. 22. #SearchLove @goutaste 1. Clean URLs Photo: https://visualhunt.com/f/photo/5542857895/8f186be4b0/
  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
  24. 24. #SearchLove @goutaste Outweb.IO : An Indexing Sob Story
  25. 25. #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)
  26. 26. #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
  27. 27. #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/
  28. 28. #SearchLove @goutaste Canonicals. Canonicals Everywhere. https://yoast.com/rel-canonical/
  29. 29. #SearchLove @goutaste 3. Rendering
  30. 30. #SearchLove @goutaste The DOM
  31. 31. #SearchLove @goutaste Welcome to the JavaScript Web View Source Inspect Element
  32. 32. #SearchLove @goutaste Welcome to the JavaScript Web View Source Inspect Element Original HTML The DOM as it was interpreted by the browser.
  33. 33. #SearchLove @goutaste Schedule Crawl Index Rank Known URLs Internet Ye Olde Days* *and many search engines today
  34. 34. #SearchLove @goutaste Schedule Crawl Index Rank Render! Known URLs Internet How Google Can Work Today
  35. 35. #SearchLove @goutaste Say a prayer to the god of your choice & hope Google figures out your client-side JavaScript?
  36. 36. #SearchLove @goutaste But Uh… Good Luck With That Googlebot may only be willing to wait 4-5 sec for your JS… https://maxxeight.com/tests/js-timer/@maxxeight
  37. 37. #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
  38. 38. #SearchLove @goutaste Client Side vs. Server Side Rendering
  39. 39. #SearchLove @goutaste Client Side Rendering Bonus Slide! Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/
  40. 40. #SearchLove @goutaste Server Side Rendering Bonus Slide! Image: https://juristr.com/blog/2016/06/ng2-getting-started-for-beginners/
  41. 41. #SearchLove @goutaste Schedule Crawl Index Rank Render! Known URLs Internet If We Render on Our Server…
  42. 42. #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
  43. 43. #SearchLove @goutaste But Without Any Client-Side, We’re Reloading the Whole Page on Each Nav For Our Users
  44. 44. #SearchLove @goutaste WTF Is “Isomorphic JavaScript”?
  45. 45. #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
  46. 46. #SearchLove @goutaste Why Isomorphic? Perceived Performance
  47. 47. #SearchLove @goutaste Why Isomorphic? Perceived Performance SEO
  48. 48. #SearchLove @goutaste Why Isomorphic? Perceived Performance SEO Maintainability
  49. 49. #SearchLove @goutaste Isomorphism is a Spectrum @spikebrehm http://bit.ly/isomorphic-deck
  50. 50. #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
  51. 51. #SearchLove @goutaste SSR With Vue.js @addyosmani https://youtu.be/aCMbSyngXB4
  52. 52. #SearchLove @goutaste Configuring SSR With React @addyosmani https://youtu.be/aCMbSyngXB4
  53. 53. #SearchLove @goutaste Use Headless Browsers to render initial state for users & search engines http://bit.ly/headless-chrome Your Other Options?
  54. 54. #SearchLove @goutaste Your Other Options? (or similar)
  55. 55. #SearchLove @goutaste Your Other Options? (or similar)
  56. 56. #SearchLove @goutaste This solution leverages prerender.io! http://bit.ly/moz-angularjs
  57. 57. #SearchLove @goutaste OPTIMIZATION
  58. 58. #SearchLove @goutaste 1. Optimize for “Mobile Friendliness”
  59. 59. #SearchLove @goutaste Improve Mobile Usability Remove Flash Configure ViewPorts Tt! Use Legible Font Size Space Out Touch Elements Search Console Mobile Usability Report: support.google.com/webmasters/answer/6101188?hl=en
  60. 60. #SearchLove @goutaste Interstitials VS Banners Mobile Friendly!NOT Mobile Friendly!
  61. 61. #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)
  62. 62. #SearchLove @goutaste Schema moz.com/blog/json-ld-for-beginners
  63. 63. #SearchLove @goutaste 3. Optimize for Mobile Speed
  64. 64. #SearchLove @goutasteSource: @lukew
  65. 65. #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/
  66. 66. #SearchLove @goutaste New in Chrome Dev Tools (“Coverage” Tab) Keep Track of Potential JS & CSS Savings
  67. 67. #SearchLove @goutaste “I’m a Wordpress Theme with 23 JS libraries & 20 stylesheets!”
  68. 68. #SearchLove @goutaste Improving Page Speed with Images Sprites File Size Responsive Images.org Image Server Quality: 85% Width: 300px Quality: 70% Width: 150px Quality: 326 PPI Width: 200px
  69. 69. #SearchLove @goutaste 1. First Paint 2. First Contentful Paint “Is it happening?” @addyosmani http://bit.ly/performance-kpis
  70. 70. #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
  71. 71. #SearchLove @goutaste “Is it useful?” “Is it useable?” 3. First Meaningful Paint 4. Time to Interactive @addyosmani http://bit.ly/performance-kpis
  72. 72. #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
  73. 73. #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
  74. 74. #SearchLove @goutaste Make it Useable Faster: Minimize Time Between FMP & TTI  Ship less JS
  75. 75. #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
  76. 76. #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
  77. 77. #SearchLove @goutasteRead: bit.ly/http2-intro Image: kinsta.com/learn/what-is-http2/#goal_of_creating_http2 HTTP/2 enables full request & response multiplexing Bonus Slide!
  78. 78. #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
  79. 79. #SearchLove @goutaste Bonus Slide!
  80. 80. #SearchLove @goutaste
  81. 81. #SearchLove @goutaste 4. Optimize for Mobile Presentation & Engagement
  82. 82. #SearchLove @goutaste HTTPS Will Be Table Stakes http://bit.ly/chrome-https
  83. 83. #SearchLove @goutaste HTTPS http://bit.ly/aleyda-https
  84. 84. #SearchLove @goutaste Service Workers Service Workers are so powerful, browsers require HTTPS for you to register them
  85. 85. #SearchLove @goutaste Service Workers Add Performance Boosts on Repeat Visits
  86. 86. #SearchLove @goutaste Cache App ‘Shell’ Bonus Slide! https://developers.google.com/web/fundamentals/architecture/app-shell
  87. 87. #SearchLove @goutaste Service Workers Can Even Give Websites Offline Functionality
  88. 88. #SearchLove @goutaste
  89. 89. #SearchLove @goutaste When Combined With An App Manifest
  90. 90. #SearchLove @goutaste Web App Manifest http://bit.ly/webapp-manifest Chrome Dev Tools JSON file you link to in your <head>
  91. 91. #SearchLove @goutaste
  92. 92. #SearchLove @goutaste Service Workers + App Manifest Enables “Installing” Websites
  93. 93. #SearchLove @goutastehttps://caniuse.com/#search=service%20workers
  94. 94. #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
  95. 95. #SearchLove @goutaste Create PWAs ‘By Default’ via React, Preact, or Vue.js Preact CLI @addyosmani https://youtu.be/aCMbSyngXB4
  96. 96. #SearchLove @goutaste AUDITING
  97. 97. #SearchLove @goutaste 1. Audit for Crawling & Indexing Issues
  98. 98. #SearchLove @goutaste ‘Lab Test’ Troubleshooting • Fetch & Render • Fetch & Render as any bot w/ timeout • Compare Source & ‘outerHTML’ • Headless Chrome
  99. 99. #SearchLove @goutaste https://www.google.com/webmasters/tools/go oglebot-fetch Fetch & Render As Googlebot
  100. 100. #SearchLove @goutaste Fetch & Render As Any Bot @maxxeight https://technicalseo.com/seo-tools/fetch-render/
  101. 101. #SearchLove @goutaste Compare Source & ‘outerHTML’ @justinrbriggs https://www.briggsby.com/auditing-javascript-for-seo/
  102. 102. #SearchLove @goutaste 2. Audit for App-iness
  103. 103. #SearchLove @goutaste PWA Checklist http://bit.ly/pwa-checklist
  104. 104. #SearchLove @goutaste Lighthouse
  105. 105. #SearchLove @goutaste 3. Audit for Speed
  106. 106. #SearchLove @goutastetestmysite.thinkwithgoogle.com These are the basics we all still get wrong PageSpeed Scores Aren’t All That Helpful But the Advice Can Still Tell You a Lot
  107. 107. #SearchLove @goutaste WebPageTest Has More Useful Feedback
  108. 108. #SearchLove @goutaste Performance Tab in Chrome Dev Tools (Formerly Called ‘Timeline’)
  109. 109. #SearchLove @goutaste 1. First Paint 2. First Contentful Paint “Is it happening?” http://bit.ly/performance-kpis@addyosmani
  110. 110. #SearchLove @goutaste “Is it useful?” “Is it useable?” 3. First Meaningful Paint 4. Time to Interactive http://bit.ly/performance-kpis@addyosmani
  111. 111. #SearchLove @goutaste Measuring The 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
  112. 112. #SearchLove @goutaste Reality: Load metrics aren’t a single number https://youtu.be/6Ljq-Jn-EgU
  113. 113. #SearchLove @goutaste Real User Metrics (RUM) Paint a Fuller Picture https://youtu.be/6Ljq-Jn-EgU
  114. 114. #SearchLove @goutaste Indexing Optimizing Auditing
  115. 115. #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
  116. 116. #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
  117. 117. #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)
  118. 118. #SearchLove @goutaste
  119. 119. #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, Catleesi of the Great Scratching post, Breaker of Treats and Mother of Cuddles” };
  120. 120. #SearchLove @goutaste Super-Smart, Helpful People @ipullrank @samccone@slightlylate Technical SEO PerformancePWAs @_developit Creator of Preact @addyosmani PWAs @theLarkInn Webpack @bart_goralewicz JS SEO @maxxeight Technical & JS SEO @jonoalderson Weird shit @justinrbriggs JS SEO @dsottimano Technical & JS SEO @suzzicks Mobile

×