WebPageTest의 새로운 기회 및 실험: 거의 모든 것을 테스트

웹 개발자의 SEO 접근 방식에 지금보다 더 좋은 때는 없었습니다.

새로운 도구와 친숙한 모든 도구와 리소스가 우리를 위해 혁신적이고 개방적인 옵션을 제공하는 속도도 우리가 따라잡아야 합니다. 최근 Google이 알고리즘 업데이트 및 측정항목 계산 변경 사항을 출시함에 따라 성능 최적화에 대한 요구사항이 더 많아졌습니다.

익숙해야 하는 도구 중 하나는 WebPageTest입니다. 그들은 최근 몇 가지 매우 유용한 완전히 통합된 테스트 도구를 출시했습니다.

WebPageTest는 이제 Netlify를 통해 실시간 사용자 지정 HTML 수정을 프록시하여 사용자 인터페이스 내에서 바로 비교 테스트를 실행합니다. 코딩이 필요하지 않습니다.

천재는 말이 된다

세 가지 큰 관심 영역의 스마트 응용 프로그램 논리가 거품 검색 결과를 제공하지만 텍스트 광고 문구뿐만 아니라 비교를 위해 변형 조합을 실행할 수 있도록 준비된 재테스트 옵션이 있습니다. WebPageTest에서 사용할 수 있는 테스트 배열은 이제 직접 테스트할 수 있는 항목을 복제하는 타사 프록시 도구를 사용하여 테스트를 설정할 필요가 없음을 의미합니다.

이것은 이전에 모두 기술적으로 가능했으며 원래의 접근 방식이 계속해서 중요합니다.

인상적으로 포괄적이지만 선택한 프록시 호스트를 사용하여 실행해야 하는 테스트가 항상 있습니다. 그러나 이를 위해서는 JavaScript 및 Cloudflare를 처리해야 합니다.

WebPageTest를 사용하면 가리키고 클릭할 수 있습니다.

성가신 실험실 데이터

실험실 테스트에서 가능한 최상의 숫자 조합이 현장에서 동일한 숫자를 산출하지 않을 수 있음을 항상 염두에 두십시오. 실제로 웹 사이트 기능이 손상될 수 있습니다.

스크립트와 스타일에는 개발자가 정의한 로드 순서가 있습니다. 여기서 변경 사항은 프로덕션에 적합하지 않은 주요 변경 사항을 의미할 수 있습니다. 프록시 호스트는 최적화 프로세스의 일부로 QA에 대한 액세스를 제공할 수 있습니다.

그 경고를 무시하고 HTML 최적화를 시연하기 위한 테스트베드가 있다는 것이 얼마나 좋은지 알려드리겠습니다. 이것은 1년이 훨씬 넘는 기간 동안 우리 워크숍과 회의 세션의 기초가 되었습니다.

우리의 검색 엔진 랜드 가이드 기사는 테스트베드를 설정하는 데 도움이 될 수 있습니다. 우리는 SMX Advanced에서 업데이트된 버전을 사용할 것입니다. 당신이 그것을 할 수 있다면 우리와 라이브로 참여하십시오.

기회

WebPageText의 기회 텍스트는 보고서의 모든 사용자가 사용할 수 있습니다.

HTML 변형 비교를 실행하기 위해 더 이상 JavaScript 기술이 필요하지 않습니다. 대신 실험이라는 레이블이 붙은 내장 프록시 테스트를 실행하려면 유료 계정이 필요합니다.

무료 계정을 사용하면 보고서 및 기록에 더 쉽게 액세스할 수 있지만 실험을 실행할 수는 없습니다. 여전히 무료로 JavaScript를 작성하고 자체 테스트를 프록시할 수 있습니다.

그것은 편리하지 않으며 너무 많은 시간이 걸립니다.

실험

WebPageTest 보고서에서 기회 및 실험 메뉴 항목을 선택하면 종합적인 결과 목록이 표시됩니다.

