목차 💡  메인 스레드란?💡  메인 스레드 작업을 최소화하면 페이지 성능에 어떤 영향을 줍니까?💡  메인 스레드 작업을 최소화하는 방법은 무엇입니까?       웹 페이지가 로딩되는 동안 브라우저의 메인 스레드는 페이지를 렌더링하고 상호작용을 처리합니다. "Minimize main-thread work"는 사이트 성능의 관점에서 높은 영향을 주는 감사입니다. 이 메인 스레드에서 수행되는 작업을 최소화하여 페이지가 빠르게 로딩되고 사용자가 페이지와 상호작용하는 동안 지연이 발생하지 않도록 하는 것을 목표로 합니다. 이를 위해 불필요한 JavaScript 실행, CSS 레이아웃 계산, DOM 조작 등을 최소화하고, 효율적인 코드 및 리소스 관리를 통해 웹 페이지의 성능을 향상시킵니다.   💡  메인 ..

목차 💡 사용하지 않는 자바스크립트 유형💡 사용하지 않는 JavaScript는 페이지 성능에 어떤 영향을 줍니까?💡  사용하지 않는 JavaScript를 줄이는 방법은 무엇입니까?       사용하지 않는 JavaScript 코드를 줄이면 웹 페이지의 로딩 속도가 향상되고 사용자의 페이지 경험을 향상시킬 수 있습니다. JavaScript 파일은 기본적으로 브라우저의 렌더링을 차단하므로, 브라우저가 다른 페이지 로드 작업을 처리하는 데 방해됩니다. 결과적으로, 페이지의 "First Paint"가 지연되며 사용자는 웹 페이지가 느리게 로딩되는 것을 경험하게 됩니다. 이러한 이유로 사용하지 않는 JavaScript를 로드하는 것은 측정 가능한 성능 및 사용자 경험에 부정적인 영향을 미칩니다. 따라서 사용..

목차 💡 JavaScript 번들의 중복 모듈은 페이지 성능에 어떤 영향을 줍니까?💡 이 감사를 수정하는 방법은 무엇입니까?   JavaScript 번들은 웹 페이지가 여러 기능을 가지고 있고 각 기능에 해당하는 JavaScript 코드가 따로 있다면, 이 코드들을 하나의 큰 그룹으로 묶어서 번들이라고 부릅니다. 이렇게 번들링된 JavaScript 파일은 웹 페이지가 로딩될 때 모두 함께 다운로드되고 실행됩니다. 대부분의 웹 페이지에서 JavaScript 번들은 일반적으로 인기있는 라이브러리, 의존성 및 패키지에서 코드를 가져와서 구성됩니다. 이로 인해 종종 여러 출처에서 중복 모듈을 상속받을 수 있습니다. JavaScript 번들에서 중복 모듈을 제거하면 방문자에게 불필요한 JavaScript 코드..

목차 💡 사용자 타이밍 표시 및 측정은 무엇을 의미하고 왜 필요한가요?💡 사용자 타이밍 표시 및 측정값을 설정하는 방법은 무엇입니까?   웹 성능은 사용자 경험의 핵심입니다. 빠른 웹 페이지 로딩과 원활한 상호 작용은 사용자 만족도를 높이고 전환율을 향상시킬 수 있습니다. 사용자 타이밍 표시와 측정은 웹 페이지 성능을 이해하고 최적화하기 위한 중요한 도구입니다. 웹 성능 최적화는 웹 페이지가 얼마나 빨리 로드되는지를 이해하는 것에 관련이 있습니다. 현대 웹에서 JavaScript는 성능 저하의 주요 원인 중 하나입니다. User Timing API는 JavaScript 성능 측정을 위한 도구로, JavaScript 코드에 API 호출을 추가하여 웹 애플리케이션의 실행 시간을 측정하고 시각화할 수 있습..

목차 💡 뷰포트 메타 태그를 사용하지 않는 것이 페이지 성능에 어떤 영향을 줍니까?💡 뷰포트 메타 태그를 사용하는 방법은 무엇입니까?   뷰포트 메타 태그()는 웹 페이지의 뷰포트(화면에 표시되는 영역) 크기와 확대 비율을 설정하는 데 사용됩니다. 이 태그를 사용하면 웹 페이지가 다양한 디바이스와 화면 크기에 맞게 올바르게 표시되도록 조절할 수 있으며, 모바일 기기에서 웹 페이지가 올바르게 렌더링되도록 도와줍니다. 뷰포트 메타 태그를 사용하지 않으면 웹 페이지는 데스크톱 버전처럼 렌더링되어 모바일 화면에 맞지 않을 수 있고, 사용자 경험을 저해할 수 있습니다. 또한, 모바일 브라우저에서 렌더링 지연이 발생할 수 있어 First Input Delay (FID)와 같은 성능 지표에도 영향을 미칠 수 있습..

목차 💡 모든 페이지 리소스에 HTTP/2를 사용하면 페이지 성능에 어떤 영향을 줍니까?💡 모든 리소스에 HTTP/2 사용하는 방법은 무엇입니까?   HTTP/2는 HTTP/1.1에서 발견되는 많은 제한 사항을 극복합니다. 이는 더 많은 병렬 요청을 처리하기 위한 더 높은 연결 제한과 낮은 프로토콜 오버 헤드를 포함합니다. 이로 인해 페이지 로드 속도가 크게 향상되며, 웹 애플리케이션도 더 빨라지고 안정적이게 됩니다. HTTP/2는 2015년에 공식적으로 표준으로 채택되었습니다. 이전의 HTTP/1.1과 비교하여 HTTP/2는 여러 가지 성능 개선을 제공하며, 웹 사이트의 로딩 시간과 성능을 향상 시킵니다. HTTP/2는 현재 웹에서 널리 사용되며, 많은 웹 서버와 브라우저가 지원하고 있습니다. HT..

목차  💡 너비와 높이가 명시되지 않은 이미지 및/또는 비디오 요소는 페이지 성능에 어떤 영향을 줍니까?💡 이미지 요소에 명시적 너비와 높이 사용하는 방법은 무엇입니까?    이미지와 비디오가 명시적인 너비와 높이 속성이 없는 경우, 브라우저는 이러한 미디어 리소스의 크기를 로드하기 전까지 알 수 없습니다. 이로 인해 크기가 큰 레이아웃 이동이 발생할 수 있습니다. 크기가 큰 레이아웃 이동은 페이지 로딩 중에 이미지 또는 비디오가 나타날 때까지 페이지의 레이아웃이 조정되지 않은 상태에서 발생합니다.  이것은 사용자에게 페이지가 불안정하게 느껴지게 하고, 페이지 요소가 번쩍거리거나 밀려나는 것처럼 보일 수 있습니다. 이러한 크기가 큰 레이아웃 이동을 피하기 위해서는 이미지와 비디오 요소에 명시적인 너비..