애드센스 실전 수익화 - 페이지 속도 개선방법 따라하기

애드센스 실전 수익화 - 페이지 속도 개선방법 따라하기

출처 - 한국 애드센스 공식 유튜브 채널

퍼블리셔 온라인 세미나

실전! 페이지 스피드 개선

페이지 속도가 비즈니스에 미치는 영향

Google 2% 느려지면 = 2% 적은 검색량 / 사용자

YAHOO 400ms 빨라지면 = 9% 더 많은 트래픽

AoI. 빠른 페이지 속도 = 더 많은 페이지뷰

amazon.com 100ms 빨라지면 = 1% 더 많은 매출

shopzilla 5s 빨라지면 = 25% 더 많은 페이지뷰, 7~12% 더 많은 매출

Fathead 37% 빨라지면 = 유저당 모바일 매출 70% 증가

GQ 80% 빨라지면 = 광고 참여율 108% 증가

▼▼▼▼▼▼▼▼▼▼▼▼▼

페이지 속도는 구글 자연검색 결과의 순위에 영향을 미치는 중요 요소이다. (블로그  포스트)

페이지 속도 개선을 위한 성공으로 가기 위해선 여러 단계를 거쳐야 한다.

고통스러울 정도로 느림 (유저이탈)

참을만함 (사용자 인내)

부드러움 (사용자 만족)

부드러움 (투자대비 효율?)

가장 바람직한 지점은 어디일까?

너무 느르지 않고 충분히 빨라야 한다.

너무느림 > 부드러움(사용자 만족) > 투자대비효율 감소

그렇다면 어느 정도가 적정한 로드시간 일까?

1~2초 : 아주 좋아요!

3~6초 : 평균입니다. 하지만 아직 개선의 여지가 많네요.

7~10초 : 오...바로 속도개선 작업에 들어가셔야 겠어요.

10초이상 : 흠.이정도면 사용자들이 모두 이탈할 것 같군요.

- Jeremy Smith , 전환 최적화 전문가

그렇다면 어떻게 내 사이트의 적정한 로드시간을 개선 할 수 있을까?

당신의 웹사이트 퍼포먼스를 체계적으로 모니터링하고 최적화 하세요!

	[mWeb 페이지1]	[mWeb 페이지2]	[mWeb 페이지3]
페이지스피드 인사이트  (목표: >85)	[점수]	[점수]	[점수]
스피드 인덱스 (목표 : < 1000 )	[점수]	[점수]	[점수]
시각적으로 완료 (목표 : < 1초 )	[시간]	[시간]	[시간]
완전히 로드 (목표 : <7초 )	[시간]	[시간]	[시간]

다음의 도구들을 이용해 위 숫자를 얻으세요. 크롬 개발자 도구, WebPageTest, PageSpeed Insights

페이지스피드 인사이트 도구 점수와 웹페이지 테스트 도구로 분석한 스피드인덱스 점수등 4가지 지표를 주기적으로 평가하는 습관을 길러보자. 

그럼 이 4가지 지표를 얻을 수 있는 구체적인 방법들을 살펴보자.

1단계

PageSpeedTools 

https://developers.google.com/speed/pagespeed/insights/?hl=ko

구글 검색창에 '페이지속도' 검색시 한글버전 으로 나온다.

테스트할 페이지 URL 을 입력하고 분석 버튼을 누른다.

기기별 페이지 속도 점수와 페이지 속도 관련 분석리포트가 나온다.

페이지 통계 중에서 각각의 해결 방법 보기 를 클릭 하면 해결이 필요한 요소의 상세정보가 확장 표시 된다.

위의 파란색 글자를 클릭시 예시 리소스에 대한 해결방안 페이지로 이동한다. 

링크안의 내용은 개발자 대상의 문서이니 반드시 개발자분이 페이지스피드의 제한내용을 바탕으로 웹사이트 개편작업을 할 수 있도록 도와 주어야 한다.

각 요소별 참고 포인트를 살펴보기전에 가장 중요한 페이지 속도 개선 키포인트는 다음과 같다.

키포인트

퍼스트 뷰(Above-the-Fold(ATF))가 로드 및 렌더링 될 때가지 1초!!

사용자가 스크롤 하기 전까지 폴드 아래에 있는 이미지를  로드 하지 않는 레이지 로딩 을 적극 활용한다.

 : 사용자가 스크롤을 움직일 때 로드하기

Inline CSS : CSS를 위, 아래 둘로 분리하여 퍼스트뷰 폴드 에서는 inline CSS 사용하기

3rd party 위젯 : 소셜 공유하기 등 3rd party 위젯은 메인 콘텐츠 다음에 로드하여 퍼스트뷰가 로드 및 랜더링 될 때까지 1초 이하의 시간이 걸리도록 하면 초기 유저 이탈을 막을 수 있다.

팁! : 페이지스피드 도구의 검사결과에 제한된 각 내용에 대해 알아보도록 하자.

1. HTTP 요청수 줄이기

