YellowLabTools: 웹 퍼포먼스와 품질 최적화 도구

YellowLabTools ↗ (YLT)는 오픈 소스 웹 퍼포먼스 및 웹 품질 도구입니다. 제 동료 Gaël Metais ↗가 개발했으며 많은 고객사에서 사용되고 있습니다. YLT는 정의한 특정 페이지 단위에서 사이트의 전반적 품질 상태를 정확하고 상세하게 파악할 수 있게 해줍니다.

YellowLabTools는 카테고리별로 똑똑하게 구성되어 있으며, 항목별 중요도에 맞춘 평가 체계로 100점 만점의 점수를 부여합니다. 테스트할 URL을 입력하고 에뮬레이션할 디바이스 유형(데스크톱, 태블릿, 모바일, 데스크톱 HD — retina급 화면)을 선택하면, 해당 페이지에 대한 테스트가 시작됩니다.

3년 넘게 웹 퍼포먼스 진단에서 이 도구를 사용해 온 경험상, 저는 고객사를 위한 웹 퍼포먼스 진단을 수행할 때 YLT를 반드시 사용하는 핵심 도구로 꼽습니다.

💡 YellowLabTools는 .htaccess 인증 처리, 쿠키 정의, 특정 외부 도메인(들)로의 요청 차단 등 더 고급 설정도 지원합니다.

페이지 무게

페이지 로딩을 빠르게 만드는 데 가장 중요한 기준은 페이지 무게(용량) 최적화입니다. 이 도구는 이미지(용량과 크기) 문제를 찾는 데 매우 유용하며, 사용된 압축 방식과 페이지 파일의 올바른 minification 여부도 점검합니다.

페이지 무게 항목을 클릭하면 콘텐츠 유형별(HTML, JS, CSS, 이미지, 비디오, webfont 등) 페이지 용량 분포를 확인할 수 있습니다.

내부 및 외부 요청

YellowLabTools는 테스트한 웹 페이지가 수행하는 모든 요청을 분석합니다. 총 요청 수뿐 아니라 호출된 서로 다른 도메인 수까지 알려줍니다(참고로, 새로운 도메인을 처음 탐색할 때마다 리소스 로딩이 약 50~150ms 지연될 수 있습니다).

같은 섹션에서, 화면에 표시되지 않는데도 로드되는 이미지가 있는지, 혹은 lazy-load로 지연 로딩이 가능할 법한 이미지의 URL까지 구체적으로 알려줍니다.

품질 진단 측면에서는 404( not found) 오류를 반환하는 리소스 요청이나, 서로 다른 두 리소스 간 동일한 콘텐츠도 식별합니다.

DOM 복잡도

DOM의 노드 수나 깊이는 웹 페이지 렌더링 지연의 흔한 원인입니다. 브라우저에 가장 부담이 큰 노드를 지적하는 것 외에도, YellowLabTools는 페이지 내 iFrame 수, 그리고 여러 요소에서 중복된 ID 속성 사용 여부까지 알려줍니다. 이는 getElementById 사용 시 JavaScript 오류로 이어질 수 있습니다.

JavaScript 코드 복잡도

JavaScript는 페이지에서 프리즈(멈춤) 현상의 주요 원인입니다(광고가 가득한 낚시성 기사 페이지에서 자주 목격됩니다).

사용자에게 부드러운 탐색 경험을 제공하기 위해, Yellow Lab Tools는 실행 시간, DOM 접근 횟수, scroll 이벤트 리스너 수에 기반해 JavaScript 코드의 복잡도도 측정합니다(참고로 스크롤 프리즈를 피하려면 scroll listener는 가능하면 하나만 두는 것이 권장됩니다).

JavaScript 실행 문제

CSS와 마찬가지로 JS 코드 실행에 문제가 있을 수 있습니다. YellowLab은 페이지 로딩 중 발생한 JS 오류를 기록하고, JavaScript에서 흔히 볼 수 있는 다른 나쁜 관행들도 포착합니다.

