워드프레스 모바일 최적화 AMP PWA 광고설정 속도향상

노랗 2021. 6. 11.

워드프레스 모바일 최적화 AMP PWA 광고설정 속도향상

점점 홈페이지가 모바일로 접속하는 양이 증가하면서 모바일 최적화 홈페이지가 각광받고 있으며 이에 대해서 구글 측에서도 모바일 페이지에서 빠른 AMP (Accelerated Mobile Page) 페이지가 인터넷 검색엔진에서도 상위에 검색되는 이점이 있다고 언급한 바 있습니다.

점점 모바일로 접속하는 비도가 높아지는 추세이기 때문에 만약 자신의 홈페이지가 Google Page Search Speed가 느리다면 AMP 플러그인을 이용해 최적화를 해보는 것을 추천합니다.

블루호스트가 추천하는 워드프레스 최적화 방법 개선방법 - 노랗IT월드

저렴한 블루호스트를 처음 접하게 되면 너무 느린 속도로 답답함을 느꼇습니다. 그래서 유료 최적화 플러그인과 amp 등을 사용했지만 그래도 너무 느리고 답답했는데 블루호스트 추천하는 MySQL

yellowit.co.kr

저 같은 경우도 저렴한 블루 호스트 계정을 사용하면서 아바다 테마와 함께 사용하다 보니 모바일에서 매우 낮은 점수가 나오게 되는데요 AMP 플러그인을 적용 후 속도를 비교해 보도록 하겠습니다.

애드센스 광고 속도 최적화 방법 - 티스토리 워드프레스

애드센스 광고 속도 최적화 방법 - 티스토리 워드프레스 티스토리나 워드프레스의 장점은 바로 애드센스를 설정해 광고수익을 벌 수 있다는 것인데요 이러한 애드센스 광고는 홈페이지

jab-guyver.co.kr

워드프레스 속도 측정

구글에서 제공하는 홈페이지를 측정할 수 있는 PageSpeed Insights 사용합니다.

제 홈페이지의 모바일 속도는 22점으로 매우 느린 상태임을 볼 수 있습니다.

그리고 이러한 시험 데이터 결과에서 속도 색인과 상호작용 시간 등등 하나당 10초 이상의 지연이 되는 것을 볼 수 있습니다.

구글 AMP 추천사항

이에 대해서 구글 측에서는 서버 응답 시간(TTFB) 단축
사용하지 않는 CSS제거
차세대 형식을 사용해 이미지 제공하기
오프 스크린 이미지 지연하기
렌더링 차단 리소스 제거하기
효율적으로 이미지 인코딩하기

구글 진단

웹폰트가 로드되는 동안 텍스트 계속 표시되는지 확인하기
기본 스레드 작업 최소화하기
자바스크립트 실행 시간 단축
과도한 DOM 크기 지양하기
효율적인 캐시 정책을 사용하여 정적인 에셋 제공하기
중요 요청 깊이 최소화하기

이런 추천사항에서 최적화를 가볍게 해 줄 수 있는 다양한 플러그인이 존재합니다.

워드프레스 이미지 CSS 최적화 Gzip 압축 플러그인

워드프레스 이미지 CSS 최적화 Gzip 압축 플러그인 워드프레스를 사용하는 사용자라면 인터넷 검색 최적화 SEO 만들기 위해 많은 노력을 기울일테고 자신의 블로그가 인터넷 최적화가 되어 있는

jab-guyver.co.kr

그리고 저는 유료 플러그인인 WP Rocket 플러그인을 사용하고 있으며 컴퓨터와 모바일 모두 한 번에 높은 퍼포먼스를 낼 수 있습니다.

WP Rocket 플러그인 워드프레스 최적화 후기 - 노랗IT월드

워드프레스는 무거운 프로그램으로 최적화 및 가볍게 커스터마이즈 하는게 중요합니다. 그러나 코딩을 할줄 모른다면 여러 무료프로그램보단 유료인 WP Rocket 사용하면 모바일최적화 부터 js 쿼

yellowit.co.kr

AMP for WP - Accelerated Mobile Pages

워드프레스 플러그인에서 amp로 검색을 하면 엑셀 레이트 모바일 페이지를 다운로드하여 설치할 수 있습니다.

성장 방법은 두 가지로서 처음 사용하는 분은 Im a new user를 선택해 마법사 방식으로 next 버튼만 누르면 쉽게 모바일 최적화가 이루어집니다.

그리고 이미 경험이 많은 유저는 im an Experienced User! 를 선택해 바로 디테일한 설정을 할 수 있습니다.

우선 설치 마법사로 처음부터 진행해보겠습니다.

