On this presentation we go deep on Chrome developer tools, JS debugger and breakpoints, technical optimization and capabilities of browser service workers to improve SEO and performance

1. @HamletBatista
SOLVING COMPLEX JAVASCRIPT ISSUES
AND LEVERAGING SEMANTIC HTML5
MASTERING CHROME DEVELOPER TOOLS

2. @HamletBatista
• How incorrectly nested HTML tags impact SEO.
• How to use the Chrome JavaScript Debugger to fix serious SEO issues.
• Speed up pages by splitting code bundles and removing unused code.
• How service workers allow for new exciting use cases.
AGENDA

3. @HamletBatista
CHROME DEVELOPER TOOLS
Meet your
new best
friend

4. @HamletBatista
Let’s see what happens to the
canonical tag when we insert a
<div> in the HTML HEAD.
HOW MISPLACED HTML TAGS HURT SEO

5. @HamletBatista
It ends up inside the HTML BODY.
But why?
HOW MISPLACED HTML TAGS HURT SEO

6. @HamletBatista
This is the result of browsers error
tolerance:
“the element being added is explicitly
forbidden inside some outer tag. In this
case we should close all tags up to the
one which forbids the element, and add
it afterwards.”
https://bit.ly/2GGrWoc
HOW MISPLACED HTML TAGS HURT SEO

7. @HamletBatista
Move SEO tags to the top of the HTML
HEAD.
Check: The dangers of misplaced
third-party scripts
https://searchengineland.com/the-
dangers-of-misplaced-third-party-scripts-
327329
HOW MISPLACED HTML TAGS HURT SEO

8. @HamletBatista
• Does this affect Googlebot?
• If it does, does the fix work too?
Let’s see!
HOW MISPLACED HTML TAGS HURT SEO

9. @HamletBatista
If the page is missing the BODY
tag, Google adds it back.
Good.
HOW MISPLACED HTML TAGS HURT SEO

10. @HamletBatista
If we add a <DIV> manually to the
HTML HEAD, Google pushes our
canonical to the BODY.
Same as in the browser.
HOW MISPLACED HTML TAGS HURT SEO

11. @HamletBatista
If we add a <DIV> to the HTML HEAD using a
script, the URL Inspection Tool gives an error
and the page doesn’t get indexed.
The browser can handle the page.
HOW MISPLACED HTML TAGS HURT SEO

12. @HamletBatista
If we move the SEO tags to the top of
the HTML and leave the invalid <DIV>,
the canonical remains in the HTML
HEAD.
HOW MISPLACED HTML TAGS HURT SEO

13. @HamletBatista
It is properly detected.
Good.
HOW MISPLACED HTML TAGS HURT SEO

14. @HamletBatista
The optimal solution is to move the
invalid scripts and tags to the HML
BODY.
HOW MISPLACED HTML TAGS HURT SEO

15. @HamletBatista
• What about HTML5 tags?
• Does Google recognize them?
Let’s see!
HOW MISPLACED HTML TAGS HURT SEO

16. @HamletBatista
The new semantic elements provide
document meaning.
https://www.w3schools.com/html/htm
l5_semantic_elements.asp
HOW MISPLACED HTML TAGS HURT SEO

17. @HamletBatista
How Misplaced HTML tags Hurt SEO

18. @HamletBatista
If we add an HTML5 block-level
element <SECTION>, it is pushed to
the BODY with the canonical!
This trick confirms without a doubt
that Googlebot supports HTML5
HOW MISPLACED HTML TAGS HURT SEO

19. @HamletBatista
Share these #SMXInsights on your social channels!
• Misplaced HTML tags (including HTML5 ones) in the HEAD can
push SEO tags to the BODY
• The issue is visible in the browser and the Search Console URL
Inspection Tool
• Moving SEO tags to the top of the HTML HEAD helps

20. @HamletBatista
Let's learn to use the Chrome Debugger
to identify obscure scripts that override
SEO tags.
This test page has a canonical and the
script linked overrides it.
THE POWERFUL JAVASCRIPT DEBUGGER

21. @HamletBatista
Let’s use the JavaScript
Debugger to track down scripts
that override SEO tags.
THE POWERFUL JAVASCRIPT DEBUGGER

22. @HamletBatista
First, we set up a DOM breakpoint to
stop JavaScript execution when the
attributes of the canonical tag are
modified.
Next, we hit refresh.
THE POWERFUL JAVASCRIPT DEBUGGER

23. @HamletBatista
THE POWERFUL JAVASCRIPT DEBUGGER

24. @HamletBatista
Let’s talk about
performance.
TRACKING DOWN UNUSED CODE

25. @HamletBatista
Shopping for speed on eBay.com
https://web.dev/shopping-for-speed-
on-ebay/
TRACKING DOWN UNUSED CODE

26. @HamletBatista
TRACKING DOWN UNUSED CODE

27. @HamletBatista
We can track unused code using
the Code Coverage tool.
TRACKING DOWN UNUSED CODE

