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