Node.js WebPageTest API wrapper 로 여러 url을 테스트하는 js 파일 소스

Node.js WebPageTest API wrapper  로 여러 url을 테스트하는 js 파일 소스

 

//WebPageTest 모듈을 가져오고 있습니다. 이 모듈은 WebPageTest API와 상호 작용할 수 있게 해줍니다.
import WebPageTest from "webpagetest";

//WebPageTest 클래스의 인스턴스를 생성하고, 이를 사용하여 API에 연결합니다. 
//여기서 "www.webpagetest.org"는 WebPageTest API의 엔드포인트이며, "YOUR_API_KEY"는 실제 API 키로 대체되어야 합니다.

const wpt = new WebPageTest("www.webpagetest.org", "YOUR_API_KEY");
//마지막 결과를 저장할 배열을 초기화합니다.
const finalResults = [];

//테스트할 웹 페이지의 URL 목록을 정의합니다.
// Your list of URLs to test
let urls = [
  "https://www.webpagetest.org/",
  "https://www.product.webpagetest.org/api",
  "https://docs.webpagetest.org/api/",
  "https://blog.webpagetest.org/",
  "https://www.webpagetest.org/about",
];

//테스트에 사용할 옵션을 설정합니다. 
//첫 번째 뷰만 테스트하고, 
//위치에서 Chrome 브라우저를 사용하며, 
//네이티브 네트워크 연결을 사용하고, 
//결과를 폴링하여 가져오는 데 소요되는 시간과 타임아웃을 설정합니다.
let options = {
  firstViewOnly: true,
  location: "Dulles:Chrome",
  connectivity: "Native",
  pollResults: 5,
  timeout: 240,
};

//특정 URL에 대한 테스트를 실행하는 함수를 정의합니다. 이 함수는 프로미스를 반환합니다.
const runTest = (wpt, url, options) => {
  return new Promise((resolve, reject) => {
    console.log(`Submitting test for ${url}...`);
    wpt.runTest(url, options, async (err, result) => {
      try {
        if (result) {
          return resolve(result);
        } else {
          return reject(err);
        }
      } catch (e) {
        console.info(e);
      }
    });
  });
};


