Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Ruth Everett

September 14, 2023

More Decks by Ruth Everett

Other Decks in Marketing & SEO


  1. 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
  2. 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
  3. Review & Validate Elements Make the most of the Console

    Run Site Speed & Performance Audits Test different views
  4. 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
  5. 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
  6. Perform a JavaScript Parity Analysis Meta tags Canonicals Indexing tags

    Main headings Key content Diff checker HTML Only JavaScript rendered https://www.diffchecker.com/
  7. Find and Validate Useful Elements Search Function Title and meta

    tags Canonicals Hreflang configuration Robot meta tags
  8. Layout shifting areas and core web vitals Console > Rendering

    > Layout Shift Regions & Core Web Vitals
  9. Performance Insights View a visual of the page loading. Scroll

    across different moments to view loading and timings.
  10. Local Overrides Amend CSS Files Remove rendering blocking resources Check

    Layout Shift fixes Comment out JavaScript files Lazy load images
  11. Local Overrides Make changes to the HTML here Sources >

    Page > Select page > Save for Overrides
  12. JavaScript Console Find JavaScript Errors Identify errors that affect page

    rendering and indexability Console Reference Guide
  13. querySelectorAll ($$('a')) table($$('a')) Using $$ before the selector will display

    an array of elements. Display array data in a table format
  14. Switch User Agents Ability to add a custom user agent

    string Network Conditions > Select User Agent
  15. Take full page screenshots Run Command > Type screenshot >

    Select ‘Capture full size screenshot’
  16. 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
  17. 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
  18. 7+ SEO Test Ideas to Grow Your Organic Traffic Live

    Webinar 21 September 2023 6pm BST | 1pm ET | 10am PT