목차 💡 모든 페이지 리소스에 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 임베드)는 도메인에서 가져오지 않기 때문에 동작을 예측하기 어려울 수 있으며 사용자의 페이지 경험에 부정적인 영향을 미칠 수 있습니다. 웹 페이지에서 사용되는 외부 리소스(예: 이미지, 스크립트, 스타일 시트)가 필요할 때 그 리소스가 있는 원본 서버로 사전에 연결을 설정하는 것을 의미합니다. 이렇게 하면 웹 페이..

목차 💡 "third-party resources"란 무엇인가요?💡 Facades를 사용하여 외부(Third-party) 리소스를 지연 로드하는 것이 페이지 성능에 어떤 영향을 미치나요?💡 Facades를 사용하여 외부(Third-party) 리소스를 지연 로드하는 방법은 무엇입니까?💡 Facades를 사용하여 외부(Third-party) 리소스를 지연 로드에 대한 주의사항은 무엇입니까?    💡 "third-party resources"란 무엇인가요?"third-party resources"는 웹 페이지를 구성하는 데 필요한 자원 중에서 웹 페이지가 직접 제어할 수 없는 외부 서비스나 웹사이트에서 가져오는 자원을 의미합니다. 이러한 자원은 주로 광고, 웹 분석 도구, 소셜 미디어 위젯 등과 같..