담백한 웹 개발 이야기

우연히 블로그의 성능을 라이트하우스로 측정해 봤는데, 성능 점수가 40점대로 나쁜 성능으로 측정돼서 성능 최적화를 하기로 마음을 먹었다. 🫡 우선 성능 최적화 결과부터 보여주고 문제점을 찾는 방법과 해결 과정을 설명하겠다. 목차 - 📄성능 최적화 결과 - 🖼️LCP 최적화 - 💻TBT 최적화 📄 성능 최적화 결과 라이트하우스에서 모바일 장치로 측정 후 성능 최적화한 결과다. Largest Contentful Paint(이하 LCP)와 Total Blocking Time(이하 TBT)이 매우 안 좋게 나왔다. 웹 페이지의 성능 개선 포인트는 (1)리소스와 (2)메인 스레드로 크게 두 가지 있다. 리소스 개선은 메인 스레드 개선보다 간단하고, LCP는 리소스 개선에 영향을 많이 받아 LCP부터 먼저 시작한다..

저는 주로 웹 페이지의 성능을 측정할 때 Lighthouse를 사용합니다. Lighthouse는 웹 페이지 품질 개선 도구로 Google Chrome에서 공개한 오픈소스이고, Chrome 개발자 도구에서 쉽게 사용할 수 있습니다. Lighthouse에서는 모바일 장치를 선택할 수 있는 데요. 모바일 장치를 선택해서 성능을 측정하면 화면 크기뿐만 아니라 CPU, 네트워크 성능도 조정되는 것을 알고 계셨나요? 이번에는 Lighthouse에서 모바일 장치를 데스크톱과 비교해서 Lighthouse 모바일 장치 이해에 대해서 알아보겠습니다. 목차 1. 장치 화면 2. 장치 성능 부록) 성능 탭의 측정 결과와 다른 이유 1. 장치 화면 Lighthouse는 모바일 화면과 데스크톱 화면을 각자 다른 방식으로 표시합니..

브라우저 캐시는 웹 사이트와 애플리케이션의 성능을 향상시키는 중요한 기술입니다. 브라우저 캐시는 이전에 가져온 리소스들을 재사용함으로써 네트워크 트래픽과 레이턴시를 줄여줍니다. 이 글에서는 브라우저 캐시의 개념과 종류, 캐싱 정책과 유효성 검사, 그리고 캐싱의 장단점에 대해 알아보겠습니다. 브라우저 캐시의 개념 브라우저 캐시는 웹 브라우저가 사용하는 사설 캐시입니다. 사설 캐시는 단일 사용자가 전용으로 사용하는 캐시로, 사용자의 컴퓨터나 모바일 기기에 저장됩니다. 브라우저 캐시는 사용자가 방문한 웹 페이지의 리소스들을 저장하고, 다시 방문할 때 재사용합니다. 예를 들어, 이미지, 스타일 시트, 자바스크립트 파일 등이 브라우저 캐시에 저장될 수 있습니다. 이렇게 하면, 네트워크 요청을 줄이고 리소스를 보여..

네트워크 탭 열기 네트워크 탭은 크롬 개발자 도구에 있습니다. Ctrl + Shift + i 단축키나 메뉴를 통해서 열 수 있습니다. 네트워크 탭 네트워크 탭에서는 웹 사이트의 이미지, 영상, HTML, CSS, JS 등과 같은 리소스를 확인 할 수 있습니다. 대체로 리소스를 정상적으로 다운로드 했는 지 확인하거나 리소스의 용량과 다운로드 시간을 확인해서 최적화를 진행합니다. Disable cache: HTTP Cache 사용 유무를 체크합니다. No throttling: 네트워크 속도를 조절해서 느린 네트워크 환경을 테스트할 때 사용합니다. Fetch/XHR: JS를 통해서 HTTP Request/Response를 확인 할 수 있습니다. WS: WebSocket 을 확인 할 수 있습니다. 네크워크 속도..

RAIL은 웹 사이트의 주요 작업인 Response, Animation, Idle, Load에서 각 단어의 첫번째 글자를 따서 RAIL로 네이밍되었습니다. RAIL을 통해서 사용자의 경험을 주요 작업으로 나누고 각각의 성능 목표를 정의하는 데 도움이 됩니다. RAIL에서 권장하는 성능 목표는 사용자가 지연을 인식하는 방식에 대한 컨텍스트 및 UX 연구를 기반으로 정의되었습니다. Response Response는 버튼 클릭, 애니메이션 시작과 같은 대부분의 입력 후 반응하는 것을 의미합니다. 터치 드래그와 스크롤은 Animation에 해당합니다. 사용자가 버튼 클릭과 같이 입력이 시작하고 반응이 즉각적인 것처럼 느끼도록 하려면 100ms 이내에 반응해야 합니다. 100ms 이내 반응하기 위해서 입력과 관련..

웹 성능 모니터링 방식은 Synthetic Monitoring과 Real User Monitoring(RUM)로 두 가지가 있습니다. 두 접근 방식의 차이점은 다음과 같습니다. Synthetic Monitoring Synthetic Monitoring은 일관된 환경에서 자동화 도구를 사용해서 성능을 모니터링하는 방법입니다. 사용자가 웹 앱을 통해 이동할 수 있는 경로를 시뮬레이션하고 시뮬레이터가 측정한 성능을 모니터링하는 것도 Synthetic Monitoring에 포함됩니다. Synthetic Monitoring은 사용자가 성능 이슈를 감지하기 전에 인지할 수 있고, 경쟁사 벤치마킹할 때 활용할 수 있습니다. Synthetic Monitoring은 WebPageTest.org, PageSpeed Ins..

Web Vitals은 좋은 UX를 제공하기 위해 Google에서 제안하는 성능 품질 지침입니다. Google에서는 기존에 제공한 도구와 측정 항목은 숙련도에 따라서 UX 품질을 파악하기 힘들다는 사실을 발견했습니다. 그래서 Web Vitals은 환경을 단순화해서 품질 개선에 도움이 되는 것에 초점을 맞췄습니다. Web Vitals에서 로딩 시간, 상호작용 시간, 시각적 변화량 항목에 대한 좋음/나쁨을 판단할 수 있는 숫자 범위를 가이드합니다. 그중에 중요한 지표는 Core Web Vitals로 구분하고 있습니다. 로딩 시간 측정 항목 First Contentful Paint (FCP) 페이지 로드가 시작된 후 페이지 콘텐츠의 일부가 화면에 렌더링 될 때까지의 시간을 측정합니다. 여기서 콘텐츠는 텍스트, ..