목차 💡 상호 작용까지의 시간(TTI)는 무엇입니까?💡 상호 작용까지의 시간(TTI)는 어떻게 측정하나요?💡 상호 작용까지의 시간(TTI)이 중요한 이유는 무엇입니까?           -    상호 작용까지의 시간(TTI)에 대한 임계값💡상호 작용까지의 시간(TTI)을 향상시키는 방법은 무엇입니까?     상호 작용까지의 시간(TTI)은 웹 페이지가 로드되고 사용자와 상호 작용 가능한 상태가 되는데 걸리는 시간을 나타내는 중요한 성능 지표입니다.    이것은 사용자가 페이지를 열었을 때 페이지가 얼마나 빨리 대화식으로 사용 가능한 상태가 되는지를 측정합니다. TTI는 웹 페이지 또는 애플리케이션의 전반적인 사용자 경험을 반영하며, 빠른 TTI는 사용자가 페이지를 빠르게 이용하고 상호 작용할 수 ..

목차 💡 총 차단 시간(TBT)은 무엇을 측정합니까?     -   총 차단 시간과 긴 메인 스레드 작업     -   총 차단 시간(TBT) vs 상호 작용까지의 시간(TTI)💡 총 차단 시간(TBT)은 성능 점수에 어떤 영향을 미칩니까?     -   총 차단 시간에 대한 임계값💡총 차단 시간(TBT)은 어떻게 향상 시킵니까?     총 차단 시간(TBT)이란,Total Blocking Time일시적으로 작동을 멈추는 시간  총 차단 시간(Total Blocking Time, TBT)은 웹 성능 측정에서 중요한 지표 중 하나로, 사용자 경험과 웹 페이지의 반응성을 평가하는 데 사용됩니다. 이 지표는 사용자가 웹 페이지와 상호 작용하는 동안 발생하는 지연을 측정하며, 아래는 TBT에 대한 개요입니..

목차 💡 가장 큰 콘텐츠 렌더링 시간(LCP)은 무엇을 측정합니까?💡 가장 큰 콘텐츠 렌더링 시간(LCP)은 성능에 어떤 영향을 줍니까?      -   가장 큰 콘텐츠 렌더링 시간에 대한 임계값💡 가장 큰 콘텐츠 렌더링 시간은(LCP) 어떻게 향상 시킵니까?    가장 큰 콘텐츠 렌더링 시간(Largest Contentful Paint, LCP)은 웹 페이지의 성능을 평가하는 중요한 지표 중 하나입니다. LCP는 사용자가 웹 페이지를 열었을 때 가장 큰 콘텐츠가 얼마나 빨리 렌더링되는지를 나타냅니다.  LCP는 웹 페이지가 얼마나 빨리 가장 중요한 콘텐츠를 화면에 표시하는지를 나타내는 지표입니다. 이 중요한 콘텐츠는 주로 이미지, 텍스트 블록 또는 비디오와 같은 시각적인 요소입니다. LCP가 빠를..

목차 💡  누적 레이아웃 이동(CLS)는 무엇을 측정합니까?💡 예상되는 레이아웃 변화 vs 예상되지 않는 레이아웃 변화💡 누적 레이아웃 이동(CLS)는 성능 점수에 어떤 영향을 미칩니까?💡 누적 레이아웃 이동(CLS)을 개선하는 방법은 무엇입니까?    누적 레이아웃 이동(Cumulative Layout Shift, CLS)는 웹 페이지의 사용자 경험을 개선하는 데 중요한 성능 지표 중 하나입니다. 이것은 웹 페이지가 로딩되는 동안 페이지의 요소들이 뜨거나 움직여서 사용자가 의도하지 않게 페이지를 조작하게 되는 정도를 측정합니다.  예시로 설명하면,뉴스 웹사이트를 방문할 때, 페이지가 로딩 중에 기사 제목과 이미지가 표시되는데, 갑자기 이미지가 로딩되면서 페이지 레이아웃이 변경될 수 있습니다. 이..

✍️  목 차1. DOM이란?2. 과도한 DOM 트리가 페이지 성능에 미치는 영향3. 과도한 DOM 크기를 피하는 방법   DOM(Document Object Model)은 웹 페이지의 구조와 콘텐츠를 나타내는 트리 구조입니다. 이 트리 구조는 자바스크립트와 CSS를 이용하여 조작할 수 있습니다. 그러나 DOM 트리가 커지면 웹페이지 로딩 속도가 느려질 뿐만 아니라, CPU 사용량이 증가할 수도 있습니다.  이러한 문제를 해결하기 위해 DOM 트리를 최적화하고, 불필요한 노드를 제거하며, HTML/CSS/자바스크립트를 최적화하여 DOM 크기를 최소화하는 방법을 제시합니다. 이를 통해 웹 페이지의 로딩 속도와 성능을 개선할 수 있습니다. 　  💡 DOM이란?브라우저가 HTML 문서를 받으면, CSS와 J..

✍️  목 차1. CSS 스프라이트를 사용하여 이미지를 결합하면 페이지 성능에 미치는 영향2. CSS 스프라이트를 사용하여 이미지를 결합하는 방법    웹 페이지에서 이미지는 중요한 역할을 합니다. 하지만 이미지 파일은 용량이 크기 때문에 페이지 로딩 속도를 늦추는 요인 중 하나입니다. 이를 해결하기 위해 CSS 스프라이트를 사용하여 이미지를 결합할 수 있습니다. 이 방법은 대부분 아이콘, 로고 및 기타 그래픽 요소와 같은 작은 이미지를 참조하여 단일 이미지로 결합한 다음 페이지에 CSS로 배치할 수 있습니다. 이렇게 하면 로드된 이미지 수를 줄여 요청 수가 줄어들어 브라우저에서 이미지를 로드하는 데 소요되는 시간이 줄어들어 페이지 성능에 도움이 됩니다.   💡 CSS 스프라이트를 사용하여 이미지를 결..

✍️ 목 차1. 언로드 이벤트 리스너를 피하면 페이지 성능에 미치는 영향2. 언로드 이벤트 리스터를 수정하는 방법   unload 이벤트 리스너는 웹 페이지가 닫히거나 다른 페이지로 이동할 때 실행되는 JavaScript 코드 조각입니다. 이 코드는 주로 일부 정리 작업을 수행하거나 사용자에게 추가적인 메시지를 표시하는 데 사용됩니다. 그러나 이벤트 리스너를 지나치게 사용하면 웹 페이지의 성능과 사용자 경험이 저하될 수 있습니다."BFCache"는 "Back-Forward Cache"의 약자로, 브라우저의 뒤로 및 앞으로 버튼을 사용할 때 페이지를 빠르게 로드하기 위해 사용되는 메모리 내 브라우저 캐시입니다. 이렇게 하면 뒤로 가기 또는 앞으로 가기 버튼을 클릭할 때 이전 페이지 또는 다음 페이지가 거의..