CSS- 트릭에 대한 WebPageTest 세션의 학습-CSS 튜토리얼-php.cn

CSS- 트릭에 대한 WebPageTest 세션의 학습

나는 다른 날 WebPagetest에서 Over에서 Tim Kadlec과 함께 CSS- 트릭에서 약간의 성능 테스트를 수행했습니다. 본질적으로 도구를 사용하고, 찌르고, 수행 할 성능 통증 지점을 식별하십시오. 사이트에서 또는 Twitch 채널에서 비디오를 바로 볼 수 있습니다. 이는 이와 같은 더 많은 성과 조사를 위해 구독 할 가치가 있습니다.

웹 성능 작업은 두 가지입니다.

1 단계) 사물을 측정하고 문제를 탐색하십시오
2 단계) 고정하십시오

Tim과 저는 WebPagetest 인 놀라운 도구를 통해 1 단계를 많이했습니다. 우리가 찔러서 메모를했습니다. 우리는 많은 문제 영역을 발견했습니다. 물론, 그 후에, 나는 그것들을 머리에서 꺼내지 못했기 때문에, 나는 최대한 빨리 행동하고 2 단계를해야했고, 나는 대부분의 일을하고 개선을 보았다고보고하게되어 기쁩니다. 파헤쳐 보자!

식별 문제 #1) 불량한 LCP

LCP (Last Contentful Paint)는 CWV (Core Web Vitals) 중 하나이며, Google이 SEO 요소라고 Google을 신중하게보고 있습니다. 내 LCP는 3.993 년대에서 시계를 기록했습니다.

나는 Tim에게서 첫 번째 콘텐츠 페인트 (FCP)에 LCP가 포함되어 있으면 이상적이라는 것을 배웠습니다. WebPagetest를 통해 발생하지 않았다는 것을 알 수있었습니다.

고칠 것들 :

궁극적으로 큰 이미지 인 LCP 영역이 올바르게 최적화되어 있고 반응 형 SRCSET을 가지고 있으며 CDN이 호스팅되어 있는지 확인하십시오. 그 모든 것들이 특정 이미지에서 다른 곳에서 일하는 데 실패했습니다.
LCP 이미지에는 로딩 = "게으른"가 있었는데, 우리가 방금 배운 것은 좋은 곳이 아닙니다.

수정 기술 및 학습 :

모든 적절한 이미지 처리 물건이 제자리에 있었지만 어떤 이유로 든 .gif 파일에는 적합하지 않습니다. 이는 그 이미지가 테스트 당일이었던 것입니다. 어쨌든 해당 영역에 .gif 파일을 사용해서는 안됩니다.
LCP 이미지의 게으른 하중을 끕니다. 이것은 WordPress 주요 이미지이므로 본질적으로 php the_post_thumbnail ( '', array ( 'loading'=> 'eger')); ?>. 인라인 이미지라면 는 WordPress에게 알아야 할 사항을 알려줍니다.

식별 된 문제 #2) 첫 바이트 렌더 간격을 시작합니다

팀은 이것을 상당히 명백한 문제로 바로 보았습니다.

위의 폭포에서 (Matt Hobbs의 폭포 읽기에 대한 슈퍼 자세한 기사)에서 HTML이 약 0.5 초 안에 도착하는 것을 볼 수 있지만 렌더링의 시작 (사람들이 보는 것, Big Green Line)은 약 2.9 초까지 시작되지 않습니다. 너무 길다.

차트는 또한 노란색 선으로 문제를 식별합니다. 타사 CSS 파일에 연결 한 다음 사용자 지정 글꼴이 포함 된 내 CSS 파일로 리디렉션했습니다 . 그 리디렉션은 시간이 걸리고, 우리가 1 페이지로드 타임뿐만 아니라 모든 페이지로드, 심지어 캐시 된 페이지로드를 파헤 쳤다.

고칠 것들 :