jQuery 사용

여기서는 jQuery 사용에 대한 찬반을 논하지 않겠습니다. 다만 Bootstrap조차 2020년 6월에 해당 라이브러리 의존성을 제거했다는 점은 참고할 만합니다.

WordPress는 아직도 기본적으로 jQuery를 포함하며, 다수의 테마가 여전히 그 기능에 의존합니다. 게다가 일부 플러그인이나 테마는 다른 버전의 라이브러리까지 추가로 로드하기도 합니다. 이 경우에도 YellowLabTools는 테스트한 페이지에서 jQuery가 중복 로드되는지 알려 주어 매우 유용합니다.

CSS 코드 복잡도

콘텐츠를 표시하고 페이지를 사용 가능하게 만드는 데 CSS는 필수지만, 지나치게 무겁고 복잡한 CSS는 렌더링의 큰 병목이 될 수 있습니다.

이 도구는 CSS 용량에 그치지 않고, 사용된 선택자의 복잡도 등 다운로드된 코드의 문제점을 지적하며, 사용된 색상을 점검해 일부를 통합할 수 있는지도 확인합니다.

CSS 문제

이 섹션은 도구의 가장 큰 강점 중 하나로, 사이트 CSS 소스의 주요 문제를 자세히 보여 줍니다.

Yellow Lab Tools는 @import 사용 여부(웹 퍼포먼스 측면에서 매우 좋지 않은 관행)를 검사하고, 중복되었거나冗長한 선택자도 알려 줍니다. 리소스 용량을 더 줄이기 위해, 오늘날 대다수 사용자에게 불필요한 IE 전용 선택자나 구형 브라우저용 코드도 찾아냅니다.

웹 품질 관점에서는 !important 규칙 사용 횟수와 CSS 문법 오류도 표시됩니다.

웹 폰트

폰트(서체)는 웹 퍼포먼스에서 중요한 주제입니다. 최적화가 잘되지 않은 폰트 파일은 사이트의 텍스트 표시를 지연시키고 페이지 용량을 쓸데없이 늘립니다. Yellow Lab Tools는 페이지에서 사용된 폰트 현황을 한눈에 파악하게 해 줍니다.

특히 일부 확장 기능이(대개 최적화가 미흡한) 폰트 파일을 가져오는 WordPress 환경에서 유용하며, YLT는 사용된 폰트 개수(폰트 굵기 1개 = 파일 1개), 글리프 수, 폰트 포맷이 최적화되었는지(예: WOFF2)까지 알려 줍니다.

서버 구성

헤드리스 브라우저로 페이지를 스캔하는 것만으로는 한계가 있지만, Yellow Lab Tools는 서버 측 일부 항목도 점검합니다. 너무 짧거나 아예 없는 캐시 시간, SSL 인증서 문제 등을 감지할 수 있습니다.

YellowLabTools: 웹 퍼포먼스와 품질을 위한 궁극의 도구인가?

제게 이 도구는 모든 웹 퍼포먼스 진단에서 반드시 써야 하는 must-use 도구입니다. 사이트에서 빠르게 적용할 수 있는 웹 퍼포먼스 “퀵윈”을 매우 신속하게 찾아냅니다.

권장된 최적화를 모두 적용하면 사이트는 훨씬 더 빨라집니다. 빠른 사이트가 굳이 100/100 점수를 받을 필요는 없습니다. 점수는 어디까지나 객관적 지표일 뿐이며, 여러분의 환경이나 브랜드의 기술적 제약을 반영하지는 않습니다. 웹 퍼포먼스 전문가 또는 에이전시는 YellowLab이나 Google PageSpeed 같은 도구만 여는 데서 그치지 않습니다. JavaScript 코드를 계측하고, 사이트 리소스의 preload 가능성을 검토하며, 백엔드(서버 응답 시간) 최적화를 위해 여러분의 개발팀과 함께 작업합니다. 빠른 사이트가 필요하시다면 연락해 주세요!