Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

SMX London Technical SEO in 2018.

22 534 vues

Publié le

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

Publié dans : Marketing
  • Soyez le premier à commenter

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

×