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

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

목차 💡 터치 및 휠 이벤트 리스너는 페이지 성능에 어떤 영향을 줍니까?💡 스크롤 성능을 향상시키기 위해 수동 리스너를 구현하는 방법은 무엇입니까?   패시브 이벤트 리스너를 이해하기 위해서는 몇 가지 개념을 알아야 합니다.  ● 스크롤 성능과 사용자 경험 웹 페이지에서의 스크롤 성능은 사용자가 웹 사이트를 원활하게 탐색하는 데 중요한 역할을 합니다. 부드럽고 빠른 스크롤은 사용자가 웹 페이지를 쾌적하게 이용할 수 있도록 도와줍니다. ● 터치 및 휠 이벤트 리스너 웹 페이지는 사용자의 터치 (스마트폰이나 태블릿에서 손가락으로 스크롤) 및 휠 (마우스 휠로 스크롤) 입력을 감지하고 처리하는 코드를 가지고 있습니다. 이것을 이벤트 리스너라고 부릅니다. ● 자바스크립트와 메인 스레드 웹 페이지의 동작은 J..

목차 💡 Third-party 코드는 페이지 성능에 어떤 영향을 줍니까?💡 Third-party  코드의 영향을 줄이는 방법은 무엇입니까?  Third-party 코드는 광고, 분석 서비스 및 기타 요소로 구성되어 있으며, 이들은 URL의 도메인과 다른 도메인에서 제공됩니다. 이러한 자원들은 종종 웹 성능 저하의 원인이 됩니다. 왜냐하면 이들은 메인 스레드를 차단하거나 다른 작업을 수행하는 것을 방해하는 스크립트를 포함할 수 있기 때문입니다. 또한, 느린 서버 응답 시간, 느린 DNS 조회, 서버 응답 오류 등 여러 가지 이유로 인해 페이지가 느려질 수 있으며, 이는 페이지 성능에 영향을 미칠 수 있습니다. 웹 성능을 위해 웹사이트 코드를 검토하여 Third-party 스크립트의 영향을 최소화하는 것..

목차 💡 중요 요청을 미리 로드하면 페이지 성능에 어떤 영향을 줍니까?💡 중요 요청을 미리 로드하는 방법은 무엇입니까?   중요한 요청을 미리 로드 하는 것은 웹 사이트를 빠르게 로드하기 위해 필요한 중요한 자원들을 사전에 미리 로드하는 것을 의미합니다. 이렇게 하면 사용자가 웹 페이지를 방문할 때 필요한 자원들이 미리 다운로드되어 빠르게 화면에 표시되므로 웹 페이지가 빠르게 로드되는 것처럼 느껴집니다. CSS 및 JavaScript 파일과 같은 중요한 리소스를 사전로드함으로써 브라우저는 이를 미리 가져와 지연 시간을 줄이고 전반적인 성능을 향상시킬 수 있습니다.  를 사용하면 중요한 요청을 높은 우선순위로 처리하여 페이지 로드 속도를 높일 수 있습니다. 이는 중요 자원이 때로는 페이지 로드 과정의 ..

목차 💡 긴 JavaScript 실행 시간은 페이지 성능에 어떤 영향을 줍니까?💡 JavaScript 실행 시간을 줄이는 방법은 무엇입니까?    JavaScript는 웹 페이지에 동적 기능을 추가하는 데 중요한 역할을 합니다. 그러나 JavaScript 코드가 긴 실행 시간을 가지면 웹 페이지의로딩과 응답 속도에 영향을 미칠 수 있습니다. 따라서 JavaScript 실행 시간을 단축하는 것은 중요합니다. 일반적으로 JavaScript 실행 시간을 줄이는 것은 JavaScript 파일을 구문 분석, 컴파일 및 실행하는 데 소요되는 시간을 감소시키는 것을 의미합니다. 기본적으로 JavaScript는 메인 스레드에서 실행되며, 이 때 브라우저는 다른 작업을 실행할 수 없습니다. JavaScript 실행 ..

목차 💡 필요한 원본에 미리 연결하면 페이지 성능에 어떤 영향을 줍니까?💡 Preconnect를 유의해서 사용하세요💡  필요한 원본에 미리 연결을 설정하는 방법은 무엇입니까?   preconnect를 사용하면 브라우저가 중요한 타사 연결을 우선순위로 처리하고, 타사 요청이 오래 걸릴 수 있는 경우 페이지 로드 속도를 높일 수 있습니다. 외부 리소스(예: Facebook 또는 YouTube 임베드)는 도메인에서 가져오지 않기 때문에 동작을 예측하기 어려울 수 있으며 사용자의 페이지 경험에 부정적인 영향을 미칠 수 있습니다. 웹 페이지에서 사용되는 외부 리소스(예: 이미지, 스크립트, 스타일 시트)가 필요할 때 그 리소스가 있는 원본 서버로 사전에 연결을 설정하는 것을 의미합니다. 이렇게 하면 웹 페이..