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

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

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

Google PageSpeed ​​Insight나 Web.dev 같은 웹사이트 속도 테스트 도구를 사용해 웹사이트 속도를 확인해 보셨다면 , "화면 밖 이미지 표시를 지연시키세요"라는 경고를 받으셨을 수도 있습니다.

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

하지만 화면 밖 이미지 로딩 지연이 모바일 속도 향상에 도움이 되는 이유는 분명하지만, 속도에 가장 큰 영향을 미치는 요소는 호스팅과 테마라는 점을 알아두셔야 합니다. BloggingTools에서는 가장 빠른 WordPress 호스팅인 Cloudways를 사용하고 있습니다. Cloudways를 이용할 여력이 없다면 Bluehost나 Hostinger도 좋은 선택입니다. 테마로는 가장 빠른 WordPress 테마 중 하나인 GeneratePress를 사용하고 있습니다.

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

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

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

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

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

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

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

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

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

1. Lazy 로딩 플러그인 설치

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

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

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

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

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

3. 캐시를 지웁니다.

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

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

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

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

1. 제트 팩

Jetpack은 5만 건 이상의 활성 설치 수를 자랑하는 가장 인기 있는 WordPress 플러그인 중 하나입니다. 이미 Jetpack이 설치되어 있다면 지연 로딩을 위해 추가 플러그인을 설치할 필요가 없습니다.

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

2. 자동 최적화

Autoptimize 는 매우 인기 있는 성능 향상 플러그인입니다. Autoptimize를 사용하고 있다면, Autoptimize 자체에 지연 로딩 기능이 있으므로 별도의 지연 로딩 플러그인을 설치할 필요가 없습니다.

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

3. WP 로켓

WP Rocket 은 가장 인기 있는 프리미엄 WordPress 캐싱 플러그인입니다. WP Rocket을 사용하면 다른 플러그인이 필요하지 않습니다. WP Rocket 자체에서 지연 로딩 기능을 제공하기 때문입니다.

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

4. LiteSpeed ​​캐시

LiteSpeed ​​Cache 플러그인을 사용 중이시라면 , 해당 플러그인에 지연 로딩 기능이 있습니다. 이 기능을 활성화하려면 미디어 섹션으로 이동하여 지연 로딩을 활성화하면 됩니다.

5. a3 레이지 로드

만약 단순히 지연 로딩 기능만 필요한 플러그인이라면 a3 Lazy Load가 좋은 선택입니다. 플러그인 메뉴에서 '새 플러그인 추가'를 선택하고, 'a3 Lazy Load'를 검색하여 설치 및 활성화하세요. 그런 다음 플러그인 설정에서 지연 로딩 기능을 활성화하면 됩니다.

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

자주 묻는 질문