AMP 툴박스 1.0 출시

AMP Toolbox는 출시된 지 꽤 되었지만, 1.0 버전을 맞이한 지금, 제대로 된 소개를 하는 것이 좋겠다고 생각했습니다. 간단히 말해, AMP Toolbox는 AMP 페이지를 더욱 쉽게 게시할 수 있도록 도와주는 명령줄 도구와 JS API 모음입니다. 각 도구는 개별적으로 다운로드하여 사용할 수 있습니다.

버전 1.0에는 두 가지 주요 업데이트가 포함되어 있습니다.

1.   AMP 문서 린터 : AMP 린터는 누락되거나 크기가 잘못된 이미지, 누락된 CORS 헤더 또는 잘못된 메타데이터와 같은 오류와 의심스러운 구조를 보고합니다.

2.   유효하고 최적화된 AMP 지원: AMP Optimizer가 이제 유효한 AMP를 생성할 수 있어 최적화된 AMP 페이지를 더 쉽게 호스팅할 수 있습니다.

하지만 더 멋진 기능들이 있습니다! AMP Toolbox에 어떤 기능이 있는지 자세히 살펴보겠습니다.

앰프 CLI

첫째, AMP Toolbox에 포함된 대부분의 기능은 명령줄 인터페이스를 제공합니다. NPM을 통해 전역으로 설치할 수 있습니다.

 $ npm install @ampproject/toolbox-cli

 $ 앰프 도움말

또는 NPM의 내장된 ` npx ` 도구를 사용하여 종료 명령을 실행할 수 있습니다.

 $ npx @ampproject/toolbox-cli 도움말

AMP 린터