28. @HamletBatista
TRACKING DOWN UNUSED CODE

29. @HamletBatista
The red vertical bars highlight
the unused code.
Tracking Down Unused Code

30. @HamletBatista
As CSS blocks rendering, if
it is not used, it is better to
get rid of it.
TRACKING DOWN UNUSED CODE

31. @HamletBatista
TRACKING DOWN UNUSED CODE

32. @HamletBatista
• The JavaScript Debugger can help track down the scripts that override SEO
tags and cause performance issues
• The Code Coverage tool helps identify JavaScript and CSS code that is never
used so that we can remove it
Share these #SMXInsights on your social channels!

33. @HamletBatista
Most web apps combine functionality from many modules (libraries of functions). Many of the
module functions don’t ever get used, but still get downloaded and processed.
SPLITTING CODE TO INCREASE
PERFORMANCE

34. @HamletBatista
Even if some modules and
functionality is used, it might
not be needed during the initial
page load.
SPLITTING CODE TO INCREASE
PERFORMANCE

35. @HamletBatista
Webpack and similar tools work behind the scenes in popular frameworks like reactjs and vuejs,
bundling standard, third party, and custom modules into a single bundle.
SPLITTING CODE TO INCREASE
PERFORMANCE

36. @HamletBatista
Single file bundling was a good idea
when we didn’t have HTTP/2.
HTTP/2 downloads page resources in
parallel.
SPLITTING CODE TO INCREASE
PERFORMANCE

37. @HamletBatista
SPLITTING CODE TO INCREASE
PERFORMANCE

38. @HamletBatista
Webpack has features that
allow splitting bundles so that
you can load only what it is
needed.
SPLITTING CODE TO INCREASE PERFORMANCE

39. @HamletBatista
Here is a basic skeleton React app that
imports a component to display a
welcome message.
I built it using https://create-react-
app.dev/
SPLITTING CODE TO INCREASE
PERFORMANCE

40. @HamletBatista
SPLITTING CODE TO INCREASE
PERFORMANCE

41. @HamletBatista
We can use React.lazy to load components
only when needed.
SPLITTING CODE TO INCREASE
PERFORMANCE

42. @HamletBatista
We need to make some minor
changes.
React takes care of the code
splitting in the background using
webpack.
SPLITTING CODE TO INCREASE
PERFORMANCE

43. @HamletBatista
SPLITTING CODE TO INCREASE
PERFORMANCE

44. @HamletBatista
Here are code splitting resources
for the most popular JavaScript
frameworks
SPLITTING CODE TO INCREASE
PERFORMANCE
• https://reactjs.org/docs/code-splitting.html
• https://angular.io/guide/lazy-loading-
ngmodules
• https://vuejsdevelopers.com/2017/07/03/vue
-js-code-splitting-webpack/

45. @HamletBatista
• Traditionally JavaScript apps combine assets in large single bundle files
• A lot of JavaScript code and components are not necessary during the initial
load time
• We can leverage code splitting techniques available in the most popular
JavaScript frameworks to create smaller bundles
Share these #SMXInsights on your social channels!

46. @HamletBatista
Service Workers are like mini CDNs in your
browser.
This page has some cool use cases:
https://github.com/GoogleChrome/samples/
tree/gh-pages/service-worker
The Power of Service Workers

47. @HamletBatista
This Service Worker demonstrates
the core offline functionality
https://bit.ly/37INRHh
THE POWER OF SERVICE WORKERS

48. @HamletBatista
This one leverages prefetching to
reduce page load time
https://bit.ly/2Ocz7J8
THE POWER OF SERVICE WORKERS

49. @HamletBatista
This one enables for tracking offline
events in Google Analytics!
https://bit.ly/2S6wkSK
THE POWER OF SERVICE WORKERS

50. @HamletBatista
These Service Workers run in the
Cloudflare CDN
https://developers.cloudflare.com/work
ers/
THE POWER OF SERVICE WORKERS

51. @HamletBatista
This example caches third-party
scripts and rewrites the
references to speed them up
https://bit.ly/2OdT6qT
THE POWER OF SERVICE WORKERS

52. @HamletBatista
This example speeds up WordPress
sites by caching all not-logged-in user
requests in the CDN
https://bit.ly/2OdT6qT
THE POWER OF SERVICE WORKERS

53. @HamletBatista
THE POWER OF SERVICE WORKERS
Cloudflare Workers Playground
https://cloudflareworkers.com/

54. @HamletBatista
THE POWER OF SERVICE WORKERS
Another example is RankSense’s
Cloudflare Workers App that can upload
SEO changes in bulk using Google
Sheets
https://bit.ly/37HXkPk

55. @HamletBatista
• Service Workers in your browser can allow many advanced use cases like offline
operation and tracking offline events in Google Analytics
• Service Workers in the Cloud/CDN extend this capability to power third-party
script caching and faster SEO implementations
Share these #SMXInsights on your social channels!

56. @HamletBatista
SEE YOU AT THE NEXT SMX!