가속화 된 모바일 페이지 : WordPress 모바일 최적화를위한 AMP

WordPress 용 가속화 된 모바일 페이지

인터넷 서핑과 탐색은 빠르고 쉬워야합니다. 웹 마스터는 웹 사이트 성능을 최적화하고 사이트 속도를 개선하여이를 가능하게하기 위해 지속적으로 노력하고 있으며이를 달성하는 가장 좋은 방법은 AMP for WordPress.


웹 사이트는 주로 큰 화면을 위해 설계되었습니다. 그러나 작은 화면의 수가 증가하고 있으며 랩톱 및 개인용 컴퓨터를 추월하기까지합니다. 모바일은 이제 대표 디지털 미디어 시간의 65 %. 핸드 헬드 장치는 더 빠른 경우가 아니라 더 큰 화면 에서처럼 페이지를 빠르게로드해야합니다..

빠른 로딩 콘텐츠에 대한 이러한 요구를 충족시키기 위해 특정 모바일 플랫폼 용으로 설계된 앱은 Apple (뉴스), Facebook (인스턴트 기사) 및 Snapchat (발견)에서 제공됩니다. 올해 초. Google은 모바일 콘텐츠 제공 속도를 높이고 더 나은 사용자 경험을 제공하기 위해 Accelerated Mobile Page (AMP)를 도입했습니다.

AMP 란?

워드 프레스 용 AMP : AMP Project

AMP 프로젝트 에 의해 발표되었다 2015 년 10 월 Google, 게시자에게 모바일 최적화 컨텐츠를 한 번 작성하고 모바일 웹의 모든 위치에 즉시로드 할 수있는 수단을 제공하는 오픈 소스 이니셔티브입니다..

2016 년 2 월 24 일 Google은 모바일 검색 결과 페이지의 캐 러셀에 AMP 호환 콘텐츠를 배포하기 시작했습니다. 사용자는 회전식 메뉴를 스 와이프하고 읽을 항목을 탭할 수 있습니다. Pinterest는 페이지를보고했습니다 일반 모바일 최적화 페이지보다 8 배 적은 데이터를 사용하여 4 배 더 빠름. 이것은 페이지의 형식과 전달 방식으로 인해 가능합니다.

2016 년 8 월 기준으로 Google 검색의 색인에 1 억 5 천만 개 이상의 AMP 문서가 있으며 일주일에 4 백만 개의 비율로 증가하고 있습니다. 8 월 초 Google은 앰핑 된 콘텐츠에 대한 Google 검색 미리보기. 올해 말에 더 광범위하게 구현 될 것으로 예상됩니다..

WordPress 용 AMP : AMP 검색 미리보기

검색 미리보기의 AMP

AMP 사용 가능 검색에서 빠른 로딩 페이지를 살짝 볼 수 있습니다 여기. 휴대 전화의 링크를 사용하여 확인하십시오 (데스크톱에서 작동하지 않음)..

AMP를 사용해야하는 웹 사이트?

2 월에이 프로젝트는 출판사들을 위해 시작되었습니다. 그러나 AMP 채택은 출판 산업을 넘어 엔터테인먼트, 여행, 전자 상거래 등으로 널리 퍼졌습니다..

얼리 어답터로부터 유리한 보고서를 받고 있습니다. AMP 문서의로드 시간이 88 % 향상되었습니다., 워싱턴 포스트 보고서 휴대 전화 재 방문 사용자 수 23 % 증가. 이베이 는 약 1,500 만 개의 AMP 기반 제품 찾아보기 페이지를 사용하여 AMP로 전환하는 주요 전자 상거래 회사 중 하나입니다. 잠시 후이 페이지는 검색에서 발견 될 것으로 예상됩니다..

어떤 웹 사이트에서 AMP를 사용해야합니까? 확실히 트래픽을 위해 모바일에 크게 의존하는 사람들. 그러나 점점 더 많은 사용자가 모바일 장치를 사용하여 인터넷을 탐색하도록 선택하면 WordPress 용 AMP (또는 모든 웹 사이트)를 추가하는 것이 좋습니다..