새로운 툴박스 - linter가 AMP 문서에서 일반적인 오류와 모범 사례를 확인합니다.

 $ amp lint https://amp.dev

 PASS 1x1 이미지는 <amp-pixel>로 지정됩니다.

 WARN 모든 <amp-img>는 적절한 너비와 높이를 갖습니다.

 > [https://blog.amp.dev/wp-content/uploads/2019/06/cf_hero.png]: 실제 비율 [1999/1140 = 1.75]이 지정된 비율 [16/9 = 1.77]과 일치하지 않습니다.

 > [https://blog.amp.dev/wp-content/uploads/2018/10/img_20180926_163001-01.jpeg]: 실제 비율 [3680/2314 = 1.59]이 지정된 비율 [16/9 = 1.77]과 일치하지 않습니다.

 PASS 비디오는 4MB 미만입니다.

 PASS <amp-video><source/></amp-video> 구문은 비디오에 사용됩니다.

 PASS Endpoint는 캐시에서 액세스할 수 있습니다.

 PASS 엔드포인트는 원점에서 액세스할 수 있습니다.

 FAIL <meta charset>은 첫 번째 <meta> 태그입니다.

 > <meta charset> 첫 번째 <meta> 태그가 아닙니다.

 PASS 런타임이 미리 로드되어 있습니다

또는 설치되지 않은 경우:

 $ npx @ampproject/toolbox-cli lint https://amp.dev

AMP Linter의 SXG 모드는 웹사이트에 SXG 지원을 추가할 때 유용합니다.

 $ amp lint -f sxg https://amp.dev

 PASS /amppkg/가 올바르게 전달됩니다.

 PASS 애플리케이션/서명 교환 콘텐츠 협상이 정확합니다.

 PASS dump-signedexchange -verify는 오류를 보고하지 않습니다.

AMP 최적화

AMP Optimizer는 AMP 페이지의 렌더링 성능을 향상시키는 서버 측 도구 입니다. AMP Optimizer는 AMP 성능 최적화 사례를 구현하고 AMP 서버 측 렌더링을 지원합니다. 이러한 최적화를 통해 FCP 시간을 50% 단축할 수 있습니다.

CLI를 통해 사용할 수 있습니다.

$ amp optimize https://amp.dev

$ amp optimize 파일.html

하지만 프로덕션 환경에서는 빌드 또는 렌더링 체인의 일부로 Toolbox Optimizer를 통합하는 것이 가장 좋습니다. AMP 서버 측 렌더링을 동적으로 적용할 수 있는 Express 미들웨어인 amp-optimizer-express 도 있습니다.

AMP 캐시 URL

테스트를 위해 AMP 페이지가 모든 AMP 캐시에서 작동하는지 확인하는 것이 좋습니다. toolbox-cache-url을 사용하여 원래 URL을 AMP 캐시 URL 형식 으로 변환하세요.

 $ amp curls https://amp.dev

 https://amp-dev.cdn.ampproject.org/c/s/amp.dev

 https://amp-dev.amp.cloudflare.com/c/s/amp.dev

 https://amp-dev.bing-amp.com/c/s/amp.dev

또는 특정 캐시의 경우:

 $ amp curls --cache=google https://amp.dev

 https://amp-dev.cdn.ampproject.org/c/s/amp.dev

AMP 캐시 목록

모든 공식 AMP 캐시 목록을 가져오는 API도 있습니다. 백엔드에 CORS를 구현할 때 매우 유용합니다.

const 캐시 = require('@ampproject/toolbox-cache-list');

캐시.list().then(콘솔.로그);

AMP 캐시에서 AMP 문서를 빠르게 업데이트하거나 제거해야 할 때가 있습니다. AMP 업데이트 캐시 API 의 CLI 버전을 사용하면 간편하게 처리할 수 있습니다.

 $ amp update-cache https://www.example.com/ --privateKey/path/to/private-key.pem

물론, toolbox-update-cache 패키지의 일부로 사용 가능한 API 버전도 있습니다.

앰프 코르스

CORS에 대해 말씀드리자면, 많은 AMP 구성 요소(예: amp-list 또는 amp-state)는 CORS 요청을 사용하여 원격 엔드포인트를 활용합니다. AMP 도구 상자의 일부인 connect/express 미들웨어는 AMP 페이지에 필요한 모든 CORS 헤더를 자동으로 추가합니다. express 앱에 toolbox-cors 미들웨어를 추가하기만 하면 AMP 페이지를 제공할 때 CORS에 대해 걱정할 필요가 없습니다.

 const 익스프레스 = require('익스프레스');

 const ampCors = require('@ampproject/toolbox-cors');

 const 앱 = 익스프레스();

 // 그게 다예요!

 앱.사용(ampCors())

AMP 검증 규칙

자주 사용하는 텍스트 편집기에 AMP 전용 코드 완성 기능을 구현하려면 amp-validator-rules를 확인해 보세요. AMP 유효성 검사 규칙을 쿼리하는 JavaScript 라이브러리입니다. 다음 예시는 amp-img 요소에 유효한 모든 속성을 나열합니다.

 '@ampproject/toolbox-validator-rules'에서 validatorRules를 가져옵니다.

 validatorRules.fetch().then(규칙 => {

 // 모든 웹사이트별 태그 규칙을 가져옵니다...

 const 태그 = 규칙.getTagsForFormat('AMP');

 // ...amp-img 태그의 정의를 찾습니다...

 const ampImg = tagged.find(e => e.tagName === 'AMP-IMG');

 const ampImgAttrs = ampImg.attrs

 // ... 글로벌, 레이아웃 및 amp-bind 속성을 필터링합니다...

 .filter(e => !e.name.startsWith('[') && !e.글로벌 && !e.레이아웃)

 // ...이름 추출...

 .map(e => e.name)

 // ...알파벳순으로 정렬...

 .종류();

 // ...그리고 콘솔에 결과를 표시합니다.

 console.log(앰프이미지속성);

 });

위 업데이트를 모두 숙지하셨나요? 작업이 번거롭다고 생각되시면 Yiyingbao Cloud Intelligent Website Building Platform에서 Google AMP를 선택하여 웹사이트를 구축할 수도 있습니다. 웹사이트 구축 및 글로벌 서버 배포는 3분 만에 완료됩니다. 무료 체험 문의: 4006552477 15600002121