More
블로그관리
블로그 PageSpeed Insights cls 문제 해결 방법

블로그 PageSpeed Insights cls 문제 해결 방법

구글 서치 콘솔에 최근 나오기 시작한 CLS 문제가 있습니다. 이 점수는 페이지 로딩 중 발생하는 레이아웃 변화 점수를 측정하는 지표입니다. 점수는  CLS 0.1 이하는 빠름, 0.25 이하 개선필요, 0.25 초과일 경우 느림으로 표시되는데 제 블로그는 테마를 구입해 바꾼 후 느림으로 표시되기 시작했습니다. 단순히 페이지가 느린 것이 아니라 페이지의 급격한 변화로 인한 사용자 불편이 문제이기 때문에 이 부분을 개선해보기로 했습니다.
블로그스팟 adsbygoogle.push() 에러 해결

블로그스팟 adsbygoogle.push() 에러 해결

Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0 블로그스팟 블로그 성능 체크 중 개발자 모드 콘솔창에 나타난 에러 입니다.  이 에러 메시지 안내를 따라가 보면 "반응형 광고 코드가 명시적 너비가 설정되지 않은 상위 컨테이너 내부에 있기 때문입니다." 라고 되어 있는데 딱히 광고 사이즈에 width를 명시해줘도 해결되지 않았기 때문에 다른 방법을 찾아봤습니다.
구글 서치 콘솔 페이지 색인 줄어드는 현상

구글 서치 콘솔 페이지 색인 줄어드는 현상

블로그스팟 운영을 1년 조금 넘게 해왔는데 대부분의 트래픽은 네이버에서 나오고 있고 구글은 거의 없는 상태입니다. 특히 2013년 6월 이후로는 오히려 색인이 줄어드는 현상이 발생하고 있습니다.
블로그스팟 마우스 오른쪽 클릭 막는방법

블로그스팟 마우스 오른쪽 클릭 막는방법

티스토리 하던 시절에는 금방 적용 가능했는데 블로그스팟(blogger)으로 옮긴 뒤로는 스크립트 적용 하는 게 꽤 귀찮네요.  그동안 그냥 적용 안하고 있다가 그래도 무분별 하게 출처 명기도 안하고 퍼가는 걸 막기 위해서 마우스 오른쪽 버튼 클릭을 막기로 했습니다.
블로그스팟 bing 검색 성인 컨텐츠로 분류하는 현상 해결

블로그스팟 bing 검색 성인 컨텐츠로 분류하는 현상 해결

지긋지긋할 정도로 해결이 안되던 bing 검색엔진에서 블로그스팟 블로그가 성인 컨텐츠로 포함되어 있을 수 있는 검색 결과라는 화면으로 표시되던 내용이 해결되었습니다.
블로그스팟 이미지 지연 로드와 Webp 이미지 제공 업데이트

블로그스팟 이미지 지연 로드와 Webp 이미지 제공 업데이트

블로그스팟에서 신규 기능을 업데이트 했습니다. 구글 블로거 서비스가 몇 년 전 한번 업데이트 한 이후로 한번도 신규 업데이트 없었는데 9월에 이미지 지연 로드(lazy load), WebP 이미지 제공 신규 기능이 업데이트 되었네요.
구글 블로그스팟 블로거 포스팅 작성 시 맞춤법 검사

구글 블로그스팟 블로거 포스팅 작성 시 맞춤법 검사

티스토리로 블로그 하던 시절에는 없던 일인데 구글 블로거 서비스에는 포스팅 작성 시 맞춤법 검사가 없습니다. 그래서 포스팅 글을 작성하고 워드에 글을 옮겨 붙여 검사하거나 구글 크롬의 한국어 맞춤법 검사를 이용해 검사 하는 방법을 사용해야 합니다.
구글 서치 콘솔에서 리디렉션 오류가 나오며 블로거 포스팅이 색인 되지 않을때

구글 서치 콘솔에서 리디렉션 오류가 나오며 블로거 포스팅이 색인 되지 않을때

서치 콘솔 리디렉션 오류 구글 서치 콘솔에 페이지 색인 과정 중 색인이 생성 되지 않는 이유 중 하나 인 리디렉션 오류에 관한 내용입니다. 다른 블로그(티스토리)에서는 안 나오던 내용인데 구글 블로거( Blogger) 에서만 발생하네요.
bing 검색에서 구글 블로그스팟을 성인 컨텐츠로 분류하는 현상

bing 검색에서 구글 블로그스팟을 성인 컨텐츠로 분류하는 현상

