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

1. #SMX #XXA @bart_goralewicz
Technical SEO in 2018.
New metrics,
new technologies
and new challenges.

2. #SMX #XXA @bart_goralewicz
3
latest
SEO
trends
Performance as a ranking factor
JavaScript IndexingJS
Mobile First1

3. #SMX #XXA @bart_goralewicz
3
latest
SEO
trends
Are these actually connected?
Performance as a ranking factor
JavaScript IndexingJS
Mobile First1

4. #SMX #XXA @bart_goralewicz
How is JavaScript affecting
performance?

5. #SMX #XXA @bart_goralewicz
Have you heard
about the 2 waves of
JavaScript indexing?

6. #SMX #XXA @bart_goralewicz
Read more: ele.ph/budget

7. #SMX #XXA @bart_goralewicz
THE REAL COST
of
JavaScript

8. #SMX #XXA @bart_goralewicz
JavaScript HTML

9. #SMX #XXA @bart_goralewicz
The Guardian vs. CPU
A Case Study

10. #SMX #XXA @bart_goralewicz
It is believed that
The Guardian
& Amazon are
performance
superstars

11. #SMX #XXA @bart_goralewicz
„many of us still look at sites
like Amazon’s or the Guardian’s in awe”

12. #SMX #XXA @bart_goralewicz

13. #SMX #XXA @bart_goralewicz
How fast do you think
The Guardian loads?

14. #SMX #XXA @bart_goralewicz

15. #SMX #XXA @bart_goralewicz

16. #SMX #XXA @bart_goralewicz
137

17. #SMX #XXA @bart_goralewicz

18. #SMX #XXA @bart_goralewicz
But this performance
comes with a price…

19. #SMX #XXA @bart_goralewicz
JavaScript
“lives” in your
CPU

20. #SMX #XXA @bart_goralewicz
CPU

21. #SMX #XXA @bart_goralewicz
Go to Chrome Dev Tools →
Performance
CMD + OPT + I
CTRL + ALT + I

22. #SMX #XXA @bart_goralewicz
HIGH END MACHINE - THE BEST CPU
YOU CAN HAVE IN A MACBOOK

23. #SMX #XXA @bart_goralewicz

24. #SMX #XXA @bart_goralewicz
Slower CPU
Load Time – 90 seconds

25. #SMX #XXA @bart_goralewicz
CPUs 1-on-1

26. #SMX #XXA @bart_goralewicz

27. #SMX #XXA @bart_goralewicz

28. #SMX #XXA @bart_goralewicz
Source: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

29. #SMX #XXA @bart_goralewicz

30. #SMX #XXA @bart_goralewicz
3G + Moto G4

31. #SMX #XXA @bart_goralewicz
Unfortunately not all websites
are like The Guardian…

32. #SMX #XXA @bart_goralewicz
accuweather.com
#47 MOST POPULAR WEBSITE IN THE UK

33. #SMX #XXA @bart_goralewicz
SECONDS TO FIRST
MEANINGFUL PAINT
HIGH END CPU
#SMX #XXA @bart_goralewicz

34. #SMX #XXA @bart_goralewicz
6
sec

35. #SMX #XXA @bart_goralewicz

36. #SMX #XXA @bart_goralewicz
SECONDS TO FIRST
MEANINGFUL PAINT
(Moto G4’s CPU)
#SMX #XXA @bart_goralewicz

37. #SMX #XXA @bart_goralewicz#SMX #XXA @bart_goralewicz

38. #SMX #XXA @bart_goralewicz
13 SECOND DIFFERENCE
BETWEEN A HIGH END CPU
AND A SLOW CPU (!)

39. #SMX #XXA @bart_goralewicz

40. #SMX #XXA @bart_goralewicz
…enter

41. #SMX #XXA @bart_goralewicz
Rewriting
JavaScript

42. #SMX #XXA @bart_goralewicz

43. #SMX #XXA @bart_goralewicz

44. #SMX #XXA @bart_goralewicz
Technical SEO in 2018 - New metrics, new technologies and new challenges.

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. #SMX #XXA @bart_goralewicz
~300 lines of code written
~200 kB removed

47. #SMX #XXA @bart_goralewicz
50%50%
performance improvement

48. #SMX #XXA @bart_goralewicz
Netflix’s performance
doesn’t depend on the
client’s CPU that much

49. #SMX #XXA @bart_goralewicz
AMP – BBC.COM
Netflix.com Netflix.com @ Moto G4

50. #SMX #XXA @bart_goralewicz
Key problems with JavaScript

51. #SMX #XXA @bart_goralewicz
The cost of JavaScript.
Real world problems.
HARDWARE NETWORK

