IT/티스토리 48 웹 성능 최적화를 위한 LazyLoad 적용 이미지의 범위 뷰포트 근처의 이미지에는 LazyLoad를 적용하지 않는 것이 좋습니다. LazyLoad라는 웹 페이지 로딩 최적화를 위한 이미지 다운로드 및 출력 제어 방법에 관한 간단한 글을 올렸었습니다. 2021.06.20 관련 글 lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력, TechWrite, Translation (tistory.com) 위 글은 'lazysizes'라는 스크립트를 이용 방법을 설명합니다. 적용 방법은, 태그에 'class=lazyload'를 추가하고 'src='를 'data-src='로 변경하는 것입니다. 페이지의 모든 이미지에 LazyLoad를 적용하니까 텍스트는 빠르게 출력이 되는데, 뷰포트 범위의 사정권(?)에 있는 로고 이미지, 네비게이션바의 버튼 이미지, 심.. 2021. 10. 3. 북클럽 스킨 사이드바의 '로그인'과 '로그아웃' 오류 수정 티스토리 블로그의 북클럽 스킨의 코드 오류를 수정하는 방법입니다. 모바일 접속할 때 팝업 창으로 뜨는 사이드바의 '로그인'과 '로그아웃'이 오류 수정 대상입니다. 텍스트로 링크되어 있는 이 버튼은 눌러도 반응이 없습니다. 블로그 관리자가 로그인한 상태이면 '로그아웃' 버튼이 보이고, 관리자가 로그인하지 않았으면 '로그인' 버튼이 보입니다. 오류가 발생하는 이유 아래 코드는 북클럽 스킨의 자바스크립트를 담고 있는 파일에서 복사한 오류 발생 부분입니다. 북클럽 스킨의 자바스크립트 코드는 'script.js' 파일에 담겨 있습니다. $profile.on("click", ".login", function(){ document.location.href = 'https://www.tistory.com/auth/lo.. 2021. 9. 23. Only one AdSense head tag supported per page "TagError: adsbygoogle.push() error: Only one AdSense head tag supported per page. The second tag is ignored." 구글 애드센스 광고 코드를 태그에서 하나만 호출해야 한다는 알림 오류 메시지입니다. 태그 안에 직접 애드센스 스크립트 코드를 넣지 않고 티스토리 "블로그 관리 홈"의 "애드센스 관리" 페이지에서 2개의 광고 유형을 활성화시킨 상태입니다. 1. 전체 자동 광고 2. 본문 하단 및 목록하단 광고 두 개 중에서 하나를 끄니까 이 오류 메시지가 더 이상 나오지 않습니다. 어떤 유형의 코드를 사용하든 페이지의 헤드 태그에 애드센스 스크립트 태그가 단 하나만 있어야 합니다. 티스토리 계정에 구글 애드센스 계정을 연동하여.. 2021. 9. 17. Book Club 스킨 NavBar 'current' 표시 형태 수정 $(window).load(function(){ $gnb.find("li").each(function(){ gnbWidth = gnbWidth + $(this).outerWidth() + 1; if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){ $(this).addClass("current"); } }); $gnb.find("ul").width(gnbWidth); if ( $gnb.width() < $gnb.find("ul").width() && $gnb.find(".current").length ){ var scrollPos = $gnb.find(".current").prev().length ? $gnb.find(.. 2021. 8. 24. 북클럽 스킨 페이지 검색 버튼 표시 방법 수정 티스토리 북클럽 스킨에서 사용하는 페이지 이동 링크 'pagination'의 이전 'prev'와 다음 'next' 버튼의 보기 형태를 수정하는 코드입니다. - 카테고리의 리스트 페이지들 - 현재 보고 있는 페이지의 이전 혹은 다음 페이지들 - 검색 결과로 제시하는 페이지들의 숫자 모두 '.pagination' 클래스의 하위 클래스인 '.prev'와 '.next'의 구조로 관리합니다. 북클럽 스킨과 오딧세이 스킨의 버튼 표시 모습을 비교하여 설명하고 북클럽 스킨에 필요한 수정 코드를 등록하였습니다. 최근에 제공한 티스토리 오딧세이 스킨의 페이지 이동 버튼의 구현 모습입니다. 현재 1 페이지를 보고 있습니다. 왼쪽 마지막 페이지이기 때문에 이전('prev') 페이지 버튼을 표시하지 않습니다. 현재 19 페이.. 2021. 7. 30. lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력 Github / aFarkas / lazysizes / README.md 'lazy load'는 웹페이지의 리소스를 전송 즉시 모두 화면에 출력하기보다는 필요할 때까지 페이지 출력을 기다리는 접근 방법입니다. 페이지를 스크롤하면 대기했던 이미지가 로딩되는 웹페이지가 대표적인 적용 사례입니다. 하나의 페이지가 담고 있는 리소스를 한 번에 모두 출력하지 않고 필요한 만큼만 나누어 출력하기 때문에 페이지 로딩 속도와 성능을 개선할 수 있습니다. 다운로드한 이미지 파일들은 캐시 메모리에 저장되어 있습니다. 이것을 로딩 시간은 잠깐 늦추어 뷰포트에 보이지 않다가 나중에 필요할 때 불러내므로 "offscreen images"라는 용어를 사용합니다. 이미지 파일, 특히 고해상도에 용량이 큰 사진을 많이 제공하는.. 2021. 6. 20. 티스토리 스킨 저장 및 등록 방법 티스토리에서 실행 중인 스킨을 저장하는 방법은? "블로그 관리 홈" → '꾸미기'의 "스킨 변경" → 페이지 오른쪽 '사용 중인 스킨'의 "보관" → '스킨 보관'에 '스킨명' 입력하고 "확인" → "스킨 보관함"을 눌러서 자신이 저장한 스킨 리스트 페이지 → ("스킨 목록"과 "스킨 보관함"은 토글 버튼입니다.) 마우스를 다운로드할 저장된 스킨에 올려서 3가지 옵션 리스트 확인 → "적용", "다운로드", "삭제"에서 "다운로드" 선택 → 나타난 브라우저 팝업창 '다운로드'에서 "다른 이름으로 저장" 선택 → 파일을 저장합니다. 저장된 파일은 ZIP 압축 파일입니다. 현재 티스토리의 사용 중인 스킨의 저장 포맷은 ZIP입니다. 티스토리에 스킨을 등록할 때에는 ZIP과 같은 압축 파일이 아니라 압축을 풀.. 2021. 5. 9. 블로그 최적화 전문적으로 조사한 자료 거의 없이 네이버와 티스토리 블로그 운영하면서 발을 담그기 시작한 약간의 경험을 풀어놓겠습니다. 블로그 최적화를 생각할 때 구글, 광고, 검색을 떼어놓을 수 없습니다. 구글은 야후, 라이코스 등이 최전성기를 누리고 있을 때 초기 페이지가 빠르게 로딩되고 검색 결과를 더 빠르면서도 정확하고 다양하게 제공하는 서비스로 검색 업계의 선두 주자들을 두드려 부수고 정상에 올라간 기업이라고 단정 지을 수 있습니다. 지금도 구글 초기 페이지는 오로지 검색창만 제공합니다. 주소 입력을 마치고 엔터키를 누르는 순간 초기 페이지가 뜹니다. 물론 다른 메뉴는 오른쪽 혹은 왼쪽의 메뉴 버튼을 눌러서 선택할 수 있습니다. 한마디로 빠를 수밖에 없는 구조입니다. 지금의 SNS 초기 형태인 동호인 클.. 2021. 5. 4. 티스토리 블로그의 웹 폰트 설정 (구글 PSI 속도 측정 결과) 블로그: 티스토리 스킨: 북클럽 ※ 스킨의 종류가 다를 경우 파일의 종류와 구조는 다르지만 설정만 적용 가능합니다. 속도 측정 도구: 구글 PSI (PageSpeed Insights) 편집 대상 파일: "style.css", "skin.html" (CSS와 HTML 파일) 블로그 시작하면서 간간이 속도 측정하면서 설정을 변경하고, 테스트하고 반복하였습니다. 폰트 설정에 관계된 페이지 속도의 등락이 거의 이상 증상으로 받아들일 정도로 괴이한 현상을 보여서 이것을 파악하는 데 대부분의 시간을 보냈습니다. 티스토리 블로거들의 전문적인 글과 구글 페이지 로딩 측정 사이트의 도움말 등을 하나씩 읽어보고 설정에 적용하여 테스트하였습니다. 오늘 변경한 설정이 속도도 안정적이면서 높게 나와서 해결이 된 느낌입니다. 전.. 2021. 4. 15. Book Club 스킨 NavBar(GNB) 오류 수정 블로그의 대표 페이지 정보를 찾기 쉽게 상단에 배치하는 GNB 메뉴바의 오류 수정 티스토리 Book Club 스킨 (MIT License) 파일: "script.js" 20210402 본문 하단 "5. 추가 수정" - 로딩 속도 향상을 위한 구문 변경 20210403 본문 하단 "6. (아마도) 마지막 수정" - 내비게이션 메뉴바, #GNB의 오류를 모두 수정한 것으로 추측합니다. 1. "홈" 메뉴 이중 링크 수정 2. "홈" 메뉴를 삭제할 경우 처음 메뉴가 잘못 "current" 표시되는 오류 수정 3. 카테고리 경로뿐만 아니라 파일을 메뉴에 등록할 경우에도 "current" 표식 가능 4. 조건문을 하나로 단축하여 로딩 속도 단축 기본 코드의 오류 증상 1. 북클럽 스킨의 기본 코드 스킨 데모 페이지.. 2021. 3. 30.
