주메인용 프로그레시브 Lazy Loading

Joomla에서 훌륭한 콘텐츠를 만드는 것과 콘텐츠를 쉽게 접근할 수 있도록 만드는 것은 별개의 문제입니다. Lazy loading 은 두 가지를 모두 해결할 수 있는 하나의 해결책으로, 사용자의 작업 흐름을 변경하지 않고도 두 가지를 결합합니다. 점진적인 lazy loading사용하면 필요할 때만 이미지를 로드합니다. 독자가 웹 페이지의 이미지에 도달하지 않으면 해당 이미지는 다운로드되지 않습니다. 이제 lazy loading Joomla에서도 사용할 수 있습니다

의 많은 이점; 페이지 로딩 속도가 빨라지고 사용자 경험이 향상되며 SEO 점수가 상승하고 저사양 기기 또는 느린 인터넷 접속을 사용하는 사용자에게 Joomla 콘텐츠가 더 용이하게 제공됩니다. 몇 주 전, lazy loading에 대한 개선 사항을 WordPress에서 발표했으며, 오늘은 Joomla!에서도 동일한 내용을 발표합니다. 그 전에 Joomla!에서 점진적 lazy loading

Joomla에서 Lazy Loading 활성화

Lazy loading은/는 Speed Cache 확장 기능의 일부입니다. lazy loading을 활성화하는 것은 스위치를 켜는 것처럼 간단합니다. 그러나 Joomla!의 Speed Cache에는 lazy loading을 최대한 활용하는 데 도움이 되는 다른 기능도 포함되어 있습니다.

지연 로딩을 스피드 캐시 구성 버튼을 클릭하여 완전히 새로운 스피드 캐시 설정 페이지로 이동합니다.

설정 lazy loading은(는) 매개변수 탭에 있습니다. 거기로 이동하거나 새로운 검색 기능을 사용하여 lazy loading 설정을 찾습니다. lazy loading을(를) 활성화하려면 lazy loading 옵션을 켭니다. 그렇게 하는 즉시 Speed Cache은(는) lazy loading을(를) 사용자 사이트에 맞게 사용자 정의할 수 있는 새로운 옵션을 표시합니다.

Joomla!에서 이미지 지연 로딩 제외

처음 두 필드를 사용하면 아이콘이나 작은 로고와 같이 매우 작은 이미지는 지연 로딩에서 제외할 수 있습니다. 이는 Joomla! 블로그의 로딩 시간에 실제로 영향을 미치는 이미지에 대해서만 지연 로딩을 활성화하는 데 유용합니다. 이러한 이유로 지연 로딩이 효과가 없도록 렌더링하지 않도록 매우 작은 이미지만 제외해야 합니다.

그러나 어떤 경우에는 Joomla! 게시물이나 페이지 전체를 lazy loading에서 제외(또는 포함)하려고 할 수 있습니다. 그렇게 하는 이유는 매우 다양하며 합리적입니다. 예를 들어 포함된 미디어가 콘텐츠에 필수적일 수 있습니다. 다음 두 필드는 이러한 효과를 위해 사용됩니다.

첫 번째 필드를 사용하면 특정 페이지에 대해서만 지연 로딩을 활성화할 수 있으며, 두 번째 필드를 사용하면 콘텐츠의 일부 선택에 대해서만 지연 로딩을 비활성화할 수 있습니다. 두 경우 모두 와일드카드를 사용할 수 있습니다. 별표 기호를 사용하여 유사한 이름의 Joomla! 게시물 또는 페이지 집합에 지연 로딩을 적용합니다. 변경 사항을 저장하여 지연 로딩을 활성화합니다. Joomla! 블로그에서 자동으로 적용됩니다.

Joomla!에서 점진적 지연 로딩이 작동하는 방식

Lazy loading 필요한 즉시 콘텐츠를 제공합니다. 일반적으로 페이지는 텍스트와 이미지의 조합으로 구성됩니다. 미디어를 다운로드하는 데는 특히 저사양 모바일 기기나 인터넷 연결이 느린 경우 텍스트를 다운로드하는 것보다 더 많은 시간이 걸립니다. Joomla 블로그가 마법처럼 모바일 기기나 인터넷 연결 속도를 높일 수는 없지만 사용자 경험을 개선하는 것, 즉 다음으로 가장 좋은 방법은 할 수 있습니다.