AMP의 차이점?

이 컨텐츠 전달 시스템은 AMP HTML 프레임 워크를 기반으로하며 일반 HTML보다 빠릅니다.,

  • 모든 JavaScript 컨텐츠를 제외한 일반 HTML 프레임 워크의 린 버전입니다. JavaScript의 경우 프레임 워크는 공통 AMP JS 라이브러리를 사용합니다..
  • 컨텐츠는 공통 클라우드에 캐시 및 저장되므로 서버에서 쿼리 및 페치하는 데 필요한 시간이 제거됩니다..

더 많은 차이점이 있지만 여기에 언급 된 두 가지는 빠르고 광범위하게 이해해야합니다..

게시자와 블로그에서 AMP를 사용해야하는 이유

모바일에서 느리게로드되는 페이지를 읽는 것이 사용자에게 낙담 한 경험이되는 한, 게시자는 모바일 광고에서 발생하는 수익을 놓치고 있습니다. AMP는 웹 사이트에서 장기간 방문자를 유치하고 유지하는 데 도움이되며 수익 창출 클릭 가능성이 있습니다.

AMP 페이지는 번개 모양 아이콘과 함께 표시되어 일반 웹 페이지에서 표시됩니다. 이 옵션을 클릭하면 AMP 뷰어 내의 AMP 페이지로 바로 이동합니다. 뿐만 아니라 콘텐츠는 Google 검색에서 즉시 사용할 수 있으며 Twitter, LinkedIn, WordPress, Parse.ly, Adobe Analytics, Nuzzel 및 Pinterest와 같은 소셜 플랫폼을 통해 액세스 할 수 있습니다..

또한 게시자는 자신의 페이지 실적을 관찰하기 위해 Google 웹 로그 분석에 액세스 할 수 있습니다. 최고의 콘텐츠를 발굴하여 웹 사이트 성능 및 사용자 경험을 최적화하는 데 사용할 수 있습니다.

AMP는 고성능 및 사용자 경험을 관리한다는 점에서 또 다른 이점을 제공하므로 발행인 리소스를 훌륭한 컨텐츠 제공에 집중할 수 있습니다.

AMP에 필요한 최적화

AMP는 실제로 웹 사이트에 대한 많은 최적화 Google의 요구에 따라 동일한 방식으로 수행됩니다. 웹 페이지 AMP를 준수하기 위해 수행해야하는 다양한 최적화는 다음과 같습니다.,

  • 비동기 JavaScript 만 허용 – 페이지 렌더링이 지연되지 않도록합니다. 즉, 생성 한 JavaScript를 사용할 수 없으며 페이지의 대화 형 컨텐츠를 처리하기 위해 AMP 요소에 의존해야합니다. iframe의 JS는 허용되지만 렌더링을 방해하지 않는 경우에만.
  • 모든 자원의 크기를 정적으로 조정 – AMP는 이미지 및 iframe과 같은 리소스가 다운로드 될 때까지 기다리지 않고 페이지를로드합니다. 이러한 리소스의 크기는 HTTP로 명시해야하므로 다운로드를 시작하기 전에 이러한 리소스의 크기와 위치를 알아야합니다..
  • 확장 메커니즘으로 인해 렌더링이 차단되지 않도록 함 – 확장이 페이지에 포함되는 경우 사용자 정의 스크립트는 시스템에이를 알려야합니다. 따라서 AMP가 포함 할 내용을 알기 전에도 확장을위한 공간이 생성됩니다. 라이트 박스, Instagram 내장 및 트윗 확장은 추가 HTTP 요청이 필요하더라도 페이지 렌더링을 차단하지 않으므로 괜찮습니다..
  • 모든 타사 JavaScript를 중요한 경로에서 벗어나십시오. – 맞춤 자바 스크립트는 샌드 박스 iframe에서만 허용됩니다. 이렇게하면 메인 페이지가로드되는 것을 차단하지 않습니다.
  • 모든 CSS는 인라인 및 크기에 따라 달라져야합니다 – 이것은 중요한 경로에서 HTTP 요청 수를 줄이는 데 도움이됩니다..
  • 글꼴 트리거링은 효율적이어야합니다– AMP 시스템은 글꼴 다운로드가 시작될 때까지 HTTP 요청을 허용하지 않습니다.
  • 크기 재 계산 최소화 – 재계 산은 렌더링을 지연 시키므로 최소로 유지해야합니다..
  • GPU 지원 애니메이션 만 실행 – 모든 애니메이션은 GPU (Graphical Processing Unit)에서 실행될 수 있어야합니다.
  • 리소스 로딩 우선 순위 지정 – 필요한 콘텐츠 만 먼저로드하고 가능한 빨리 광고와 이미지를 가져 오지만 필요한 경우에만로드하십시오. 그렇게하면 CPU에 대한 요구가 최소로 유지됩니다.
  • 순식간에 페이지로드 – 사전 렌더링은 많은 대역폭과 CPU를 사용합니다. AMP 사전 렌더링은 필요한 컨텐츠 만 먼저로드하고 필요한 경우에만 타사 iframe 및 기타 리소스를 다운로드합니다.

