블로그 점수확인 및 최적화 방법

블로그 점수확인 및 최적화 방법

오늘은 블로그 점수확인 및 최적화 방법에 대해서 소개를할까합니다.

먼저 블로그 또는 웹사이트의 점수확인을 왜 해야할까요? why?

그것을 설명하기 위해서는 먼저 'SEO'라는 기본적인 개념을 알아야하는데요

그렇다면 'SEO가 뭐죠?' Search Engine Optimization 의 약자로

검색엔진최적화입니다. 우리가 매일매일 정보를 얻기 위해 인터넷이란 것을 이용하죠?

인터넷에서 검색을 할때마다 이 SEO가 적용이되어 어떤글은 상단에 어떤글은 5페이지 이하로 밀리게됩니다.

내가 작성한 글이 페이지 첫번째 상단에 위치를 하게되면 더 많은사람들이 글을 읽을 수 있고 방문자수도 당연히 증가됩니다.

검색엔진최적화를 하기 위해서는? 먼저 내 블로그 또는 사이트의 점수를 확인할 필요가 있는데요

아래에 넘어가서 사진을 통해 설명해드리겠습니다.

본 포스팅에서는 블로그 및 사이트점수를 확인할 수 있는 사이트 두 곳을 소개를 할껀데요. 첫번째 소개해 드릴 '점수확인 및 최적화 확인사이트'는 'GTmetrix'라는 사이트입니다.

정말 많은분들이 이용하고 계신 사이트기도합니다. 주소는? https://gtmetrix.com

위 사진에서 Analyze라는 파란 버튼 왼쪽의 빈공란에 자신이 운영하는 블로그 혹은 사이트주소를 적은 후 'Analyze'를 클릭해주면 분석을하기 시작합니다.

GTmetrix 에 블로그 주소를 입력 후 'Analyze' 실행하여 현재 분석중 인 사진입니다.

위 사진처럼 나오면 분석이 끝날때까지 기다려주세요.

제가 운영하는 블로그 사이트의 점수가 나왔습니다.

페이지 속도 PageSpeed Score가 A(91%)등급, YSlow Score가 C(70%)등급, Page Details 페이지 읽는시간 (Page Load Time)이 4.5s초 , 페이지 용량Total Page Size가 715KB, 요청사항 Requests가 63개

그리고 스코어카드 위에 있는 Test Server Region 그러니까 테스트서버 지역이 캐나다 Vancouver , Using 그러니까 이용한 운영체제가 애플의 Firefox(Destkop)을 사용했네요.

잠깐 이거 신뢰할 수 있는 정보인가요?

예.. (어느정도는요?)

위 사진은 구글애널리틱스로 제가 운영하는 사이트에 방문하는 사용자들이 가장 많이 사용하는 (브라우저/운영체제)의 우선순위입니다.

1위가 구글의 Chrome 전체세션 그러니까 비중 중 56.20를 차지한 것을 알 수 있습니다.

2순위인 인터넷 익스플로러 Internet Explorer가 17.35%를 차지한 것을 알 수 있습니다.

2순위까지만 보여드렸는데요.

위에 GTmETRIX가 완벽히 신뢰를 할 수 없는 이유가 이 부분이기도 합니다.

현재 테스트의 내용을 보면 우리나라에서 한 분석이 아니라 그러니까 지역도 우리나라에 회선망을 이용한 접근이 아니라 캐나다에서 접근을 한 것이고

운영체제의 순위도 또한 국내 맞췄더라면 순위도 1위부터 5위까지 (크롬, 인터넷 익스플로러, 사파리, 안드로이드 브라우저, 에지) 등을 이용해서 분석을 했어야 하는점.

그러니까 우선순위도가 정해지지 않은 점, 범용성에서도 국내 대상이 아니라는 점. 해외유저들을 위한 것이니 당연한 것이라 생각이 됩니다만 정말 훌륭한 분석도구는 맞지만, 국내의 사이트 , 블로그를 분석하는데는 좀 아쉬움이 남습니다.

그래도 완전꽝이 아니라 맞는것도 꽤 많습니다. 이점들을 아래에 살펴보겠습니다.

회원가입 후 추가기능을 이용할 수 있는데요. 위 사진은 테스트할 서버(국가)를 지정할 수 있습니다.

한국은 없네요.. 여기에 해당하는 나라의 사이트를 운영 중 이시라면 더 도움이 될것 같습니다.  

한국 사이트도 추가를 해주세요~

운영체제/브라우저 도 선택을 하실 수가 있는데요. Firefox(Desktop), Chrome(Desktop), Chrome(Android,Galaxy Nexus)

하나를 제외하고는 전부다 데스크탑인데요. 요즘은 모바일 시대아닌가요?

