How To Make Google’s Data Grid Scroll Faster

0
22
How To Make Google's Data Grid Scroll Faster

The Google Search Console can be used to check the indexing status and optimize the visibility of websites. You can also check which external sites link to your page, and when I browsed the “Top-linking sites” page I noticed a major roll delay. This happens when you choose to display a larger dataset (500 rows) instead of the default 10 results.

As someone interested in front-end performance, I couldn’t help but dive in to see if I could figure out why. After all, Google is pushing hard on web performance, so one would expect them to put a good baseline in their own public apps.

Step 1: Recording a performance profile

Performance profiles are incredibly useful in these cases, and just by looking at the report, you can often clearly see why something is performing poorly. So I opened DevTools / Performance and started a recording, scrolled down the list slightly, and then stopped recording. This is what I saw:

The red ears on the ‘Task’ blocks indicate that something is taking longer than acceptable when scrolling. In general, you will want to keep these blocks below 16 ms to achieve the ideal 60 FPS scrolling. In the image, the red-eared blocks average about 150 ms, which equates to about 6-7 FPS. Get on Google, you can do better!

Step 2: Find out what is wrong

The timeline chart at the top shows how busy the CPU is with different types of tasks: orange for JavaScript, purple for layout and styles, and green for painting. Here it’s all purple, which suggests that this is not a JavaScript issue, but rather a DOM / styling issue:

CPU diagram screenshot.

This is confirmed in the waterfall diagram below the CPU diagram. It uses the same color coding, and in most shots it will have a lot of orange and a little less purple and green. For this recording, it shows that time is mainly spent updating layers, as shown by the text in the purple blocks that say Update layer tree:

CPU diagram screenshot.

Layers are made for scrolling content, translated content, etc. Maybe there are many of them? Let’s find out!

Step 3: Check these layers

Chrome DevTools contains an impressive amount of useful tools, some of which are more hidden than others. The layer panel is such a hidden gem. To find it, press the menu button in DevTools and select More tools / Layers. For my scenario, it looks like this:

Development tools.

It does not have many layers, but it does do have a few large. They seem to have content all the way down, leading to the conclusion that the data grid used by Google does not use virtualized rendering. That explains part of it, but 500 rows is still not that many. There must be more in this …

Step 4: Inspecting the DOM

Unfortunately, DOM is not very effective when it contains many elements. If it were, the virtualization techniques implemented in various popular JS data networks on the web would not be necessary. A qualified guess at this point is that the table reproduces a lot of elements. By setting up a Live expression on the DevTools console, you can click around the item panel and find out. Switch to Console, click on Create live expression button (eye) and type $0.querySelectorAll('*').length.

When you now click around Elements panel we see the following, first for the full grid:

Elements panel.

As seen above, it produces more than 16,000 DOM elements to display only 500 rows, which is a bit exaggerated. When we click on the body text in the document, we see this:

Inspecting DOM.

The full page contains more than 38,000 (!) Elements, which is does not how to build a fast web app! The obvious thing to do here would be to switch to using a virtualized rendering data network, but let’s see if we can improve what’s already there with less effort.

Step 5: Improving the situation

Based on the data in the performance profile, I assume the entire page is laid out as you scroll through the grid. And lay out that many items are expensive. If only there was a way to limit the effects …

Good news! There is! I tried applying some secret sauce, rolled again and now it felt much better. This is also clear from this performance profile:

Faster rolling time.

Each frame now takes about 16 ms and we scroll close 60 FPS instead of 6-7. Amazing!

So what did I do? I simply added a single line of CSS to <table> on it Elements panel:

table {
  contain: strict; 
}

As seen here:

Line of CSS.

That is it! 10x faster with a single line of CSS. You can try this “fix” in your own Google Search Console.

LEAVE A REPLY

Please enter your comment!
Please enter your name here