bing 검색 등록을 위해 마이크로소프트 웹마스터툴에 제 구글 블로그스팟을 등록했습니다. 블로그 포스팅들이 색인되고 상당기간이 지났음에도 노출이나 클릭이 전혀 발생하지 않아 뭔가 문제가 있음을 감지하고 하나씩 살펴보기로 했습니다.
직장인 애드센스 수입 종합소득세 신고하는 방법

직장인 애드센스 수입 종합소득세 신고하는 방법

작년에 처음 블로그를 개설하고 발생했던 수입에 대해 종합소득세 신고를 하게 되었습니다. 작년에 126,000원 정도 애드센스 수익금을 받았고 직장에 다녀 근로소득이 있는 상태인데 인터넷에 있는 애드센스 종합소득세 신고 내용들이 대부분 사업자거나 근로소득과 연계하여 신고하는 내용이 아니라 상당히 어려웠네요.
구글 애드센스에 등록된 카카오뱅크 swift코드 변경

구글 애드센스에 등록된 카카오뱅크 swift코드 변경

카카오뱅크의 swift코드가 변경되었습니다. 3월 29일부터 변경되었다는데 4월 6일에 알려주네요... 구글 애드센스 계좌에 카카오뱅크를 사용중인데 변경 안하면 애드센스 정산금 수령이 안된다고 합니다.
구글 서치콘솔에서 크롤링만 되고 색인이 안될 때 수동등록으로 해결하는 법

구글 서치콘솔에서 크롤링만 되고 색인이 안될 때 수동등록으로 해결하는 법

구글 블로거를 시작한지 시간이 꽤 지났는데 초반 일부 자료들을 제외하고 몇달간 페이지 색인 생성이 전혀 이뤄지지 않았습니다. 그래서 도저히 그냥 기다릴 수 없어 해결책을 찾기로 했습니다.
블로그스팟에 소스코드 보기 좋게 삽입하는 방법

블로그스팟에 소스코드 보기 좋게 삽입하는 방법

지금 쓰고 있는 구글 블로그스팟 테마 디자인에서 <pre><code> 태그를 이용한 소스코드 삽입 디자인 기능을 지원하지만 소스코드라는 것만 표시될 정도의 미약한 기능이기에 이 기능 대신 좀 더 보기 좋게 삽입하는 게 필요했습니다. highlight.js 같은 별도의 자바스크립트 라이브러리를 이용할 수도 있지만  많이 쓰지 않는데  js파일을 하나 선언해야 한다는 점이 별로 마음에 들지 않아서 선언 없이 코드만 삽입할 수 있는 기능을 찾아봤습니다. <code>를 삽입하면 나오는 모습. 컬러가 없습니다. colorscripter.com https://colorscripter.com 처음은 colorscripter 사이트를 이용 해 삽입용 소스코드를 만들어 봤습니다. 만드는 건 간단하고 어렵지 않은데 단점이 블로그 삽입용 소스코드 길이가 너무 길어지고 <code> 태그를 사용하는 방식이 아닌 <div> 태그를 사용해 만들기 때문에 …
구글 블로그 썸네일 옆 텍스트 원하는 부분만 보여주기

구글 블로그 썸네일 옆 텍스트 원하는 부분만 보여주기

아래 그림은 구글 블로그에서 라벨을 눌러 보여지는 페이지나 메인페이지의 썸네일 화면 옆 텍스트가 원하는 부분까지 보여지 않는 모습입니다. 제 블로그의 경우 목차를 보여주는 코드가 일부 보이는 모습이 생겨서 이 부분을 수정해야 했습니다.
구글 애널리틱스에서 페이지별 애드센스 수익 확인하기

구글 애널리틱스에서 페이지별 애드센스 수익 확인하기

티스토리 블로그를 운영할때는 통계 자료가 티스토리 관리자에서 꽤 자세하게 나오기 때문에 이게 그렇게 궁금하지 않았는데 구글 블로거를 운영해보니 관리자 통계 기능이 거의 없다시피 해서 어떤 페이지가 수익 나는지를 구글 애널리틱스를 통해 확인해야 합니다.
유튜브 동영상 추가후 콘솔에 나타나는 preloadResponse 에러메시지 해결하기

유튜브 동영상 추가후 콘솔에 나타나는 preloadResponse 에러메시지 해결하기

