AMP 페이지 Experience Guide를 통한 AMP 고속
16574 단어 AMPJavaScriptExpresstech
AMP Page Experience Guide
사용 방법은 URL을 입력하고 해석 단추를 누르는 것이다
이번에는 달루심의 프레임리스트 AMP 페이지에서 해봤어요.
Core Web Vitals
Firebase Function Express로 렌더링했기 때문인지 읽기 속도가 상당히 느립니다.
제안된 개선 방안
분석이 끝난 후에 속도 개선 방안이 나타날 것이다
AMP Optimzer 사용
AMP Optimzer 권장 사항
AMP 실행 시간 사전 로드
AMP 관련 JS 사전 로드 시나리오 제시
<link as="script" href="https://cdn.ampproject.org/v0.js" rel="preload">
모든 자원 읽기 허용
모바일 친선 테스트 도구로 확인한 구글의 광고를 읽을 수 없는 개선 방안
침입형 상호작용 방지
AMP-AD에 광고를 넣었기 때문에 문제가 있는지 수동으로 확인할 수 있다
개진
AMP 실행 시간 사전 로드
자신의 사이트에서 많은 것을 읽었기 때문에 모두 대응했다
<link as="script" href="https://cdn.ampproject.org/v0.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-list-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-bind-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-selector-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-ad-0.1.js" rel="preload">
대응 후 상호작용(TBT)이 개선되어 양호해졌다
AMP Optimzer 사용
AMP Optimzer 대응
대응 방법은 여러 가지가 있지만, 프레임워크 테이블의 AMP 페이지는 Firebase Function Express로 표현되어 있기 때문에 AMP 공식 강좌를 보면서 가져오기
설치하다.
npm install @ampproject/toolbox-optimizer
render 함수의 호출 실행optimatherconst AmpOptimizer = require("@ampproject/toolbox-optimizer");
const ampOptimizer = AmpOptimizer.create();
app.get("/amp/frames/:characterEnName", (req, res) => {
const character = characters.getCharacterByEnName(req.params.characterEnName);
if (character) {
res.status(200).render(
"amp/frame",
{
characterId: character.id
},
async (err, html) => {
const optimizedHtml = await ampOptimizer.transformHtml(html);
res.send(optimizedHtml);
}
);
} else {
res.status(404);
}
});
대응 후 왠지 모르게 CLS의 점수가 올라갔어요.🤔
AMP Optimzer의 대응이 있을 경우 "JavaScript Module 버전의 AMP 런타임 사용"이 새로운 대응 전략으로 제시될 수 있으므로 대응해 보았습니다.
const ampOptimizer = AmpOptimizer.create({
experimentEsm: true
});
대응 후 TBT의 속도가 높아졌지만 주의사항에 적힌 바와 같이 AMP 페이지가 무효가 되어 취소되었습니다😇
테스트 도구도 오류가 발생할 수 있습니다
총결산
결과는
preload과AMP Optimizer 두 개만 대응AMP 캐시가 유효하지만 AMP 페이지의 읽기 속도도 개선되었기 때문에 Eleventy 등 SSG로 개선하고 싶습니다
Reference
이 문제에 관하여(AMP 페이지 Experience Guide를 통한 AMP 고속), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/tiwu_dev/articles/8e752d06df39898d2047텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