여기서 기회는 실제 테스트 조건(가능한 경우 하드웨어로 시뮬레이션)에서 파생됩니다. 우리의 테스트는 렌더링 차단 리소스 변형(일반적으로 JavaScript 및 CSS), 지연 로드된 이미지, 자체 호스트 타사 스크립트 등으로 실험을 다시 테스트할 수 있는 기회를 나타냈습니다.

인터페이스를 사용하여 비동기, 지연 또는 인라인 스크립트 및 스타일시트를 테스트합니다. 우리는 이러한 테스트를 프록시하기 위해 Cloudflare Worker JavaScript를 작성했으며 바닥글을 포함하여 페이지 하단으로 콘텐츠 로드를 지연시키는 인라인 스타일 규칙도 추가했습니다. WebPageTest 통합의 초기 배열은 원래 테스트의 전부는 아니지만 대부분을 처리할 수 있습니다.

이제 테스트를 통합할 수 있습니다.

테스트 설정을 수정하고 변형 실행을 시작하여 전반적으로 녹색 Core Web Vitals의 성배를 연마하십시오. 이 제품은 놀라울 정도로 포괄적이며 웹 페이지의 성능에 영향을 미치는 것보다 훨씬 더 많은 것을 다룹니다.

다음 질문에 따라 실험 기회를 그룹화하는 세 가지 범주를 찾을 수 있습니다.

• 빠른가요? Quickness는 성능 최적화 실험을 분류하고 그룹화합니다.
• 사용할 수 있습니까? 사용성은 화면 판독기를 엉망으로 만들 수 있는 HTML 유효성 검사 오류와 레이아웃 변경에 영향을 주는 항목을 그룹화합니다.
• 탄력이 있습니까? 복원력은 혼합 프로토콜을 포함한 보안 문제에 적용됩니다. 확인란 인터페이스로 테스트 설정을 수정하고 변형 실행을 시작하십시오. 비교 보고서에서 세련된 옵션을 얻을 수 있습니다.

테스트 스위트용 대시보드

WebPageTest는 테스트 제품군의 대시보드와 유사해야 하며 Lighthouse보다 더 자세한 정보를 제공하고 Chrome Dev Tools보다 훨씬 더 나은 폭포수 차트 표현을 제공하는 내부 보고를 관리해야 합니다.

포인트 앤 클릭이 사실이지만 "코드 없는" 환경에서 HTML 실험을 실행할 수 있지만 제공된 세부 정보와 탐색에는 경험이 필요하며 코딩 경험이 가장 좋습니다.

새로운 기본 제공 실험은 모든 JavaScript를 제거하여 다른 Cloudflare 작업자 작업을 복제합니다. 액세스할 수 있는 그러한 항목을 갖는 것은 테스트 변형을 위한 스크립트를 작성하는 것보다 매우 편리합니다.

고급 실험을 통해 주요 위치에 HTML을 삽입하고, 로드 순서를 변경하기 위한 전술을 테스트하고, 리소스를 로드하지 못하거나 축소를 포함하여 리소스를 수정할 수 있습니다.

말 그대로 기술적으로 우리가 모든 페이지에서 거의 모든 것을 테스트하지 못하도록 막는 것은 없습니다.

성공의 구덩이에 빠지다

비교 보고서 자체는 더 많은 변형을 선택하고 다시 테스트하도록 유도하는 역할을 합니다. 결과 메트릭 배너에는 대조군과 실험군 사이에 색상으로 구분된 개선 및 악화 점수가 포함됩니다.

실험 스위치의 하위 집합이 있는 나머지 기회 섹션이 아래에 나타납니다. 클릭하면 상당한 개선 효과를 얻을 수 있습니다.

우리는 SMX Advanced에서 시연을 위한 테스트를 작성하기 위해 열심히 노력했으며 우리가 라이브가 되면 우리가 사용한 바로 그 도구에 대한 이 주요 업데이트를 다룰 것으로 기대할 수 있습니다. 훨씬 쉬울 것입니다.

WebPageTest 실험 통합의 빠른 텍스트 주기가 우리가 이미 제공할 준비를 하고 있는지 확인할 것입니다. 우리가 전반적으로 녹색에 도달할 수 있는지 봅시다.