AMP HTML은 무엇이며 프레임 워크 / 도구 X와 어떻게 어울리나요?
좋습니다. 지금까지 모두 Google에서 AMP HTML 에 대해 들어봤을 것입니다 .
제가 궁금한 것은 이것이 우리의 기존 워크 플로우에 어떻게 들어 맞을지입니다. React 또는 Angular 앱을 작성하는 경우 AMP HTML이 개발 프로세스에 어떻게 적합합니까? 이러한 각 프레임 워크에는 이미 구성 요소를 정의하는 방법이 있으며 AMP가 스택에 추가되는 것처럼 보입니다.
우리 대부분은 이미 browserify 또는 webpack과 같은 다른 도구를 사용하고 있습니다. AMP는 어떻게 쉽게 보이지 않아요 맞는 나머지에. 이러한 도구 중 일부를 사용하면 이미 최적화 된 방식으로 사이트를 제공 할 수 있습니다. AMP HTML이이 모든 것을 얼마나 바꿀까요?
AMP HTML은 기본적으로 기본으로 돌아가 가능한 가장 빠른 HTML을 제공합니다. 나는 생각 나게 WAP하고 Nokia 7110.
이는 웹 페이지를 만들기위한 엄격한 규칙 집합으로, 다른 회사와 개발자가 확장 할 수 있고 확장 할 수 있습니다.
이것이 SPA (단일 페이지 앱) 및 기타 자바 스크립트 프런트 엔드 무거운 프레임 워크와 함께 작동하는 방식은이 시점에서 알려지지 않았습니다.
저속 연결과 작은보기에서 가능한 한 빨리로드되도록 설계된 사용자 정의 요소가있는 정적 HTML 페이지의 핵심입니다. 누구나 이미 모바일 용으로 사이트를 최적화하고 AMP-HTML을 원하든 원하지 않든간에 몇 KB로 줄일 수 있습니다.
주요 이점은
- 구글은이를 지원할 것이며, 안드로이드, 크롬 및 구글 검색, 구글 CDN을 생각할 것입니다.
- 페이지는 정말 빠르게로드되고 예쁘게 보일 수 있습니다.
Wordpress 및 다른 게시자와 같은 초기 채택 은 별도의 모바일 친화적 AMP 페이지 집합 일 수 있습니다. 이것은 모든 일반 웹 페이지를 모바일 친화적으로 만들거나 SEO 히트에 직면하기를 원하는 Google에서 나왔습니다.
장기적으로 생각해 보면 성능에 초점을 맞춘 모바일 웹 사양입니다. 채택되면 5 년 내에 모든 웹 페이지가 해당 연결의 품질에 관계없이 모바일 연결에서 몇 초 내에로드 될 수 있습니다. 기술 및 통신 회사가 속도를 높이기를 기다릴 수 없다면 최소한 페이지 크기를 줄일 수 있습니다.
AMP는 정적 페이지 용으로 설계되었습니다. 개발자는 일반 버전과 AMP 버전의 두 가지 페이지를 만들어야합니다. AMP 페이지에는 일반 페이지에 대한 링크가 있으며 그 반대의 경우도 마찬가지입니다. 모바일에서 일반 페이지로 요청이 올 때마다 AMP 페이지를로드하고 그 반대의 경우도 마찬가지입니다. Google에는 더 빠르게로드 할 수있는 자체 AMP 캐시가 있습니다. AMP 페이지를 개발하는 동안 우리는 AMP 규칙 만 고려하면됩니다.
이제이 URL을 통해 상황이 더 명확 해졌습니다.
가장 큰 최적화 중 하나는 외부 리소스에서 오는 모든 것을 비동기식으로 만들어 페이지의 어떤 것도 렌더링을 차단할 수 없다는 사실입니다.
따라서 더 이상 렌더링 차단 CSS가 없습니다.
다른 성능 기술로는 모든 iframe의 샌드 박싱, 리소스가로드되기 전에 페이지에있는 모든 요소의 레이아웃 사전 계산, 느린 CSS 선택기 비활성화 등이 있습니다.
이 새로운 링크가 도움이되기를 바랍니다.
'Development Tip' 카테고리의 다른 글
| auto x {3}가 initializer_list를 추론하는 이유는 무엇입니까? (0) | 2020.12.31 |
|---|---|
| AVPlayer 사용시 우수한 스크롤 성능 유지 (0) | 2020.12.31 |
| Xcode에서 스토리 보드 파일에 대한 불필요한 편집을 피하는 방법은 무엇입니까? (0) | 2020.12.31 |
| 언제 개인 클래스를 정적으로 만들고 싶습니까? (0) | 2020.12.31 |
| 상속 된 함수에 대한 오버로드 해결 (0) | 2020.12.31 |