Colin's Blog
자바스크립트 Lazy Loading과 웹 폰트의 사용자 경험 향상 방법

여러분은 웹사이트의 로딩 속도를 개선하고 사용자 경험을 향상시키는 방법을 찾고 있다면, 자바스크립트 Lazy Loading은 고려해볼만한 효과적인 방법 중 하나입니다. Lazy Loading은 페이지에 있는 이미지, 스크립트 및 리소스를 필요한 경우에만 로딩하는 기술이며, 사용자가 요청할 때까지 필요한 리소스를 로드하지 않음으로써 웹사이트의 성능을 향상시킵니다.

Lazy Loading을 구현하는 가장 간단한 방법 중 하나는 Intersection Observer API를 사용하는 것입니다. 이 API는 뷰포트 내에 들어오거나 벗어나는 엘리먼트를 감지하고 콜백 함수를 실행하여 알리는 기능을 제공합니다. 이를 활용하여 이미지가 뷰포트에 진입할 때까지 이미지의 로딩을 지연시키고, 사용자가 스크롤하여 이미지를 볼 때 로딩을 시작할 수 있습니다.

const lazyImages = document.querySelectorAll('.lazy');

const lazyLoad = (target) => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });

  io.observe(target);
};

lazyImages.forEach(lazyLoad);

위의 예시 코드는 .lazy 클래스를 가진 이미지 엘리먼트에 Lazy Loading을 적용하는 방법을 보여줍니다. Intersection Observer를 사용하여 뷰포트 내에 들어오는 이미지에만 src 속성을 설정하여 실제 이미지를 로드합니다. 이렇게 하면 초기 페이지 로딩 속도를 향상시키고 사용자가 이미지를 보기 직전에 로드되기 때문에 훨씬 더 나은 사용자 경험을 제공할 수 있습니다.

웹 폰트의 사용자 경험 향상 방법

웹사이트에 웹 폰트를 사용하는 것은 디자인적인 측면에서 매우 중요합니다. 그러나 웹 폰트를 사용하면 페이지 로딩 속도가 느려지고 사용자 경험이 저하될 수 있는 문제가 있습니다. 따라서, 웹 폰트를 사용하는 동시에 성능을 향상시킬 수 있는 몇 가지 방법을 알아보겠습니다.

첫 번째로, 폰트 딜리버리 네트워크를 활용하는 것입니다. 폰트 딜리버리 네트워크는 폰트를 효율적으로 제공하기 위해 최적화된 CDN(Content Delivery Network)입니다. 이는 폰트를 캐싱하고 최적화된 서버에서 로드하여 로딩 속도를 향상시킵니다.

두 번째로, 글꼴 선언 지연을 사용하는 방법입니다. 이는 웹페이지가 처음으로 로드될 때 폰트를 로드하는 것을 지연시킴으로써 초기 페이지의 로딩 성능을 향상시킵니다. 예를 들어, 다음과 같은 코드를 사용할 수 있습니다.

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'); /* 실제 폰트를 로드하는 부분은 여기에 작성 */
}

body {
  font-family: 'MyWebFont', sans-serif;
}

세 번째로, 폰트 서브셋화라는 기법을 사용할 수 있습니다. 웹 폰트는 한글이나 특정 문자 세트 전체를 포함하지 않도록 사용자의 브라우저에게 필요한 범위만 전달하는 것입니다. 이를 통해 폰트의 용량을 줄이고 로딩 속도를 개선할 수 있습니다.

위의 방법들을 모두 적용하여 웹 폰트를 사용하면 웹사이트의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.

참고 자료:

© 2018 Colin. All rights reserved.