IT163 구글 Page Speed Insights 웹페이지 속도 측정 (광고 철거하고) PageSpeed Insights (google.com) 블로그 초기 페이지 로딩 속도가 너무 느려서 조금씩 코드와 이미지의 용량을 수정하고 개선하면서 속도를 측정하고 있습니다. 1. 전혀 손대지 않고 있는 그대로 사용한 처음 상태입니다. 모바일 / 데스크톱 2. 1주일 정도 정리 작업을 진행한 후의 수치입니다. 모바일 / 데스크톱 현재 구글과 카카오의 4개 광고 등록한 상태입니다. - 이미지 크기 축소 - 투명 배경이 필요하지 않은 내용에서는 압축률이 떨어지는 PNG를 GIF, JPG로 교체 - 사용 폰트 줄이고 폰트 소스 파일을 계정에 업로드 - 필요 없는 자바 스크립트와 jQuery를 제거하고 JQuery 소스파일 계정에 업로드 - 구문이 잘못되지 않고, 눈에 띄는 오류를 일으키지는 않지만, 리소스.. 2021. 2. 20. 댓글 티스토리 연동 광고 overflow로 인한 블록 깨짐 방지 티스토리에 등록한 애드핏, 애드센스 광고 배너 크기로 인하여 페이지의 틀이 깨질 때 사용하는 방법입니다. 티스토리의 '블로그 관리 홈'에서 2가지 광고를 연동시켰을 때 사용하는 것입니다. 티스토리와 연동시키지 않고 광고 배너 코드를 직접 소스 페이지에 입력하는 경우는 적용되지 않습니다. 이미지 2개를 예제로 등록하였습니다. 현재 티스토리에 연동된 배너 광고의 크기는 고정형입니다. 웹브라우저의 높이와 폭의 크기를 변동시키면 배너가 있는 문단의 크기에 맞게 변경되지 않습니다. 그래서 왼쪽 캡처 이미지와 같이 페이지의 다른 구역을 침범하여 전체적인 페이지의 디자인이 깨지는 현상이 발생합니다. 다행스러운 것은 구글 애드센스, 카카오 애드핏 배너 광고의 HTML 코드가 "" 태그를 사용하고 "revenue_uni.. 2021. 2. 19. 댓글 구글 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. 댓글 마이크로소프트 엣지 브라우저 작업 관리자 Browser Task Manager, 브라우저 작업 관리자 윈도우 10의 웹 브라우저 Microsoft Edge의 구글 크롬 기반 새 버전에 '브라우저 작업 관리자'가 새로 등록되었습니다. Edge 오른쪽 상단 메뉴(3점) , '기타 도구', '브라우저 작업 관리자(B)' 순서로 선택합니다. 키보드 단축키 로 실행할 수 있습니다. '브라우저 작업 관리자'를 실행하여 Microsoft Edge 브라우저가 진행하고 있는 작업, 탭, 확장 기능, 프로세스를 개별적으로 선택하여 관리할 수 있습니다. ※ 확장 기능 : extensions, edge://extensions/ '브라우저 작업 관리자'를 실행시키면 브라우저의 각각의 탭에서 실행되고 있는 창("탭:")의 제목으로 알려 주고 있는 프로세스 외에 .. 2021. 2. 6. 댓글 구글 애널리틱스 기본 용어 정리 [사용자] visitors 하나 이상의 세션을 시작한 접속자 [활성 사용자] active users 1회 이상의 세션에 참여한 사용자로 중복을 제외한 사용자 활성 사용자는 중복을 제외하기 때문에 특정 조회 기간 동안 1인으로 계산합니다. 활성 사용자로 지정하는 시간 단위는 다음 예를 비교해 보면 분석 항목에 따라서 차이가 있음을 알 수 있습니다. 제시된 시간 단위 역시 필요에 따라 구글에서 추가 및 변동이 가능할 것입니다. (1) Active users are those who have sent a hit to Analytics within the last five minutes. (2) An active user is a user who has performed an action such as cl.. 2021. 1. 30. 댓글 마이크로소프트 엣지 브라우저 키보드 단축키 (한글과 영문) Photo by Dries Augustyns on Unsplash ※ 마이크로소프트 윈도우 8.1, 10, 11 단축키 영문 페이지 링크 (2022.05.20 추가) Keyboard shortcuts in apps (microsoft.com) 즐겨찾기 모음을 표시하거나 숨김 Show or hide the favorites bar 즐겨찾기 모음의 첫 번째 항목에 포커스 설정 Set focus on the first item in the favorites bar 현재 탭을 즐겨찾기로 저장 Save the current tab as a favorite 열려 있는 모든 탭을 새 폴더에 즐겨찾기로 저장 Save all open tabs as favorites in a new folder 편집할 주소.. 2021. 1. 8. 댓글 Tistory 블로그 사이드바에 프로필 정보 창 추가하는 요령 (북클럽 스킨) ※ 20210303 등록 방법의 오류 수정 및 반영 ※ 20210220 "skin.html" 파일에 추가하는 코드 수정 티스토리에서 2020년에 제공한 공식 스킨 "Odyssey"에는 사이드바에 블로그의 정보를 전달하는 작은 창을 달 수 있습니다. skin.html을 검색하면 'box-profile'이라는 'class'를 사용합니다. 프로필 정보 창 이미지입니다. 사이드바의 상단입니다. 알기 쉽게 파란색 박스로 블록 처리하였습니다. Odyssey 스킨을 사용한 문화재청의 블로그를 샘플로 전시하여 사용자에게 정확한 스킨 디자인 포인트를 알려 주고 있습니다. 이 프로필 창을 "Book Club" 스킨에 적용하는 요령을 설명하겠습니다. 다른 스킨 사용자는 코드를 자신이 사용하는 스킨에 맞게 수정을 해야 할 것.. 2020. 12. 27. 댓글 Tistory 모바일 앱에서 구글 애드센스 광고 구현 티스토리 모바일 앱에서 구글 애드센스 광고를 보여 주기 위한 설정 방법에 대한 설명 글입니다. 카카오 티스토리 블로그에는 기본적으로 구글 애드센스와 카카오 애드핏 광고를 게재할 수 있습니다. 일정 자격을 취득한 후 등록한 광고의 뷰 혹은 클릭을 통하여 가변적인 수익을 얻을 수 있는 구조입니다. 자신이 운영하고 있는 티스토리 블로그에 광고를 등록하는 방법은 최소 4가지 이상 가능합니다. - 티스토리에서 제공하는 기본 스킨 '북클럽'을 기준으로 설명합니다. 1. 티스토리 제공 기본 스킨의 'skin.html' 파일에 광고 코드를 직접 삽입하는 방법 2. '블로그 관리 홈'의 '사이드 바'에 광고 관련 모듈을 등록하는 방법 3. '블로그 관리 홈'의 '플러그인'에서 Google Adsense와 Kakao Ad.. 2020. 12. 10. 댓글 티스토리 블로그에 구글 검색 엔진 추가 구글 애드센스 가입자는 애드센스 검색엔진을 자신의 블로그나 사이트에 등록하여 이용이 가능합니다. Google 기반 검색엔진을 내 블로그나 사이트에 손쉽게 추가하여 1. 내 블로그 글만 검색 2. 인터넷 검색 마음대로 설정이 가능합니다. 가장 유용한 기능은 블로그에 검색엔진을 장착하고 검색을 하면 검색 결과를 바로 밑에 제시하고 블로그 페이지의 본문 내용을 하단으로 위치 변동합니다. 검색 결과를 별도 페이지에 제시하는 것이 아니라 블로그 본문과 어울리게 보여 주기 때문에 검색을 하기 위하여 블로그를 벗어날 필요가 없습니다. 티스토리 북클럽 스킨 사용하고 있습니다. ※ "skin.html" 파일의 구글 검색엔진 코드입니다. 코드를 많이 수정하여 왼쪽의 라인 숫자는 일치하지 않을 것입니다. 동일한 스킨을 사용.. 2020. 11. 30. 댓글 티스토리 script.js GNB 오류 수정 ※ 2020.11.27: 블로그 반영 ※ 2024.03.26: 아래 링크한 알릭2님의 블로그에 원본 소스를 수정하는 자세한 이유와 설명이 기재되어 있습니다. 북클럽 스킨 - GNB 메뉴 현위치 버그 (tistory.com) 원본 (오류) $(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... 2020. 11. 18. 댓글
