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 #XXA @bart_goralewicz
Technical SEO in 2018.
New metrics,
new technologies
and new challenges.
#SMX #XXA @bart_goralewicz
3
latest
SEO
trends
Performance as a ranking factor
JavaScript IndexingJS
Mobile First1
#SMX #XXA @bart_goralewicz
3
latest
SEO
trends
Are these actually connected?
Performance as a ranking factor
JavaScript In...
#SMX #XXA @bart_goralewicz
How is JavaScript affecting
performance?
#SMX #XXA @bart_goralewicz
Have you heard
about the 2 waves of
JavaScript indexing?
#SMX #XXA @bart_goralewicz
Read more: ele.ph/budget
#SMX #XXA @bart_goralewicz
THE REAL COST
of
JavaScript
#SMX #XXA @bart_goralewicz
JavaScript HTML
#SMX #XXA @bart_goralewicz
The Guardian vs. CPU
A Case Study
#SMX #XXA @bart_goralewicz
It is believed that
The Guardian
& Amazon are
performance
superstars
#SMX #XXA @bart_goralewicz
„many of us still look at sites
like Amazon’s or the Guardian’s in awe”
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
How fast do you think
The Guardian loads?
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
137
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
But this performance
comes with a price…
#SMX #XXA @bart_goralewicz
JavaScript
“lives” in your
CPU
#SMX #XXA @bart_goralewicz
CPU
#SMX #XXA @bart_goralewicz
Go to Chrome Dev Tools →
Performance
CMD + OPT + I
CTRL + ALT + I
#SMX #XXA @bart_goralewicz
HIGH END MACHINE - THE BEST CPU
YOU CAN HAVE IN A MACBOOK
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
Slower CPU
Load Time – 90 seconds
#SMX #XXA @bart_goralewicz
CPUs 1-on-1
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
Source: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
3G + Moto G4
#SMX #XXA @bart_goralewicz
Unfortunately not all websites
are like The Guardian…
#SMX #XXA @bart_goralewicz
accuweather.com
#47 MOST POPULAR WEBSITE IN THE UK
#SMX #XXA @bart_goralewicz
SECONDS TO FIRST
MEANINGFUL PAINT
HIGH END CPU
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
6
sec
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
SECONDS TO FIRST
MEANINGFUL PAINT
(Moto G4’s CPU)
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
13 SECOND DIFFERENCE
BETWEEN A HIGH END CPU
AND A SLOW CPU (!)
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
…enter
#SMX #XXA @bart_goralewicz
Rewriting
JavaScript
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
Technical SEO in 2018 - New metrics, new technologies and new challenges.
#SMX #XXA @bart_goralewicz
What did they need
React for?
Language switcher
Buttons on the bottom
of the page
Client side l...
#SMX #XXA @bart_goralewicz
~300 lines of code written
~200 kB removed
#SMX #XXA @bart_goralewicz
50%50%
performance improvement
#SMX #XXA @bart_goralewicz
Netflix’s performance
doesn’t depend on the
client’s CPU that much
#SMX #XXA @bart_goralewicz
AMP – BBC.COM
Netflix.com Netflix.com @ Moto G4
#SMX #XXA @bart_goralewicz
Key problems with JavaScript
#SMX #XXA @bart_goralewicz
The cost of JavaScript.
Real world problems.
HARDWARE NETWORK
#SMX #XXA @bart_goralewicz
Where does
JavaScript
live?
Real world
problems.
#SMX #XXA @bart_goralewicz
How does it all affect mobile first?
#SMX #XXA @bart_goralewicz
Performance on mobile depends
on 2 key factors.
1. Mobile’s CPU
2. Network (2G, 3G, 4G)
#SMX #XXA @bart_goralewicz
Let’s translate it
to data
#SMX #XXA @bart_goralewicz
of mobile connections
occur over 2G
worldwide
45%
#SMX #XXA @bart_goralewicz
of mobile connections
occur over 2G or 3G75%
#SMX #XXA @bart_goralewicz
So we can assume that your average
user is visiting your website through a
2G or a slow 3G conn...
#SMX #XXA @bart_goralewicz
… on a Motorola G4
#SMX #XXA @bart_goralewicz
How would it
affect the loading
of e.g. CNN?
#SMX #XXA @bart_goralewicz
Source: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
Addy Osmani
engineer...
#SMX #XXA @bart_goralewicz
But mobile websites have less
JavaScript… DUH!
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
4 seconds
0.065 seconds
~200 KB to process
#SMX #XXA @bart_goralewicz
But before we take a deep dive into
performance case studies - let’s take
a step back
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
Why is
performance
a ranking factor
now?
#SMX #XXA @bart_goralewicz
It is impossible to
predict a website’s
performance on a
mobile.
#SMX #XXA @bart_goralewicz
We need
RUM!!!
Real
User
Metrics
#SMX #XXA @bart_goralewicz
Enter – The Chrome User
Experience Report
#SMX #XXA @bart_goralewicz
Why can’t Google just measure
performance during crawls?
#SMX #XXA @bart_goralewicz
We need an objective crowd–measured metric!
#SMX #XXA @bart_goralewicz
So is
The Guardian
fast?
#SMX #XXA @bart_goralewicz
According to CrUX…
#SMX #XXA @bart_goralewicz
…it is fast AF!
#SMX #XXA @bart_goralewicz
Chrome User Experience Report Data
#SMX #XXA @bart_goralewicz
Chrome User Experience Report Data
#SMX #XXA @bart_goralewicz
With performance it isn’t about 1 metric only.
• First Contentful paint
• Onload
• DOM content ...
#SMX #XXA @bart_goralewicz
2 key metrics according to
1. First Contentful Paint
2. DOM content loaded
https://ele.ph/wtf
#SMX #XXA @bart_goralewicz
The other question is:
How exactly does Google
measure it with Chrome?
#SMX #XXA @bart_goralewicz
It’s
complicated
#SMX #XXA @bart_goralewicz
The First Contentful Paint Mystery
#SMX #XXA @bart_goralewicz
Source: ele.ph/fcp
#SMX #XXA @bart_goralewicz
“We don't yet have a standardized
definition for FMP (…)”
Source: ele.ph/fcp
#SMX #XXA @bart_goralewicz
Images Headlines
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
The Guardian BBC
3G
+
MotoG4
#SMX #XXA @bart_goralewicz
AMP – BBC.COM
AMP – BBC.COM TheGuardian.com
(no AMP)
#SMX #XXA @bart_goralewicz
If you are not sold on the
JavaScript, performance & mobile first
shenanigans yet…
JS 1
#SMX #XXA @bart_goralewicz
Developers hate me. I can
make The Guardian fully load
within 2 seconds with this one
simple tr...
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
#SMX #XXA @bart_goralewicz
Performance metrics re-invented.
#SMX #XXA @bart_goralewicz
GTmetrix
Webpagetest
Chrome Dev Tools
Page Speed Insights
Chrome User
Experience Report
#SMX #XXA @bart_goralewicz
Load Time is dead!
#SMX #XXA @bart_goralewicz
mostly returning visits mostly search visits
#SMX #XXA @bart_goralewicz
A new game & new rules
User devices
CPU performance
CDN
Network speed (2G – 5G)
First paint vs....
#SMX #XXA @bart_goralewicz
Outro:
JavaScript is great but just like sugar, coffee,
booze & drugs. Use it wisely.
If you wa...
#SMX #XXA @bart_goralewicz
Mobile first
Performance as a ranking factor
JavaScript SEO
=
JS
1
#SMX #XXA @bart_goralewicz
Maria’s session spoiler:
JavaScript & PWAs.
What SEOs Need To Know.
Tomorrow 1 PM
#SMX #XXA @bart_goralewicz
Download my deck
@
ele.ph/smxlondon
#SMX #XXA @bart_goralewicz
LEARN MORE: UPCOMING @SMX EVENTS
THANK YOU!
SEE YOU AT THE NEXT #SMX
bartosz@elephate.com
@bart...
Upcoming SlideShare
Loading in …5
×

SMX London Technical SEO in 2018.

22,723 views

Published on

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

Published in: Marketing
  • Be the first to comment

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

×