Joomla를 위한 점진적 Lazy Loading

Joomla!에서 훌륭한 콘텐츠를 만드는 것과 접근성을 높이는 것은 별개의 문제입니다. Lazy loading 워크플로우를 변경하지 않고 이 두 가지를 결합한 솔루션입니다. 점진적 lazy loading사용하면 이미지는 필요할 때만 로드됩니다. 사용자가 웹페이지에서 이미지에 도달하지 못하면 다운로드되지 않습니다. 이제 Joomla!에서도 lazy loading 사용할 수 있습니다.

lazy loading 의 장점은 많습니다. 페이지 로딩 속도가 빨라져 사용자 경험이 향상되고, SEO 점수가 높아지며, 저사양 기기나 인터넷 속도가 느린 사용자도 Joomla 콘텐츠에 더 쉽게 접근할 수 있습니다. 몇 주 전, WordPress의 lazy loading 개선한 방법을 소개했습니다 Joomla!에서 lazy loading 활성화하는 방법을 살펴보겠습니다

Joomla!에서 Lazy Loading 활성화하기

Lazy loading Speed Cache 의 일부입니다 . lazy loading 것은 스위치를 켜는 것만큼 간단합니다. 하지만 Joomla!의 Speed Cache lazy loading 최대한 활용하는 데 도움이 되는 다른 기능들도 포함되어 있습니다 .

Joomla! 블로그에서 lazy loading 설정하려면 Speed Cache 설정 클릭하여 새로운 Speed Cache 설정 페이지로 이동하세요.

지연 lazy loading 매개변수 에 있습니다 . 해당 탭으로 이동하거나 새로운 검색 기능을 사용하여 lazy loading 설정을 찾으세요. lazy loading lazy loading 켜기만 하면 됩니다 . 켜면 Speed Cache 웹사이트에 맞게 lazy loading 맞춤 설정할 수 있는 새로운 옵션을 표시합니다

Joomla! Lazy Loading 에서 이미지 제외

처음 두 필드를 사용하면 아이콘이나 작은 로고처럼 크기가 매우 작은 특정 이미지를 lazy loading 에서 제외할 수 있습니다. 이 기능은 Joomla! 블로그의 로딩 시간에 실제로 영향을 미치는 이미지에 대해서만 lazy loading 활성화하는 데 유용합니다. 따라서 lazy loading 제대로 작동하지 않도록 크기가 매우 작은 이미지만 제외해야 합니다.

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

첫 번째 필드를 사용하면 특정 페이지에만 lazy loading 활성화하고, 두 번째 필드를 사용하면 선택한 콘텐츠에만 lazy loading 비활성화할 수 있습니다. 두 경우 모두 와일드카드도 사용할 수 있습니다. 별표(*)를 사용하면 비슷한 이름의 Joomla! 게시물이나 페이지에 lazy loading 적용할 수 있습니다. lazy loading활성화하려면 변경 사항을 저장하세요. lazy loading Joomla! 블로그에 자동으로 적용됩니다.

Joomla!에서 점진적 Lazy Loading 작동하는 방식

Lazy loading 필요한 콘텐츠를 즉시 제공합니다. 일반적으로 페이지는 텍스트와 이미지의 조합으로 구성됩니다. 미디어를 다운로드하는 데는 텍스트 다운로드보다 시간이 더 오래 걸리며, 특히 저사양 모바일이나 인터넷 속도가 느린 경우 더욱 그렇습니다. Joomla! 블로그가 모바일이나 인터넷 속도를 마법처럼 빠르게 향상시킬 수는 없지만, 그 다음으로 좋은 방법, 즉 사용자 경험을 향상시킬 수 있습니다.

lazy loading 은 브라우저가 처음에 텍스트를 로드하는 것을 의미하는데, 텍스트는 일반적으로 Joomla! 블로그의 핵심 부분입니다. 텍스트 크기도 훨씬 작아서 로드 속도가 빠르고 독자들이 따라가기 쉽습니다. 아래로 스크롤하여 이미지가 나타나면 lazy loading 이미지를 다운로드하고 표시합니다.

실제로 이미지가 로드되는 데 시간이 걸릴 수 있습니다. 따라서 점진적 이미지 lazy loading 자동으로 20px 너비, 4가지 색상, 몇 KB 크기의 작은 이미지를 생성하여 원래 크기로 확대한 후 블러 효과를 적용합니다. 이 효과는 전체 이미지의 블러 효과를 적용하여 이미지가 아직 다운로드 중임을 나타냅니다. lazy loading 이 이미지 다운로드를 완료하면 Joomla!는 블러 효과를 적용했던 이미지를 전체 이미지로 대체합니다.

점진적 lazy loading lazy loading통해 자동으로 활성화되므로 추가 변경이 필요하지 않습니다. 무엇보다도, 점진적 lazy loading 작은 버전의 이미지만 사용하므로 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의 lazy loading 현재 화면 높이(뷰포트 기준)에만 적용되고 다음 화면 높이를 미리 로드하는 매우 스마트한 기능입니다. 따라서 연결 속도가 빠르거나 스크롤 속도가 느린 경우 Joomla 웹사이트에서 lazy loading 활성화되어 있다는 사실을 전혀 눈치채지 못할 것입니다.

또한, 화면 높이에 따른 lazy loading 은 앵커 링크와 같이 페이지 중앙에 있더라도 현재 화면 높이에만 적용됩니다. 따라서 위나 아래로 스크롤할 때 lazy loading 적용됩니다.

Joomla SEO 및 Lazy Loading

Speed Cache 에 사용되는 lazy loading SEO에 영향을 미치지 않습니다. 실제로 Google 봇과 같이 콘텐츠를 크롤링하는 검색 엔진은 다음과 같은 이점만 얻게 됩니다.

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

점진적 lazy loading 은 시각적 신호를 추가하여 미디어 표시와 다운로드 지연 사이의 절충안입니다. 동시에 lazy loading Joomla! 블로그 탐색을 더 빠르고 쾌적하게 만들어 줍니다. 훌륭한 콘텐츠를 공유하는 데에는 한계가 없어야 하며, 이제 Joomla!의 점진적 lazy loading 덕분에 콘텐츠 접근성에도 한계가 없습니다.

Speed Cache 사이트 속도를 높이고 다음 단계로 끌어올릴 수 있는 정말 좋은 Cache 모듈 과 같은 다른 많은 멋진 도구를 제공한다는 사실도 기억해 두세요

Joomla의 Speed Cache 확인  https://www.joomunited.com/products/speed-cache