이 세 가지가 무엇인지 잘 모르는 분들을 위해 처음에 이 세 가지를 정의합니다.
레이지 로드
지연 로딩은 문자 그대로 번역하면 '지연'이라고도 하며, 사용하지 않을 수 있는 객체의 불필요한 사전 로딩을 피하기 위해 적절한 사용 시점까지 객체의 로딩 또는 렌더링을 지연시키는 데 사용되는 디자인 패턴입니다. 이미지에 가장 일반적으로 사용되며 로드 시간을 개선하고 대역폭을 절약하는 데 기여합니다.
각 이미지의 렌더링은 필요할 때까지 지연되며, 그래픽 창을 스크롤할 때 로드됩니다.
뷰포트
뷰포트, 정확한 번역은 없지만 '그래픽 창'이라고도 불리는 이 태그는 2007년에 Apple이 iPhone용으로 만든 것으로, 노키아가 미니 맵용으로 디자인한 것과 유사한 가상 창이었습니다. 이는 웹 페이지가 모바일 브라우저에 웹 브라우저가 페이지를 렌더링하는 방식을 전달할 수 있는 방법을 제공하기 위한 메타 태그였으며, 지금도 여전히 사용되고 있습니다.
이 메타 태그가 없으면 iPhone에서는 사용자가 확대/축소해야 하는 980픽셀 너비의 창으로 웹 페이지가 렌더링됩니다. 이 메타 태그를 사용하면 페이지를 실제 크기로 렌더링한 다음 레이아웃을 조정하여 모바일 브라우저를 사용할 때 모두가 기대하는 종류의 페이지를 제공할 수 있습니다. 결국 이 메타 태그는 대부분의 기기에서 지원되는 표준 메타 태그가 되었고 오늘날 우리가 '반응형' 디자인이라고 알고 있는 것에 사용됩니다.
라이트스피드 캐시
LiteSpeed 웹 서버는 웹 서버 소프트웨어이며 라이트스피드 캐시 (LSCWP)는 올인원 사이트 가속 플러그인으로, 고유한 서버 전체 캐시 및 LiteSpeed 보정 서버에서 호스팅되는 워드프레스 사이트를 위한 최적화 기능 모음을 갖추고 있습니다.
이미지 업로드
페이지가 처음 로드될 때 이미 그래픽 창에 있는 이미지, 즉 스크롤하기 전에 화면에 언뜻 보이는 이미지를 제외한 모든 이미지는 지연 로드하는 것이 이상적입니다.
여기에 문제가 있습니다. 움직임이 없을 때까지 이미지가 표시되지 않고 표시되는 처음 두세 개를 제외해야 하므로 처음 로드할 때 페이지가 보기 흉하게 보일 수 있습니다.
워드프레스에는 이미 버전 5.5부터 기본 지연 로딩 기능이 있으며 다음과 같은 다른 많은 플러그인을 사용하여 이 기능을 수행할 수 있습니다 뷰포트를 제어하여 표시할 이미지와 표시하지 않을 이미지를 제한하려는 경우, 예를 들어 지연 로딩을 하지 않도록 지시할 수 있듯이 그렇게 간단하지는 않습니다 먼저 2, 3, 4, 하지만 각 페이지에 대한 특정 이미지를 간단한 방법으로 설정하거나 제외할 수는 없으며 다음을 통해서만 가능합니다 대량으로.
VPI
7월 25일, 라이트스피드는 플러그인 5.0 버전 업데이트에서 이 문제를 해결할 수 있는 유연한 옵션인 VPI(뷰포트 이미지)를 추가했습니다.
VPI 서비스는 URL을 검사하여 데스크톱 보기의 경우 1300×900픽셀 화면에 표시할 이미지와 모바일 보기의 경우 480×800 화면에 표시할 이미지를 결정합니다. 그런 다음 해당 이미지 목록을 LiteSpeed 플러그인에 반환하고, LiteSpeed 플러그인은 다음에 해당 URL을 캐시할 때 느린 로딩에서 해당 이미지를 제외합니다.
그 결과 페이지가 완전히 스크롤 위쪽으로 렌더링되고 스크롤 아래쪽의 모든 이미지는 이전과 같이 계속 작동합니다. 이 페이지는 우수한 페이지 속도 점수를 유지하며, 방문자는 콘텐츠의 첫 번째 전체 화면을 보게 됩니다.
구성
이 새로운 서비스를 이용하려면 당연히 활성화해야 합니다 레이지 로드 를 플러그인에 추가합니다.
VPI의 구성은 간단하며 스위치는 두 개뿐입니다.
뷰포트 이미지(이하 VPI)가 활성화되어 있고 크론이 켜짐으로 설정되어 있으면 크론 기반 대기열을 통해 백그라운드에서 VPI 이미지가 생성됩니다.
크론을 활성화하지 않으려면 VPI 대기열을 수동으로 처리해야 합니다. 대기열에 URL이 있을 때 표시되는 "수동으로 VPI 대기열 실행" 버튼 또는 기본 대시보드의 "강제 크론" 옵션에서 이 작업을 수행할 수 있습니다.
이 새로운 옵션의 흥미롭고 정말 유용한 점은 이제 클래식 편집기와 구텐베르크 모두에서 각 글과 페이지의 라이트스피드 옵션에 이 옵션을 완전히 비활성화하고 뷰포트에서 이미지를 제거하여 원하는 대로 미세 조정할 수 있는 새로운 상자가 있다는 점입니다.
이 상자에 표시되는 모든 이미지는 업로드가 지연되지 않습니다.
입력이 아직 VPI에 대해 처리되지 않은 경우 두 상자가 모두 비어 있지만 원하는 대로 이미지를 수동으로 추가하거나 두 상자에서 이미지를 삭제하고 VPI를 강제로 재계산할 수 있습니다.
좋은 점과 좋지 않은 점
의심할 여지 없이 LiteSpeed VPI의 가장 큰 장점은 지연 로딩을 적용하지 않을 특정 이미지를 빠르고 쉽게 결정하고 각 페이지에 대해 수동으로 설정할 수 있다는 점입니다.
단점은 이 옵션이 다음에서 제공하는 다른 워드프레스 최적화 서비스에 추가된다는 것입니다. QUIC.cloud 중요 CSS(CCSS), 고유 CSS(UCSS), 저품질 이미지 플레이스홀더(LQIP) 및 이미지 최적화와 같이 항상 충분하지 않을 수 있는 제한된 무료 할당량이 제공되며, 그 이후에는 크레딧을 구매해야 합니다 그들은 비싸지 않습니다.
워드프레스 코어 및 퍼프매터스의 기본 지연 로드(수량별 고정 제외)와 결과를 비교하기 위해 테스트하기로 결정했고, 지금까지는 이미 있던 작은 차이 내에서 개선된 것을 확인할 수 있었습니다.
최종 시각적 결과는 퍼프매터스에서 얻은 것과 완전히 동일합니다 자리 표시자 를 회색에서 흰색으로 변경하고 이 CSS를 사용하여 '페이드 인' 효과의 지속 시간을 원하는 대로 조정할 수 있습니다.
/* 라이트스피드 지연 로드를 위한 페이드 - 1부 - 지연 로드 전 */
img[data-lazyloaded]{
opacity: 0;
}
/* 파트 2 - 지연 로드 시 */
img.litespeed-loaded{
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}
