Solving Complex JavaScript Issues and Leveraging Semantic HTML5

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

@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

@HamletBatista
CHROME DEVELOPER TOOLS
Meet your
new best
friend

@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

@HamletBatista
It ends up inside the HTML BODY.
But why?

@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

@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

@HamletBatista
• Does this affect Googlebot?
• If it does, does the fix work too?
Let’s see!

@HamletBatista
If the page is missing the BODY
tag, Google adds it back.
Good.

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

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

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

@HamletBatista
It is properly detected.
Good.

@HamletBatista
The optimal solution is to move the
invalid scripts and tags to the HML
BODY.

@HamletBatista
• What about HTML5 tags?
• Does Google recognize them?
Let’s see!

@HamletBatista
The new semantic elements provide
document meaning.
https://www.w3schools.com/html/htm
l5_semantic_elements.asp

@HamletBatista
How Misplaced HTML tags Hurt SEO

@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

@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

@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

@HamletBatista
Let’s use the JavaScript
Debugger to track down scripts
that override SEO tags.

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

@HamletBatista

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

@HamletBatista
Shopping for speed on eBay.com
https://web.dev/shopping-for-speed-
on-ebay/

@HamletBatista

@HamletBatista
We can track unused code using
the Code Coverage tool.

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

@HamletBatista
As CSS blocks rendering, if
it is not used, it is better to
get rid of it.

@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

@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

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

@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.
PERFORMANCE

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

@HamletBatista
PERFORMANCE

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

@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/
PERFORMANCE

@HamletBatista
We can use React.lazy to load components
only when needed.
PERFORMANCE

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

@HamletBatista
Here are code splitting resources
for the most popular JavaScript
frameworks
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/

@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

@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

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

@HamletBatista
This one leverages prefetching to
reduce page load time
https://bit.ly/2Ocz7J8

@HamletBatista
This one enables for tracking offline
events in Google Analytics!
https://bit.ly/2S6wkSK

@HamletBatista
These Service Workers run in the
Cloudflare CDN
https://developers.cloudflare.com/work
ers/

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

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

@HamletBatista
Cloudflare Workers Playground
https://cloudflareworkers.com/

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

@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

@HamletBatista
SEE YOU AT THE NEXT SMX!

Solving Complex JavaScript Issues and Leveraging Semantic HTML5

Recommended

More Related Content

What's hot (20)

Similar to Solving Complex JavaScript Issues and Leveraging Semantic HTML5 (20)

More from Hamlet Batista (12)

Recently uploaded (20)

Solving Complex JavaScript Issues and Leveraging Semantic HTML5

Editor's Notes