CSS 파일 리디렉션을 제거하십시오.
셀프 호스트 글꼴.

수정 기술 및 학습 :

어쨌든 나는 새로운 글꼴을 눈에 띄게 만들었습니다. 나는 얼마 전 Mass-Driver의 라이센스 혁신 (직원의 가격이 책정)을 정말 좋아한다고 지적했지만 MD 프라이머도 마찬가지로 좋아했기 때문에 구입했습니다. 신체 유형의 경우 Blanco와 함께 편안한 세리프를 고수했습니다. Blanco는 매우 최적의 Ribbi ¹ 버전과 함께 자비 롭게 제공되었습니다. 다음에 맹세 할 때는 가변 글꼴을 찾을 것입니다.하지만 때로는 마음을 따라야합니다. 나는 이것들을 구입했고 지금은 폰트 파일을 자조적으로 주최하고있다.
리디렉션없이 내 CSS에서 @font-face를 오른쪽으로 사용하십시오. 또한 Font-Display : Swap;, 그러나 그 하중 기술에 대해 조금 더 작동해야합니다. 크기 조정을 기다릴 수 없습니다.

제자리의 변경으로 다시 테스트 한 후 큰 기사 페이지에서 시작 렌더가 4G 연결에서 2 초 더 빠릅니다.

식별 된 문제 #3) 그리드 가이드의 CLS가 나쁘다

Tim은 페이지에서 누적 레이아웃 시프트 (CLS)를 측정하기 위해 소매를 깔끔하게 트릭했습니다. WebPagetest에게 페이지를 아래로 스크롤하도록 지시 할 수 있습니다. 스크롤로 인해 레이아웃 이동이 발생할 수 있기 때문에 CLS와 같은 경우에 중요합니다.

CLS 및 WebPagetest에 대한이 기사를 참조하십시오.

트릭은 고급 설정을 사용하여 테스트 중에 사용자 정의 자바 스크립트를 페이지에 주입하는 것입니다.

이 시점에서, 우리는 홈페이지가 아니라 의도적으로 매우 중요한 페이지 인 그리드에 대한 완전한 가이드를 테스트하고있었습니다. 이것을 사용하면 CWV가 훨씬 더 나쁜 모양을 볼 수 있습니다.

LCP에 대해 정확히 어떻게 생각 해야할지 모르겠습니다. 그것은 페이지 아래에서 가장 큰 이미지가되는 일에 의해 유발되고 있습니다.

CLS 는 이동하는 레이아웃이 항상 사용자에게 불쾌하기 때문에 CLS는 나에게 더 중요합니다. 이 점이 정렬 된 주황색 선을 모두 보시겠습니까? 그것은 CLS가 일어나고 있습니다 :

고칠 것들 :

게으른로드 된 이미지가 들어오고 레이아웃을 이동하기 때문에 CLS는 나쁩니다.

수정 기술 및 학습 :

모르겠습니다! 모든 이미지는 인라인 element입니다. 게으른 하중은 CLS를 유발할 수 있지만 ,이 이미지는 적절한 너비와 높이 속성을 가지고 있으며, 이는로드되기 전에도 이미지 (종횡비 덕분에 유체 일 때도)에 필요한 정확한 공간을 예약해야합니다. 그래서… 무엇을 제공합니까? 그들이 SVG이기 때문입니까?

누구든지 알고 있다면 자유롭게 나를 때리십시오. 이것이 성능 작업의 본질입니다. 그것은 바보 같은 실수, 싸우고 이길 수있는 작은 전투, 때로는 이기기가 더 어려운 외부의 영향과 관련이있는 더 큰 전투, 그리고 치유하는 데 시간이 걸리는 신비한 미지의 혼합입니다. 다행스럽게도 우리는 우리 사이트에서 일어나는 실제 이야기를 알려주는 WebPagetest와 같은 도구를 가지고 있으며 이러한 공연 전투와 싸우는 데 필요한 통찰력을 제공합니다.