Chrome DevTools are a set of free tools built directly into the Google Chrome browser, that offer developers and SEO specialists exceptional insights into underlying SEO issues. In this session, we will look at how to use it for technical SEO auditing, performance testing and crawlability, especially for JavaScript sites.

1. —
The Beginner's Crash
Course to Chrome
DevTools for SEOs

2. Let me introduce myself
– SEO specialist at Liip, a web & mobile
development agency
– #SEOnerdSwitzerland
Meetup co-founder
– Global SEO Club co-founder
#SMX @moccandsayegh

3. What/Why/How
01
Network
02
Performance
03
Elements
04
Agenda
#SMX @moccandsayegh

4. What is Chrome
DevTools?

5. The definition of Chrome Dev Tools
Chrome DevTools is a set of web
developer tools built directly into the
Google Chrome browser
#SMX @moccandsayegh

6. How DevTools look like
#SMX @moccandsayegh

7. Why should SEOs
know Chrome
DevTools?

8. DevTools superpower
— Diagnose problems faster.
— All you need Chrome and a computer.
#SMX @moccandsayegh

9. Wasting money…
1.
Write content
2.
Designer
3.
Accordions
4.
Content not in the
HTML
5.
Google can’t read
your content
6.
Wasted money &
energy
#SMX @moccandsayegh

10. Easy review of code
1.
Jira Ticket
2.
Dev implementation
3.
Check code
#SMX @moccandsayegh

11. What’s the SEOs role

12. Tech SEOs role
The Tech SEOs role is
to find problems that
could prevent crawling
and indexing
#SMX @moccandsayegh

13. Devs role
The devs role is to
fix problems the
SEOs found
#SMX @moccandsayegh

14. SEOs & Devs have common goals
SEOs
E.g.:
Performance Devs
#SMX @moccandsayegh

15. How to prepare to use
DevTools?

16. Open DevTools
1
2
#SMX @moccandsayegh

17. Choose the device
@moccandsayegh
More options

18. Bonus Request user agent:
Googlebot

19. Not always working
…Nike website

20. What we will look at

21. Devtools
@moccandsayegh
1
2

22. Network

23. Network tab - settings
1
2
3
4 5 6 7 8 9 10

24. Examples of when to look at the
Network tab

25. The content is taking too long to appear
on the page
1.
Write content
2.
productpage.ch
3.
Wait for the
page to load
4.
Still Waiting…
5.
The page loaded
6.
The user didn’t wait
Tschüss
#SMX @moccandsayegh
Transmission
(send the
request)
Threading (page
elements load)

26. NASA website
…39.26 sec later I
still don't have the
final website

27. NASA website
@moccandsayegh

28. Let’s sum up the info
1. To load everything it takes 47.51s
2. 8.1 MB transferred
3. Vendor.js is 4.2 MB
#SMX @moccandsayegh

29. …
#SMX @moccandsayegh

30. Vendor.js

31. Waterfall
The JS vendor file =
4.2 MB
31
Content Download =
38.43 S

32. What would I do next…

33. Page is not indexed
1.
Write content
2.
Designer
3.
noindex
4.
Crawler
5.
Google will drop the
page
6.
Wasted money &
energy
Google said: “When Googlebot crawls that page and extracts the tag or header, Google will drop that page
entirely from Google Search results, regardless of whether other sites link to it.”
https://developers.google.com/search/docs/crawling-indexing/block-indexing
#SMX @moccandsayegh

34. Why the website/webpage is not
indexed
Sometimes we find a noindex or none in the header

35. What would I do next…

36. Make sure your 404 pages work
1.
Write content
2.
Designer
3.
Website migration
4.
Status code for
broken pages
5.
…but what you get
6.
Can’t correct the
broken pages
404 200
#SMX @moccandsayegh

37. Generate a 404 to see the server
response
37
Conclusion: I
have no way to
track the 404
and know if
there is a
problem

38. What would I do next…

39. Performance

40. Performance Tab - settings

41. 1. Recording timeline
2. Screen loading
3. Performance measure (e.g. LCP)
4. Long task
5. Total blocking time = by improving this you improve the FID

42. Examples of when to look at the
Performance tab

43. Poor Core Web Vitals
1.
CWV
2.
Competitors CWV
3.
Competitors ranks
better
#SMX @moccandsayegh

44. Core web vitals metrics
#SMX @moccandsayegh

45. First Input Delay
First Input Delay (FID) measures the
time from when a user first interacts
with a page (i.e. when they click a link)
to when the browser can actually begin
processing event handlers in response
to that interaction.
Source: https://web.dev/fid/

