loading 5 웹 성능 최적화를 위한 LazyLoad 적용 이미지의 범위 뷰포트 근처의 이미지에는 LazyLoad를 적용하지 않는 것이 좋습니다. LazyLoad라는 웹 페이지 로딩 최적화를 위한 이미지 다운로드 및 출력 제어 방법에 관한 간단한 글을 올렸었습니다. 2021.06.20 관련 글lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력, TechWrite, Translation (tistory.com) 위 글은 'lazysizes'라는 스크립트를 이용 방법을 설명합니다. 적용 방법은, 태그에'class=lazyload'를 추가하고 'src='를 'data-src='로 변경하는 것입니다. 페이지의 모든 이미지에 LazyLoad를 적용하니까 텍스트는 빠르게 출력이 되는데, 뷰포트 범위의 사정권(?)에 있는 로고 이미지, 네비게이션바의 버튼 이미지, 심벌 .. 2021. 10. 3. lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력 Github / aFarkas / lazysizes / README.md 'lazy load'는 웹페이지의 리소스를 전송 즉시 모두 화면에 출력하기보다는 필요할 때까지 페이지 출력을 기다리는 접근 방법입니다. 페이지를 스크롤하면 대기했던 이미지가 로딩되는 웹페이지가 대표적인 적용 사례입니다. 하나의 페이지가 담고 있는 리소스를 한 번에 모두 출력하지 않고 필요한 만큼만 나누어 출력하기 때문에 페이지 로딩 속도와 성능을 개선할 수 있습니다. 다운로드한 이미지 파일들은 캐시 메모리에 저장되어 있습니다. 이것을 로딩 시간은 잠깐 늦추어 뷰포트에 보이지 않다가 나중에 필요할 때 불러내므로 "offscreen images"라는 용어를 사용합니다. 이미지 파일, 특히 고해상도에 용량이 큰 사진을 많이 제공하는.. 2021. 6. 20. 티스토리 블로그의 웹 폰트 설정 (구글 PSI 속도 측정 결과) 블로그: 티스토리 스킨: 북클럽 ※ 스킨의 종류가 다를 경우 파일의 종류와 구조는 다르지만 설정만 적용 가능합니다. 속도 측정 도구: 구글 PSI (PageSpeed Insights) 편집 대상 파일: "style.css", "skin.html" (CSS와 HTML 파일) 블로그 시작하면서 간간이 속도 측정하면서 설정을 변경하고, 테스트하고 반복하였습니다. 폰트 설정에 관계된 페이지 속도의 등락이 거의 이상 증상으로 받아들일 정도로 괴이한 현상을 보여서 이것을 파악하는 데 대부분의 시간을 보냈습니다. 티스토리 블로거들의 전문적인 글과 구글 페이지 로딩 측정 사이트의 도움말 등을 하나씩 읽어보고 설정에 적용하여 테스트하였습니다. 오늘 변경한 설정이 속도도 안정적이면서 높게 나와서 해결이 된 느낌입니다. 전.. 2021. 4. 15. 구글 Page Speed Insights 웹페이지 속도 측정 (광고 철거하고) PageSpeed Insights (google.com) 블로그 초기 페이지 로딩 속도가 너무 느려서 조금씩 코드와 이미지의 용량을 수정하고 개선하면서 속도를 측정하고 있습니다. 1. 전혀 손대지 않고 있는 그대로 사용한 처음 상태입니다. 모바일 / 데스크톱 2. 1주일 정도 정리 작업을 진행한 후의 수치입니다. 모바일 / 데스크톱 현재 구글과 카카오의 4개 광고 등록한 상태입니다. - 이미지 크기 축소 - 투명 배경이 필요하지 않은 내용에서는 압축률이 떨어지는 PNG를 GIF, JPG로 교체 - 사용 폰트 줄이고 폰트 소스 파일을 계정에 업로드 - 필요 없는 자바 스크립트와 jQuery를 제거하고 JQuery 소스파일 계정에 업로드 - 구문이 잘못되지 않고, 눈에 띄는 오류를 일으키지는 않지만, 리소스.. 2021. 2. 20. 구글 Page Speed Insights 웹페이지 속도 측정 접속 사이트: https://developers.google.com/speed/pagespeed 서비스 명칭: PageSpeed Insights 서비스 특징: 웹 페이지 로딩 속도 측정을 통한 사용자 환경 보고서 발행 https://developers.google.com/speed 접속하면 "Make the Web Faster" 페이지를 만나게 됩니다. 한마디로 웹 접속 환경을 더 빠르게 개선하자는 목적으로 관련 도구를 제공하는 것입니다. " Analyze and optimize your website with PageSpeed tools " "PageSpeed tools" 도구 중 하나가 "PageSpeed Insights"입니다. 그 외에 다음과 같은 서비스도 제공합니다. 당연한 것이지만 .. 2021. 2. 8.
