SPEED 3 웹 성능 최적화를 위한 LazyLoad 적용 이미지의 범위 뷰포트 근처의 이미지에는 LazyLoad를 적용하지 않는 것이 좋습니다. LazyLoad라는 웹 페이지 로딩 최적화를 위한 이미지 다운로드 및 출력 제어 방법에 관한 간단한 글을 올렸었습니다. 2021.06.20 관련 글lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력, TechWrite, Translation (tistory.com) 위 글은 'lazysizes'라는 스크립트를 이용 방법을 설명합니다. 적용 방법은, 태그에'class=lazyload'를 추가하고 'src='를 'data-src='로 변경하는 것입니다. 페이지의 모든 이미지에 LazyLoad를 적용하니까 텍스트는 빠르게 출력이 되는데, 뷰포트 범위의 사정권(?)에 있는 로고 이미지, 네비게이션바의 버튼 이미지, 심벌 .. 2021. 10. 3. 티스토리 블로그의 웹 폰트 설정 (구글 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.
