Notion pages can sometimes load slowly, especially when they contain complex databases, embedded content, or large amounts of text. The root cause is often a combination of heavy page structure, third-party integrations, or inefficient database relations. This article explains how to use the Performance tab in Chrome DevTools to record and analyze a Notion page load profile. You will learn to identify which scripts, network requests, and rendering tasks are slowing down your workspace.
Key Takeaways: Profiling Notion Page Load
- Ctrl+Shift+I > Performance tab > Record button: Starts a performance recording that captures CPU activity, network requests, and rendering frames.
- Performance tab > Stop button > Flame chart: Displays a timeline of function calls, allowing you to spot long-running scripts or layout thrashing.
- Performance tab > Bottom-up or Call Tree tab: Sorts functions by total time or self time to pinpoint the most expensive operations.
What the Performance Tab Captures and Why It Matters for Notion
The Performance tab in Chrome DevTools records a timeline of everything the browser does while loading a page. This includes JavaScript execution, HTML parsing, style recalculations, layout operations, painting, compositing, and network requests. For a web application like Notion, which relies heavily on JavaScript to render rich content blocks and database views, a performance recording reveals exactly which parts of the code take the most time.
When a Notion page loads slowly, the bottleneck is usually in one of three areas: excessive JavaScript execution from complex formulas or rollups, large network payloads from embedded images or files, or repeated layout calculations caused by dynamic content resizing. The Performance tab lets you see each of these categories as colored bands in the timeline. By examining the flame chart and the summary pane, you can identify whether the slowdown is due to scripting, rendering, painting, or network latency.
Before you start profiling, make sure you have a clean browser session. Close other tabs and browser extensions that might interfere. Use Chrome in Incognito mode to avoid cached data that could mask performance issues. Also, have the Notion page you want to profile open and ready to reload.
Steps to Record and Analyze a Notion Page Load Profile
- Open Chrome DevTools
With the slow Notion page open, press Ctrl+Shift+I on Windows or Cmd+Option+I on Mac. The DevTools panel opens. Click the Performance tab in the top row. If you do not see it, click the double-arrow icon to reveal more tabs. - Configure recording settings
In the Performance tab, locate the recording controls at the top left. Look for a checkbox labeled Screenshots — enable it so you can see visual snapshots of the page during load. Also enable Memory if you want to track heap size. Disable Web Vitals unless you need Core Web Vitals data, as it adds noise. - Start the recording
Click the circular Record button (a filled circle) in the top left corner of the Performance tab. The button turns red, and DevTools begins capturing data. Immediately refresh the page by pressing F5 or Ctrl+R. Do not interact with the page until the load finishes and the page appears fully rendered. - Stop the recording
Once the page has fully loaded and you see all content, click the Stop button (a square) in the same location. DevTools processes the recording and displays the timeline, flame chart, and summary pane. - Examine the Summary pane
Look at the Summary tab on the right side of the DevTools panel. It shows a pie chart or bar chart with colored segments: blue for Loading, yellow for Scripting, purple for Rendering, green for Painting, and gray for System. If the Scripting segment is large, the issue is JavaScript execution. If the Loading segment is large, network requests are the bottleneck. - Read the flame chart
The main area of the Performance tab shows the flame chart. Each horizontal bar represents a function call. Longer bars mean longer execution time. Hover over any bar to see the function name, file name, and duration. Look for bars that are significantly longer than others — these are your performance hotspots. - Use the Bottom-Up and Call Tree tabs
Below the flame chart, click the Bottom-Up tab. This sorts functions by total time, showing which operations consumed the most CPU. Click the Call Tree tab to see the call hierarchy, starting from the root activity. Both views help you identify specific Notion code or third-party scripts that are slow. - Filter by activity type
Use the dropdown menu in the Performance tab that says All. Change it to Scripting to see only JavaScript events, or Rendering to see layout and style calculations. This narrows down the search to the most relevant category. - Save the recording for later analysis
Click the Save profile icon (a floppy disk) in the top left corner of the Performance tab. Save the file with a .devtools extension. You can later load it by clicking the Load profile icon (a folder) and selecting the file.
If the Performance Recording Shows No Clear Bottleneck
Recording shows mostly idle time
If the flame chart shows large gaps with no activity, the page might be waiting for a network response. Check the Network tab in DevTools alongside the Performance recording. Look for requests that take more than a few seconds. Common culprits are large image files, embedded PDFs, or third-party widgets that load slowly.
Scripting time is high but no single function stands out
When the Summary pane shows high Scripting time but the flame chart shows many small bars of similar length, the problem is likely a loop or recursive operation. In Notion, this often happens when a database view has many rollup formulas or linked relations. Try simplifying the database by removing unused columns or converting rollups to regular properties.
Rendering or Painting time is high
If the purple (Rendering) or green (Painting) segments are large, the page has layout thrashing or expensive paint operations. In Notion, this can occur when a page contains many embedded blocks, such as multiple databases, images, or code blocks. Reduce the number of embeds or use toggle blocks to collapse content that is not immediately needed.
Notion Page Load Time: Typical Bottlenecks vs. Recommended Actions
| Bottleneck | DevTools Indicator | Recommended Action |
|---|---|---|
| Excessive JavaScript execution | Large yellow Scripting segment; long bars in flame chart | Simplify database formulas, remove unused rollups, reduce relation columns |
| Slow network requests | Large blue Loading segment; long request times in Network tab | Compress images, use smaller file formats, embed fewer external resources |
| Layout thrashing or heavy painting | Large purple or green segments; repeated layout events | Collapse embedded blocks, use toggle headings, reduce inline embeds |
After identifying the bottleneck, apply the recommended action and then repeat the profiling process. Compare the new recording with the old one to confirm the improvement. You can load the saved .devtools file and the new recording side by side in separate DevTools windows.
For persistent slowdowns that are not caused by page content, check your browser extensions. Some ad blockers or privacy tools inject scripts that conflict with Notion. Temporarily disable all extensions and run the profile again. If performance improves, enable extensions one by one to find the culprit.
Finally, consider using Notion’s built-in performance mode. Go to Settings & Members in the left sidebar, then select Settings. Scroll to the Display section and enable Reduce motion and Reduce visual effects. These settings disable animations and transitions, which can reduce rendering time on pages with many blocks.