image4
웹 성능 최적화를 위한 LazyLoad 적용 이미지의 범위
뷰포트 근처의 이미지에는 LazyLoad를 적용하지 않는 것이 좋습니다. LazyLoad라는 웹 페이지 로딩 최적화를 위한 이미지 다운로드 및 출력 제어 방법에 관한 간단한 글을 올렸었습니다. 2021.06.20 관련 글lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력, TechWrite, Translation (tistory.com) 위 글은 'lazysizes'라는 스크립트를 이용 방법을 설명합니다. 적용 방법은, 태그에'class=lazyload'를 추가하고 'src='를 'data-src='로 변경하는 것입니다. 페이지의 모든 이미지에 LazyLoad를 적용하니까 텍스트는 빠르게 출력이 되는데, 뷰포트 범위의 사정권(?)에 있는 로고 이미지, 네비게이션바의 버튼 이미지, 심벌 ..
SVG animateTransform element
SVGscalable vector graphicsvector-based graphics and animations in HTML Canvas syntax: transformationstransformation 유형(함수) matrixperspectiverotatescaleskewtranslateattributes of animateTransform from:the initial(start) value of the attribute during the animation애니메이션 속성의 시작 변수 to:the final(end) value of the attribute during the animation속성의 종료 변수 by:the relative offset value of the attribute du..
lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력
Github / aFarkas / lazysizes / README.md 'lazy load'는 웹페이지의 리소스를 전송 즉시 모두 화면에 출력하기보다는 필요할 때까지 페이지 출력을 기다리는 접근 방법입니다. 페이지를 스크롤하면 대기했던 이미지가 로딩되는 웹페이지가 대표적인 적용 사례입니다. 하나의 페이지가 담고 있는 리소스를 한 번에 모두 출력하지 않고 필요한 만큼만 나누어 출력하기 때문에 페이지 로딩 속도와 성능을 개선할 수 있습니다. 다운로드한 이미지 파일들은 캐시 메모리에 저장되어 있습니다. 이것을 로딩 시간은 잠깐 늦추어 뷰포트에 보이지 않다가 나중에 필요할 때 불러내므로 "offscreen images"라는 용어를 사용합니다. 이미지 파일, 특히 고해상도에 용량이 큰 사진을 많이 제공하는..
웹 파일 압축 서비스 사이트
압축 서비스라는 것은 파일에 들어 있는 공백(스페이스)를 제거하거나 반복되는 동일한 코드를 일정한 규칙에 따라서 단순화 시켜서 파일의 용량을 줄이는 것입니다. ※ 파일 압축은 관련 분야의 영어 단어로 minify, compress를, 이미지 파일의 용량을 줄여서 웹 로딩 속도를 최적화 한다는 의미로 optimize를 사용합니다. 네트워크로 전송해야 할 데이터의 크기를 작게 만들어 보다 빠른 페이지 로딩을 도모하게 됩니다. HTML, CSS, Javascript와 같은 간단한 웹 페이지 구현을 위한 파일뿐만 아니라 PNG와 JPG 같은 이미지 포맷의 파일도 압축이 가능합니다. 텍스트로 이루어진 HTML, CSS, Javascript 파일을 압축하면 코드가 한 줄이 됩니다. 보기에 불편하기 때문에 다른 개..