마지막 안드로이드, 갤럭시Nexus는 모바일인데 사용나라도 한정이 되고 분석을 해보니 오류가 나네요.

데스크탑 보다 모바일 분석을 할 수 있는 기능을 추가가 되었으면 좋겠습니다.

위와같은 기능도 있고요.

다시 스코어카드 아래 부분에 개선을 해야하는 부분으로 넘어오면

위와같이 우선순위도로 빨간색(위험), 노란색(보통), 초록색(정상)으로 구분하실 수 있고요 위험도가 높은 빨간색부터

위 사진처럼 해당 항목의 설명을 읽고서 하나하나 다 수정을 해주셔야합니다. 그런데 이 작업은 웹에대한 이해도가 있어야 하므로 처음 운영하시는 초보자분들은 수정작업이

굉장히 어렵습니다. 

위항목은 자바스크립트 파싱 지연으로

- 페이지를 렌더링하는 데 필요한 자바스크립트의 양을 최소화하고 불필요한 자바스크립트의 파싱을 반드시 실행해야 할때까지 연기하면 페이지의 초기 로드 시간을 줄일 수 있습니다.

라는건데요. What's this mean?을 클릭 후 - 나오는 설명에 아래에 Read more를 클릭하시면 해당 내용이 있는 페이지가 나옵니다. 그곳의 설명을 참고해주시면 될것 같습니다.

그냥 여기 스코어카드에서 어느정도는 해결을 하실 수 있는 항목은? 이미지 크기 최소화! 이 내용에 관한 포스팅은 다음에 다루도록 하겠습니다. 

본 포스팅에서는 '블로그 점수확인 및 최적화하는 방법'에 대한 소개만 하겠습니다.

39% reduction 아래에

나온 항목들이 이미지 크기를 줄일 수 있다는 것이고

자세한 설명은 What's the mean?를 클릭 후 리드모어를 클릭해주시면됩니다.

TYPE 유형으로 CSS/JS에 관한 문제점 사진입니다.해당 항목은 스타일 및 스크립트 순서 최적화 라는 뜻입니다.

해당 항목들이 너무 많죠? PageSpeed, YSlow 에서 위험요소로 나온 항목들만 조금씩 개선을 해주시면 이전보다 훨씬 더 좋은 환경에서

내 블로그 혹은 사이트를 최적화시킬 수 있습니다.

영문으로 되어서 읽기 어려우신분들을 위해서 해당 웹관련 용어들에 대한 설명을 정리해봤습니다.

Keep-Alive 사용

- 정의된 시간내에 access가 이루어진다면 계속 연결된 상태를 유지할 수 있어 연결을 끊고 다시 연결하는 것보다 시간을 줄일 수 있습니다.

브라우저 캐싱 활용

- 정적 리소스에 대한 HTTP 헤더에 만료일 또는 최대 수명을 설명하면 브라우저가 이전에 다운로드한 리소스를 네트워크를 통해서가 아닌 로컬 디스크로부터 로드합니다.

압축 사용

- gzip 또는 deflate로 리소스를 압축하면 네트워크를 통해 전송되는 용량을 줄일 수 있습니다.

이미지 최적화

- 제대로 이미지의 형식을 지정하고 압축하면 데이터 용량을 크게 절약 할 수 있습니다.

자바스크립트 피싱 지연

- 페이지를 렌더링하는 데 필요한 자바스크립트의 양을 최소화하고 불필요한 자바스크립트의 파싱을 반드시 실행해야 할 때까지 연기하면 페이지의 초기 로드시간을 줄일 수 있습니다.

CSS 프르라이트로 이미지 통합

- CSS 스프라이트를 사용하여 이미지를 가능한 한 적은 파일로 통합하면 다른 리소르를 다운로드할 때 왕복 회수 및 지연을 줄고, 요청 오버헤드가 줄여서 웹 페이지가 다운로드하는 전체 용량이 줄어듭니다.

HTML 축소

- 본문 삽입 자바스크립트를 포함한 HTML 코드 및 그 안에 포함된 CSS를 압축하면 데이터 용량을 크게 절약하고 다운로드, 파싱 및 실행 시간을 줄일 수 있습니다.

자바스크립트 축소

- 자바스크립트 코드를 압축하면 데이터 용량을 크게 절약할 수 있고 다운로드, 파싱 및 실행 시간을 줄일 수 있습니다.

본문에 작은 CSS삽입

- 작은 스타일시트를 기본 HTML 페이지에 삽입하면 다른 리소스를 다운로드할 때 RTT 및 지연이 대폭 줄어듭니다.

리다이렉션 최소화

- 한 URL에서 다른 URL로의 HTTP 리다이렉션을 간소화하면 추가적인 RTT및 사용자 대기 시간이 대폭 줄어듭니다.

