[공지] 신규 블로그 스킨 변경했습니다

이번주에 공지드린대로 블로그 스킨을 개편 작업이 진행중이었는데, 1차 완성되어서 블로그 스킨을 변경했습니다. 이번 블로그 스킨 개편의 가장 큰 목적은 로딩 속도 개선입니다.

블로그 로딩 속도가 개선되었습니다

불필요한 기능을 제거하고 각종 웹 페이지 최적화 기법을 도입해서 블로그 페이지가 더 빨리 열리도록 수정했습니다.

만화, 애니메이션 등 일본의 취미 상품, 해외직구로 구입하는 방법 글 기준 Google Page Insight 점수가 모바일 37점 / 데스크톱은 86점이었는데, 이번에 개편된 테마는 모바일 63점 / 데스크톱 95점으로 점수가 올랐습니다. 즉 블로그가 더 빨리 열릴 수 있게 되었다는 의미입니다.

데스크톱 기준 성능 보고서를 봤을 때 First Contentful Paint가 1.8초 걸렸습니다. 즉 제 블로그에서 뭔가 화면이라도 뜨려면 평균 1.8초를 기다려야 했다는 의미입니다.

모바일 기준으로 봤을 때, 웹 페이지 성능 지표가 향상되었습니다.

스킨 개편 전 블로그 로딩 성능

스킨 개편 후 블로그 로딩 성능

First Contentful Paint를 2.2초에서 1.5초로 줄여서, 화면에 블로그가 뜨는 시간을 줄였습니다. 그리고 Largest Contentful Paint도 3.6초에서 2.6초로 줄였습니다. 이는 화면에서 가장 많은 비중을 차지하는 컨텐츠 로딩 시간이 단축되었다는 의미입니다. 나머지 성능 지표도 블로그 로딩 속도가 빨라졌음을 나타냅니다.

구체적으로 최적화한 것 몇 가지만 소개드리면,

주요 CSS(bootstrap4)는 테마에 인라인으로 포함을 시켜서, blocking하는 요소를 없앴습니다. (즉 페이지 로딩은 되었는데 화면이 안 뜨는 증상은 없습니다)
javascript 같이 우선순위가 낮은 파일은 html 밑에다가 두어 가장 늦게 다운로드되도록 했습니다
async로 로딩 가능한 js/css는 async로 로딩하도록 했습니다. (Bootstrap js, font awesome 등)
외부 js/css는 최대한 같은 CDN(jsdelivr)으로 통일해서 불필요한 connection이 발생하지 않도록 했습니다
preconnect 기능을 이용해 중요한 외부 출처에 미리 연결해서 로딩 속도를 줄였습니다. (blogger.com 출처 등)
불필요한 기능을 없애서 Javascript 용량을 줄였습니다.

구글 애드센스만 빼면 속도가 상당히 빠릅니다. 웹 페이지 속도 때문에 광고를 없앨 수는 없고.. 일단은 광고는 async로 로딩을 해서, 광고보다는 블로그 컨텐츠가 먼저 뜨도록 했습니다.

디자인 변경

변경된 스킨은 bloggerpack에서 제공하는 기본 스킨과 유사한 형태입니다. 여기에 링크 리스트, 블로그 보관함 등 추가 기능을 구현해서 스킨을 업데이트했습니다.

링크 리스트

링크 리스트 위치는 PC 기준 하단에서 우측 사이드바로 변경했습니다. 모바일(스마트폰) 환경에서는 기존과 동일하게 페이지 하단에 있습니다.

위와 같은 링크 리스트는,

이렇게 디자인을 변경했습니다.

링크 리스트의 내용은 블로그 스킨 변경 전과 동일합니다.

블로그 보관함

블로그 과거 글을 볼 수 있는 블로그 보관함이 위와 같이 있긴 있었습니다. 하지만 눈에 잘 안 띄어서 아무도 안 사용했던 것 같습니다.

위와 같이 디자인을 리스트 형태로 변경해서 눈에 더 잘 띄도록 했습니다. 디자인이 100% 맘에 드는 것은 아니라서, 블로그 보관함 디자인은 다시 한번 바꿔야 할 것 같습니다.

글 목록

블로그 글 목록 디자인도 변경했습니다.

위와 같은 디자인이었는데,

디자인을 변경했습니다.

