Lexique Web Performance

A/B Testing 도구는 소스 코드를 수정하지 않고도 변경 사항을 적용하고, 귀하의 사이트를 탐색하는 사용자에게 동일한 페이지의 여러 버전을 비교할 수 있게 해줍니다. 각 버전의 전환율을 측정하면, 사이트 코드에 해당 변경을 실제로 반영하기 전에 테스트가 유의미한 결과를 내는지 판단할 수 있습니다.

“Asynchronous JavaScript and XML”을 의미하며, 이 기술은 브라우저가 서버와 비동기적으로 통신할 수 있게 하여 사용자가 페이지를 다시 로드할 필요가 없게 한다. AJAX라는 용어는 일반적으로 jQuery 라이브러리와 연관되지만, XHR 요청 시에도 사용된다.

front-end와 대비되는 개념으로, back-end는 사용자에게 보이지 않는 코드입니다. 이는 빙산의 수면 아래에 있는 부분에 비유되며, 데이터베이스 트랜잭션과 사용자의 각 동작 뒤에 있는 로직을 처리합니다. back-end 코드는 웹 서버에서 실행됩니다.

사용자 기기의 리소스가 과도하게 점유될 때, 웹 페이지가 멈추거나 사용자 상호작용에 매우 느리게 반응하는 시간.

텍스트 리소스(HTML, CSS, JS, …)의 용량을 줄일 수 있게 해주는 압축 알고리즘. Gzip 이후에 등장했으며, 더 나은 압축 성능을 제공하고 브라우저가 압축된 리소스를 다운로드하는 시간을 단축한다.

Cumulative Layout Shift는 시간 경과에 따라 웹 페이지의 시각적 안정성을 측정하는 성능 지표입니다. Core Web Vitals 중 하나로서, CLS는 Google의 CrUX에서 고려됩니다.

Consent Management Platform(CMP)은 일반적으로 쿠키 배너라고 불립니다. 동의 관리 플랫폼은 사용자가 사이트에 처음 방문할 때 추적과 쿠키 저장에 관한 선호를 수집할 수 있게 해줍니다. RGPD를 준수하기 위해 개인정보를 처리하는 사이트에는 반드시 CMP가 존재합니다. 이러한 스크립트는 webperf 테스트를 왜곡하므로 쿠키 동의 배너를 우회할 방법을 찾는 것이 중요해졌습니다.

Chrome User Experience Report는 Google의 도구로, 실제 사용자 데이터에 기반해 페이지나 사이트의 성능 수준을 파악할 수 있게 해줍니다. 수치를 얻기 위해 호환되는 브라우저(요약하면 Chrome Desktop과 Android)가 웹 성능 지표(그중 Core Web Vitals 포함)를 수집합니다. 수집된 데이터는 매월 공개 BigQuery에 집계되며 Search Console에서 확인할 수 있습니다.

Domain Name System(DNS) 프로토콜은 브라우저가 주소 지정 시스템을 통해 각 도메인 이름을 해당 서버와 연결하는 데 사용됩니다. 도메인 이름을 IP 주소와 매핑하기 위해 도메인 소유자는 다양한 유형의 레코드로 구성된 DNS 존을 구성하며, 이를 통해 이메일을 관리하고, 웹 서버를 가리키거나, 리디렉션을 설정할 수 있습니다.

Document Object Model은 브라우저가 HTML 태그들의 집합으로 정의한 웹 리소스의 구조를 표현한 것입니다. 각 태그는 노드라고 불립니다. DOM은 노드의 수정, 추가 또는 삭제에 따라 JavaScript로 동적으로 조작할 수 있습니다.

Fallback은 사용자의 브라우저와 호환되지 않거나 접근할 수 없는 기능이나 리소스가 있을 경우, 이를 대체할 수 있는 대안을 제공하는 우회 방식을 말합니다.

First Contentful Paint는 페이지에서 첫 번째로 눈에 보이는 요소가 표시되는 데 걸리는 시간을 측정하는 성능 지표입니다. 이는 텍스트, 이미지, 또는 간단한 HTML 요소일 수 있습니다. FCP는 동기 스크립트나 스타일시트와 같은 차단 리소스의 영향을 매우 크게 받습니다. 이는 첫 번째 프론트엔드 지표이며 웹 페이지의 라이프사이클에서 TTFB 다음 단계에 해당합니다.

First Input Delay는 페이지가 원활하게 상호작용 가능한 상태로 간주되기까지 걸리는 시간을 측정하는 성능 지표입니다. 이는 3가지 Core Web Vitals 중 하나이지만, 웹사이트 UX를 더 잘 반영하기 위해 2024년에 INP로 대체될 예정입니다. 양호한 FID는 100ms 미만이며, 300ms를 초과하면 나쁩니다. 이 지표는 2024년에 INP로 대체됩니다.

프론트엔드는 방문자가 볼 수 있고 접근할 수 있는 웹사이트의 가시적인 부분입니다. 백엔드와 달리, 이는 브라우저에서 동작하며 사이트가 로드하는 리소스, 서드파티, 또는 사용자 브라우저에 설치된 확장 프로그램에 의해 조작될 수 있습니다.

서버 측(백엔드 언어인 PHP나 Java, 데이터베이스용 SQL 문법)과 브라우저 측(HTML, CSS, Javascript, …)의 기술 환경을 처음부터 끝까지 모두 숙달했을 때, 그 개발자를 풀스택이라고 한다.

웹 서버에서 텍스트 리소스(html, CSS, JS 등)의 용량을 줄이기 위해 사용하는 압축 알고리즘입니다. 이 알고리즘은 Brotli보다 오래되었고 리소스 용량을 줄이는 효과는 더 작지만, 압축 해제 속도는 더 빠릅니다.

Apache 웹 서버는 사용자가 어떤 리소스나 웹 페이지를 받기 전에 .htaccess와 .htpasswd 파일을 먼저 확인합니다. 이 파일들은 URL 재작성(예: .php나 .html 같은 파일 확장자 제거)과 같은 지시를 내릴 수 있고, 브라우저 캐시 기간을 설정할 수도 있습니다. .htpasswd 파일은 로그인/비밀번호 프롬프트를 통해 폴더 접근을 보호합니다.

HTML(HyperText Markup Language)는 웹 페이지의 구조를 정의하는 데 사용하는 언어입니다. 프로그래밍 언어가 아니며, 각기 다른 역할을 가진 많은 태그로 구성되어 있습니다. HTML 태그에는 문단, 이미지, 표, 비디오 등이 포함됩니다. 웹 페이지의 전체 HTML 코드는 DOM이라고 합니다.

Iframe은 다른 문서 안에 웹 페이지를 표시할 수 있게 해주는 HTML 요소입니다. Iframe은 테두리를 표시하거나 숨길 수 있고, 지정한 크기로 렌더링되지만, 자신이 포함된 상위 문서를 변경할 수는 없습니다. 광고 퍼블리셔들이 자주 사용하는 HTML 태그입니다.

인라인 코드는 HTML 페이지의 DOM 내부에 직접 삽입됩니다. 문서에서 호출하는 외부 파일과 달리 인라인 코드는 캐시되지 않습니다. 가장 일반적인 인라인 태그로는 CSS를 위한