Dicking around with the dom and chrome dev tools - Mark Osborne
- 1. Dicking Around With The DOM & Chrome Dev Tools
- 2. Who The Hell Am I? SEO Manager At Blue Array @MarkSEOsborne Real creative twitter handle right?
- 3. What Dodgy Looking People Do I Have To Work With?
- 4. So for any one that has guessed the rather bad joke in the title of this talk
- 5. Don't worry to much as there won't be any jokes about these guys
- 7. Or that bloody bogies game!
- 8. bogies
- 9. Bogies
- 10. Bogies!
- 11. BOGIES!
- 13. So back to the main reason we all come to these SEO events...
- 14. Some real useful new SEO insights and free pizza and beer :) Thanks Sistrix
- 15. Let’s get in to it
- 16. And start by answering a few key questions
- 17. Firstly
- 18. What is the DOM?
- 19. Not this DOM
- 20. Or this DOM!
- 21. DOM actually stands for Document Object Model
- 22. Simply it is a code representation of what you see on a page as it is displayed in your browser
- 23. And Is a middle ground between your page source code and what you users see when the page is fully loaded
- 25. The DOM looks different to the source code. As additional code and scripts are injected into page after it loads
- 26. Which means there can be problems on your site that are in the DOM rather than in the source code
- 27. Javascript makes this a whole load more fun, and gives more issues within the DOM
- 28. As dynamic scripts load after and screw things up.
- 30. Chrome Dev Tools is here
- 31. What is chrome dev tools for those that don’t know?
- 32. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. And can help you edit pages on-the-fly and diagnose problems
- 33. In short right click on any page and click inspect, and Chrome dev tools opens up with the DOM
- 35. By dicking around with chrome dev tools there is some amazing stuff you can do
- 36. So what can you do with it I hear you cry!
- 37. Well you can solve your one device blindness (this is a new phrase I'm trying to make stick so go with it)
- 38. One device blindness is - basically only focusing on the device you are working on and not any other device types
- 39. For most us that is a desktop or a laptop
- 40. In case you weren’t aware we live in a mobile first world now
- 41. In Chrome Dev Tools you can easily change your viewport to different device types
- 42. It is real simple to do...
- 44. This is helpful when checking parity between mobile and desktop sites
- 46. We all know fast sites are a big SEO win
- 47. With Chrome Dev Tools you can see how quickly Google is loading your site in the DOM
- 48. You can see this stage by stage as its load all by clicking the network tab
- 49. As well as all the individual elements in the sequence as they’re loading in the DOM
- 51. This is wonderful but how do I see how my mobile site speed is doing?
- 52. Adjust the network setting to disable cache and set speed to slow 3G then hit command R to refresh the page
- 54. From here you can see your sites load time at its worst on mobile
- 55. You can even find the fixes for your slow load time in CDT (i'm sick of keep saying chrome dev tools so got lazy and referring to it as CDT now :) )
- 56. You can get a full lighthouse speed report in CDT
- 57. Choose audit from the top navigation and hit run an you’ll get a full detailed lighthouse report within CDT
- 59. Playing hide and seek in the DOM
- 60. There could be hidden information within the CSS so It’s best to check that it not being missed
- 61. How to seek for it
- 62. It’s real easy: Open up CDT, hit cmd F to open up a search bar
- 63. From there enter one of the two common CCS elements that hide content: display:none visibility:hidden
- 64. CDT then highlights all of the occurrences for you and you have to find the important ones
- 65. Checking a site all secure and locked down
- 66. In CDT there is a whole security panel which unsurprisingly has all the site's security information in
- 67. Shows you if you have an SSL and if there is any security issues
- 68. The cool thing is if you click links through the site, in the site panel in CDT it show shows you the security status for individual links
- 71. A few months ago Google updated their developer guides with new news
- 72. That you are now able to override your location with CDT to any custom location and see how a page recacts
- 73. Open up command menu with cmd+shift+p
- 74. Search and select: show sensors
- 75. Choose a location from the Geolocation dropdown
- 77. If you can’t find a location you want from drop down hit manage button
- 79. Finally add in a name and the latitude and longitude for your custom location
- 81. Writing xpath without the headache
- 82. When your scraping a site for a certain element
- 83. Open up CDT and find the element you want to scrape then...
- 84. Right click > Copy > Copy xpath
- 86. The xpath is copied to your clipboard ready to go in any scraping tool
- 88. Checking if a site is HTTP2 or not
- 89. Yeah sure I know there is a bunch of plugins that do this as well
- 90. But CDT gives you more detail and is only a few more clicks
- 91. Open up network tab in CDT & hit refresh
- 92. Then right click and add in protocol column
- 93. Watch the waterfall load and see if the sites is HTTP 2 or not
- 96. Why do we want to find unused code?
- 97. Most sites are littered with old unused JS & CSS that is slowing them down
- 98. The coverage report shows you where the unused code is
- 99. Open CDT click the three dots in the top right and select coverage from drop down
- 100. And ta-dah you get all the unused code loaded
- 101. Honorable mention
- 102. You can change the live code on any page
- 103. And do fun things like this...
- 105. Or more helpful things, like seeing what a change to the front end of the site may look like
- 107. -The DOM is the bit between the source code and what users see -There is much more to CDT than you think -Mark’s puns are terrible
- 108. Get you thinking hat on and start dicking around with the DOM and CDT and see what it can do
- 109. W Thanks for listening, any questions?