46. First Input Delay
Metrics: not OK if it takes more than 100 ms

47. First Input Delay in DevTool
Long task e.g in the browser

48. Cumulative Layout Shift (CLS)
The CLS measures when a visible
element within the viewport changes
position.
For instance, if you want to click on a
button & the button is no longer in the
same place, that is a layout shift & will
impact CLS.

49. Cumulative Layout Shift

50. Cumulative Layout Shift in Devtools

51. Largest Contentful Paint
“Largest Contentful Paint (LCP) is an
important, user-centric metric for
measuring the perceived load speed
because it marks the point in the page
load timeline when the page's main
content has likely loaded—a fast LCP
helps reassure the user that the page is
useful.” Source: https://web.dev/lcp/

52. Largest Contentful Paint

53. LCPresult
If you want to work on the
performance with your dev
check the Main thread

54. Main thread - Apple VS Samsung
17 s
7 s

55. Not used CSS & JS
1. In the performance tab (network) = all
requests + time + priorities of the
request
2. We have request a css that we do not
use

56. What happens to the LCPif we block
the main.built.css request ?
😱
✌

57. What happens to the LCPif we block all
images request ?

58. LCPresult

59. What is the difference between the 2
LPC?
We improved the LCP from 17 s to 13 s by
only blocking the images.
...Imagine how much we could have earned if
we had worked on the JS or/and CSS files.

60. Let’s sum up the info
1. Samsung LCP 7 s vs Apple 17 s
2. Summary of the main thread is not
very different
#SMX @moccandsayegh

61. Let’s sum up the info
3. In Samsung e.g there are tons of
activities happening after the LCP
4. If we block several images the LCP
of Apple improves
#SMX @moccandsayegh

62. What would I do next…

63. Elements

64. Representation of the DOM on the
Nike page
LCP

65. Examples of when to look at the
Elements tab

66. Are you sure that the
accordions are visible?
1.
Write content
2.
Designer
3.
Accordions
4.
Content not in the
HTML
5.
Google can’t read
your content
6.
Wasted money &
energy
#SMX @moccandsayegh

67. Accordions
67
Google don’t click…
If I click JS
modifies the DOM
#SMX @moccandsayegh

68. Website with Accordions

69. What would I do next…
@moccandsayegh

70. Does Google find your new page?
1.
Write content
2.
Designer
3.
New page
4.
No
<a href=”/page”>
5.
Google can’t find the
new page
6.
Wasted money &
energy
#SMX @moccandsayegh

71. Let’s look at some examples of Links
<a href=”https://smx.de”>SMX link</a>
<a onclick=”goTo(‘https://smx.de’)”>SMX</a>
https://developers.google.com/search/docs/crawling-indexing/links-crawlable
#SMX @moccandsayegh

72. Does Nike have <a href=...> links?

73. What would I do next…
#SMX @moccandsayegh

74. Bonus

75. Let’s analyse a network request

76. Vendor.js

77. Transmission (Network tab)
Server Client (Browser)
Request
Vendor.js file
Response Vendor.js file
chunks arriving to the
browser

78. Waterfall
The steps that need
to take place once a
request is sent.
78

79. 1st Step
Queued/Stalled
The request may be
delayed because:
1. lower priority Some
resources are more critical.
2. Browser or server still
using HTTP1.1 protocol (6
request max at the time).
79

80. 2nd step DNS
Lookup
DNS lookup is the process
of translating a
human-readable domain
name (such as nasa.gov)
into an IP address (such as
97.xxx.xxx.xx). That, it’s
used to locate the server
hosting that domain. 80
DNS Lookup

81. 3rd step
Request sent
The request is being sent
81

82. 4th step waiting
for server
response
TTFB= The browser
is waiting for the first
byte of a response
82

83. 5th step Content
Download
See next slide
83

84. What is content download
Server Client (Browser)
Request
Vendor.js file
Response Vendor.js file
chunks arriving to the
browser
First bytes
chunk arrives
on the client
(TTFB)
Last bytes
chunk
received on
the client

85. Let’s analyse Timings

86. What’s Timings?
Timing refers to a set of performance metrics
that are used to measure the various stages of
a web page's loading and rendering process.

87. What’s First Paint (FP)
The FP measures the time it takes
for the browser to render the first
pixels of content on the screen

88. First Contentful Paint (FCP)
The FCP happens when the browser
first renders any content from the
document object model (DOM). E.g:
Text

89. Thank you
@moccandsayegh
/moccandsayeghsara/