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

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

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

 

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

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

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

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

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

워드프레스 속도 측정

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

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

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

 

구글 AMP 추천사항

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

구글 진단

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

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

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

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

 

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

AMP for WP - Accelerated Mobile Pages

AMP For WP - Accelerated Mobile Pages

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

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

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

 

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

워드프레스 모바일 AMP 설정

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

구글 애널리틱스 추적코드 설정

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

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

AMP 반응형테마 설정

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

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

 

AMP 모바일 최적화 고급 설정

 

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

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

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

모바일 앱 크기 설정

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

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

AMP 애드센스 광고 설정

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

amp 애드센스 광고설정

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

SEO - 검색엔진 최적화

SEO 플러그인 선택

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

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

 

모바일 PWA - Progressive Web App 설정

PWA - Progressive Web App

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

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

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

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

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

모바일 성능 최적화

워드프래스 Minify 압축

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

스키차 서렂ㅇ

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

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

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

 

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

 

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

모바일 최적화 점수

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

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

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

Q&A

Q1: AMP 플러그인을 설치하고 나서 모바일 최적화 점수가 급격히 상승하는 이유는 무엇인가요?

AMP(Accelerated Mobile Pages) 플러그인은 모바일 페이지 로딩 속도를 크게 향상시킬 수 있습니다.

AMP는 HTML, CSS, JavaScript의 사용을 제한하고, 페이지가 최소화된 형식으로 빠르게 로드될 수 있도록 최적화됩니다. 이로 인해 페이지의 로딩 시간이 줄어들고, 구글 페이지스피드 점수도 급격히 상승하게 됩니다.

Q2: PWA(Progressive Web App)가 모바일 최적화에 어떤 도움을 주나요?

PWA는 사용자가 웹사이트를 앱처럼 사용할 수 있게 해주는 기술입니다.

이를 통해 모바일 환경에서도 빠르고 원활한 사용자 경험을 제공할 수 있으며, 오프라인에서도 웹사이트를 사용할 수 있게 됩니다. 또한 PWA는 속도 최적화뿐만 아니라 SEO에도 긍정적인 영향을 미칩니다.

Q3: AMP 페이지를 사용하는 경우 애드센스 광고는 어떻게 설정하나요?

AMP에서는 애드센스 광고를 여러 위치에 삽입할 수 있습니다.

헤더, 꼬리말, 게시물 내용 위, 게시물 내용 아래 등 여러 위치에서 광고를 설정할 수 있습니다. AMP 플러그인에서 제공하는 광고 설정 옵션을 통해 손쉽게 원하는 위치에 광고를 배치할 수 있습니다.

Q4: AMP 플러그인 설치 후 성능 측정을 어떻게 해야 하나요?

AMP 플러그인을 설치한 후, 구글의 PageSpeed Insights나 GTmetrix와 같은 도구를 사용해 성능을 측정할 수 있습니다.

이를 통해 AMP 플러그인이 모바일 페이지의 로딩 속도와 성능에 미친 영향을 구체적으로 확인할 수 있습니다. 이전 점수와 비교하여 얼마나 향상되었는지 체크해보는 것이 좋습니다.

Q5: AMP 플러그인 설치 후 문제가 생겼을 때 해결 방법은 무엇인가요?

AMP 플러그인 설치 후 문제가 생겼을 경우, 플러그인의 설정을 다시 한 번 점검하고, 캐시를 삭제한 뒤 테스트를 해보는 것이 좋습니다.

또한, AMP에서 제공하는 오류 로그나 진단 기능을 통해 문제를 파악하고 해결할 수 있습니다. 만약 문제가 지속되면, AMP 관련 포럼이나 공식 문서를 참조하거나 플러그인 업데이트가 필요할 수 있습니다.

Q6: PWA를 설치했을 때 모바일 웹사이트와 앱의 차이점은 무엇인가요?

PWA는 네이티브 앱처럼 동작하지만, 실제로 앱을 다운로드하지 않고도 모바일 웹에서 제공되는 앱과 유사한 기능을 사용할 수 있게 합니다.

사용자는 인터넷 연결이 불안정한 환경에서도 앱처럼 웹사이트를 이용할 수 있고, 웹사이트는 더 빠르고 원활한 사용자 경험을 제공합니다. 이로 인해 사이트의 재방문율을 높이고, 사용자 경험을 개선하는 데 도움을 줍니다.

Q7: AMP 페이지를 설정한 후 SEO에 미치는 영향은 무엇인가요?

AMP 페이지는 구글 검색 결과에서 상위 노출을 유도할 수 있는 중요한 요소입니다.

구글은 모바일 최적화가 잘 된 웹페이지를 선호하며, AMP는 모바일 페이지의 로딩 속도와 사용자 경험을 향상시켜 SEO 성과에 긍정적인 영향을 미칩니다. 또한 AMP를 사용하면 구글의 모바일 전용 검색 결과에서 더 좋은 위치를 차지할 수 있습니다.

Q8: AMP 플러그인과 PWA 플러그인을 함께 사용할 때의 장점은 무엇인가요?

AMP와 PWA를 함께 사용하면 모바일 최적화가 더욱 강화됩니다.

AMP는 페이지 로딩 속도를 향상시키고, PWA는 사용자 경험을 앱처럼 개선합니다. 이 두 가지를 함께 사용하면 모바일 환경에서 더 빠르고 효율적인 웹사이트를 제공할 수 있으며, 검색엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.

Q9: AMP 플러그인을 사용하면서 발생할 수 있는 오류와 그 해결 방법은 무엇인가요?

AMP 플러그인을 사용할 때 종종 발생할 수 있는 오류로는 페이지 레이아웃 문제, 광고 삽입 문제, 일부 콘텐츠가 AMP 규격에 맞지 않는 경우 등이 있습니다.

이러한 오류는 플러그인 설정을 다시 확인하거나, AMP 페이지에서 제공하는 오류 로그를 통해 문제를 추적할 수 있습니다. 또한, AMP 페이지를 검증하는 도구를 사용하여 오류를 확인하고 수정할 수 있습니다.

Q10: AMP 플러그인으로 웹사이트를 최적화했을 때 모바일에서 사용자 경험은 어떻게 개선될까요?

AMP 플러그인을 통해 모바일 웹사이트는 훨씬 더 빠르고 반응성이 뛰어난 페이지를 제공합니다. 페이지 로딩 시간이 단축되며, 사용자가 더 빠르게 콘텐츠에 접근할 수 있게 되어 이탈률을 낮추고 사용자 경험을 향상시킬 수 있습니다.

특히, 구글 검색 결과에서 AMP 페이지는 빠른 로딩 속도를 강조하여 더 많은 방문자를 유도할 수 있습니다.

워드프레스 참고 포스팅

• [IT 리뷰/블로그 SEO] - 네이버 웹마스터도구 올바른 RSS가 아닙니다 RSS 본문 크기를 줄여주세요
• [IT 리뷰/블로그 SEO] - 워드프레스 관리자 주소 백엔드 WP-Admin 변경 방법
• [IT 리뷰/블로그 SEO] - 워드프레스 목차 TOC 플러그인 Easy Table of Contents
• [IT 리뷰/블로그 SEO] - 워드프레스 표 만들기 표 짤림 해결방법