웹 콘텐츠가 길어짐에 따라 WordPress의 지연 로드와 같은 기능을 활용하여 사이트를 빠르게 실행하는 것이 중요합니다.
지연 로딩이란?
지연 로딩은 기본적으로 사용자가 페이지를 아래로 스크롤할 때까지 이미지 로딩을 지연시키는 것입니다(이미지가 뷰포트 내에 들어옴).
이게 왜 대단한가? 100개의 이미지가 포함된 긴 형식의 블로그 게시물이 있다고 가정해 보겠습니다. 기본적으로 브라우저는 누군가가 게시물을 방문할 때 해당 이미지 100개 모두를 로드하려고 시도합니다. 최적화된 이미지를 사용하더라도 특히 모바일에서는 시간이 오래 걸릴 수 있습니다. 그러나 이미지를 지연 로드하면 방문자가 브라우저에서 볼 수 있는 페이지 위쪽(Viewpost)으로만 이미지가 로드됩니다. 이미지의 수는 브라우저 유형, 사용 중인 지연 로드 유형, 화면(뷰포트) 크기 등에 따라 다릅니다. 그러나 그럼에도 불구하고 일반적으로 즉시 요청의 85% 이상을 줄입니다.
지연 부하 테스트
아래는 차이점을 확인할 수 있도록 블로그 게시물 중 하나에서 테스트를 실행한 결과 화면입니다.
지연 로드하지 않음
다음은 이미지를 지연 로드하기 전입니다. 보시다시피 총 56개의 요청, 총 페이지 크기 852KB, 로드 시간 1.2초입니다.
지연 로드
다음은 지연 로딩을 활성화한 후입니다. 요청 수가 35개로 감소한 것을 볼 수 있듯이 총 페이지 크기는 245KB로 감소하고 로드 시간은 0.8초로 떨어졌습니다. 그래서 즉, 단지 게으른 로딩을 가능하게 하는 것은 우리에게 준 33 % 의 속도로 증가하고 70 %가 페이지 크기를 감소.
테스트한 게시물은 이미 상당히 최적화되어 있습니다. 최적화되지 않은 이미지를 지연 로드하거나 페이지에 더 많은 이미지가 있는 경우 속도가 훨씬 더 빨라지는 것을 볼 수 있습니다.
지연 로딩 작동 방식
지연 로딩과 네이티브 지연 로딩의 성능 비교
이제 WordPress 5.5 이상에는 기본적으로 지연 로딩이 있습니다. 그러나 Perfmatters에서 지연 로딩 솔루션을 사용하는 것이 좋습니다. 왜냐면 Perfmatters 솔루션은 다음과 같은 이유로 네이티브 지연 로딩보다 빠르고 더 좋습니다.
- 네이티브는 브라우저가 지연 로드되어야 하는 항목을 결정하도록 하는 것을 의미합니다. 불행하게도 그것은 기본적으로 너무 성급한 게 문제입니다. 이것은 예외가 필요하지 않을 것이기 때문에 이점이 될 수 있지만 일반적으로 많은 리소스가 지연 로드되지 않을 수 있습니다. 이것은 그것이 그렇게 빠르지 않을 것이라는 것을 의미합니다.
- 네이티브 지연 로딩이 개선되고 있지만 여전히 특정 기능에 대한 지원이 부족합니다. 아래에서 볼 수 있듯이 Perfmatters는 많은 기능을 추가했습니다.
중요 : Perfmatters에서 지연 로딩이 활성화되면 WordPress의 기본 지연 로딩 기능은 자동으로 비활성화됩니다.
WordPress에서 지연 로드를 활성화하는 방법
WordPress에서 지연 로드를 활성화하려면 WordPress 관리자 대시보드의 "Perfmatters" 설정으로 이동합니다. "옵션" 탭에서 "지연 로딩" 하위 탐색 메뉴를 클릭합니다.
지연 로딩과 관련하여 4가지 옵션이 있습니다. 동시에 함께 사용할 수도 있습니다.
이미지 로드 지연
첫 번째 옵션이자 가장 일반적인 방법은 이미지를 지연 로드하는 것입니다. 이를 활성화하려면 "이미지" 옵션을 켜십시오. 여기에는 스타일 속성 내부의 인라인 배경 이미지도 포함됩니다.
지연 로드 iframe 및 비디오
두 번째 옵션은 iframe 및 비디오를 지연 로드하는 것입니다. 여기에는 YouTube, Vimeo, Google 지도 및 모든 유형의 iframe이 포함됩니다. 이는 video태그를 사용하여 파일 URL이 포함된 비디오에서도 작동합니다.
이를 활성화하려면 "iFrames and Videos" 옵션을 켜십시오.
YouTube 미리보기 이미지
사이트에서 YouTube 동영상을 사용하는 경우 미리 보기 썸네일 기능을 활성화하는 것이 좋습니다. 이것이 하는 일은 YouTube iframe을 미리보기 축소판과 가벼운 SVG 재생 아이콘으로 바꾸는 것입니다. 그런 다음 클릭하면 iframe이 로드됩니다. 이것이YouTube 동영상을 로드하는 가장 빠른 방법입니다.
비디오를 사용한 성능 테스트에서 이 기능이 사이트 속도를 64% 증가시키는 것을 보았습니다. 또한 전체 페이지 크기가 58% 감소했습니다. 정말 놀랍습니다.
YouTube에서 사용하는 썸네일은 자동으로 가져온 미리보기 이미지입니다. 이를 활성화하려면 "YouTube 미리보기 축소판" 옵션을 켜십시오.
참고: 이를 위해서는 Perfmatters에서 iFrames 및 비디오를 활성화해야 합니다.
DOM 모니터링
DOM 모니터링은 DOM의 변경 사항을 감시하고 새로 추가된 요소를 동적으로 지연 로드합니다. 이렇게 하면 페이지를 로드할 때 무한 스크롤을 사용하는 타사 플러그인 및 테마에 대한 호환성이 향상됩니다.
이를 활성화하려면 "DOM 모니터링" 옵션을 켜십시오.
참고: 무한 스크롤을 사용하지 않는 경우 이 옵션을 활성화하지 않는 것이 좋습니다.
'WordPress' 카테고리의 다른 글
| WordPress에서 Google SEO의 적절한 크기 이미지 경고 수정하는 방법 (0) | 2021.09.29 |
|---|---|
| 서버 응답 시간 단축(TTFB) (0) | 2021.09.28 |
| WordPress 호스트 빠른 호스트에 투자하세요 (0) | 2021.09.27 |
댓글