preloadResponse 에러 에러메시지 :  The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle. 최근에 포스팅한 사이폰커피 kukan 소개 포스팅에 유튜브 쇼츠 영상을 일반동영상처럼 재생되도록 하여 집어넣었는데 콘솔을 확인해보니 위와 같은 에러메시지가 나오고 있었습니다. 그리고 확인해보니 유독 유튜브영상이 포스팅 화면에 늦게 나오고 있었는데요. preload 라는게 마크업의 위치로 인해 리소스 로드를 시작하는 시점보다 일찍 리소스 로드를 시작하게 만드는 기능인데 이게 작동을 안하니 유튜브링크가 늦게 나오고 있던거였습니다. preloadRespo…
구글 블로거 이미지 로딩을 Lazy-Loading으로 지연시켜 페이지 속도 향상 시키기

구글 블로거 이미지 로딩을 Lazy-Loading으로 지연시켜 페이지 속도 향상 시키기

구글 Lighthouse 점수에서 큰 비중을 차지하는게 이미지 로딩부분인데 구글 블로그스팟에 이미지를 여러장 포스팅하면 웬만큼 크기를 줄여도 Lighthouse에서 계속 경고 메시지가 나오게 됩니다. 그렇다고 이미지를 뺄 수도 없는 포스팅은 방법이 안나오는데 이럴때 사용할 수 있는게 포스팅 페이지에 처음 접속할 때 나오는 이미지를 사용자 스크롤에 따라 지연로딩하게 만드는 Lazy-Loading 기능입니다. Lighthouse의 이미지 용량 축소 문구 Lazy-Loading 기능을 사용하면 아래처럼 JPG파일을 WebP로 전환하라는 내용도 같이 사라지게 됩니다. 이전에 WebP로 변환해서 구글 블로그에 업로드 해봤었는데 이 메시…
lighthouse 웹접근성 색상대비 문제 해결하고 점수 올리기

lighthouse 웹접근성 색상대비 문제 해결하고 점수 올리기

글제목 lighthouse 검사에서 웹접근성 항목인 Accessibility 점수를 올리기 위해 작업중에 아래와 같이 색상대비 문제를 개선하라는 메시지가 나왔습니다. Background and foreground colors do not have a sufficient contrast ratio. Low-contrast text is difficult or impossible for many users to read. 배경색과 글자색의 명암비가 충분하지 않아 나오는 메시지입니다. 저대비 텍스트는 많으면 저시력 또는 색맹인 사람은 텍스트를 배경과 구별할 수 없어서 개선하라는 내용입니다. 저대비 텍스트 경고 메시지 웹접근성 부분을 거의 다…
구글 블로그 fontawesome css파일 render-blocking resources 경고 제거하기

구글 블로그 fontawesome css파일 render-blocking resources 경고 제거하기

render-blocking resources lighthouse 검사 중 Performance 부분에 표시되는 fontawesome.min.css 파일이 Eliminate render-blocking resources 로 체크되어 이 부분을 개선하려고 했습니다.  이 메시지는 <head>태그의 스크립트나 css링크에 대해서 나타나는데 html파싱이 끝나기전 불러오는 파일에 대한 이슈입니다. 티스토리 할때는 이거 하나가 얼마나 영향 주겠나 하고 그냥 내비두던 시절도 있었는데 카카오서버 다운사태 이후로 구글 애드센스 수익이 작살나는걸 보고난 후 생각이 바뀌어  Performance부분 이슈는 전부 수정중입니다. 관리자모드의 HTML편집으로 들어가 컨트롤+F 를 눌러 찾기를 켜고 <head>태그 내에 있는  fontawesome.min.css 파일을 찾습니다.  해당 태그를 삭제하고 </body>태그 바로 위에 아래 코드로 …
구글 블로그 안쓰는 자바스크립트 제거 Reduce unused JavaScript

구글 블로그 안쓰는 자바스크립트 제거 Reduce unused JavaScript

Reduce unused JavaScript lighthouse검사 중 Performance 부분에서 표시된 미사용 자바스크립트에 대한 에러표시입니다. Reduce unused JavaScript로 표시되고 구글 ads를 제외한 js파일이 2개가 발견됩니다. 구글 ads는 현재 광고가 안붙은 상태라 제외하고 나머지가 문제인데요. 그런데 이 js들은 제거하려고 아무리 찾아도 관리자 HTML편집기나 위젯에서 찾을 수가 없습니다. 그리고 이 js파일들이 차지하는 부분이 꽤 큰편입니다. Reduce unused JavaScript 페이지소스보기를 통해 해당 자바스크립트 코드를 찾아보면 Reduce unused JavaScript에 표시된 위젯이 표시되는데 관리자 HTML에서는 검색이 안되는 난감한 상황. 해결을 위해선 이 사용도 안하는 위젯을 관리자에서 HTML편집으로 해결해야 합니다. 미사용 위젯 미사용 위젯과 자바스크립트 …