Ruth Everett - Demystifying Chrome Dev Tools (BrightonSEO September 2023)

In this talk, Ruth will share actionable ways the free Chrome DevTools feature can help SEOs review, audit, trouble-shoot and test websites of all sizes.

She will also share some console tips and tricks to make the most out of the tool.

Transcript

1. Demystifying
   Chrome Dev Tools
   Ruth Everett
   SearchPilot
   speakerdeck.com/rvth
   @rvtheverett
   

   View Slide

2. Learn some new things
   about Chrome Dev Tools
   

   View Slide

3. Some of the things it
   can be useful for
   

   View Slide

4. Hi, I'm Ruth!
   

   View Slide

5. SEO Testing
   Consultant
   @ SearchPilot
   

   View Slide

6. I like falling down
   technical rabbit
   holes and digging
   into data
   

   View Slide

7. I also really love dogs
   

   View Slide

8. What is Chrome
   DevTools?
   @rvtheverett @SearchPilot
   

   View Slide

9. What is Chrome Dev Tools?
   Free tool built into the Chrome browser
   

   View Slide

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

    View Slide

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

    View Slide

12. Accessing Chrome DevTools
    

    View Slide

13. Accessing Chrome DevTools
    

    View Slide

14. A full view of DevTools
    

    View Slide

15. View Slide

16. There’s a lot to cover… and I
    don’t have time for everything
    today
    

    View Slide

17. Review & Validate
    Elements
    Make the most of
    the Console
    Run Site Speed &
    Performance
    Audits
    Test different
    views
    

    View Slide

18. Review and
    Validate Elements
    @rvtheverett @SearchPilot
    

    View Slide

19. Ensure content is
    discoverable
    @rvtheverett @SearchPilot
    Review and Validate Elements
    

    View Slide

20. Ensure content is discoverable
    Elements panel > view the
    Document Object Model (DOM) of
    your page.
    

    View Slide

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

    View Slide

22. Ensure content is discoverable
    Displays the JavaScript rendered
    version of the page
    

    View Slide

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

    View Slide

24. Perform a JavaScript Parity Analysis
    Right click > Copy > Copy element
    

    View Slide

25. Perform a JavaScript Parity Analysis
    Meta tags
    Canonicals
    Indexing tags
    Main headings
    Key content
    Diff checker
    HTML Only JavaScript
    rendered
    https://www.diffchecker.com/
    

    View Slide

26. Find and
    Validate Useful
    Elements
    @rvtheverett @SearchPilot
    Review and Validate Elements
    

    View Slide

27. Find and Validate Useful Elements
    Search
    Function
    Title and meta tags
    Canonicals
    Hreflang configuration
    Robot meta tags
    

    View Slide

28. Find and Validate Useful Elements
    Element selector tool
    

    View Slide

29. Find and Validate Useful Elements
    Element selector tool
    Hover over and view
    different elements
    

    View Slide

30. Verify alt text
    @rvtheverett @SearchPilot
    Review and Validate Elements
    

    View Slide

31. Verify image alt text
    Element selector > Click an image > View alt text
    

    View Slide

32. Site Speed &
    Performance Audits
    @rvtheverett @SearchPilot
    

    View Slide

33. Run Google
    Lighthouse
    @rvtheverett @SearchPilot
    Site Speed & Performance Audits
    

    View Slide

34. Google Lighthouse
    Running a Lighthouse Test
    

    View Slide

35. Google Lighthouse - Performance Score
    Running a Lighthouse Test
    

    View Slide

36. Google Lighthouse - Performance Metrics
    Lighthouse Metrics
    Poor
    Needs
    Improvement
    Good
    

    View Slide

37. Google Lighthouse - Performance Opportunities
    Lighthouse Opportunities
    

    View Slide

38. Google Lighthouse - Performance Opportunities
    Lighthouse Opportunities
    

    View Slide

39. Google Lighthouse - Accessibility
    Accessibility Score
    

    View Slide

40. Identify Core Web
    Vitals Issues
    @rvtheverett @SearchPilot
    Site Speed & Performance Audits
    

    View Slide

41. Layout shifting areas and core web vitals
    Console > Rendering > Layout Shift Regions & Core Web Vitals
    

    View Slide

42. Layout shifting areas
    Breadcrumb element
    Main page content
    Identify the exact
    elements causing
    layout shifts
    

    View Slide

43. Core web vitals
    

    View Slide

44. Core web vitals
    Metrics and timings are displayed as
    you interact with the page
    

    View Slide

45. View
    Performance
    Insights
    @rvtheverett @SearchPilot
    Site Speed & Performance Audits
    

    View Slide

46. Performance Insights
    

    View Slide

47. Performance Insights
    

    View Slide

48. Performance Insights
    View a visual of the page loading.
    Scroll across different moments to view loading
    and timings.
    

    View Slide

49. Performance Insights
    

    View Slide

50. Performance Insights
    

    View Slide

51. Set Up Local
    Overrides
    @rvtheverett @SearchPilot
    Site Speed & Performance Audits
    

    View Slide

52. Local Overrides
    Amend CSS Files
    Remove rendering blocking resources
    Check Layout Shift fixes
    Comment out JavaScript files
    Lazy load images
    

    View Slide

53. Local Overrides
    Sources > Overrides >
    Select folder for overrides
    

    View Slide

54. Local Overrides
    Sources > Overrides >
    Select folder for overrides
    Enable Local Overrides
    

    View Slide

