야수의 세상여행
블로그 활동을 하면서 사이트 로딩속도 향상은 블로거에게 평생 가져가야 할 숙제와 같다고 지난 포스팅에서 계속 강조했습니다.
티스토리 속도 개선을 위해 기본 세팅은 이전에 다루었으니 오늘은 더 나아가 소스코드를 수정하면서 여러분이 하지 말아야 할 것들에 대해서 알려드리겠습니다. 부디 여러분은 저처럼 시간 낭비 하지 마세요 ^^;;
<목 차>
1. 검색엔진 (네이버, 야후 등) robots.txt 설정하지 말기
2. 오프스크린 지연 이미지 (레이지로딩) 기법 하지 말기
3. 프리로딩, 디퍼 방식 적용하려고 애쓰지 말기
1. 검색엔진 (네이버, 야후 등) robots.txt 설정하지 말기
일반적인 사용자가 추가하는 대표적인 소스코드들 보면 구글 애널리틱스와 태그 매니저 그리고 티스토리 플러그인과 개별적으로 설치한 목차 플러그인 등이 있습니다.
사용자가 직접 추가하는 리소스들은 잘 알고 사용한다면 약이 될 수 있지만 단순히 좋을거 같아서 또는 남들이 좋다고 하니 사용한다면 자칫 독이 될 수 도 있습니다. (소스코드만 지저분해지는...ㅠㅠ)
티스토리 스킨에 무언가를 추가할 때는 꼭 나에게 필요한 것인지, 악영향은 없는지 잘 살펴보고 결정해야 합니다.
티스토리에서 제공하는 플러그인도 예외는 아닙니다.
많은 고민 끝에 오디세이 스킨 (배포용 무료 티스토리 공식 스킨) 을 사용하고 있고,
소스코드를 파보면 파볼수록,
일반 문돌이 사용자가 수정할만한 것은 거의 없다고 보시면 됩니다.
그래서 가급적이면 있는 그대로 사용하는 것을 권장한다. SEO에 도움이 된다고 공유되는 것 중 실제 도움이 되는 것은 거의 없고 도움 될만한 것들은 제 블로그에서 거의 다 다루고 있습니다.
개인적인 사견으로는 아래 코드 좀 넣지 말았으면 좋겠습니다.
네이버 검색봇으로부터 크롤링이 되어 검색결과에 상위 노출이 되기위해 어디서 굴러온 글인지 아래 코드를 넣는 분들이 참 많은 것을 발견합니다.
<meta name="NaverBot" content="All"/?>
<meta name="NaverBot" content="index,follow"/>
<meta name="Yeti" content="All"/>
<meta name="Yeti" content="index,follow">
티스토리는 robots.txt 적용에 대해 참 오해가 많고 잘못된 정보가 많이 퍼져있습니다.
확실하지 않으면 승부를 걸지 말라 라는 말을 들어본적이 있으시죠?
구글 노출을 위해 제대로된 robots.txt 적용 방법을 알고 싶으면 저의 다른 포스팅을 참고하면 좋을거 같습니다.
2. 오프스크린 이미지 지연 효과 있나?
웹사이트 기획자, 개발자, 그리고 블로거들은 한 번쯤은 구글 페이지 스피드 인사이트에 대해서 들어 보셨을 겁니다.
구글 페이지스피드 인사이트는 구글에서 제공하는 웹사이트 최적화 검사 툴인데, WWW 환경에서 바람직한 웹사이트를 만들기 위해 그리고 구글이 좋아하는 웹사이트를 만들기 위해 사이트를 진단하고 가이드를 제시해 줍니다.
그중에 많이들 나오는 것이 오프스크린 이미지 지연하기입니다. ▼
'오프스크린 이미지 지연하기'는 개발자들 사이에서는 '레이지 로딩'이라고도 불립니다.
쉽게 말해 로딩 시간이 걸리는 이미지들은 블로그를 접속할 때 바로 호출하여 이미지를 불러오는 것이 아니라,
스크롤을 내릴 때마다 그때그때 이미지를 불러오는 방식이라고 생각하시면 됩니다.
티스토리의 경우 인프라가 요즘의 검색 추세에 맞지 않게 많이 낙후되어 있습니다.
전반적인 인프라 개선이 되어야 하지만 전혀 안되고 있어서 티스토리 플랫폼 전체가 검색 결과에 페널티를 먹고 있습니다.
레이지로딩, 오프스크린 이미지 지연하기에 대한 글들이 많지는 않지만,
구글링을 해보면 이를 다루는 콘텐츠들을 종종 찾아볼 수 있습니다.
그런데 저는 오프스크린 이미지지연하기, 레이지로딩 기법을
티스토리 블로거가 적용하는 것에는 추천하지 않습니다.
그 이유는 적용이 어렵습니다. HTML, CSS에 더해서 Javascript 까지 수정을 해야 합니다.
그리고 본인의 무료 배포용 스킨이 제이쿼리 기반인지 바닐라 자바스크립트 기반인지도 알아야 됩니다.
비전공자인 블로거가 과연 할 수 있을까요?
네, 할 수 있습니다!
제가 많이들 떠돌고 있는 그 레이지로딩기법 티스토리에 적용해 보았습니다.
결과는?
...
처참합니다.
생각보다 공부하고 공들여서 소스코드를 수정한 것에 비해 성능 개선효과는 상당히 적었습니다. (1초 내외)
하물며 블로그 자체가 이미지가 많지 않고 스크롤을 많이 내리지 않아도 되는 블로그라면 더욱 필요가 없습니다.
깔끔히 오프스크린 이미지 지연시키기?
포기하세요^^;;
3. 프리로딩(preloading), 디퍼(defer) 방식 사용 효과 있나?
해외에서는 이미 유명한 내용이고, 알고 보면 별 내용 아닙니다.
우리가 어떤 웹페이지를 열 때, 특정 순서에 따라 여러 파일들을 불러들입니다.
밑의 그림은 제 블로그 첫 페이지를 열 때인데, 웹페이지 한 개만 열었는데도,
상당히 많은 파일을 서버로부터 받는 것이 보입니다.
웹페이지 한 개 열었는데도, 매우 많은 파일을 받아야 한다.
프리로딩(Preloading)은 말 그대로, 웹페이지를 열 때 초반에 필요한 파일은 먼저 불러들인다는 것입니다.
디퍼 (Defer)는 뒤로 미룬다는 뜻인데, 로딩 초반에 필요하지 않은 파일은 뒤로 미룬다는 것입니다.
웹브라우저에게 어떤 파일을 먼저 불러들일지, 어느 파일은 나중에 불러들일지 가르쳐주는 거죠.
폰트파일과 CSS파일은 먼저 불러들이는 게 좋습니다. 즉, preload를 사용합니다.
폰트파일이 늦게 로딩되면, 기본폰트로 나온 후, 폰트가 갑자기 변하는 모습을 볼 수 있어요.
CSS파일을 나중에 로딩하면, 아무 꾸밈없는 단순한 글자와 이미지만 나열되었다가, 깜빡하면서 꾸며둔 모양으로 변하는 모습이 보이죠.
script.js는 기능에 대한 내용이니, 화면이 다 나온 후에 로딩해도 되겠죠? defer로 미루면 됩니다.
그런데,
해당 프리로딩과 디퍼방식을 적용하려고 보니,
이미 스타일 css는 디퍼방식으로 소스코드가 적용되어 있더라고요.
(오디세이 스킨이 최신 스킨이라 적용이 되어 있다고 생각합니다만)
프리로딩 방식도 폰트에 적용하고 나서 블로그를 호출하는 속도나 순서를 봤을 때,
기존과 큰 차이는 없었습니다...
여러분은 하지 마세요. 효과 없습니다.
아래 제가 공유한 방법만 적용해도 티스토리 성능 개선 효과 충분합니다.
'┖ ⍟ IT 여행' 카테고리의 다른 글
| 한번에 구글 애드센스 승인 받는 Negative Check List 공유 (1) | 2023.05.19 |
|---|---|
| 티스토리 외부유입 늘리기 3편 - 트위터(twitter) 연동 불가! 정말? (1) | 2023.04.19 |
| 티스토리 외부유입 늘리기 2편 - Facebook 자동 연동하기 (0) | 2023.04.12 |
| 티스토리 외부유입 늘리기 1편 - 카카오뷰 활용 (1) | 2023.04.10 |
| 티스토리 로딩 속도 향상 및 개선 방법 4가지 (관리자 세팅 노하우) (3) | 2023.03.22 |
| 티스토리 속도 향상 프로젝트 (기초편: 아직도 몰라?) (0) | 2023.03.20 |
| 티스토리 수정 4: 상단 로고 및 타이틀 삽입하기 (0) | 2023.03.15 |
| 티스토리 하단(푸터) 문구, 카피라이트 수정하기 (0) | 2023.03.13 |