표준 광고 형식, 광고 네트워크 및 기술이 제공됩니다. 동시에 게시자는 속도가 저하되지 않는 한 자신의 형식을 선택할 수도 있습니다..

WordPress 용 AMP를 추가하는 방법

구글은 지도 시간 기본 AMP HTML 페이지 작성, 스테이징, AMP 준수로 유효성 검증, 공개 및 분배에 대해 참조 할 수 있음. AMP 페이지 확인 Twitter 및 Instagram과 같은 타사가 페이지가 플랫폼에서 잘 표시 될 것이라고 확신하기 때문에 중요합니다..

WordPress.com에서 호스팅되는 웹 사이트에 관한 한, 추가 작업없이 WordPress에 대해 자동으로 지원됩니다. 자체 호스팅 WordPress 웹 사이트는 플러그인을 설치하여 WordPress 용 AMP를 활성화 할 수 있습니다.

Automattic의 AMP 워드 프레스 플러그인

Automattic의 AMP 워드 프레스 플러그인

다운로드가 완료되면 AMP 플러그인 WordPress 웹 사이트에서 게시물은 자동으로 동적으로 생성 된 AMP 버전을 갖습니다. 당신은 추가 하여이 페이지에 액세스 할 수 있습니다 앰프 URL 끝에 (example.com/my-post/amp) 예쁜 퍼머 링크가 활성화되지 않은 경우 추가 ?amp = 1 링크로 연결됩니다 (example.com/?p=100&amp=1과 같이 표시됨). 다른 단계는 위에서 언급 한대로 페이지를 테스트하고 확인하는 것입니다..

이 플러그인에 대한 설정이나 기능은 전혀 눈에 띄지 않습니다. 자신의 JSON 구성 코드에 붙여 넣을 수있는 AMP Analytics에 대한 추가 대시 보드 옵션이 있지만 그게 전부입니다..

이 플러그인은 Automattic 스 테이블의 공식 플러그인이며 현재 페이지 및 아카이브를 지원하지 않으며 페이지를 사용자 정의 할 수도 없습니다. 그러나 매우 간단하고 사용하기 쉬운 옵션이며 다음을 통해 지침을 찾을 수 있습니다. Github에 대한 문서 커스터마이징.

WP 용 AMP – 가속화 된 모바일 페이지

WP 무료 워드 프레스 플러그인 AMP

또 다른 훌륭한 무료 옵션은 WP 용 AMP. 이 무료 WordPress 플러그인은 빠르고 쉬운 설정을 제공합니다. 설치, 설정 및 웹 사이트 용 AMP 자동 생성을 시작하기 만하면됩니다. 보너스 –이 플러그인은 멀티 사이트와도 호환됩니다.

