Demystifying
Chrome Dev Tools
Ruth Everett
SearchPilot
speakerdeck.com/rvth
@rvtheverett
Slide 2
Slide 2 text
Learn some new things
about Chrome Dev Tools
Slide 3
Slide 3 text
Some of the things it
can be useful for
Slide 4
Slide 4 text
Hi, I'm Ruth!
Slide 5
Slide 5 text
SEO Testing
Consultant
@ SearchPilot
Slide 6
Slide 6 text
I like falling down
technical rabbit
holes and digging
into data
Slide 7
Slide 7 text
I also really love dogs
Slide 8
Slide 8 text
What is Chrome
DevTools?
@rvtheverett @SearchPilot
Slide 9
Slide 9 text
What is Chrome Dev Tools?
Free tool built into the Chrome browser
Slide 10
Slide 10 text
What is Chrome Dev Tools?
Free tool built into the Chrome browser
Provides access to features that enable you to
audit elements on your website in real time
Slide 11
Slide 11 text
What is Chrome Dev Tools?
Free tool built into the Chrome browser
Provides access to features that enable you to
audit elements on your website in real time
Valuable tool to have in your arsenal and is just
a click away
Slide 12
Slide 12 text
Accessing Chrome DevTools
Slide 13
Slide 13 text
Accessing Chrome DevTools
Slide 14
Slide 14 text
A full view of DevTools
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
There’s a lot to cover… and I
don’t have time for everything
today
Slide 17
Slide 17 text
Review & Validate
Elements
Make the most of
the Console
Run Site Speed &
Performance
Audits
Test different
views
Slide 18
Slide 18 text
Review and
Validate Elements
@rvtheverett @SearchPilot
Slide 19
Slide 19 text
Ensure content is
discoverable
@rvtheverett @SearchPilot
Review and Validate Elements
Slide 20
Slide 20 text
Ensure content is discoverable
Elements panel > view the
Document Object Model (DOM) of
your page.
Slide 21
Slide 21 text
Ensure content is discoverable
Elements panel > view the
Document Object Model (DOM) of
your page.
Meta tags
Canonical tags
Hreflang tags
Main body content
Page structure
Slide 22
Slide 22 text
Ensure content is discoverable
Displays the JavaScript rendered
version of the page
Slide 23
Slide 23 text
Ensure content is discoverable
If you are injecting content or
changing elements using
JavaScript, you will see
differences between this and the
appearance of the HTML source
code.
Displays the JavaScript rendered
version of the page
Slide 24
Slide 24 text
Perform a JavaScript Parity Analysis
Right click > Copy > Copy element
Slide 25
Slide 25 text
Perform a JavaScript Parity Analysis
Meta tags
Canonicals
Indexing tags
Main headings
Key content
Diff checker
HTML Only JavaScript
rendered
https://www.diffchecker.com/
Slide 26
Slide 26 text
Find and
Validate Useful
Elements
@rvtheverett @SearchPilot
Review and Validate Elements
Slide 27
Slide 27 text
Find and Validate Useful Elements
Search
Function
Title and meta tags
Canonicals
Hreflang configuration
Robot meta tags
Slide 28
Slide 28 text
Find and Validate Useful Elements
Element selector tool
Slide 29
Slide 29 text
Find and Validate Useful Elements
Element selector tool
Hover over and view
different elements
Slide 30
Slide 30 text
Verify alt text
@rvtheverett @SearchPilot
Review and Validate Elements
Slide 31
Slide 31 text
Verify image alt text
Element selector > Click an image > View alt text
Slide 32
Slide 32 text
Site Speed &
Performance Audits
@rvtheverett @SearchPilot
Slide 33
Slide 33 text
Run Google
Lighthouse
@rvtheverett @SearchPilot
Site Speed & Performance Audits
Slide 34
Slide 34 text
Google Lighthouse
Running a Lighthouse Test
Slide 35
Slide 35 text
Google Lighthouse - Performance Score
Running a Lighthouse Test
Slide 36
Slide 36 text
Google Lighthouse - Performance Metrics
Lighthouse Metrics
Poor
Needs
Improvement
Good
Slide 37
Slide 37 text
Google Lighthouse - Performance Opportunities
Lighthouse Opportunities
Slide 38
Slide 38 text
Google Lighthouse - Performance Opportunities
Lighthouse Opportunities
Slide 39
Slide 39 text
Google Lighthouse - Accessibility
Accessibility Score
Slide 40
Slide 40 text
Identify Core Web
Vitals Issues
@rvtheverett @SearchPilot
Site Speed & Performance Audits
Slide 41
Slide 41 text
Layout shifting areas and core web vitals
Console > Rendering > Layout Shift Regions & Core Web Vitals
Slide 42
Slide 42 text
Layout shifting areas
Breadcrumb element
Main page content
Identify the exact
elements causing
layout shifts
Slide 43
Slide 43 text
Core web vitals
Slide 44
Slide 44 text
Core web vitals
Metrics and timings are displayed as
you interact with the page
Slide 45
Slide 45 text
View
Performance
Insights
@rvtheverett @SearchPilot
Site Speed & Performance Audits
Slide 46
Slide 46 text
Performance Insights
Slide 47
Slide 47 text
Performance Insights
Slide 48
Slide 48 text
Performance Insights
View a visual of the page loading.
Scroll across different moments to view loading
and timings.
Slide 49
Slide 49 text
Performance Insights
Slide 50
Slide 50 text
Performance Insights
Slide 51
Slide 51 text
Set Up Local
Overrides
@rvtheverett @SearchPilot
Site Speed & Performance Audits
Slide 52
Slide 52 text
Local Overrides
Amend CSS Files
Remove rendering blocking resources
Check Layout Shift fixes
Comment out JavaScript files
Lazy load images
Slide 53
Slide 53 text
Local Overrides
Sources > Overrides >
Select folder for overrides
Slide 54
Slide 54 text
Local Overrides
Sources > Overrides >
Select folder for overrides
Enable Local Overrides
Slide 55
Slide 55 text
Local Overrides
Make changes to
the HTML here
Sources > Page > Select page > Save for Overrides
Slide 56
Slide 56 text
The power of the
console
@rvtheverett @SearchPilot
Slide 57
Slide 57 text
Find JavaScript
errors
@rvtheverett @SearchPilot
The power of the console
Record Performance
View performance
of interactions on
the page.
Slide 100
Slide 100 text
Record Performance
Reload the page to
view performance
of the page load
Slide 101
Slide 101 text
Record Performance
Filmstrip
Web Vitals
Timings
Slide 102
Slide 102 text
Record Performance - Filmstrip
Filmstrip
Screenshot
of the page
at the point
of load
Slide 103
Slide 103 text
Record Performance - Web Vitals
Web Vitals
Slide 104
Slide 104 text
Record Performance - Web Vitals
First Paint (FP) - the time taken by the first pixel when loaded
First Contentful Paint (FCP) - when the first piece of content
renders
Largest Contentful Paint (LCP) - the time taken for the
largest element on the page to load
First Meaningful Paint (FMP) - the time taken to provide the
first piece of meaningful information to users
Dom Content Loaded (DCL) - when the HTML document has
finished loading
Slide 105
Slide 105 text
Record Performance - Network Waterfall
Slide 106
Slide 106 text
Review resource
coverage and
identify unused
code
Slide 107
Slide 107 text
Resource Coverage
Slide 108
Slide 108 text
Resource Coverage
Slide 109
Slide 109 text
Disable cache
Slide 110
Slide 110 text
Disable Cache
Network Panel > Tick Disable cache
Slide 111
Slide 111 text
Beautify code for
easy review
Slide 112
Slide 112 text
Beautify code for easy review
Slide 113
Slide 113 text
7+ SEO Test Ideas to Grow
Your Organic Traffic
Live Webinar
21 September 2023
6pm BST | 1pm ET | 10am PT