Google AMP를 사용하여 WordPress 사이트의 모바일 페이지 로드 속도 향상

페이지 속도가 중요한 이유

우리 중 수십억 명이 최근에 모바일 장치에서 웹 콘텐츠를 소비했다면 경험이 향상될 수 있다는 것을 알게 되었을 것입니다. 뉴스 기사를 읽는 것은 페이지를 로드하는 데 오랜 시간이 걸리기 때문에 종종 고통스러울 정도로 느립니다. 페이지에 텍스트가 로드된 후에도 광고, 추적 자바스크립트 및 이미지가 다운로드되면서 페이지가 몇 초 동안 계속 로드됩니다.
모바일 앱은 빠른 로딩 콘텐츠 , 오프라인 보기 및 빠른 인터페이스에 익숙해졌습니다. 그러나 모바일 사이트는 말 그대로 뒤쳐지는 경우가 많습니다. 이는 광고, 분석, 공유 및 댓글 작성을 위해 많은 위젯을 사용하는 뉴스 및 블로그 사이트에 특히 해당됩니다. iOS 기기에 콘텐츠 차단기를 설치하고 속도 증가를 확인하면 이를 쉽게 테스트할 수 있습니다.
물론 반응형 테마를 사용하여 일부 문제를 완화할 수 있지만 반응형 디자인은 페이지 로드 성능을 다루지 않습니다. 대부분의 경우 반응형이 문제의 근본 원인입니다 . 우리는 다양한 해상도의 디스플레이에 맞출 수 있는 웹사이트를 디자인하지만 가장 작은 디스플레이, 낮은 CPU 성능 및 가장 느린 연결에 최적화된 경험을 만드는 데 실패합니다. 반응형 디자인을 사용하면 페이지가 모바일에서 렌더링될 때 모든 데스크톱 자산과 기능이 계속 로드되어 성능이 저하되는 경우가 많습니다. 페이스북에 따르면 모바일에서 뉴스 기사의 평균 로딩 시간은 8초입니다.
우리 중 일부는 스마트폰에서 3G 또는 4G 네트워크 연결을 사용할 만큼 충분히 운이 좋은 반면, 네트워크 속도가 급격히 떨어지려면 도심에서 벗어나기만 하면 됩니다. 그리고 물론 아직 빠른 네트워크 연결을 사용할 수 없는 개발 도상국에서 연결하는 "다음 10억"의 사람들과 장치가 있습니다.
다행히도 모든 빅 플레이어가 모바일 장치에서 콘텐츠 로드 속도를 높이는 방법에 대해 작업하면서 상황이 올바른 방향으로 진행되고 있습니다. Facebook은 웹 콘텐츠를 빠르게 로드할 수 있는 솔루션인 Instant Articles를 출시했지만 하나는 벽으로 둘러싸인 정원에 국한되었습니다. Apple은 자체 뉴스 앱을 출시했습니다. Google은 Facebook과 유사한 목적을 가지고 있지만 개방형 표준 접근 방식을 가진 이니셔티브인 AMP(Accelerated Mobile Pages)를 출시했습니다.
WordPress는 최근 무료 플러그인 형태로 WordPress.com 및 WordPress.org 사이트에 Google의 AMP(Accelerated Mobile Pages) 지원을 추가했다고 발표했습니다.
이제 WordPress.org 블로그 또는 뉴스 사이트에 AMP를 추가하고 최신 기술을 활용하여 모바일 장치에서 웹사이트 속도를 높이는 방법을 살펴보겠습니다.

구글 AMP란?

Google의 AMP 약속은 페이지가 휴대기기에서 즉시 로드되도록 하는 것입니다. 그것은 모바일 인터넷의 마지막 남은 문제 중 하나를 수정합니다. 모두가 사용하고 있음에도 불구하고 모바일 인터넷은 놀라울 정도로 느립니다. AMP는 페이지의 숫자 기능을 제한하고 속도를 위해 디자인 기능을 제거하여 이 문제를 해결합니다. Google은 AMP의 로딩 속도가 일반 웹페이지보다 85% 더 빠르다고 주장했습니다.
AMP는 웹사이트에 대한 특별한 모바일 보기를 만듭니다. 이 새로운 모바일 사이트는 Google 모바일 검색 및 Chrome과 같은 지원되는 클라이언트에 대한 콘텐츠를 향상시킵니다. 이 새로운 보기는 이미 가지고 있는 일반 및 모바일 웹사이트에 추가됩니다. 이 보기에서 귀하의 페이지는 일반 웹 페이지처럼 보이지만 콘텐츠를 제외한 모든 것이 벗겨져 있습니다. 이 때문에 WordPress 사이트가 준비되어 있는지 확인해야 합니다.

