NOTES

웹 성능

모델을 만들고, 웹과 앱을 짓고, 업무를 자동화하며 확인한 것을 기록합니다. 통한 방법만이 아니라 통하지 않았던 시도까지 남깁니다.

TOTAL 5 · 웹 성능

웹사이트가 빠르게 화면에 나타나도 버튼을 누른 뒤 반응이 늦을 수 있습니다. 로딩 속도와 상호작용 속도는 다른 문제입니다. INP를 개선하려면 클릭부터 다음 화면 갱신까지의 지연을 입력 대기, 이벤트 처리, 화면 표시 단계로 나눠 보아야 합니다.

메인 화면의 큰 이미지가 늦게 보이면 나머지 요소가 빨라도 페이지가 느리게 느껴집니다. LCP 개선은 이미지 파일 크기만 줄이는 작업이 아닙니다. 브라우저가 그 이미지를 언제 발견하고 어떤 우선순위로 가져오는지 확인해야 합니다.

첫 화면의 큰 이미지가 늦게 뜨는 이유는 파일 크기만이 아닙니다. 발견 시점, 우선순위, 반응형 후보, 디코딩을 함께 살펴봅니다.

테이블 필터·탭 전환·검색 입력이 답답한 B2B 관리자 화면에서 INP를 측정하고 긴 작업, 이벤트 처리, 렌더링을 분리해 개선하는 방법.

저희 사이트를 점검했더니 한 페이지가 첫 접속에 5초 넘게 걸리고 있었습니다. 원인은 서버가 아니라 세 가지 설정이었고, 새로 만든 것 없이 0.7초로 줄었습니다. 무엇을 어떻게 재고 무엇부터 고쳤는지 실측값으로 정리했습니다.

다루었으면 하는 주제가 있으신가요?