인터넷 속도는 꾸준히 우상향하는 시대가 도래했습니다. 최근에는 5G도 mmwave는 3.5G 주파수를 쓰면서 예전보다는 좋아지고는 있죠. 하지만 여전히 모바일 스마트폰에서는 PC와는 다르게 실제 속도를 경험하지 못하고있습니다.
스마트폰에는 PC와는 달리 제한된 성능과 배터리, 발열의 문제등등으로 인터넷속도및 페이지 처리속도에도 제약이 있어
웹사이트에 조금이라도 로딩 속도가 느려진다면 곧바로 뒤로가기를 누르는 사람이 많습니다.
웹 환경은 이제 모바일 웹이나 기기를 위해 조금이라도 속도를 개선할 필요가 있는겁니다.
티스토리는 크게 HTML,CSS, 파일업로드속 스크립트(script)로 구성되어 있습니다.
이중에서 코드를 줄이거나 최대한 간결하면서도 기능을 구현해낸다면 좋겠지만 더이상 다이어트작업에 한계가 있다면
그자리에서 HTML과 CSS를 압축하는 방법을 고려해보는것도 좋은 방법입니다.
실제로 Google Inspactor이나 Site analysis의 권고 사항에는 Html,css,js의 압축을 명시하고 있습니다.
페이지 압축을 해보자.
htmlcompressor.com/compressor/ 에 들어가줍니다.
Hmlcompressor 사이트는 Html,css,php 등을 압축해주는 대표적인 사이트중의 하나입니다.
사이트의 기능 살펴보기
왼쪽 상단 : 소스/압축후 소스 / 에러 / 메시지 확인
중앙 하단: Compress : 압축하기
우측 탭 : Code type: HTML, CSS, js 등의 타입을 설정할수있다.
show option을 누르면 세세한 옵션조설이 가능하다.
티스토리는 주로 x/html과 CSS 를 주로 사용하니까 이 두가지만 사용하면 되겠습니다.
압축하기 전에 백업을 해두고 진행 해 주세요!!
혹시 모르는 오류가 생길수있으니 바로 복원할수있도록 스킨보관함에 현재 스킨을 보관 시켜주세요.
HTML 압축하기
압축하기전에 X/html 인지 확인합니다.
우측에 옵션을 눌렀을때 추천 사항으로는
Single Line html output : 압축할때 한줄로 변경한다는 의미. 즉 줄바꿈없이 압축을 한다는 이야기입니다.(추천)
Preserve all x/html comments : 주석을 제거하지 않고 같이 압축 (선택사항) *백업 필수
Never strip quotes : 따옴표 표시("")를 압축대상에서 제외 하기 (필수) *블로그 내 검색,댓글기능이 작동안될수있음
나머지 밑의 항목들은 CSS , js 등등이므로 무시하겠습니다.
이제 "Compress"를 눌러 압축해줍니다.
혹시나해서 그런데 Drag and Drop Charset 값을
Western (ISO-8859-1) -> Korean(EUC-KR) 등 Korean으로 바꿔야 되지 않나 싶기도 한데
서버와 여러 인코딩 관계에서 EUC-KR로 설정하다가 한글깨질수가 있다고 합니다.
결과는 ?
기존 대비 62%로 압축되었습니다.
Errors, Message 를 눌러 에러가 있는지 확인하시고
'Select All'을 눌러 복사하고 스킨 편집에 HTML 항목에다 붙여넣습니다.
네 별 이상이 없었으므로 CSS항목을 복사해서 다시 압축사이트로 돌아갑니다.
다시 Source 항목을 누르고
Ctrl +A로 전체항목을 선택해서 지우고 CSS 코드를 붙여넣습니다.
CSS는 특별히 건들일게 없으므로 압축하고 HTML처럼 진행해주시면 되겠습니다.
CSS 코드 압축 결과
기존대비 85% 수준입니다.
HTML 만큼은 아닙니다.
새로고침을 눌러도 오류없이 잘 나오고 있습니다.
압축 후기
https://www.thinkwithgoogle.com/intl/ko-kr/feature/testmysite/ 에서 속도 측정이 가능합니다.
해서 나쁠건 없는거같습니다. 시크릿 창으로 구동했을때도 조금더 빨라진거 같기도 합니다.
'블로그 > SEO 최적화' 카테고리의 다른 글
| 구글 서치콘솔 오류 ' 클릭할 수 있는 요소가 너무 가까움' 오류 해결 방법 (0) | 2021.01.21 |
|---|---|
| 2개 이상의 h1 태그 오류 - 빙(Bing) 웹마스터 도구 SEO 분석 오류 해결방법 (0) | 2021.01.20 |