* 모바일 사이트를 여는데 필요한 HTTP 요청수 목표를 40 이하로 설정하세요.

* 동일한 타입의 파일을 병합하고, 중복된 요청과 인라인 소형 JS를 제거하세요.

* 인라인 소형 CSS파일 : HTML의 헤드 부분에 두세요.

* 아이콘과 같은 작은 이미지를 위해 여러번 요청을 보내는 대신 스프라이트 이미지 를 사용하세요.

2. 렌더링 차단 자바스크립트 및 CSS 삭제

* 스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 되는 데이터 (HTML 마크업, 이미지, CSS, 자바스크립트) 사이즈를 제한 하세요.

* 초기 렌더링에 큰 영향이 없는 스크립트는 비동기식 혹은 첫번째 렌더링 이후 까지 지연되도록 구현되어야 합니다.

3. 모든 리소스 파일을 최소화 및 압축

* 프로세싱 과 상황에 맞는 최적화를 통해 리소스 (HTML/CSS/JS)를 최소화 하세요.

* 파일 크기를 줄이기 위해 귀하의 서버에 GZIP 을 활성화 하세요! GZIP 을 텍스트 파일에 적용할 경우 70~90% 정도의 압축을 기대할 수 있습니다.

4. 브라우저 캐싱 사용

* 리소스 파일들이 브라우저 캐싱을 적절하게 활용하는지 확인해 보세요.

캐시 라이프타임에 따른 제안

일반적인 리소스 파일 (이미지/JS/CSS) : 최소 1주에서 최대1년.

빠르게 변경되는 리소스 : 0 ~ 10분 사이

캐시할 리소스

* 스타일 시트

* JS 파일

* 웹폰트

* 통계리소스, 예) 로고,이미지,뉴스사진 등

캐시하지 말아야할 리소스

* 동적 정보

* 사용자 정보

* 바르게 변경되는 데이터, 예) 기온

5. 서버 응답시간 단축

* 귀하의 웹서버가 최적화 되어 있는지 점검 해보고 웹 관리자와 작업해 보시요.

체크 리스트

○ 애플리케이션 로직

○ 프레임워크 및 라이브러리 업데이트

○ 데이터베이스 요청

○ 라우팅 및 로드 밸런싱

○ CPU 및 메모리 활용

* 지속적인 서버 퍼포먼스 모니터링

* HTTP/2 활용 : 각 원본에 대해 하나의 연결을 지속시켜 어버헤드를 줄이고 페이지로드 성능을 향상 시킨다.

* 콘텐츠 전송 네트워크 를 사용하여 왕복을 줄입니다.

이 다섯가지 페이지 속도 개선 팁은 페이지스피드 도구 리포트에 따라 상세히 활용하길 권장한다.

HTML / JS / CSS 를 최소화 해주는 도구

● HTML 를 최소화하기 위해서는, HTMLMinifier 를 사용해 보세요.

● CSS를 최소화하기 위해서는 , CSSNano 와 csso 를 사용해 보세요.

● JavaScript 를  최소화 하기 위해서는 , UglifyJS 를 사용해 보세요. Closure Compiler 또한 매우 효과적입니다. 이 도구들을 활용하여 빌드프로세스를 만들어 개발 파일의 갯수를 최소화하고 이름을 변경해 생산디렉토리에 저장할 수 있습니다.

또한 위의 대안으로, PageSpeed Modle 은 Apache 또는 Nginx 웹서버와 통합되어 귀하의 사이트를 자동으로 최적화 해줄 뿐 아니라 리소스 최소화 까지 도와 줍니다.

페이지스피트 리포트에서 리소스파일 최소화가 권장되는 경우 참고 하길 바란다.

추가 TIP!!

구글 검색창에 '모바일 웹사이트 속도 테스트 도구' 검색

https://testmysite.withgoogle.com/intl/ko-kr

2단계

무료검사도구 활용

WebPageTest.org

고급설정에 들어가서 모바일을 활성화 하고 스타트 테스트 버튼을 클릭한다.

스피트인덱스(속도지수) < 1000 , 완전히 로드시각 <7초

리퀘스트(요청) 은 최소한 40보다 적어야 하고, 적을수록 더 좋다.

Bytes 수가 750KB 이하를 권장한다.

그 이외에도

사이트 로드시 타임라인 차트

그래프로 사이트 로드 진행율 확인 0.5~1초 사이 렌더링 시작, 5초경 99% 로드 , 7.5초 경 100% 로드

그래프로 이벤트별 소요 시간 확인

그래프로 각 리소스별 요청수 확인

그래프로 각 요소별 Bytes 크기 확인

을 통해 웹사이트 속도에 문제가  되는 요소들을 손쉽게 파악 할 수 있다.

지금까지 페이지 스피드 도구와 웹페이지 테스트 도구를 통해 

페이지 속도 개선을 위한 정보를 파악하는 방법에 대해 알아 보았다.

페이지 속도는 온라인 비즈니스의 성패를 가르는 매우 중요한 요소이다.