먼저, 정의를 살펴보겠습니다:
Google AMP(Accelerated Mobile Pages)는 구글이 정적 콘텐츠를 출시하기 위해 만들어진 웹페이지의 한 종류로, 신뢰성 있고 빠른 렌더링을 제공하며, 특히 모바일 웹 측에서 콘텐츠를 볼 때 페이지 로딩 시간을 빠르게 합니다.
바이두 MIP(모바일 인스턴트 페이지)는 모바일 웹페이지를 위한 오픈 기술 표준 집합입니다. 모바일 웹 페이지 가속은 MIP-HTML 사양, MIP-JS 실행 환경, MIP-캐시 페이지 캐싱 시스템을 제공함으로써 달성됩니다.
두 가지 정의는 매우 비슷해 보입니다. 하나는 모바일 페이지 가속, 다른 하나는 모바일 웹 가속이라고 하며, 목적은 동일합니다 - 모바일 웹 페이지 최적화입니다. 뭐야, 그런 게 없을 거야. 물론 같은 건 아니지만, 라오탄 사우어크라우트 면과 콩 선생님의 소고기 면의 차이일 뿐이에요. 둘 다 즉석 라면이고, 주요 원재료는 같으며, 레시피는 조금 다르고, 만드는 방식도 조금 다르고, 가장 중요한 것은 대변인이 다르다는 점입니다.
모바일 웹 가속은 구글이 처음 제안했으며, 오픈 소스 표준을 수립하고, 페이지 명세를 수립하며, 사용자 경험을 개선하기 위해 렌더링 속도를 최적화했으며, 구글은 AMP 표준을 충족하는 페이지의 가중치를 검색 엔진에서 증가시킬 예정입니다. 바이두는 구글이 나를 가졌다는 원칙을 고수하고, AMP에서 완전히 차용했으며, 자체 웹 가속 오픈 소스 표준을 제시해 MIP가 탄생했습니다.
바이두 MIP는 구글 AMP와 동일하며, 공식 웹사이트의 페이지 레이아웃, 메뉴 배열, 기술 설명조차도 거의 동일합니다. 목적(검색 결과에서 매우 빠르게 움직이는 페이지 반환), 원칙(HTML, CSS 단순화, 대부분의 JS 비활성화, 자원 제어, 캐싱 등), 런칭 단계(뉴스 먼저, 일반 페이지 순서), 그리고 원본 페이지와 MIP 페이지 간의 상호 참조 방식(태그 추가) 등이 모두 포함됩니다. 해당 검색 엔진에 표시되는 로고조차도 거의 동일합니다:
여기서는 중국인들이 그로부터 배우는 능력을 존경하지 않을 수 없습니다.
페이지 내 최적화 원칙
AMP와 MIP 모두 본질적으로 페이지 렌더링을 최적화하거나 게으른 로딩을 통해 블로킹을 줄이는 페이지 가속입니다. 우리 사업 내 일부 사양처럼, 코드 품질과 페이지 성능을 향상시키기 위한 표준 세트도 있을 수 있습니다. 단지 이 두 가지 요소가 SEO 최적화를 가져올 수 있다는 점입니다. 아래에서는 MIP를 예로 들어 그녀의 가속 원리를 이해해 보겠습니다.
MIP는 세 가지 주요 부분으로 구성되어 있습니다:
MIP HTML
MIP JS
MIP 캐시
MIP HTML은 HTML의 기본 태그를 기반으로 새로운 명세를 수립하여, 일부 기본 태그의 사용을 제한하거나 함수를 확장하여 HTML이 더 풍부한 콘텐츠를 표시할 수 있도록 합니다. MIP JS는 MIP HTML 페이지의 빠른 렌더링을 보장할 수 있습니다; MIP 캐시는 MIP 페이지의 캐싱을 구현하는 데 사용되며, 이는 페이지 성능을 더욱 향상시킵니다.
다음은 MIP 페이지의 가속 원리를 설명합니다:
잘 설계된 자바스크립트
MIP는 사용자가 자바스크립트를 맞춤화할 수 없으며, 보안과 성능을 보장하기 위해 MIP 컴포넌트 형태로 도입되어야 합니다
모든 정적 자원은 치수를 지정해야 합니다
MIP는 모든 자산(광고, 이미지, 오디오, 비디오)에 치수를 부여해야 합니다. 리소스가 실제로 로드되면 모든 리소스 크기를 즉시 추론할 수 있고, 페이지 레이아웃 계산에 빠르게 활용할 수 있으며, 빈번한 페이지 레이아웃 업데이트로 인해 사용자의 독서 경험에 지장 없이 자원이 원활하게 제공됩니다.
페이지 렌더링을 막는 어떤 메커니즘도 허용되지 않습니다
개발자가 만든 모든 커스텀 스크립트는 mip-ad, mip-iframe 등과 같은 MIP 태그를 사용해 MIP에 피드백을 제공해야 하며, 이는 페이지의 레이아웃과 렌더링을 방해하지 않습니다.
외부 자원 부하 제어
MIP 런타임은 외부 자원의 로딩을 제어하여 효율성을 보장하여, 사용자가 읽고 싶은 내용을 최대한 빠르게 화면에 표시하도록 합니다.
상호작용 함수의 캡슐화
MIP는 웹페이지가 사용자에게 직접적이고 단순한 경험을 제공할 수 있다고 주장하지만, 그렇다고 해서 페이지의 생생함과 재미를 제한한다는 의미는 아닙니다. MIP 런타임은 개발자가 복잡한 상호작용 함수를 구현하는 데 너무 많은 노력을 투자할 필요를 없애는 고도로 최적화된 캡슐화된 자바스크립트를 제공합니다.
인라인 CSS 사용을 권장합니다
CSS 로딩은 페이지 렌더링을 방지하고, CSS 인라인은 클라이언트의 오버헤드를 줄일 수 있습니다.
GPU 가속 애니메이션만 허용됩니다
MIP는 변환과 불투명도를 통해서만 애니메이션을 구현할 수 있게 하며, GPU에서 애니메이션을 실행할 수 있을 때만 렌더링 레이어 병합을 트리거합니다.
MIP 캐시
MIP의 또 다른 중요한 의미는 웹마스터들이 웹 페이지 속도를 높일 수 있다는 점이며, 바이두는 MIP 웹페이지를 바이두 CDN으로 캐시할 수 있습니다. MIP 캐싱은 MIP 표준을 충족하는 한 사용할 수 있습니다.
이것들은 웹 프로젝트를 최적화할 때 자주 사용하는 방법일 뿐이지만, 이제 바이두는 오픈 소스 표준을 통과하고 SEO의 매력과 통합된 사양을 부여했습니다.
구글 AMP와 바이두 MIP의 견해
AMP와 MIP가 제공하는 모바일 웹 최적화 솔루션은 어느 정도 사용자 경험을 향상시킬 수 있습니다. 동시에 SEO와의 결합은 많은 개발자들의 참여 관심을 높였습니다. 하지만 상대적으로 폐쇄된 환경 때문에 이 표준 세트는 대규모 프로젝트에 적용할 수 없고, 비교적 단순한 페이지 디스플레이에만 적용할 수 있습니다. 물론 이는 원래 의도와 일치합니다.
AMP와 MIP는 서로 다른 표준 세트이며, 구글과 바이두의 검색 엔진 최적화를 지원하기 위해 두 세트의 페이지를 작성해야 하므로 개발자의 개발 비용이 증가합니다.
앞으로 두 회사의 표준이 통합될 것으로 개인적으로 생각하며, 바이두는 AMP 표준을 지원할 것으로 예상됩니다. 구글은 글로벌 관점에서 볼 수 있고, 바이두는 중국 내 사용자만 더 많으니까요.
MIP 튜토리얼:https://www.mipengine.org/doc/00-mip-101.html
튜토리얼:https://www.ampproject.org/zh_cn/
|
게시됨 2018. 7. 7. 오전 9:47:36
|
|
|
|