52. #SMX #XXA @bart_goralewicz
Where does
JavaScript
live?
Real world
problems.

53. #SMX #XXA @bart_goralewicz
How does it all affect mobile first?

54. #SMX #XXA @bart_goralewicz
Performance on mobile depends
on 2 key factors.
1. Mobile’s CPU
2. Network (2G, 3G, 4G)

55. #SMX #XXA @bart_goralewicz
Let’s translate it
to data

56. #SMX #XXA @bart_goralewicz
of mobile connections
occur over 2G
worldwide
45%

57. #SMX #XXA @bart_goralewicz
of mobile connections
occur over 2G or 3G75%

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. #SMX #XXA @bart_goralewicz
… on a Motorola G4

60. #SMX #XXA @bart_goralewicz
How would it
affect the loading
of e.g. CNN?

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. #SMX #XXA @bart_goralewicz
But mobile websites have less
JavaScript… DUH!
#SMX #XXA @bart_goralewicz

63. #SMX #XXA @bart_goralewicz

64. #SMX #XXA @bart_goralewicz
4 seconds
0.065 seconds
~200 KB to process

65. #SMX #XXA @bart_goralewicz
But before we take a deep dive into
performance case studies - let’s take
a step back

66. #SMX #XXA @bart_goralewicz

67. #SMX #XXA @bart_goralewicz
Why is
performance
a ranking factor
now?

68. #SMX #XXA @bart_goralewicz
It is impossible to
predict a website’s
performance on a
mobile.

69. #SMX #XXA @bart_goralewicz
We need
RUM!!!
Real
User
Metrics

70. #SMX #XXA @bart_goralewicz
Enter – The Chrome User
Experience Report

71. #SMX #XXA @bart_goralewicz
Why can’t Google just measure
performance during crawls?

72. #SMX #XXA @bart_goralewicz
We need an objective crowd–measured metric!

73. #SMX #XXA @bart_goralewicz
So is
The Guardian
fast?

74. #SMX #XXA @bart_goralewicz
According to CrUX…

75. #SMX #XXA @bart_goralewicz
…it is fast AF!

76. #SMX #XXA @bart_goralewicz
Chrome User Experience Report Data

77. #SMX #XXA @bart_goralewicz
Chrome User Experience Report Data

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. #SMX #XXA @bart_goralewicz
2 key metrics according to
1. First Contentful Paint
2. DOM content loaded
https://ele.ph/wtf

80. #SMX #XXA @bart_goralewicz
The other question is:
How exactly does Google
measure it with Chrome?

81. #SMX #XXA @bart_goralewicz
It’s
complicated

82. #SMX #XXA @bart_goralewicz
The First Contentful Paint Mystery

83. #SMX #XXA @bart_goralewicz
Source: ele.ph/fcp

84. #SMX #XXA @bart_goralewicz
“We don't yet have a standardized
definition for FMP (…)”
Source: ele.ph/fcp

85. #SMX #XXA @bart_goralewicz
Images Headlines

86. #SMX #XXA @bart_goralewicz

87. #SMX #XXA @bart_goralewicz
The Guardian BBC
3G
+
MotoG4

88. #SMX #XXA @bart_goralewicz
AMP – BBC.COM
AMP – BBC.COM TheGuardian.com
(no AMP)

89. #SMX #XXA @bart_goralewicz
If you are not sold on the
JavaScript, performance & mobile first
shenanigans yet…
JS 1

90. #SMX #XXA @bart_goralewicz
Developers hate me. I can
make The Guardian fully load
within 2 seconds with this one
simple trick...

91. #SMX #XXA @bart_goralewicz

92. #SMX #XXA @bart_goralewicz

93. #SMX #XXA @bart_goralewicz

94. #SMX #XXA @bart_goralewicz
Performance metrics re-invented.

95. #SMX #XXA @bart_goralewicz
GTmetrix
Webpagetest
Chrome Dev Tools
Page Speed Insights
Chrome User
Experience Report

96. #SMX #XXA @bart_goralewicz
Load Time is dead!

97. #SMX #XXA @bart_goralewicz
mostly returning visits mostly search visits

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. #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. #SMX #XXA @bart_goralewicz
Mobile first
Performance as a ranking factor
JavaScript SEO
=
JS
1

101. #SMX #XXA @bart_goralewicz
Maria’s session spoiler:
JavaScript & PWAs.
What SEOs Need To Know.
Tomorrow 1 PM

102. #SMX #XXA @bart_goralewicz
Download my deck
@
ele.ph/smxlondon

103. #SMX #XXA @bart_goralewicz
LEARN MORE: UPCOMING @SMX EVENTS
THANK YOU!
SEE YOU AT THE NEXT #SMX
bartosz@elephate.com
@bart_goralewicz