공부하는 반백수

자유로운 삶을 위한 준비 ☆


IT·인터넷/티스토리 블로그

오디세이 스킨으로 변경했습니다 (feat. 로딩 속도와 메타태그)

자유로운 수짱 2020. 9. 9. 23:48

 

티스토리 스킨 odyssey

 

블로그 스킨을 오디세이로 변경했습니다! 새로 나왔기도 하고 사이드바가 있는 스킨을 사용하고 싶었거든요.

사용하던 왓에버 스킨에서 피씨만 사이드바를 만들어서 사용하려고 했는데 애드센스가 빨리 로딩되지 않는 거 같아서 그냥 스킨을 바꿔보았습니다. 

 

북클럽이랑 왓에버를 사용해봤는데 오디세이로 설정하니까 체감상 광고 로딩이 빠른 기분이네요.

 

 

가로가 좁은 스킨이라 갑갑해서 CSS를 여기저기 손보았습니다. (아직 수정하고 싶은 곳이 꽤 있기는 하지만)

총가로를 40px정도 늘리고 글 내용 컨텐츠를 88px 정도 늘리고 우측 사이드바는 50px 정도 줄였습니다.

그래도 좁은 감이 있지만 요 정도로 만족하기로 했습니다. 사실 처음엔 가로 사이즈를 1200px 정도로 늘리려고 했는데 반응형이다 보니 미디어 쿼리 확인하는 게 너무 시간이 많이 걸리겠더라고요. 그 정도면 차라리 스킨을 새로 만드는 게 낫지 않나 싶어서 그대로 패스했습니다 :)

 

 

스킨을 변경하기 전에 꼭 백업해놓아야 하는 부분이 있지요.

1. 포털에 검색 등록하실 때 head 태그 내에 적용했던 메타태그는 반드시 메모장에 복사해두셔야 합니다.

2. 구글 광고 수집 스크립트도 반드시 메모장에 복사해두셔야 합니다.

새 스킨을 설정한 후, html 편집 창에서 head 태그에 다시 넣어주셔야 합니다 자동으로 연동되는 부분이 아니거든요 :)

 

 

로딩 속도에 관해서도 말인데요.

developers.google.com/speed/pagespeed/insights/

 

PageSpeed Insights

모든 기기에서 웹페이지 속도를 개선해 보세요.

developers.google.com

구글 페이지스피드를 이용해서 측정하는 것은 실제 사이트 속도를 측정하는 것이 아니라는 점 꼭 확인해주세요.

사이트의 코드가 효율적으로 구성되었는지에 대한 검사랍니다. 확인하여 전체적인 코드 구조를 수정하면 속도 개선에 도움은 되겠지만 티스토리에서 개인이 얼마나 개선할 수 있을지는 의문이네요.

 

사용하지 않는 플러그인을 제거하거나 업로드 하시는 이미지 크기를 가볍게 최적화해서 글을 작성하는 습관이 중요하지 않나 싶습니다.

 

 

 

 

아, 그리고 인프런에서 티스토리 스킨 만들기 관련 강의를 발견했는데 공유해드립니다.

무료 강의니까 저도 한 번 시청해보려고요 :D

 

www.inflearn.com/course/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC

 

나만의 포트폴리오 블로그 만들기(feat. 티스토리 스킨) - 인프런

티스토리 스킨 개발방법을 익히고 필자가 만든 티스토리 스킨 개발 전용 프레임워크인 티도리에서 제공하는 빌드, 배포 자동화, 코드 분할과 같은 내용을 배웁니다. 초급 웹 개발 웹앱 디자인 ��

www.inflearn.com