기본 콘텐츠로 건너뛰기

[공지] 블로그 테마를 2월 중에 한번 더 변경합니다

icon
바람 · · 수정: · 댓글 없음

작년 12월에 있었던 스킨 개편에 이어서, 2월 중에 한번 더 스킨을 패치합니다. 화면 폭을 넓히고, 디자인을 조금 바꾸고, 기능을 조금 추가합니다.

현재 블로그 테마로 사용중인 bootstrap이 올해 2월 중 4.5에서 5.0으로 업그레이드된다고 합니다. 지금 beta1 버전 기준으로 블로그 테마 변환은 완료했는데, bootstrap 버전을 올리는 겸 몇 가지 변경사항을 적용하려고 합니다.



디자인을 조금 변경합니다


최근 모니터의 크기가 점점 커지고 있는 추세를 감안하여, 가로 해상도가 1400px 이상인 고해상도 화면에선 본문 크기가 더 넓게 보이도록 수정합니다.

줄 간격을 비롯하여 미세한 디자인 변경이 있을 수 있습니다. 자잘한 수정 이외 큰 규모의 디자인 변경은 없습니다.



블로그 기능을 추가합니다


사이드바에 태그 리스트를 추가합니다. 태그 기반으로 원하시는 글을 편하게 찾으실 수 있습니다.


글 본문 하단에 관련 최신글 기능을 추가합니다. 해당 포스트와 label이 같은 최신 글을 보여주는 기능입니다. 예를 들면 일본 철도 뉴스 포스트에서는 최신 일본 철도 뉴스를 보여줍니다. 애니메이션 정보면 최신 애니메이션 정보 글이 노출됩니다.


위와 같이 게시글 하단에 관련된 최신 글을 더 보여주게 됩니다. 디자인은 아직 확정된 것은 아니며, 개발 상황에 따라 바뀔 수 있습니다.



페이지 로딩 속도를 더 높입니다


이미 지난번 블로그 스킨 개편으로 블로그 속도가 빨라졌습니다.

구글 크롬의 사용자 경험 보고서 지표를 확인해 보니, 전체적인 블로그 로딩 속도가 올라갔습니다.

블로그 SKIN 개편 이전 블로그의 로딩 속도 지표


블로그 SKIN 개편 이후 블로그 로딩 속도 지표

최근 28일 기준으로, 블로그 SKIN 개편 이후 First Contentful Paint(화면에 뭔가가 나타나는 시간)이 1.9초에서 1.7초로 0.2초 줄었습니다. 그리고 Largest Contentful Paint(화면에 블로그 컨텐츠가 나왔다고 볼 수 있는 시간)도 2초에서 1.9초로 0.1초 줄었습니다.


이 기세를 이어 전체적인 페이지 로딩 속도를 더 높입니다. 블로그 로딩 속도 향상을 위한 몇몇 수정이 적용됩니다. Bootstrap 5로 업그레이드 하는 것도 블로그 로딩 속도 향상 때문입니다.

또한, Blogger 기본 js/css를 전부 제거해서 로딩 속도를 올렸습니다. 해외 포럼 위주로 구글 Blogger의 기본 js/css가 블로그 로딩 속도를 느리게 만든다는 불만이 많습니다. Blogger에서 기본 제공하는 위젯은 기능도 많고 편리하지만, 파일도 크고 로딩 속도가 느립니다.

현재 이 블로그에서 Blogger widget JS에 의존하는 것은 최신 글, 최신 댓글 로딩 뿐입니다. 이 부분을 직접 코드를 구현하는 방식으로 변경하면서, 최신 글, 최신 댓글이 뜨는 속도도 개선했습니다.

(2021년 2월 16일 추가) 이미지를 클릭했을 때 무조건 새 창으로 뜨는 문제를 해결하기 위해 일단 blogger 기본 JavaScript는 로딩하도록 수정했습니다. 이 Script는 가장 마지막에 로딩되므로 체감하시는 속도는 비슷할 것으로 보입니다.


블로그 글을 어떻게 하면 더 빨리 로딩해서, 더 빨리 보여드릴 수 있을지 계속 고민하고 있습니다.


페이지 하단 광고를 재검토합니다


지금은 글 하단에 구글 애드센스의 일치하는 콘텐츠 광고를 넣고 있습니다. 그런데 이 "일치하는 콘텐츠" 광고가 페이지 로딩 속도를 많이 떨어뜨리는 것 같습니다. 제가 잘 활용하지 못해서 그런지 몰라도, 이 광고의 실적 또한 좋지 않습니다. 심지어 광고가 아닌, 추천하는 글을 클릭하는 경우도 매우 적습니다.

앞서 말씀드린 것처럼 이번 블로그 스킨 개편에 "관련 최신글 기능"이 추가됩니다. 고민중이긴 하지만 "관련 최신글 기능"으로도 관련된 글을 잘 보여드릴 수 있다면, 일치하는 콘텐츠 광고 대신 일반 광고로 대체하려고 합니다.



IE 구버전 지원을 종료합니다


이번에 새로 도입한 Bootstrap 5는 Internet Explorer를 지원하지 않습니다. 하지만 국내에 IE 사용자가 많은 점을 고려하여, 당분간은 Internet Explorer 11은 polyfill을 이용한 방법으로 간접 지원합니다. 간접적인 지원이므로 스킨 개편 이후 속도가 느릴 수 있습니다.

이미 YouTube는 Internet Explorer를 지원하지 않습니다. 가까운 미래엔 구글 같은 주요 사이트들을 보지 못할 수도 있습니다. 구글 크롬이나 MS 엣지, 파이어폭스, 네이버 웨일최신 브라우저로 업그레이드 바랍니다.


2020년 기준 IE10 이하 버전 방문자는, 전체 방문자의 0.78%에 불과했으며 점점 비중이 줄고 있습니다. 따라서 Internet Explorer 10 이하 버전은 지원하지 않습니다. 글 자체를 보실 수 있을 정도로는 수정해 놓았습니다. 디자인이 조금 깨지고, 상단 navbar 버튼이 클릭되지 않는 것을 확인했습니다.

부득의한 사정으로 윈도 XP나 윈도 7을 사용하고 계신 분들도 계실텐데요, 적어도 브라우저라도 최신 브라우저로 업그레이드 하시는 것을 권장합니다. Internet Explorer보다 구버전 크롬이 그나마 낫습니다.


지원하지 않는 브라우저라고 해서 블로그 열람을 막는 것은 아닙니다. IE10까지는 디자인만 조금 깨질 뿐 글은 정상적으로 보실 수 있습니다.


label

댓글 0

댓글 쓰기

취소

댓글 작성이 안 되실 경우 아래 링크를 이용해 주십시오.

댓글 달기