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

By Gyumyung Lee
book

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

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

Chapter 9. 웹 최적화 트렌드

웹 최적화의 역사

모바일 기기의 등장과 모바일 사이트 최적화
  • 스마트폰이 등장하면서 모바일 사용자의 경험이 중요해짐
  • 모바일과 데스크탑 사용자의 사이트 경험을 동일하게 만들기 위해 반응형 웹 기술 적용
  • 구글은 모바일 사용자의 경험을 극대화하기 위해 PWA (Progressive Web Application)와 AMP (Accelerate Mobile Page) 제시
PWA
  • 스마트폰을 사용할 때 모바일 웹보다 모바일 앱에서 더 많은 시간을 보냄
  • 스마트폰에 설치되어 구동되는 네이티브 앱의 장점
    1. 인터넷이 연결되지 않아도 앱이 구동됨
    2. 기기의 운영 체제와 잘 통합되어 더 매끄러운 사용자 경험
    3. 기기의 고유 기능들에도 쉽게 접근해 다양한 기능들 수행 가능
  • 네이티브 앱은 앱 스토어에서 검색해서 다운로드해야하며, 설치된 앱들이 많을수록 기기의 성능이 떨어지고 앱의 수행속도도 느려진다는 단점 존재
  • 모바일 웹은 URL만 클릭하면 웹 사이트에 접속할 수 있어 애플리케이션을 검색하고 설치하는 것보다 빠르고 쉽게 접근 가능
  • 네이티브 앱은 높은 기능성, 모바일 웹은 넓은 범용성
  • PWA는 네이티브 앱과 모바일 웹의 장점을 모두 갖추도록 특정 기술과 표준 패턴을 사용해 개발한 웹앱
  • PWA가 가져야 할 핵심 특징들
    1. 모든 형태의 화면에 반응해야 함. 즉 모든 기기 화면이나 브라우저에서 사용할 수 있어야 함
    2. 네트워크 독립적이어야 함
    3. 앱과 같은 상호 작용이 있어야 함
    4. 항상 최신 내용으로 업데이트되어 있어야 함
    5. 웹이나 앱의 모든 연결은 보안상 안전해야 함
    6. 아무리 훌륭한 웹 앱이라도 사용자들이 알지 못하면 무용지물, 구현된 애플리케이션은 웹의 검색 엔진에서 쉽게 찾을 수 있어야 함
    7. 재참여할 수 있어야 함. 예를 들면 새 컨텐츠가 사용할 수 있을 때 알림을 보내 사용자가 다시 열어볼 수 있게 해야 함
    8. 설치할 수 있어야 함. 기기 홈 화면에 언제든 앱 아이콘을 추가할 수 있어야 하며 이러한 기능은 모바일 브라우저 기능으로 지원됨
    9. 쉽게 연결이 가능해야 함. 웹처럼 간단하게 URL을 전송해 컨텐츠를 공유할 수 있어야 함
  • PWA를 사용할 시 이점
    1. 서비스 워커를 사용한 캐시로 앱 로딩 시간을 줄이고 데이터를 경제적으로 사용할 수 있음
    2. 앱 업데이트 시 변경된 컨텐츠만 업데이트할 수 있어 매우 효율적
    3. 플랫폼과 상관없이 반응형으로 동작하므로 다양한 플랫폼들 위에서 보다 통합된 형태를 전달할 수 있음
    4. 시스템 알림 및 푸시 메시지를 통해 사용자의 재참여를 이끌어내고 이를 통해 구매 전환율 같은 비즈니스 지표 개선
AMP
  • 웹 개발자들은 성능 최적화 방법을 바르게 알지 못하거나 알고 있다 해도 개발 일정에 밀려 필요한 최적화 기법을 적시 적소에 적용하지 못함
  • 웹 사이트 개시 초기에는 경량화되어있어 로딩 속도가 빠르다 하더라도 시간이 지날수록 관리 부재로 사이트가 점점 무거워짐
  • AMP는 이미 성능 최적화가 된 웹 컴포넌트들을 제공
  • 타사 리소스들을 무분별하게 추가할 수 없도록 강제함으로써 개발자가 복잡하고 어려운 최적화 기법에 신경쓰지 않도록 도와주는 프레임워크
  • AMP의 특징
    1. 컨텐츠 렌더링을 방해하지 않음
    2. 레이아웃을 미리 결정하여 리플로우 방지
    3. 경량화된 CSS를 HTML 내부에 작성하여 렌더링을 빠르게 시작
    4. 웹 폰트 최적화
    5. 스타일과 화면 재배치 최소화
    6. GPU 가속으로 CPU 사용 효율화
    7. 중요한 리소스부터 로딩
  • AMP의 구성 요소
    1. AMP Websites
      • AMP를 사용해 고성능 웹 사이트를 만듬. AMP HTML 명세에 맞춰 HTML을 작성함으로써 구현
    2. AMP Stories
      • AMP을 사용해 스토리 기반 웹 사이트 구현. 일종의 프레젠테이션 모드
      • 특정 주제와 관련된 텍스트, 이미지, 애니메이션, 비디오 등을 각각의 페이지로 구성하고 이들을 묶어 하나의 스토리로 구성함
    3. AMP Ads
      • AMP를 이용해 사이트 성능에 영향을 미치지 않고 광고 송출. AMP Ads 명세에 맞춰 광고 컨텐츠 제작
    4. AMP Email
      • 다양한 AMP 컴포넌트들을 이메일 본문에 사용해 더욱 동적이며 사용자와 상호 작용이 가능한 내용 추가
  • AMP HTML의 마크업이 지켜야 할 기본적인 규칙들
    1. 도큐먼트 타입 <!doctype html> 으로 시작해야 함
    2. 최상위 레벨 태그로 <html> 또는 <html amp> 를 사용함
    3. <head>와 <body> 태그가 존재해야 함
    4. AMP로 변환하기 전 HTML 문서가 있을 경우 <link rel="canonical" href="$SOME_URL"> 를 사용해 서로의 페이지를 링크시킴
    5. 페이지 인코딩을 위해 <meta charset="utf-8"> 이 첫 번째 태그로 와야 함
    6. <head> 태그 내에 <meta name="viewport" content="width=device-width"> 태그를 사용해 뷰포트 정보를 명시해야 함
    7. <head> 태그 내에 반드시 <script async src=http://cdn.ampproject.org/v0.js></script> 태그를 포함해야 함
      • 이 라이브러리는 런타임에 로딩되어 AMP 전용 맞춤 태그를 수행하고 리소스 로딩, 다운로드 우선순위 결정, AMP 런타임 코드 검증 등의 작업 수행
    8. AMP boilerplate 코드 (head > style[amp-boilerplate] and noscript > style[amp-boilerplate]) 가 헤더에 포함되어야 함
      • 이 코드는 AMP 자바스크립트가 로딩될 때까지 HTML 컨텐츠를 보이지 않게 숨기는 기능
