WordPress에서 오프스크린 이미지를 연기하는 방법

우리 모두는 SEO와 전환에 속도가 매우 중요하다는 것을 알고 있습니다. 웹사이트를 빠르게 만들면 해당 웹사이트가 Google에서 더 높은 순위를 차지하는 데 도움이 될 수 있습니다. 그리고 독자를 행복하게 할 수도 있습니다. 빠른 웹사이트를 좋아하지 않는 사람이 있을까요?

하지만 웹사이트를 속도에 최적화하려고 할 때는 할 일이 너무 많아서 시간이 많이 걸릴 수 있습니다. 저는 보통 가끔 웹사이트를 테스트해서 성능이 좋지 않은지 확인합니다. 새로운 것이 무엇인지 알 수 없습니다. SEO의 세계에서는 상황이 매우 자주 바뀝니다.

귀하가 귀하의 웹사이트를 확인했다면 속도 테스트 도구 Google PageSpeed ​​Insight나 Web.dev와 마찬가지로, 여러분이 받을 수 있는 경고 중 하나는 "화면 밖 이미지 연기"입니다.

이 글에서는 그 의미를 설명하고, 해결 방법을 알려드리고, 해결에 사용할 수 있는 플러그인을 추천해드리겠습니다.

그러나 오프스크린 이미지를 연기하면 모바일 속도가 향상될 수 있는 이유를 알아야 하며, 속도에 영향을 미치는 가장 중요한 요소는 호스팅과 테마입니다. BloggingTools에서 우리는 구름 가장 빠른 WordPress 호스팅이기 때문입니다. Cloudways를 감당할 수 없다면 Bluehost나 Hostinger가 좋은 선택입니다. 테마의 경우 가장 빠른 WordPress 테마로 알려진 GeneratePress.

화면 밖 이미지를 지연한다는 것은 무엇을 의미합니까?

오프스크린 이미지를 지연한다는 것은 아직 사용자에게 보이지 않는 이미지의 로딩을 지연한다는 것을 의미합니다. 이렇게 하면 브라우저가 필요한 것만 로딩하는 데 집중하게 되어 궁극적으로 웹사이트가 더 빨라집니다.

게시물이나 홈페이지에 이미지가 많으면 사용자가 사이트를 방문하면 브라우저가 즉시 모든 것을 로드하기 시작합니다. 이미지가 많으면 페이지를 사용자에게 렌더링하는 데 많은 시간이 걸릴 수 있습니다.

하지만 오프스크린 이미지를 연기하면 사용자가 스크롤할 때만 이미지가 로드됩니다.

연기할 수 있는 것은 이미지뿐만 아니라, 대부분의 웹사이트 자산도 필요할 때까지 연기할 수 있습니다.

WordPress에서 오프스크린 이미지를 연기하는 방법

이미지를 지연 로딩하여 오프스크린 이미지를 지연할 수 있습니다. 지연 로딩은 이미지가 필요할 때만 로드되도록 합니다. 이렇게 하면 웹사이트가 더 빨라집니다.

페이지가 빠르게 로딩되는 것을 방해하는 이미지 및 기타 자산을 레이지 로드할 수 있게 되면 Google PageSpeed ​​Insight 및 기타 테스트 도구의 "오프스크린 이미지 지연"이 사라집니다.

WordPress에서 오프스크린 이미지를 지연하려면 다음 단계를 따르세요.

1. Lazy 로딩 플러그인 설치

WordPress 플러그인 디렉토리에서 무료로 제공되는 많은 레이지 로딩 플러그인이 있습니다. 플러그인으로 가서 새로 추가한 다음 레이지 로딩을 입력하세요. 좋은 평가를 받은 플러그인은 무엇이든 설치하세요.

하지만 이미 지연 로딩을 처리할 수 있는 플러그인이 있다면 플러그인을 설치할 필요가 없습니다. 대부분의 캐싱 플러그인은 지연 로딩을 가지고 있습니다. 캐싱 플러그인에서 지연 로딩 옵션을 확인하세요. 이미지 최적화 플러그인은 대부분 지연 로딩 옵션을 가지고 있습니다.

Jetpack과 autooptimize를 사용하는 경우에도 지연 로딩 옵션이 제공됩니다.

2. 레이지 로딩 옵션 활성화

플러그인을 설치한 후에는 반드시 레이지 로딩 옵션을 활성화하세요. 레이지 로딩 기능이 있는 캐시 플러그인이 있는 경우 해당 옵션을 활성화하세요.

3. 캐시를 지웁니다.

레이지 로딩이 활성화되면 캐시를 지우면 됩니다!

사이트를 다시 테스트하면 경고가 사라져 있을 것입니다!

오프스크린 이미지 지연 WordPress 플러그인

Defer offsreen images 플러그인은 lazy loading 플러그인과 동일합니다. 다음은 몇 가지입니다.

1. 제트 팩

제트 팩 5만 건 이상의 활성 설치를 보유한 가장 인기 있는 WordPress 플러그인 중 하나입니다. 이미 Jetpack을 설치했다면, 레이지 로딩을 위해 추가 플러그인을 설치할 필요가 없습니다.

Jetpack에서 레이지 로딩을 활성화하기만 하면 됩니다. 활성화하려면 Jetpack 설정으로 가서 성능 탭에서 아래로 스크롤하여 레이지 로딩을 활성화합니다.

2. 자동 최적화

Autoptimize 매우 인기 있는 성능 플러그인입니다. Autoptimize를 사용하는 경우 Autoptimize에 동일한 기능이 있으므로 지연 로딩 플러그인을 설치할 필요가 없습니다.

Autoptimize 설정으로 이동한 다음 이미지 탭을 클릭하고 지연 로딩을 활성화합니다.

3. WP 로켓

WP Rocket 가장 인기 있는 프리미엄 WordPress 캐싱 플러그인입니다. WP Rocket을 사용하면 다른 플러그인이 필요 없으며, 레이지 로딩이 활성화되어 있습니다.

WP Rocket 설정으로 가서 미디어를 클릭하면 지연 로딩을 활성화할 수 있습니다.

4. LiteSpeed ​​캐시

귀하가 LiteSpeed ​​Cache 플러그인, 지연 로딩 기능이 있습니다. 활성화하려면 미디어 섹션으로 이동하면 지연 로딩을 활성화할 수 있습니다.

5. a3 레이지 로드

Lazy 로딩만을 위한 플러그인만 필요한 경우 a3 지연로드 는 그에 적합한 플러그인입니다. 간단히 플러그인 > 새로 추가로 가세요. a3 Lazy Load를 검색하세요. 설치하고 활성화하세요. 그런 다음 플러그인 설정으로 가서 lazy loading을 활성화하세요.

일반적으로 일부 테마, 일부 캐시 플러그인, 일부 이미지 최적화 플러그인에는 지연 로딩 기능이 제공됩니다.

자주 묻는 질문