Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SMX London Technical SEO in 2018.

22,139 views

Published on

New metrics, new technologies and new challenges.
JavaScript, Mobile First, and Performance as a ranking factor.

Published in: Marketing

SMX London Technical SEO in 2018.

  1. 1. #SMX #XXA @bart_goralewicz Technical SEO in 2018. New metrics, new technologies and new challenges.
  2. 2. #SMX #XXA @bart_goralewicz 3 latest SEO trends Performance as a ranking factor JavaScript IndexingJS Mobile First1
  3. 3. #SMX #XXA @bart_goralewicz 3 latest SEO trends Are these actually connected? Performance as a ranking factor JavaScript IndexingJS Mobile First1
  4. 4. #SMX #XXA @bart_goralewicz How is JavaScript affecting performance?
  5. 5. #SMX #XXA @bart_goralewicz Have you heard about the 2 waves of JavaScript indexing?
  6. 6. #SMX #XXA @bart_goralewicz Read more: ele.ph/budget
  7. 7. #SMX #XXA @bart_goralewicz THE REAL COST of JavaScript
  8. 8. #SMX #XXA @bart_goralewicz JavaScript HTML
  9. 9. #SMX #XXA @bart_goralewicz The Guardian vs. CPU A Case Study
  10. 10. #SMX #XXA @bart_goralewicz It is believed that The Guardian & Amazon are performance superstars
  11. 11. #SMX #XXA @bart_goralewicz „many of us still look at sites like Amazon’s or the Guardian’s in awe”
  12. 12. #SMX #XXA @bart_goralewicz
  13. 13. #SMX #XXA @bart_goralewicz How fast do you think The Guardian loads?
  14. 14. #SMX #XXA @bart_goralewicz
  15. 15. #SMX #XXA @bart_goralewicz
  16. 16. #SMX #XXA @bart_goralewicz 137
  17. 17. #SMX #XXA @bart_goralewicz
  18. 18. #SMX #XXA @bart_goralewicz But this performance comes with a price…
  19. 19. #SMX #XXA @bart_goralewicz JavaScript “lives” in your CPU
  20. 20. #SMX #XXA @bart_goralewicz CPU
  21. 21. #SMX #XXA @bart_goralewicz Go to Chrome Dev Tools → Performance CMD + OPT + I CTRL + ALT + I
  22. 22. #SMX #XXA @bart_goralewicz HIGH END MACHINE - THE BEST CPU YOU CAN HAVE IN A MACBOOK
  23. 23. #SMX #XXA @bart_goralewicz
  24. 24. #SMX #XXA @bart_goralewicz Slower CPU Load Time – 90 seconds
  25. 25. #SMX #XXA @bart_goralewicz CPUs 1-on-1
  26. 26. #SMX #XXA @bart_goralewicz
  27. 27. #SMX #XXA @bart_goralewicz
  28. 28. #SMX #XXA @bart_goralewicz Source: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
  29. 29. #SMX #XXA @bart_goralewicz
  30. 30. #SMX #XXA @bart_goralewicz 3G + Moto G4
  31. 31. #SMX #XXA @bart_goralewicz Unfortunately not all websites are like The Guardian…
  32. 32. #SMX #XXA @bart_goralewicz accuweather.com #47 MOST POPULAR WEBSITE IN THE UK
  33. 33. #SMX #XXA @bart_goralewicz SECONDS TO FIRST MEANINGFUL PAINT HIGH END CPU #SMX #XXA @bart_goralewicz
  34. 34. #SMX #XXA @bart_goralewicz 6 sec
  35. 35. #SMX #XXA @bart_goralewicz
  36. 36. #SMX #XXA @bart_goralewicz SECONDS TO FIRST MEANINGFUL PAINT (Moto G4’s CPU) #SMX #XXA @bart_goralewicz
  37. 37. #SMX #XXA @bart_goralewicz#SMX #XXA @bart_goralewicz
  38. 38. #SMX #XXA @bart_goralewicz 13 SECOND DIFFERENCE BETWEEN A HIGH END CPU AND A SLOW CPU (!)
  39. 39. #SMX #XXA @bart_goralewicz
  40. 40. #SMX #XXA @bart_goralewicz …enter
  41. 41. #SMX #XXA @bart_goralewicz Rewriting JavaScript
  42. 42. #SMX #XXA @bart_goralewicz
  43. 43. #SMX #XXA @bart_goralewicz
  44. 44. #SMX #XXA @bart_goralewicz Technical SEO in 2018 - New metrics, new technologies and new challenges.
  45. 45. #SMX #XXA @bart_goralewicz What did they need React for? Language switcher Buttons on the bottom of the page Client side login library
  46. 46. #SMX #XXA @bart_goralewicz ~300 lines of code written ~200 kB removed
  47. 47. #SMX #XXA @bart_goralewicz 50%50% performance improvement
  48. 48. #SMX #XXA @bart_goralewicz Netflix’s performance doesn’t depend on the client’s CPU that much
  49. 49. #SMX #XXA @bart_goralewicz AMP – BBC.COM Netflix.com Netflix.com @ Moto G4
  50. 50. #SMX #XXA @bart_goralewicz Key problems with JavaScript
  51. 51. #SMX #XXA @bart_goralewicz The cost of JavaScript. Real world problems. HARDWARE NETWORK
  52. 52. #SMX #XXA @bart_goralewicz Where does JavaScript live? Real world problems.
  53. 53. #SMX #XXA @bart_goralewicz How does it all affect mobile first?
  54. 54. #SMX #XXA @bart_goralewicz Performance on mobile depends on 2 key factors. 1. Mobile’s CPU 2. Network (2G, 3G, 4G)
  55. 55. #SMX #XXA @bart_goralewicz Let’s translate it to data
  56. 56. #SMX #XXA @bart_goralewicz of mobile connections occur over 2G worldwide 45%
  57. 57. #SMX #XXA @bart_goralewicz of mobile connections occur over 2G or 3G75%
  58. 58. #SMX #XXA @bart_goralewicz So we can assume that your average user is visiting your website through a 2G or a slow 3G connection …
  59. 59. #SMX #XXA @bart_goralewicz … on a Motorola G4
  60. 60. #SMX #XXA @bart_goralewicz How would it affect the loading of e.g. CNN?
  61. 61. #SMX #XXA @bart_goralewicz Source: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e Addy Osmani engineering manager at Google working on Chrome. 9s
  62. 62. #SMX #XXA @bart_goralewicz But mobile websites have less JavaScript… DUH! #SMX #XXA @bart_goralewicz
  63. 63. #SMX #XXA @bart_goralewicz
  64. 64. #SMX #XXA @bart_goralewicz 4 seconds 0.065 seconds ~200 KB to process
  65. 65. #SMX #XXA @bart_goralewicz But before we take a deep dive into performance case studies - let’s take a step back
  66. 66. #SMX #XXA @bart_goralewicz
  67. 67. #SMX #XXA @bart_goralewicz Why is performance a ranking factor now?
  68. 68. #SMX #XXA @bart_goralewicz It is impossible to predict a website’s performance on a mobile.
  69. 69. #SMX #XXA @bart_goralewicz We need RUM!!! Real User Metrics
  70. 70. #SMX #XXA @bart_goralewicz Enter – The Chrome User Experience Report
  71. 71. #SMX #XXA @bart_goralewicz Why can’t Google just measure performance during crawls?
  72. 72. #SMX #XXA @bart_goralewicz We need an objective crowd–measured metric!
  73. 73. #SMX #XXA @bart_goralewicz So is The Guardian fast?
  74. 74. #SMX #XXA @bart_goralewicz According to CrUX…
  75. 75. #SMX #XXA @bart_goralewicz …it is fast AF!
  76. 76. #SMX #XXA @bart_goralewicz Chrome User Experience Report Data
  77. 77. #SMX #XXA @bart_goralewicz Chrome User Experience Report Data
  78. 78. #SMX #XXA @bart_goralewicz With performance it isn’t about 1 metric only. • First Contentful paint • Onload • DOM content loaded Also: e.g. time to interactive
  79. 79. #SMX #XXA @bart_goralewicz 2 key metrics according to 1. First Contentful Paint 2. DOM content loaded https://ele.ph/wtf
  80. 80. #SMX #XXA @bart_goralewicz The other question is: How exactly does Google measure it with Chrome?
  81. 81. #SMX #XXA @bart_goralewicz It’s complicated
  82. 82. #SMX #XXA @bart_goralewicz The First Contentful Paint Mystery
  83. 83. #SMX #XXA @bart_goralewicz Source: ele.ph/fcp
  84. 84. #SMX #XXA @bart_goralewicz “We don't yet have a standardized definition for FMP (…)” Source: ele.ph/fcp
  85. 85. #SMX #XXA @bart_goralewicz Images Headlines
  86. 86. #SMX #XXA @bart_goralewicz
  87. 87. #SMX #XXA @bart_goralewicz The Guardian BBC 3G + MotoG4
  88. 88. #SMX #XXA @bart_goralewicz AMP – BBC.COM AMP – BBC.COM TheGuardian.com (no AMP)
  89. 89. #SMX #XXA @bart_goralewicz If you are not sold on the JavaScript, performance & mobile first shenanigans yet… JS 1
  90. 90. #SMX #XXA @bart_goralewicz Developers hate me. I can make The Guardian fully load within 2 seconds with this one simple trick...
  91. 91. #SMX #XXA @bart_goralewicz
  92. 92. #SMX #XXA @bart_goralewicz
  93. 93. #SMX #XXA @bart_goralewicz
  94. 94. #SMX #XXA @bart_goralewicz Performance metrics re-invented.
  95. 95. #SMX #XXA @bart_goralewicz GTmetrix Webpagetest Chrome Dev Tools Page Speed Insights Chrome User Experience Report
  96. 96. #SMX #XXA @bart_goralewicz Load Time is dead!
  97. 97. #SMX #XXA @bart_goralewicz mostly returning visits mostly search visits
  98. 98. #SMX #XXA @bart_goralewicz A new game & new rules User devices CPU performance CDN Network speed (2G – 5G) First paint vs. Loaded vs. EIL etc. % of returning users vs. new users vs. performance Safari vs. Chrome
  99. 99. #SMX #XXA @bart_goralewicz Outro: JavaScript is great but just like sugar, coffee, booze & drugs. Use it wisely. If you want to rock @ Mobile First SEO, get familiar with JavaScript SEO BigQuery & Chrome User Experience Report is your friend (even though it plays hard to get) JavaScript is great but just like sugar, coffee, booze & drugs - use it wisely. If you want to rock @ Mobile First SEO, get familiar with JavaScript SEO BigQuery & the Chrome User Experience Report is your friend (even though it plays hard to get) OUTRO
  100. 100. #SMX #XXA @bart_goralewicz Mobile first Performance as a ranking factor JavaScript SEO = JS 1
  101. 101. #SMX #XXA @bart_goralewicz Maria’s session spoiler: JavaScript & PWAs. What SEOs Need To Know. Tomorrow 1 PM
  102. 102. #SMX #XXA @bart_goralewicz Download my deck @ ele.ph/smxlondon
  103. 103. #SMX #XXA @bart_goralewicz LEARN MORE: UPCOMING @SMX EVENTS THANK YOU! SEE YOU AT THE NEXT #SMX bartosz@elephate.com @bart_goralewicz

×