55. Local Overrides
    Make changes to
    the HTML here
    Sources > Page > Select page > Save for Overrides
    

    View Slide

56. The power of the
    console
    @rvtheverett @SearchPilot
    

    View Slide

57. Find JavaScript
    errors
    @rvtheverett @SearchPilot
    The power of the console
    

    View Slide

58. Errors
    Issues
    JavaScript Console
    Find JavaScript Errors
    

    View Slide

59. JavaScript Console
    Find JavaScript Errors
    Identify errors that affect page
    rendering and indexability
    Console Reference Guide
    

    View Slide

60. Find all links on a
    page
    @rvtheverett @SearchPilot
    The power of the console
    

    View Slide

61. querySelectorAll(selector) Return all matching
    elements
    

    View Slide

62. querySelectorAll(selector)
    querySelectorAll('a')
    Return all matching
    elements
    Return all a links
    

    View Slide

63. querySelectorAll ($$('a'))
    Using $$ before the
    selector will display an
    array of elements.
    

    View Slide

64. querySelectorAll ($$('a'))
    table($$('a'))
    Using $$ before the
    selector will display an
    array of elements.
    Display array data in a
    table format
    

    View Slide

65. View Slide

66. table($$('a'), ['text', 'href', 'rel'])
    

    View Slide

67. Find images and
    their height and
    width
    @rvtheverett @SearchPilot
    The power of the console
    

    View Slide

68. table($$('img'), ['src', 'width', 'height'])
    

    View Slide

69. Test different
    views
    @rvtheverett @SearchPilot
    

    View Slide

70. Emulate
    multi-device
    responsiveness
    @rvtheverett @SearchPilot
    Test Different Views
    

    View Slide

71. Emulate multi-device responsiveness
    Device Toolbar
    Select and shift between
    views
    

    View Slide

72. Emulate multi-device responsiveness
    iPhone 12 iPad Mini Galaxy Fold
    

    View Slide

73. Switch User
    Agent
    @rvtheverett @SearchPilot
    Test Different Views
    

    View Slide

74. Switch User Agents
    Network Conditions >
    Select User Agent
    

    View Slide

75. Switch User Agents
    Ability to add a custom
    user agent string
    Network Conditions >
    Select User Agent
    

    View Slide

76. Disable
    JavaScript
    @rvtheverett @SearchPilot
    Test Different Views
    

    View Slide

77. Disable JavaScript
    Run Command
    Type and select Disable
    JavaScript
    

    View Slide

78. Disable JavaScript
    

    View Slide

79. JavaScript Disabled
    

    View Slide

80. JavaScript Enabled
    

    View Slide

81. Helpful & Fun
    Extras
    @rvtheverett @SearchPilot
    

    View Slide

82. Copy x-path or css
    selectors for
    scraping/crawling
    @rvtheverett @SearchPilot
    Fun Extras
    

    View Slide

83. Copy x-path or CSS selectors
    

    View Slide

84. Make edits to
    elements
    @rvtheverett @SearchPilot
    Fun Extras
    

    View Slide

85. Make edits to elements
    

    View Slide

86. Take full page
    screenshots
    @rvtheverett @SearchPilot
    Fun Extras
    

    View Slide

87. Take full page screenshots
    Run Command > Type screenshot >
    Select ‘Capture full size screenshot’
    

    View Slide

88. Take full page screenshots
    

    View Slide

89. So much more…
    - Find non-secure resources
    - View header responses
    - Record performance
    - View network waterfall
    - Review resource coverage
    - Identify unused code
    - Disable cache
    - Beautify code for easy review
    

    View Slide

90. Find non-secure
    resources
    

    View Slide

91. Find non-secure resources
    View Valid HTTPS
    Certificate
    Mixed Content Issues
    Unsecure Resources
    Security Panel
    

    View Slide

92. View Header
    Response
    

    View Slide

93. View Header Response
    Network > Headers
    List of
    resources
    

    View Slide

94. View Header Response
    Request URL
    Network > Headers
    

    View Slide

95. View Header Response
    Request Method
    Network > Headers
    

    View Slide

96. View Header Response
    Status Code
    Network > Headers
    

    View Slide

97. View Header Response
    Content-Encoding
    Network > Headers
    

    View Slide

98. Record
    Performance
    

    View Slide

99. Record Performance
    View performance
    of interactions on
    the page.
    

    View Slide

100. Record Performance
     Reload the page to
     view performance
     of the page load
     

     View Slide

101. Record Performance
     Filmstrip
     Web Vitals
     Timings
     

     View Slide

102. Record Performance - Filmstrip
     Filmstrip
     Screenshot
     of the page
     at the point
     of load
     

     View Slide

103. Record Performance - Web Vitals
     Web Vitals
     

     View Slide

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

     View Slide

105. Record Performance - Network Waterfall
     

     View Slide

106. Review resource
     coverage and
     identify unused
     code
     

     View Slide

107. Resource Coverage
     

     View Slide

108. Resource Coverage
     

     View Slide

109. Disable cache
     

     View Slide

110. Disable Cache
     Network Panel > Tick Disable cache
     

     View Slide

111. Beautify code for
     easy review
     

     View Slide

112. Beautify code for easy review
     

     View Slide

113. 7+ SEO Test Ideas to Grow
     Your Organic Traffic
     Live Webinar
     21 September 2023
     6pm BST | 1pm ET | 10am PT
     

     View Slide

114. Thank You!
     rvtheverett
     linkedin.com/in/ruth-everett/
     

     View Slide