자바스크립트 이미지 지연 로딩 완벽 가이드: 스켈레톤 UI로 LCP 성능 최적화하기

안녕하세요! 웹사이트의 첫인상을 결정짓는 가장 중요한 요소 중 하나는 바로 ‘로딩 속도’입니다. 특히 고해상도 이미지가 많은 블로그나 포트폴리오 사이트라면, 이미지가 뜰 때까지 하얀 화면만 보여주는 방식은 사용자를 금방 지치게 만듭니다. 구글 역시 LCP(Largest Contentful Paint)라는 지표를 통해 웹사이트의 로딩 성능을 엄격히 평가하고 있죠. 오늘은 라이브러리 없이 순수 자바스크립트 이미지 지연 로딩 기법을 적용하고, 이미지가 로딩되는 … 더 읽기

인피니트 스크롤 구현하기: 라이브러리 없이 완성하는 자바스크립트 성능 최적화 기법

안녕하세요! 우리가 매일 사용하는 인스타그램이나 유튜브처럼 화면을 아래로 내릴 때마다 끊임없이 새로운 콘텐츠가 나타나는 기능을 보신 적 있으시죠? 오늘은 이처럼 매끄러운 사용자 경험을 제공하는 인피니트 스크롤을 외부 라이브러리 없이 순수 자바스크립트만으로 구현하는 방법을 심도 있게 다뤄보려고 합니다. 특히 단순히 기능만 돌아가는 수준을 넘어, 브라우저의 부하를 최소화하는 성능 최적화 관점에서 어떻게 설계해야 하는지 저의 시행착오와 함께 … 더 읽기