웹에 날개를 달아주는 웹 성능 최적화 기법 Chapter1

By Gyumyung Lee
book

웹에 날개를 달아주는 웹 성능 최적화 기법

  • 본 책을 읽고 책의 내용을 간략하게 정리한 글입니다.

Chapter 1. 웹 성능이란 무엇인가

웹의 대표적인 요소

  1. URL (Uniform Resource Locator)
    • 웹 자원이 인터넷상 어느 위치에 존재하고 있는지 알려주는 방법
      • 클라이언트와 서버가 어떤 방식으로 데이터를 주고받을지 결정하는 프로토콜
      • 해당 서비스의 이름을 대표하는 도메인
      • 해당 자원이 위치하는 장소를 구조적으로 나눈 디렉토리
      • 실제 자원이 존재하는 파일 확장자를 포함한 자원의 경로
  2. 네트워크 프로토콜
    • URL을 통해 알게 된 웹의 자원 위치에 접근하는 방식
    • 웹에서는 대부분 HTTP를 사용하며, HTTP에는 정보를 주고받는 헤더(header) 부분과 실제 데이터를 주고받는 페이로드(payload) 부분으로 나뉨
  3. HTML
    • 해당하는 콘텐츠를 사용자에게 쉽게 나타내는 방식
    • 다양한 웹 상의 콘텐츠를 브라우저를 통해 나타낼 수 있는 태그(tag) 명령어로 웹의 목적에 맞는 여러 기능을 수행
    • 웹 페이지는 HTML 외에도 클라이언트에서 로직을 수행할 수 있는 자바스크립트, 웹 페이지의 레이아웃과 세부 형태를 정의하는 CSS 등 또한 사용 가능

웹 성능이 중요한 이유

  • 웹 성능이란 용어는 콘텐츠가 신속하게 전달되어 사용자가 원하는 서비스를 빠르게 전달받을 수 있도록 하는 시스템의 성능, 즉 웹 로딩 시간을 의미
  • 웹 로딩 속도가 느리면 서비스 사용자의 이탈률이 높아진다는 조사 결과
    • 부정적인 서비스 경험으로 재접속 확률이 낮아짐
  • 구글 조사 자료에 따르면 페이지가 3초 안에 로딩되지 않으면 53%의 사용자가 떠나고 로딩 시간이 길어질수록 사용자 이탈률 역시 늘어남
  • 3초 안에 관심을 끌어야 한다는 3초의 법칙
    1. 웹 사이트의 로딩이 빨라야 한다.
    2. 엡 사이트의 머리말이 주목받을 수 있어야 한다.
    3. 웹 페이지의 글이 눈에 띄어야 한다.
    4. 웹 페이지 내 사용자 행동이 필요한 부분은 명확히 전달해야 한다.

웹 성능 측정 방법

크롬 브라우저의 개발자 도구
  • 전체 HTTP 요청 수와 응답 수, 전달받은 콘텐츠 파일들의 크기, DOMContentLoaded 시간, Load 시간, 로딩 완료 시간 등 확인 가능
WebPageTest 서비스
  • 세계 여러 위치에서 웹 사이트 로딩 속도를 테스트할 수 있는 서비스
구글 PageSpeed
  • 구글의 웹 성능 요소 지표를 바탕으로 다양한 웹 성능 영역 검출
  • 모듈 중 Mod_pagespeed는 Apache나 Nginx 웹 서버에 연동하여 CSS, 자바스크립트, HTML 파일, 이미지 등의 성능 최적화 도움

웹 성능을 만드는 지표

  • 스티브 사우더스의 14가지 웹 성능 최적화 기법
최적화 내용
백엔드 1. Expires 헤더를 추가
2. gzip으로 압축
3.페이지 재전송 피하기
4. ETag 설정
5. 캐시를 지원하는 AJAX 만들기
프론트엔드 1. HTTP 요청을 줄이기
2. 스타일시트 상단에 넣기
3. 스크립트는 하단에 넣기
4. CSS 표현식 피하기
5. 자바스크립트와 CSS는 외부 파일에 넣기
6. 자바스크립트는 작게 만들기
7. 중복 스크립트 제거
네트워크 1. 콘텐츠 전송 네트워크(CDN) 사용
2. DNS 조회 줄이기
  • YSlow라는 서비스에서 웹 성능 최적화 항목을 확인할 수 있으며, YSlow 2.0에 추가된 내용은 아래와 같음
    1. AJAX는 캐시가 가능하도록 만들기
    2. GET 메서드로 XHR을 사용하기
    3. DOM 개체 수 줄이기
    4. 404 Not Found 없애기
    5. 쿠키 크기 줄이기
    6. 쿠키와 상관없는 정적 컨텐츠 만들기
    7. AlphaImageLoader 사용하지 않기
    8. HTML에 이미지 크기를 설정하지 않기
    9. 파비콘(favicon)은 작게, 캐시할 수 있도록 만들기