AMP와 반응형 웹 디자인
  • AMP 웹사이트 역시 반응형 웹으로 구현 가능하며, ‘layout’이라는 속성값을 사용하면 보다 간편하고 성능이 뛰어난 반응형 웹을 디자인할 수 있음
    • 예를 들어 이미지의 width와 height를 지정하고 ‘layout’ 속성에 ‘responsive’ 값을 입력하면 상위 컨테이너에 대한 비율이 자동으로 계산되어 비율에 맞게 이미지 크기 조절
  • 반응형 웹 구현에 필요한 미디어 쿼리나 srcset 등이 모두 지원되므로 화면의 브레이크 포인트에 맞는 웹 페이지를 구성할 수 있음
  • AMP는 기존 HTML 명세와 다른 점들이 적지 않고 제공되는 컴포넌트들이 많음
    • AMP에서 제공해주는 컴포넌트가 많다는 것은 단점이자 장점이 될 수 있음
    • AMP을 새로 도입하는 기업 입장에서는 학습해야 할 것들이 많다는 점
    • 일단 AMP로 개발을 시작하면 컴포넌트를 통해 표현할 수 있는 UI나 기능들이 많아짐

웹 최적화의 실상과 과제

  • 모바일 기술의 발전에도 웹 사이트의 로딩 속도는 크게 나아지지 않음
웹 최적화의 실상
  • 모바일에서 웹 사이트 로딩 속도가 개선되지 않은 이유는 모바일 사용자 비율이 크게 늘었기 때문
  • 4G, 5G 같은 초고속 무선 인터넷망이 보급되었지만 전 세계를 기준으로 보면 적용률이 낮음
  • 무선 네트워크 보급율 증가에 비해 웹 사이트는 점점 더 복잡해지고 무거워지고 있음
  • 다양한 기능을 가진 자바스크립트 라이브러리들이 등장하고 웹 최적화를 위한 기능들도 자바스크립트로 구현되고 있는 역설적인 현상
  • 저가형 스마트폰일수록 자바스크립트를 처리하는 데 오랜 시간이 소요됨
웹 최적화의 과제
  1. 자신의 웹 사이트의 정확한 성능을 알아야 함
    • 웹 사이트를 이용하는 모든 사용자의 성능 정보를 수집하고 이를 통계적으로 분석해야 함
    • 수집한 데이터의 평균값만 사용할 게 아니라 75분위, 95분위 사용자들의 로딩 속도와 지연 원인도 파악해야 함
    • 이제는 브라우저 동작 중심의 성능 지표보다 실제 사용자의 경험을 나타낼 수 있는 지표들을 측정하고 관리해야 함
  2. 자바스크립트를 최소화해야 함
    • 웹 성능은 자바스크립트의 수와 크기에 따라 크게 달라질 것
    • 중저가 스마트폰의 낮은 사양에서도 충분히 빠르게 수행되는지 자바스크립트 코드를 개발하는 것이 중요
    • 자바스크립트의 크기를 줄이는 4가지 방법
    1. 웹사이트에 필요한 전체 기능 개수를 줄이기
    2. 가능한 많은 기능을 서버 측에 전가하기
    3. 각 페이지별로 꼭 필요한 자바스크립트만을 포함하기
    4. 네이티브 코드를 활용하기
  3. 맞춤형 최적화를 수행해야 함
    • 앞으로의 웹 최적화 작업이 직면한 가장 큰 숙제
    • 기기의 CPU나 메모리 사양에 따라 브라우저에서 수행시킬 수를 제한하거나 네트워크 속도나 품질을 판단해 브라우저로 보낼 이미지들의 품질이나 개수를 결정하는 등의 작업 적용
    • 이러한 작업은 서버측 반응형 웹 (RESS, Responsive Design with Server-Side Component)이라는 이름으로 일부 수행되고 있음
    • 사용자 기기 (user agent)를 정확히 판별해야 하는 핵심 작업이 여전히 숙제로 남아있음
    • 가장 효율적인 방법은 사용자 기기에서 자신의 정보를 서버측에 제공하는 방법
    • 이는 Client Hints 라는 이름으로 표준화 작업 진행 중

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