AMP (게시물, 페이지, 아카이브) 활성화, 모바일 광고 영역 추가, 구조화 된 데이터 (SOE의 중요한 부분), Yoast SEO 메타 태그 통합, 고급 인덱스 / 인덱스 옵션, 푸시 알림, 기본 설정에 대한 기본 설정이 있습니다. AMP 주석 달기, 커스텀 AMP 번역 (영어 이외의 언어를 사용하는 경우이를 업데이트하려는 경우) 등. 설정은 무료 플러그인에 매우 포괄적입니다..

무엇보다도,이 플러그인은 디자인 옵션을 제공하므로 AMP 출력의 모양과 느낌을 사용자 지정할 수 있습니다. 포함 된 기본 AMP 테마를 사용하거나 AMP 테마 프레임 워크 친절한 디자인 중 하나를 만들기 위해.

WP for WP도 제공합니다 프리미엄 확장 기능 (예 : 클릭 유도 문안 또는 AMP 캐싱)을 추가하고 WooCommerce, Advanced Custom Fields 및 Contact Form 7을 포함한 인기있는 플러그인 지원.

WordPress 용 AMP를 추가하는 다른 방법

물론 이것이 WordPress 기반 웹 사이트에 AMP를 추가하는 유일한 방법은 아닙니다. AMP for WordPress 웹 사이트에 도움이되는 다른 플러그인은 다음과 같습니다.

  • WP AMP – 코딩 및 SEO 향상없이 ​​커스텀 AMP 디자인 생성 자세한 내용은 여기를 참조하십시오.
  • 워드 프레스 용 AMP (Accelerated Mobile Pages) – 웹 사이트를위한 AMP 테마 만들기.
  • 커스텀 AMP – AMP 컨텐츠 사용자 정의.
  • Facebook 인스턴트 기사 및 Google AMP 페이지 – 광고 및 분석을 지원하여 WordPress에서 Google AMP 페이지로 직접 컨텐츠를 게시하고 관리합니다..
  • Yoast SEO & AMP 용 접착제 – 기본 WordPress AMP 플러그인이 올바른 Yoast SEO 메타 데이터를 사용하고 AMP 페이지 디자인을 수정할 수 있도록.

워드 프레스 용 AMP 추가?

AMP가 Google에서 웹 페이지를 검색하는 데 반드시 필요한 것은 아니지만 Google은 AMP 프로젝트를보다 광범위한 방식으로 구현하는 것을 목표로하고 있음이 분명합니다. 현재 AMP 준수는 별도의 요소가 아닙니다. Google 검색 순위. 어느 시점에서 중요하다고 가정하는 것이 합리적이지만,

페이지로드 속도가 검색 엔진 순위의 요소라는 점을 명심하면 모바일 인터넷에 참여하고 싶다면 실제로 많은 선택을 할 수 없습니다. 검색 엔진 순위가 중요한 경우 AMP 방식에 대한 두 번째 생각은 모두 사라질 수 있습니다..

그러나 프로젝트에 참여하려면 Google이 요구하는 형식을 엄격히 준수해야하며 모든 사람이 차를 마시는 것은 아닙니다. 그것은 당신이 당신의 웹 사이트에 놓을 수있는 것을 제한하고, 모든 블로그가 다소 균일하고 개성이 부족하게 보일 수 있습니다. 일부 애니메이션은 허용되지 않으며 양식은 지원되지 않습니다. 그리고 방문 페이지가있는 한 AMP는 전혀 좋은 생각이 아닐 수 있습니다. 또한 AMP가 댐퍼로 입증 될 수있는 속도에 따른 미적 감각과 브랜딩을 제공하는 웹 사이트가있을 수 있습니다..

그러나 사용자에게 빠르고 매력적인 경험을 제공하고 더 오래 머 무르려면 AMP for WordPress (또는 다른 유형의 웹 사이트)를 진지하게 고려해야합니다. Google 검색 페이지의 AMP 회전식 슬라이드에서 모서리를 표시하려는 지점 인 경우 AMP 악대 차로 이동하십시오..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map