CSS 축소

- CSS 코드를 압축하면 데이터 용량이 크게 절약되고 다운로드, 파싱 및 실행 시간이 줄어듭니다.

스타일 및 스크립트 순서 최적화

- 외부 스타일시트와 외부 및 본문 삽입 스크립트의 순서를 제대로 정렬하면 다운로드 병렬화를 개선하고 브라우저 렌더링 시간을 줄일 수 있습니다.

요청 크기 최소화

- 쿠키 및 요청 헤더를 최대한 작게 유지하면 HTTP 요청을 단일 패킷에 맞춰 넣을 수 있습니다.

이미지 크기 지정

- 모든 이미지의 너비와 높이를 지정하면 불필요한 리플로우와 리페인트의 필요성을 제거하여 신속하게 렌더링할 수 있습니다.

Vary : Accept-Encoding 헤더 지정

- 프록시 서버가 압축한 버전과 압축하지 않은 버전의 두 가지 리소스를 캐시하도록 지시합니다. 그러면 Content-Encoding 헤더의 존재를 제대로 감지하지 못하는 공용 프록시 관련 문제가 생기지 않게 됩니다.

문자 집합 지정

- 초반부에 HTML 문서에 대한 문자 집합을 지정하면 브라우저가 스크립트를 즉시 실행하도록 할 수 있습니다.

CSS @import 사용 안함

- 외부 스타일시트에서 'CSS @import'를 사용하면 웹 페이지를 로드하는 중에 추가적인 지연이 발생할 수 있습니다.

문서 헤드에 CSS삽입

- 본문 삽입 스타일 블록 및 <link> 요소를 문서 본문에서 문서 헤드로 이동하면 렌더링 성능이 개선됩니다.

본문에 작은 JavaScript 삽입

- 작은 자바스크립트 파일을 기본 HTML 페이지에 삽입하면 다른 리소스를 다운로드할 때 RTT 및 지연이 대폭 줄어듭니다.

비동기 리소스 선호

- 리소스를 비동기적으로 가져오면 리소스로 인해 페이지 로드가 차단되지 않도록 할 수 있습니다.

일괄된 URL에서 리소스 제공

- 고유 URL에서 리소스를 제공하고 중복된 다운로드 용량 및 추가 RTT를 제거하는 것이 중요합니다.

잘못된 요청 사용 안함

- '깨진 링크' 즉 404/410 유형 오류로 귀결되는 요청 내용을 삭제하면 불필요한 요청을 줄일 수 있습니다.

조정된 이미지 제공

- 이미지의 크기를 적절하게 조정하면 데이터 용량을 크게 절약할 수 있습니다.

정적 리소스에서 검색어 문자열 삭제

- 정적 리소스에 대해 HTTP헤더에 공개 캐싱이 가능하도록 설정하면 브라우저가 원래의 원격 서버로부터가 아니라 가까운 프록시 서버로부터 리소스를 다운로드할 수 있습니다.

캐시 유효성 검사기 지정

- 캐시 유효성 검사기 (Last- Modified 또는 ETag 헤더)를 지정함으로써 캐시된 리소스의 유효성을 효율적으로 확인할 수 있습니다. 

두번째로 소개해드릴 점수확인 및 최적화 확인사이트는? Google Developers 구글개발자 사이트입니다.  https://developers.google.com/speed/pagespeed/insights/

이것 역시 최적화분석확인 사이트로

사용하시는 방법은? 위 사진처럼 해당 URL주소 입력란에 자신이 운영하는 사이트 혹은 블로그 주소를 복사하여 붙여넣기 후 분석을 클릭해줍니다. 

그러면 위와같은 화면이 나옵니다. 

구글개발자 사이트의 이점은? 모바일 환경과 데스크탑 환경 두가지다 동시에 확인을 하실 수가 있습니다.

여기서 나오는 우선순위도 (빨간,노란,초록)색으로 해당 항목에 자세한 설명이 나와있으며 구글 크롬 브라우저를 이용하시면 자동번역 기능을 통해

해당 항목사이트에서 자세한 설명을 보실 수 있습니다.

데스크톱 환경의 사진이고요. 수령 고려 아래의 항목들을 클릭하여 문제점을 해결해주시면 됩니다.

이렇게 해당 문제점에 대한 설명에 도움을 얻고자 하면 자세히보기 내용을 클릭해주시면 위와같은 상세설명이 있는 페이지로 이동이됩니다.

구글 크롬브라우저를 이용해주세요.

중요도가 높은 빨간색 항목을 가장 먼저 해결을 해주셔야하고,

노란색은 보통 중요도이므로 해결 방법 보기에서 설명을 보시고 해결을 해주시는 것이 좋습니다.