AMP는 어떻게 작동합니까?

AMP HTML은 본질적으로 특정 자바스크립트 요소만 허용되는 HTML의 하위 집합입니다. 뉴스 사이트 및 블로그와 같이 콘텐츠가 많은 사이트의 로딩 속도를 높이는 데 중점을 둡니다. Javascript를 크게 제한하지만 페이지에서 특정 Analytics 및 광고 요소를 허용하므로 뉴스 게시자에게 좋은 옵션이 됩니다.
새 모바일 보기를 만들기 위해 AMP는 세 가지 주요 요소를 사용합니다.

• AMP HTML – 이 HTML 하위 집합은 AMP 클라이언트가 성능에 대해 걱정하지 않고 원하는 방식으로 콘텐츠를 렌더링할 수 있도록 하는 많은 제한 사항이 있는 일부 사용자 지정 태그 및 속성을 추가합니다. 플러그인은 이러한 새 태그를 페이지에 자동으로 추가하지만 필요한 경우 고유한 AMP 관련 템플릿에서 사용할 수 있습니다.
• AMP JS – 이 JavaScript 프레임워크는 AMP 프로세스가 작동하도록 하는 리소스 처리 및 비동기 로드를 관리하는 모바일 페이지용으로 만들어졌습니다. AMP 페이지에서는 타사 JavaScript를 사용할 수 없습니다.
• AMP CDN – AMP는 AMP 페이지를 추가로 캐시하고 최적화할 수 있는 선택적 콘텐츠 전송 네트워크를 제공합니다.

AMP 설치

WordPress 사이트에서 AMP를 사용하려면 먼저 플러그인을 설치해야 합니다. WordPress.com을 사용하는 경우 이미 사용할 수 있습니다.

공식 플러그인

WordPress 플러그인 스토어에서 공식 AMP 플러그인을 찾을 수 있지만 프로젝트의 Github 사이트 에서만 최신 버전을 찾을 수 있습니다 . 따라서 선택할 수 있습니다.
WordPress를 통해 플러그인을 설치하는 것이 가장 빠릅니다. 플러그인 WordPress 관리자 패널의 "새 항목 추가" 섹션에서 amp-wp를 검색하기만 하면 됩니다. 그런 다음 설치를 클릭한 다음 활성화하여 웹사이트에서 AMP 사용을 시작하기만 하면 됩니다.
어떤 이유로든 최신 버전이 필요한 경우 플러그인을 수동으로 설치해야 합니다. Github 패키지를 다운로드한 후 "새로 추가" 플러그인 패널에서 "플러그인 업로드"를 클릭하기만 하면 됩니다. 패키지가 포함된 zip 파일을 찾고 WordPress가 거기에서 가져갈 수 있도록 하십시오. 업로드가 완료되면 플러그인을 활성화하여 사용을 시작할 수 있습니다.

PageFrog 및 기타 AMP 플러그인

공식 플러그인은 Google의 AMP 프로젝트 팀에서 직접 제공하므로 AMP의 최신 버전입니다. 보유하고 있는 모든 페이지와 게시물의 /amp/ 버전을 생성합니다. 직접 보려면 URL 끝에 /amp/를 추가하기만 하면 됩니다.
그러나 이러한 AMP 페이지는 수정할 수 없습니다. 기본 플러그인이 제공하는 것보다 더 많은 것이 필요한 경우 PageFrog와 같은 다른 AMP 플러그인 중 하나가 필요합니다.
PageFrog는 변경 사항 중 일부를 편집할 수 있도록 하여 핵심 AMP 플러그인을 기반으로 합니다. Facebook의 Instant Articles와 같은 다른 프로토콜뿐만 아니라 일부 스타일 및 테마 기능을 추가할 수도 있습니다. WordPress 플러그인 스토어에서 PageFrog 및 기타 몇 가지 AMP 플러그인을 찾을 수 있습니다.

AMP용 WordPress 사이트 구성

플러그인을 활성화하면 완료됩니다. 대부분의 설치에서 평소와 같이 콘텐츠를 생성하기만 하면 나머지는 플러그인이 알아서 처리합니다. 하지만 Google 애널리틱스 코드와 같은 항목은 AMP 페이지에서 즉시 작동하지 않습니다. 새 AMP 페이지에 분석 및 SEO 기능을 추가하는 방법을 읽어보십시오. .