//비동기 함수를 선언하고 즉시 실행합니다. 이 함수는 각 URL에 대한 테스트를 실행하고 결과를 가져옵니다.
(async function () {
  //urls 배열의 각 URL에 대해 runTest 함수를 실행하고, 모든 테스트가 완료될 때까지 기다립니다.
  Promise.all(
    urls.map(async (url) => {
      try {
        //각 URL에 대한 테스트를 실행하고 결과를 기다린 다음, 결과가 준비되면 해당 데이터를 finalResults 배열에 추가합니다.
        await runTest(wpt, url, options).then(async (result) => {
          if (result.data) {
            let median = result.data.median.firstView;
            //Pushing the data into the Array
            finalResults.push({
              id: result.data.id,
              url: result.data.url,
              /* Cumulative Layout Shift (CLS)**는 웹 페이지의 **시각적 안정성(Visual Stability)**을 측정하는 지표입니다.
              이는 페이지가 로드되는 동안 얼마나 큰 요소들이 얼마나 이동하는지를 확인합니다
              CLS는 Google이 페이지 경험을 측정하는 데 사용하는 Core Web Vitals 지표 중 하나입니다
              레이아웃 이동 (Layout Shift): 레이아웃 이동은 웹 페이지의 내용이 예상치 않게 "이동"하거나 "변경"하는 경우를 의미합니다. 
              예를 들어, 페이지를 읽고 있던 중에 늦게 로드되는 광고가 갑자기 나타나서 텍스트 내용을 아래로 밀어버리는 상황이 이에 해당합니다.
              Cumulative Layout Shift (CLS): 단일 방문에서 여러 개의 별개 레이아웃 이동 이벤트가 발생할 수 있습니다. 
              따라서 CLS 지표는 페이지 전체의 예상치 않은 레이아웃 이동의 총량을 측정합니다. 이는 사용자 경험을 평가하는 데 중요한 지표입니다.
              왜 CLS가 중요한가?: 높은 CLS 점수는 사용자 경험을 저하시키며 사이트의 SEO에도 영향을 미칠 수 있습니다. 
              페이지가 예상치 않게 이동하면 사용자가 의도하지 않은 동작을 수행할 수 있습니다.
              따라서 웹 페이지의 시각적 안정성을 향상시키기 위해 CLS를 주시하고 최적화하는 것이 중요합니다! */
              cls: median["chromeUserTiming.CumulativeLayoutShift"],

              /* Largest Contentful Paint (LCP)**는 웹 페이지의 **시각적 안정성(Visual Stability)**을 측정하는 지표입니다.
              이는 페이지가 로드되는 동안 뷰포트 내에서 가장 큰 콘텐츠 요소가 얼마나 빨리 렌더링되는지를 나타냅니다
              레이아웃 이동 (Layout Shift): 페이지의 콘텐츠가 예상치 않게 이동하거나 변경되는 경우를 의미합니다.
              예를 들어, 페이지를 읽고 있던 중에 늦게 로드되는 광고가 갑자기 나타나서 텍스트 내용을 아래로 밀어버리는 상황이 이에 해당합니다.
              LCP 측정: LCP는 페이지의 주요 내용이 화면에 렌더링되는데 걸리는 시간을 측정합니다. 
              이는 사용자 경험을 평가하는 데 중요한 지표입니다.
              따라서 웹 페이지의 시각적 안정성을 향상시키기 위해 LCP를 주시하고 최적화하는 것이 중요합니다! */
              lcp: median["chromeUserTiming.LargestContentfulPaint"],

              /* Total Blocking Time (TBT)**는 웹 페이지의 사용자 입력 응답성을 측정하는 성능 지표입니다.
              이 지표는 First Contentful Paint (FCP) 이후에 메인 스레드가 충분히 오랫동안 차단되어 입력 응답성이 떨어지는 시간을 총합적으로 측정합니다
              레이아웃 이동 (Layout Shift): 페이지의 콘텐츠가 예상치 않게 이동하거나 변경되는 경우를 의미합니다. 
              예를 들어, 페이지를 읽고 있던 중에 늦게 로드되는 광고가 갑자기 나타나서 텍스트 내용을 아래로 밀어버리는 상황이 이에 해당합니다.
              TBT 측정: TBT는 페이지의 주요 내용이 화면에 렌더링되는데 걸리는 시간을 측정합니다. 이는 사용자 경험을 평가하는 데 중요한 지표입니다.
              메인 스레드 차단 (Main Thread Blocking): 메인 스레드는 50밀리초(ms) 이상 실행되는 **긴 작업(Long Task)**이 발생할 때 "차단"되었다고 간주됩니다. 
              사용자가 긴 작업이 진행 중인 동안 페이지와 상호작용하려고 할 때 브라우저는 작업이 완료될 때까지 기다려야 합니다.
              이러한 작업이 길면(50ms 이상) 사용자는 지연을 느끼고 페이지를 느리게 느낄 수 있습니다.
              TBT 계산: 각 긴 작업의 차단 시간은 50ms를 초과하는 지속 시간입니다.
              페이지의 총 차단 시간은 측정 기간(일반적으로 페이지 로드 도구에서는 TTI 또는 다른 도구에서는 총 추적 시간) 내에서 FCP 이후에 발생한 각 긴 작업의 차단 시간의 합입니다.*/
              tbt: median["TotalBlockingTime"],
            });
          }
        });
      } catch (e) {
        console.error(e);
      }
    })
  ).then(() => {
    ////모든 테스트가 완료되면 최종 결과를 출력합니다.
    console.info(finalResults);
  });
})();