Improve Google SEO "Good URL" percent on desktop

[miohtama]

Problem

On Google Search Console, our Good URL % for desktop is low:

On the plus side:

• it is improving – from <1% on Jul 7 to 25% on Jul 12
• it is excellent on mobile – 99.5% on Jul 12

Goal

Investigate to determine root cause and fix!

Possible causes

• font-loading resulting in CLS – this was the issue previously. It was fixed this with a JS-based font-loading approach (see below). This was later changed to use a CSS-native approach. Revert back to JS approach?
• something else (TBD) – we are currently using an identical font-loading strategy on mobile and desktop. We have very high Good URL % on mobile, which indicates there may be a different cause this time. What would cause mobile vs. desktop to have such different results?

References

• Old font loader code and logic.

[kenkunz]

Analysis

I believe I've isolated the source of Bad URLs / CLS issues on desktop. This is occurring on pages that load content client-side. The biggest culprit is DataTables with client-side fetch using Skeleton loader. The charts on the trading-pairs page also cause this issue (to a lesser degree).

This hypothesis explains why the issue is occurring on desktop and not mobile. For most of the problematic pages, the client-side loaded content is below-the-fold on mobile (so it doesn't affect CLS score), but above-the-fold on desktop.

The table below makes this clear. For the first set of pages, the client-side loaded content is below-the-fold on mobile and above-the-fold on desktop. For the second set, the client-side content is above-the-fold on both mobile and desktop. As a control group, the last set of pages have no client-side loaded content.

Page	CLS score – mobile	CLS score – desktop
below-fold mobile / above-fold desktop
/trading-view/[chain]	0.00 🟢	0.17 🟠
/trading-view/[chain]/[exchange]	0.00 🟢	0.27 🔴
/trading-view/[chain]/[exchange]/[pair]	0.00 🟢	0.16 🟠
/trading-view/[chain]/tokens/[token]	0.00 🟢	0.37 🔴
below-fold on both
/trading-view/exchanges	0.18 🟠	0.14 🟠
/trading-view/[chain]/tokens	0.61 🔴	0.68 🔴
control – no client-side content
/	0.00 🟢	0.00 🟢
/about	0.00 🟢	0.00 🟢
/trading-view	0.00 🟢	0.00 🟢
/blog	0.00 🟢	0.00 🟢

[kenkunz]

Possible Solutions

Here are some initial thoughts on ways we could improve CLS scores on bad pages above.

Load content server-side

Optimize the backend API requests sufficiently so we can pre-fetch the data needed during SSR. Data updates (changing the sort, pagination) would occur client-side.

This would address the worst-offending pages (the ones with DataTables / Skeleton loader). This is not a viable option for charts.

Improve pre-fetch placeholder layout

We can decrease the impact on CLS by ensuring that the pre-fetch placeholder content more closely matches the post-fetch (real) content in terms of layout impact. E.g, we could render an actual table with a fixed number of rows (matching the max page rows) with skeleton / placeholder content in each cell and fixed column width / row height.

Detect Google Core Web Vitals user agent

Eliminate content that causes CLS issues when Google user agent is detected.

Other options??

tbd

[kenkunz]

Analysis part 2

Another issue to be aware of is 503 errors that are not resolved in a short period of time. Our Chains Under Maintenance error page returns a 503 response code (which seems like the most appropriate option), and BNB Chain has been under maintenance for a couple days now (as of Jul 14).

BNB Chain represents the largest number of exchanges, tokens and pairs in our dataset, so the majority of indexible pages are our site are currently returning 503 errors for an extended period.

The following articles provide insights on how extended 503 errors can impact search rankings:

• A Super Fresh Google Index? Server Errors & Rankings Impacts
• Google: We Treat 429 Error Code & 503 Error Code Equally

When drilling into Bad URLs on Google Search Console, the example URLs provided are all under /trading-view/binance (not surprising since it represents the largest number of URLs with CLS issues):

Currently, attempting to run Lighthouse tests on any /trading-view/binance page fails due to the 503:

Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 503

Alternative Chain Under Maintenance solution

To mitigate the search rankings impacts of extended 503 errors, we may wish to implement a different solution for indicating Chain Under Maintenance.

Rather than serving a 503 error page, we could serve a reduced version of the page being requested (exchange details, token details, pair details, etc.) that includes summary sections and a warning about stale data / chain data under maintenance.

[kenkunz]

This ticket was "done" in 2022, but failed to get "closed".