AMP 페이지에 Google 애널리틱스 추가하기

모바일 페이지에서도 이러한 기능이 필요한 경우 플러그인의 single.php 페이지 템플릿에 수동으로 추가해야 합니다.
이렇게 하려면 플러그인 목록에서 AMP 플러그인 이름 옆에 있는 수정 옵션을 클릭해야 합니다. 거기에서 single.php 링크를 클릭하여 편집을 시작하면 됩니다. 플러그인을 업데이트할 때마다 이 작업을 다시 수행해야 할 수도 있습니다.

SEO 플러그인 및 AMP

AMP 페이지에는 SEO 기능이 포함되지 않으므로 새로운 AMP 호환 SEO 플러그인이 필요합니다.
다행스럽게도 대부분의 SEO 플러그인 개발자는 사용할 수 있는 AMP 확장을 갖고 있거나 가질 예정 입니다. 별도로 설치해야 하지만 모든 페이지가 사이트의 SEO 개선을 ​​위해 작동하도록 하려면 필요합니다.
이 문서를 기준으로 3개의 SEO WordPress 플러그인만 AMP 확장 또는 업데이트를 출시했습니다.

• Yoast SEO용 Glue – Yoast SEO WordPress 플러그인에 AMP 지원 추가
• 스키마 앱 구조화된 데이터 – schema.org의 AMP가 포함된 SEO 스키마 플러그인
• WP SEO 구조화된 데이터 스키마 – Kansas City SEO의 AMP가 포함된 SEO 스키마 플러그인

오류 수정

웹사이트에 추가할 때와 마찬가지로 AMP 페이지에서 오류 및 불일치를 테스트 하고 수정하려고 합니다.
AMP는 여전히 진화 중이며 많은 기능에 여전히 버그가 있을 수 있습니다. AMP 페이지를 공개하기 전에 템플릿 파일에서 이러한 오류를 수동으로 수정해야 합니다. 변경 사항이 있는 경우 플러그인을 업데이트할 때마다 편집을 다시 실행해야 할 수도 있다는 점을 기억하십시오.

AMP 페이지에 광고하기

AMP HTML은 JavaScript를 허용하지 않으므로 광고를 직접 삽입할 수 없습니다. 대신 기본 기사 콘텐츠에 액세스할 수 없는 샌드박스 iframe에 있습니다.
Google은 일부 유형의 광고를 허용하도록 AMP를 설계했습니다. 광고 플러그인의 AMP 호환 버전만 있으면 됩니다. AMP Github 페이지 에서 이러한 호환 가능한 플러그인의 전체 목록을 찾을 수 있습니다 .
현재 지원되는 광고 제공업체는 다음과 같습니다.

• A9
• 애드리액터
• 애드센스
• 애드테크
• 더블 클릭

AMP 또는 모바일 앱?

AMP는 특정 조건에서 사이트의 기사 페이지 속도를 높이는 데 도움이 될 수 있지만 모든 상황과 모든 기기에서 작동하지는 않습니다. 뿐만 아니라 어떤 종류의 분석(js 없음!) 및 페이지에서 실행할 수 있는 광고에도 큰 제한이 따릅니다.
AMP는 검색에서 유입되는 트래픽에 대한 효과적인 솔루션이 될 수 있지만 가장 충성도가 높은 독자는 어떻습니까?
그런 사람들에게는 청중의 유형과 규모에 따라 앱이 여전히 많은 의미가 있다고 생각합니다. 앱은 AMP 또는 인스턴트 아티클이 제공하지 못하는 많은 이점을 제공할 수 있습니다 . 푸시 알림을 통한 콘텐츠 전달 및 재활성화, 콘텐츠 캐싱 및 오프라인 사용, 앱 스토어에서의 존재, 더욱 중요한 것은 사용자의 홈 화면입니다.
따라서 시간이 지남에 따라 성장을 촉진하는 데 도움이 되는 플랫폼을 찾고 있는 경우 콘텐츠와 광고 및 분석을 위한 모바일 전용 옵션에 대한 제어를 유지하려면 자신의 앱을 게시하는 것을 고려하십시오. 뉴스나 블로그 사이트에서 WordPress를 사용하고 있다면 MobiLoud 에 적절한 솔루션이 있을 수 있습니다 .