블로그에 있는 광고 개수를 조절했습니다. 수동으로 넣는 광고는 일반 광고 2개, 일치하는 컨텐츠 1개, 링크 광고 1개였습니다. 댓글 다는 곳 근처에 일반 광고/일치하는 컨텐츠 광고 두 개가 있었는데요, 여기 있던 일반 광고를 하나 제거했습니다. 애드센스 자동 광고가 잘 동작하는 것 같아서, 수동으로 넣는 광고 수는 점점 줄여가려고 합니다.

광고 차단 소프트웨어를 사용하는 방문자도 꽤 있는 것으로 확인은 되는데요, 광고를 차단했다고 해서 블로그 열람을 막지는 않을 예정입니다. 다만 애드센스의 일치하는 컨텐츠 광고를 보시면, 관련된 다른 글들도 추천해 주고 있습니다. 가능하시면 광고 차단은 해제해 주시면 감사하겠습니다.

변경 전/후 비교

블로그 스킨 개편전 메인 페이지 모습

블로그 개편 전 포스팅 모습

블로그 제목 부분도 덜 뚱뚱하게 수정해서, 첫 화면에 더 많은 컨텐츠가 보이도록 수정했습니다. 이제는 스크롤을 덜 해도 블로그 글을 읽으실 수 있습니다.

기타

이번이 드디어 세 번째 블로그 스킨 개편입니다.

처음에는 Blogger에서 제공하는 기본 스킨을 사용했었는데요, 디자인이 예쁘지 않은 문제가 있었습니다. 표를 넣으면 아무런 디자인도 적용되지 않았습니다. 그리고 사이드바가 블로그 포스트에는 안 뜨고 메인 페이지에만 뜨는 것도 마음에 들지 않았었습니다. (구글 blogger 기본 디자인은 안 예쁜 것으로 유명합니다)

그래서 두 번째로, 2020년 12월 24일까지 사용했던 스킨으로 바꿨었습니다. (언제 바꿨는지는 기억이 안 나네요) 표 디자인도 괜찮게 나오고, 블로그 포스트에도 사이드바가 나오게 되었습니다. 하지만 블로그 로딩 속도가 느리다는 문제점이 있었습니다. 그리고 이것저것 수정하다보니 미묘하게 디자인이 깨지는 문제도 있었습니다.

이번 개편을 통해 블로그 로딩 속도도 향상시키고, 디자인이 깨지던 문제도 해결했습니다. 이제는 bloggerpack을 통해 블로그 스킨을 만들기 때문에, 블로그 스킨을 바꾸는 일도 쉬워졌습니다.

스킨도 바꿨으니, 이젠 더 다양하고 알찬 컨텐츠로 찾아뵙겠습니다.

기타 수정사항

블로그 스킨에 문제가 있으면 댓글로 말씀 부탁드립니다.

(2020/12/31) meta name viewport 태그에 viewport-minimum 값을 1로 지정해서, 화면 바깥으로 빠져나간 요소가 있더라도 화면이 과도하게 축소되어 보이는 문제를 수정했습니다. ("컨텐츠 폭이 화면 폭보다 넓음" 문제)

(2020/12/31) 댓글에 URL 등이 있어서 댓글 칸을 벗어난 경우 스크롤할 때 좌우로 움직이는 문제를 해결했습니다. comment-text class에 "overflow: scroll"을 지정했습니다. ("컨텐츠 폭이 화면 폭보다 넓음" 문제)

(2020/12/31) 모바일 기준 하단, PC 기준 우측 사이드바에 있는 링크 리스트 디자인을 수정했습니다. 각 링크 간의 간격을 띄웠습니다. ("클릭할 수 있는 요소가 너무 가까움" 문제)

(2021/01/05) 최신 글, 최신 댓글 리스트를 추가했습니다.

(2021/01/07) 메인 페이지 및 글 리스트 로딩 속도 개선을 위해, 태그 목록을 출력하지 않도록 수정했습니다.

(2021/01/10) 불필요한 css를 제거하여 페이지 용량을 40kb 절감(GZIP 압축 전 기준)했고, 인기글 표시 개수를 5개로 줄여서 페이지 로딩 속도를 개선했습니다. 또한 메인 페이지/글 리스트에서 글 이미지 미리보기 기능을 제거했습니다.

글 수정내용

2020년 12월 24일: 최초 작성
2020년 12월 31일: 블로그 테마 버그 수정 내용 추가 (기타 수정사항 단락)

[공지] 신규 블로그 스킨 변경했습니다

블로그 로딩 속도가 개선되었습니다

최신 글, 최신 댓글 기능 일시 삭제