SMX London Technical SEO in 2018.

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

#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...

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1042022 views
Storytelling For The Web: Integrate... by Chiara Aliotta 954721 views
Artificial Intelligence, Data and C... by OECD Directorate ... 880306 views
How to Leverage AI to Boost Employe... by SocialHRCamp 370586 views
2024 State of Marketing Report – by... by Marius Sescu 210442 views
Everything You Need To Know About C... by Expeed Software 229923 views

View on Slideshare

1 of 103 Ad

View on Slideshare

1 of 103 Ad