목차 💡 총 차단 시간(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. 레이아웃 이동이 페이지 성능에 미치는 영향2. 대규모 레이아웃 변경을 피하는 방법    2-1 이미지 크기 지정    2-2 광고, 삽입 및 iframe으로 인한 레이아웃 이동 감소    2-3 기존 콘텐츠 위에 새로운 콘텐츠 삽입 방지    2-4 FOIT(Invisible Text) 플래시 방지    2-5 합성되지 않은 애니메이션 피하기  대규모 레이아웃 변경은 웹 페이지 성능에 영향을 미치며, 사용자 경험과 검색 엔진 최적화에도 영향을 미칩니다. 우리 쇼핑몰 속도를 사용하여 대규모 레이아웃 변경을 최소화하는 방법은 뷰포트 내에서 요소의 위치를 변경하거나 CSS 트랜지션 및 애니메이션을 사용하는 것입니다. 이러한 변경을 최소화하면 페이지 성능이 향상되고, 사용자 경험이 개선됩니다. ..

✍️  목 차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"의 약자로, 브라우저의 뒤로 및 앞으로 버튼을 사용할 때 페이지를 빠르게 로드하기 위해 사용되는 메모리 내 브라우저 캐시입니다. 이렇게 하면 뒤로 가기 또는 앞으로 가기 버튼을 클릭할 때 이전 페이지 또는 다음 페이지가 거의..