> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Introduction

## Article: Introduction

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/rendering-and-performance/above-the-fold/introduction.md

## Article Content:

# About the Above the Fold API

The Above the Fold API tells you whether a component on the current page is above the fold, meaning the page's layout places it in the part of the page shown before a site visitor scrolls. The result is based on the layout, not on the site visitor's screen size. Use it to load and render what site visitors see first, and to defer the rest, so the page appears faster.

With the Above the Fold API, you can check whether a component is above the fold on the current page.

## Use cases

- [Prioritize images above the fold](https://dev.wix.com/docs/sdk/site-sdk/rendering-and-performance/above-the-fold/sample-flows.md)
- [Defer a heavy component below the fold](https://dev.wix.com/docs/sdk/site-sdk/rendering-and-performance/above-the-fold/sample-flows.md)

## SDK setup

@package_metadata:@wix/site-service-above-the-fold

To use the API, install the `@wix/site-service-above-the-fold` package:

```bash
npm install @wix/site-service-above-the-fold
```

#### Import the package

```ts
import { AboveTheFoldDefinition } from '@wix/site-service-above-the-fold/definition'
```

#### Import types

Import any type shown in these docs from `@wix/site-service-above-the-fold/types`:

```ts
import type { <TypeName> } from '@wix/site-service-above-the-fold/types'
```

#### Resolve the service

In a React component, resolve the service with the `useService` hook:

```tsx
import { useService } from '@wix/services-manager-react'
import { AboveTheFoldDefinition } from '@wix/site-service-above-the-fold/definition'

function HeroImage({ id, src }: { id: string; src: string }) {
    const aboveTheFoldService = useService(AboveTheFoldDefinition)

    return <img id={id} src={src} alt="" loading={aboveTheFoldService.isInFirstFold(id) ? 'eager' : 'lazy'} />
}
```