Review long pages and dashboards to defer heavy components until they approach the visible screen area. Identify unnecessary initial JavaScript, introduce visibility-based loading, and preserve layout space so scrolling content is ready when needed.
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.
Reviews how long pages load components that users cannot see until they scroll. It examines charts, embeds, reviews, related products, and similar content loaded during the initial render, and helps change them to load their code as they approach the visible area. It uses Intersection Observer, a mechanism that monitors an element’s position relative to the viewport, to balance initial loading work against waiting time during scrolling.
Use it for information-heavy dashboards or long landing pages that load features near the bottom right from the start. It also explains how loading based on visibility differs from loading triggered by a user interaction.
Reserve space for deferred sections with placeholders or a surrounding frame. Adjust rootMargin, which sets how far ahead loading starts, so content can be ready before users reach it without competing too much with initial rendering work.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.
The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 23, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
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/rules/performance/import-on-visibility
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create and review custom 404 pages that help visitors recover from broken or moved links through search and navigation. Check the rendered page and HTTP response so missing content returns a proper 404 status.
Audit or create a dedicated About page that explains a website’s purpose and identifies its people or organization. Review the rendered output and supporting information, including expertise and contact details, to find gaps.
Review and add automated accessibility checks for components, pages, and continuous integration workflows. Use axe-based tools to detect structural and attribute issues, while identifying checks that still need keyboard or screen reader testing.
Review sign-in, registration, multi-factor authentication, and account recovery for accessibility barriers. Find blocked paste, difficult code entry, and inaccessible backup methods, then suggest authentication paths that support password managers, autofill, or device approval.
Review form errors, success messages, and live updates so screen reader users receive important notifications. Check the HTML delivered to the browser, announcement settings, display duration, and dismissal controls, then identify specific elements that need changes.
Review HTML tables so screen reader users can understand how headers and data relate. Check header markup, table descriptions, and merged cells, then identify specific fixes and ways to verify them.