환영인사를 읽고 시작을 눌러줍니다.
모바일에서 사용할 190x36 로고가 있다면 로고 설정을 하고 없다면 다음으로 넘어갑니다.
모바일 최적화하고 싶은 페이지, 게시물, 홈페이지, 카테고리 부분을 체크합니다.

구글 애널리틱스에서 발급받은 추적 코드가 있다면 입력합니다.

UA-시작하는 코드로 구글 애널리틱스에서 속성 설정에 들어가면 제일 상단에 추적 ID를 확인할 수 있습니다.

모바일에서 사용하고 싶은 테마 디자인을 선택합니다.

무료는 총 4가지 디자인을 제공하고 있으며 설정을 완료하면 기본적인 모바일최적화 AMP 설정이 완료됩니다.

AMP 모바일 최적화 고급 설정

다음은 AMP 플러그인을 선택해서 번역 패널을 선택합니다.

그럼 각각에 대한 내용을 영문이 아닌 내가 원하는 한글이나 다른 언어로 번역해서 표시할 수 있습니다.

접속이 되지 않는 404 오류 등을 상대방이 이해하기 쉽게 풀어서 써준다면 문제가 발생하더라도 방문객들이 당황하지 않고 계속 페이지에 머무르게 할 수 있습니다.

이제부터 기본적인 모바일최적화 설정의 시작입니다.

일반 탭으로 이동해서 크기 설정을 원하는 사이즈로 지정하고 AMP 지원에 게시물과 홈페이지 그리고 맞춤 프런트 페이지도 함께 체크해줍니다.

AMP 애드센스 광고 설정

모바일로 접속 시에 광고를 따로 설정하고 싶다면 각각 헤더 아래, 꼬리말, 게시물 내용 위, 게시물 내용 아래, 제목 아래, 관련 게시물 위에 각각 설정할 수 있습니다.

애드센스나 기타 데이블과 같은 다양한 광고를 따로 설정하고 싶다면 사용합니다.

SEO - 검색엔진 최적화

한글로 번역시 서재웅이며 SEO 부분을 입력하는 부분입니다.

이미 사용하고 있는 SEO 플러그인이 있을 테니 SEO 플러그인 선택을 통해 동일하게 설정합니다.

모바일 PWA - Progressive Web App 설정

PMA를 설정하게 되면 프로그래시브 웹 애플리케이션의 약자로 인터넷 속도 및 SEO 최적화시켜주는 차세대 방식이라는 정도만 알고 있습니다.

함께 설정을 위해 설치를 진행합니다.

설치가 완료되었다면 PWA 설정을 합니다.

PWA Progressive Web App 설정에서는 아래 자세히 다루도록 하겠습니다.

PWA Progressive Web App - 워드프레스 최적화 플러그인 - WordPress

홈페이지 최적화에는 웹기반과 모바일 AMP 최적화가 동시에 필요하며 최적화와 함께프로그래시브 웹앱 구글 2016에서 미래의 웹기술로 소개 된 PWA 기술은 느린 인터넷속도에서도 빠르게 홈페이

yellowit.co.kr

모바일 성능 최적화

해당 AMP 플러그인에서도 Minify (압축)을 통해 속도를 향상할 수 있으니 체크를 해줍니다.

구조화된 데이터 스키마 기능을 통해 데이터베이스의 구조를 정리할 수 수 있습니다.

이렇게 페이지를 스키마 구조를 정리해줍니다.

다음 모바일 AMP 리디렉션 설정입니다.

AMP설정을 최종적으로 마치게 되면 모바일로 접속 시 마지막 주소에 AMP가 붙게 됩니다.

해당으로 변경 시에는 검색엔진 최적화에 아무런 영향을 미치지 않는다고 하며 그 외에도 AMP로 된 태그 베이스나 기타 정보 등을 최적화하는 강력한 기능입니다.

모바일 최적화 점수

설정을 최종적으로 마치고 모바일 페이지를 테스트 결과 기존의 22점에서 67점으로 3배 이상 빨라진 것을 볼 수 있습니다.

하단에 개선해야 하는 부분도 대폭 줄어들어 최적의 상태로 변한 것을 볼 수 있습니다.

워드프레스의 모바일 속도가 너무 느린 분들은 AMP 플러그인을 이용해 최적화를 해보시길 바랍니다.

워드프레스 참고 포스팅

저작자표시 비영리 변경금지

'IT 리뷰 > 블로그 SEO' 카테고리의 다른 글

티스토리 스킨 Fastboot 다운로드 수동설치 적용방법 (0)	2021.07.06
워드프레스 홈페이지 로딩 속도 측정 최적화 (0)	2021.05.28
워드프레스 이미지 CSS 최적화 Gzip 압축 플러그인 (0)	2021.05.28

워드프레스 모바일 최적화 AMP PWA 광고설정 속도향상