사용자 환경 - 프론트엔드
  • 빠르고 보기 쉽게 컨텐츠를 전달하는 것이 프론트엔드의 가장 큰 목적
공급자 환경 - 백엔드
  • 서버 처리량, 네트워크 스위치 처리량, 처리 속도에 문제가 없는지 등 확인
  • 데이터 쿼리가 느려졌다면 데이터베이스 정규화를 진행하거나, 사용하지 않는 오래된 데이터를 백업 후 삭제, 디스크 메모리 대신 SSD 같은 빠른 저장 장치를 사용하여 최적화 작업 가능
  • 구글 애널리틱스의 Speed 기능을 통해 대략적인 백엔드의 성능 확인 가능
    • 전체 페이지 로딩 시간 5.21초 중 페이지 재전송, 도메인 조회, 서버 연결, 서버 응답 등에서 소요된 시간이 1초도 되지 않음
    • 이는 프론트엔드 및 기타 요소에서 로딩 시간의 대부분이 소요된다는 의미
전달 환경 - 네트워크
  • 네트워크는 장소와 시간에 따라 속도가 변해 성능 측정이 어려움
  • 보통 분기나 연도별로 평균값을 구하여 네트워크 성능을 판단함

웹 성능과 프론트엔드

  • 대다수의 웹 사이트의 웹 성능을 측정해보면 사이트 로딩 시 프론트엔드에서 가장 많은 시간이 소요됨
    • 프론트엔드가 로딩 시간 중 대부부을 차지하는 이유는 웹 서버가 아닌 사용자(브라우저) 관점에서 원하는 컨텐츠를 받았는지가 웹 성능의 기준이기 때문
    • 웹 서버가 컨텐츠를 생산하는 시간보다 사용자가 웹 서비스와 상호 작용하여 원하는 컨텐츠를 가져와 렌더링하는 시간이 더 소요되기 때문

웹성능 예산

  • 성능 예산이란 웹 성능에 영향을 미치는 다양한 요소를 제어하는 한계값을 의미
  • 성능 예산을 웹 개발팀의 성능 관련 목표로 만든 예시
    • 메인 페이지의 모든 오브젝트 파일 크기는 10MB 미만으로 제한
    • 모든 웹 페이지의 각 페이지 내 포함된 자바스크립트 크기는 1MB 미만으로 제한
    • LTE 환경에서 모바일 기기의 Time to Interactive는 5초 미만이어야 함
정량 기반 지표
  • 이미지, 스크립트, 폰트 등 웹 페이지 제작에 필요한 요소들에 대한 한계값
  • 대표적인 정량 기반 지표
    • 이미지 파일의 최대 크기
    • 최대 웹 폰트 파일 개수
    • 자바스크립트 파일 크기 합
    • 타사 스크립트 개수 합
시간 기반 지표
  • DOMContentLoaded, Load와 같은 브라우저에서 실제로 발생하는 다양한 웹 성능 이벤트 값을 측정하여 사용자가 느끼는 웹 성능에 대한 목표치를 설정하는 방법
  • 대표적인 시간 기반 지표
    • FCP(First Contentful Paint) : 텍스트 또는 이미지와 같이 DOM의 첫 번째 비트를 표시하는 시점
    • TTI(Time to Interactive) : 페이지가 사용자 입력에 안정적으로 응답하는 데 걸리는 시간
규칙 기반 지표
  • 웹 성능 측정 도구들은 자체적으로 웹 성능 지표를 측정하여 각 사이트의 성능 점수를 매기는 알고리즘을 갖고 있음
  • 대표적인 규칙 기반 지표
    • WebPageTest의 성능 점수
    • 구글 Lighthouse의 성능 점수
  • PageSpeed, WebPageTest, 구글 Lighthouse 등이 제공하는 웹 성능 점수는 공신력이 있는 표준 점수로 규칙 기반 지표에서 자주 사용
  • 또는 사내 자체적인 웹 성능 지표에 대한 테스트 케이스를 만들고 자동화 테스트 시스템을 통해 웹 사이트의 성능을 지표화하는 방식을 이용하기도 함
성능 예산 활용
  • 사이트에 적합한 성능 예산이 어느 정도 되는지 초기에 가늠하기 쉽지 않음
  • 가장 쉬운 접근 방법은 직관적이고 단순하게 성능 예산 목표치를 설정하고 웹 사이트 설계와 개발을 시작하는 것
  • 최근에는 형상 관리 및 새로운 버전 빌드 후 배포 이전에 최종 성능 예산을 측정하고 관리하는 방법 사용
    • 구글 Lighthouse의 측정값을 빌드의 CI 단계의 테스트 케이스로 사용하는 것이 대표적인 예

웹에 날개를 달아주는 웹 성능 최적화 기법, 강상진, 윤호성 저, 루비페이퍼 출판