Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Use when reviewing long pages, dashboards, or content feeds with expensive offscreen modules. Balance early enough loading for smooth scrolling against keeping the initial route light.
.claude/skills/thedaviddias-import-on-visibility/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-10 | ✗→✓ | ▲ Improved | -9% | 0% |
| case-11 | ✗→✓ | ▲ Improved | -8% | 0% |
| case-09 | ✓→✗ | ▼ Worse | -9% | 0% |
| case-05 | ✓→✓ | ＝ Same ✓ | 11% | 0% |
| case-02 | ✓→✓ | ＝ Same ✓ | -11% | 0% |
Many pages ship JavaScript for offscreen sections that a user may never reach. Import-on-visibility keeps the initial route lighter while still loading content early enough to feel ready when users scroll to it.
rootMargin so heavy content loads early enough without competing with above-the-fold workIdentify components, widgets, or modules that load on first render even though they only appear after the user scrolls. Flag which ones can switch to visibility-based loading.
Use Intersection Observer or an equivalent framework primitive to load the offscreen component or dependency when it approaches the viewport, while preserving layout stability and a clear placeholder.
Explain import-on-visibility, how it differs from import-on-interaction, and how viewport-based loading helps large pages stay fast.
Inspect scroll-triggered sections, embeds, charts, recommendation modules, and long landing pages. Flag code that is bundled eagerly even though the corresponding UI stays offscreen until later, and verify the deferred version still loads before the user reaches it.
For full implementation details, code examples, and framework-specific guidance, see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/performance/import-on-visibility
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-05 | pass→pass | 6,833 | 7,022 | +3% | 1 | 1 | 0% | 1,404 | 1,552 | +11% | 0 | 0 | — |
case-01 | fail→fail | 13,035 | 8,609 | -34% | 1 | 1 | 0% | 2,851 | 1,995 | -30% | 0 | 0 | — |
case-02 | pass→pass | 13,847 | 10,063 | -27% | 1 | 1 | 0% | 2,533 | 2,266 | -11% | 0 | 0 | — |
case-03 | pass→pass | 9,745 | 6,956 | -29% | 1 | 1 | 0% | 2,141 | 1,771 | -17% | 0 | 0 | — |
case-04 | pass→pass | 12,460 | 12,876 | +3% | 1 | 1 | 0% | 2,344 | 2,467 | +5% | 0 | 0 | — |
case-23 | pass→pass | 9,756 | 7,959 | -18% | 1 | 1 | 0% | 1,527 | 1,616 | +6% | 0 | 0 | — |
case-06 | pass→pass | 6,868 | 5,085 | -26% | 1 | 1 | 0% | 1,472 | 1,304 | -11% | 0 | 0 | — |
case-07 | pass→pass | 9,889 | 5,496 | -44% | 1 | 1 | 0% | 2,130 | 1,579 | -26% | 0 | 0 | — |
case-08 | pass→pass | 10,932 | 7,302 | -33% | 1 | 1 | 0% | 2,081 | 1,907 | -8% | 0 | 0 | — |
case-09 | pass→fail | 11,436 | 9,525 | -17% | 1 | 1 | 0% | 2,343 | 2,136 | -9% | 0 | 0 | — |
case-10 | fail→pass | 9,996 | 6,350 | -36% | 1 | 1 | 0% | 1,762 | 1,610 | -9% | 0 | 0 | — |
case-11 | fail→pass | 11,273 | 8,789 | -22% | 1 | 1 | 0% | 2,202 | 2,027 | -8% | 0 | 0 | — |
case-12 | pass→pass | 8,011 | 17,515 | +119% | 1 | 1 | 0% | 1,134 | 1,241 | +9% | 0 | 0 | — |
case-13 | pass→pass | 18,794 | 17,809 | -5% | 1 | 1 | 0% | 2,554 | 2,253 | -12% | 0 | 0 | — |
case-14 | pass→pass | 14,662 | 14,826 | +1% | 1 | 1 | 0% | 2,116 | 2,227 | +5% | 0 | 0 | — |
case-15 | pass→pass | 12,703 | 19,712 | +55% | 1 | 1 | 0% | 1,982 | 1,984 | +0% | 0 | 0 | — |
case-16 | pass→pass | 16,516 | 13,966 | -15% | 1 | 1 | 0% | 2,514 | 2,784 | +11% | 0 | 0 | — |
case-17 | pass→pass | 10,835 | 8,854 | -18% | 1 | 1 | 0% | 2,043 | 1,764 | -14% | 0 | 0 | — |
case-18 | pass→pass | 14,364 | 11,809 | -18% | 1 | 1 | 0% | 2,584 | 2,368 | -8% | 0 | 0 | — |
case-19 | pass→pass | 5,259 | 5,008 | -5% | 1 | 1 | 0% | 730 | 1,005 | +38% | 0 | 0 | — |
case-20 | pass→pass | 15,048 | 8,848 | -41% | 1 | 1 | 0% | 2,190 | 1,725 | -21% | 0 | 0 | — |
case-21 | pass→pass | 10,098 | 4,450 | -56% | 1 | 1 | 0% | 1,296 | 992 | -23% | 0 | 0 | — |
case-22 | pass→pass | 18,088 | 12,194 | -33% | 1 | 1 | 0% | 2,484 | 2,303 | -7% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +4 percentage points is the difference between those two pass rates over the 23 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.