lazy loading 가 실제로 의미하는 바는 브라우저가 처음에 텍스트를 로드한다는 것입니다. 이는 일반적으로 Joomla! 블로그의 필수적인 부분입니다. 텍스트는 크기도 훨씬 작기 때문에 더 빨리 로드되고 독자가 따라갈 수 있습니다. 스크롤을 아래로 내려 이미지가 보이면 lazy loading 다운로드하여 표시합니다.

실제로 이미지를 로드하는 데 시간이 걸릴 수 있습니다. 따라서 점진적인 이미지 지연 로딩은 자동으로 이미지의 작은 버전(너비 20px, 4가지 색상, 몇 KB 크기)을 생성하여 원본 크기로 확대한 다음 흐리게 만듭니다. 그 효과는 이미지가 여전히 다운로드되고 있음을 나타내는 전체 크기 이미지의 흐릿한 버전입니다. 지연 로딩이 이미지 다운로드를 마치면 Joomla!는 흐릿한 이미지를 전체 이미지로 대체합니다.

점진적 지연 로딩은 지연 로딩으로 자동 활성화됩니다. 즉, 추가 변경이 필요하지 않습니다. 가장 좋은 점은 이미지의 작은 버전만을 사용함으로써 점진적 지연 로딩이 Joomla! 저장 공간에 거의 오버헤드를 추가하지 않는다는 것입니다.

Joomla! 갤러리의 Lazy Loading

Lazy loading 은 차별하지 않습니다. Speed Cache의 lazy loading 는 Droppics 갤러리와 같은 갤러리를 포함한 모든 이미지에 대해 작동합니다. 일반 이미지와 마찬가지로 Speed Cache 은 갤러리의 작은 버전의 이미지를 확대하고 흐리게 합니다. 사용자가 아래로 스크롤하면 lazy loading 전체 크기의 이미지를 다운로드합니다.

가장 좋은 점은 Speed Cache의 lazy loading 가 작업 흐름을 방해하지 않는다는 것입니다. 대신, lazy loading 을 프로세스에 주입합니다. Joomla! 블로그의 아무 곳에나 이미지 또는 갤러리를 삽입하면 Speed Cache 가 AJAX를 사용하여 이미지를 게으르게 로드합니다. 사용자의 환경 설정에 의해 제외된 텍스트 및 작은 이미지를 주로 포함하는 주요 콘텐츠가 로드된 후에 하나씩 로드합니다.

화면 높이에 따른 스마트 Lazy Loading

Lazy loading 은 스크롤링과 화면 높이에 관한 것입니다. Speed Cache’s lazy loading 은 현재 화면 높이 (뷰포트 기반)에만 적용되고 다음 화면을 미리로드하는 방식으로 매우 똑똑합니다. 따라서 연결 속도가 빠르거나 천천히 스크롤하는 경우 Joomla 웹 사이트에서 lazy loading 이 활성화되었는지 알 수 없습니다.

또한, 이 lazy loading 은 화면 높이를 기반으로 현재 화면 높이에만 적용되며, 예를 들어 앵커에 대한 링크가 있는 경우 페이지 중간에 있는 경우에도 적용됩니다. 그런 다음, lazy loading 은 사용자가 위로 스크롤하거나 아래로 스크롤하면 한 번 적용됩니다.

Joomla SEO와 Lazy Loading

스피드 캐시에서 사용되는 지연 로딩은 SEO에 영향을 주지 않습니다. 사실 Google 봇과 같은 콘텐츠를 크롤링하는 검색 엔진은 다음과 같은 장점만 볼 수 있습니다:

• 페이지 로딩 시간이 훨씬 좋아집니다
• 대체 텍스트, 이미지 제목 및 설명을 포함한 모든 이미지 콘텐츠는 lazy loading없이 즉시 로드됩니다
• 이미지 캡션도 페이지가 처음 렌더링될 때 로드됩니다.

점진적 지연 로딩은 시각적 신호를 추가하여 미디어를 표시하는 것과 다운로드 지연 사이의 절충안입니다. 동시에 지연 로딩은 Joomla 블로그 탐색을 더 빠르고 즐겁게 만듭니다. 훌륭한 콘텐츠를 공유하는 데에는 제한이 없어야 하며 이제 Joomla의 점진적 지연 로딩을 통해 접근성을 높일 수 있습니다.

물론, 우리는 또한 Speed Cache(이)가 정말 멋진 캐시 모듈과 같은 다른 많은 훌륭한 도구를 제공한다는 것을 염두에 둘 수 있습니다. 이를 통해 사이트 속도를 높이고 다음 단계로 끌어올릴 수 있습니다!

Joomla용 확인:  https://www.joomunited.com/products/speed-cache