지난 글에서 웹사이트 속도가 사용자 경험, SEO 및 전환율(conversion rates)에 큰 영향을 미치는 것을 배웠다.
웹사이트 성능을 개선하는 건 웹사이트로 트래픽을 유도하고 사용자를 유지하는 데 필수적이다. 웹사이트 속도를 높이기 위해 취할 수 있는 몇 가지 단계에 대해 알아보자

웹사이트 성능 테스트

💡 사이트 속도 테스트를 통해 웹사이트의 성능을 저하시키는 특정 자산이나 리소스를 파악할 수 있다.

웹사이트 속도를 왜 테스트해야 할까?

• 배경
  • 로컬 테스트 환경에서는 다양한 네트워크 조건 등에서 사이트가 어떻게 동작할 지 잘 예측하기 어렵다.
• 목표
  • 실제 상황을 시뮬레이션해서 웹사이트가 실제로 얼마나 잘 작동하는지에 대한 데이터를 제공하는 것
• 효과
  • 사이트의 속도뿐만 아니라 어떤 요소가 속도 저하를 일으키는지 알 수 있다.
  • 따라서 성능을 저하시키는 영역과 개선이 필요한 영역을 파악할 수 있다.
• 중요성
  • 앞선 글에서 보았듯 웹사이트의 성능이 낮다는 사실이 SEO와 사용자 경험, 그리고 전환율에 부정적인 영향을 미친다.
• 방법
  • WebPageTest.org : 페이지 개별 요소 로드 시간 분석
  • Google의 PageSpeed Insights
  • 개발자 도구 네트워크 탭 : 모든 HTTP 요청, 요청된 자산의 크기, 요청 처리 시간을 보고 성능을 평가할 수 있다.

측정 지표들

지표	설명
Load time	웹 브라우저가 다운로드를 마치고 웹페이지를 보여주는데 걸리는 시간
Time to First Byte(TTFB)	브라우저가 웹 서버로부터 첫번째 바이트를 받는데 걸리는 시간
Requests	페이지 전체를 로드하기 위해 브라우저가 보내는 HTTP 요청 수
DOMContentLoaded(DCL)	페이지의 전체 HTML 코드를 로드하는데 걸리는 시간. 이미지, CSS 파일 등은 포함되지 않는다.
Time to above-the-fold load	‘Abobe the fold’는 사용자가 스크롤하지 않아도 브라우저 창에 표시되는 웹페이지의 영역을 의미한다.
First Contentful Paint (FCP)	브라우저에서 콘텐츠가 처음으로 페인트, 혹은 렌더링되기 시작하는 시간. 텍스트, 이미지 혹은 흰색이 아닌 배경색을 포함해 페이지의 어떤 부분이든 될 수 있다.
Page Size	페이지에 나타나야 하는 모든 콘텐츠나 에셋 파일 크기의 총 합
Round trips	웹페이지를 로드하기 위해 브라우저와 서버 간 필수적으로 왕복해야 하는 요청/응답 횟수
Render-blocking round trips	round trips의 하위 카테고리. 리소스를 로드하기 전에 다른 리소스를 먼저 로드해야 함을 의미한다.
Round trip time(RTT)	round trips에 걸리는 시간
Render-blocking resources	CSS 파일 등 특정 리소스는 페이지의 다른 요소가 로드되지 않도록 차단한다. 웹페이지에 이러한 요소가 많을 수록 브라우저가 페이지 로드에 실패할 가능성이 높아진다.

CDN(Content Delivery Network) 사용하기

• CDN
  • 전 세계 여러 위치에 콘텐츠를 캐싱해 웹사이트 속도를 향상시킨다.
• CDN 서버
  • 최종 사용자와 가까운 곳에 위치
  • 콘텐츠 요청을 호스팅 서버가 아닌 CDN 서버로 전달함으로써 페이지 로드 시간을 크게 단축할 수 있다.

이미지 최적화

💡 이미지는 인터넷 트래픽의 많은 부분을 차지하며, HTML 및 CSS 파일보다 크기가 큰 경향이 있다.

• 이미지 최적화 방법
  • 이미지 사이즈를 줄여 품질 저하 없이 파일 크기를 줄일 수 있다.
  • 해상도 낮추기
  • 파일 압축
  • 웹용으로 파일 형식 조정하기
• 이미지 최적화 효과
  • 페이지 로드 시간이 줄어든다.
  • 로드 시간이 줄어듦에 따라 검색에 도움이 된다.

이미지 SEO 최적화 방법

• 이미지 파일에 관련성 있고 읽기 쉬운 이름을 지정하고 관련 키워드를 포함
• 키워드를 포함하는 alt 태그를 이미지에 포함
• 반응형 및 모바일 친화적인 이미지 제공
• 사용자 경험을 향상시키기 위해 caption 포함
• Open Graph 및 소셜 공유 이미지 포함

Lazy loading

• 사용자가 브라우저나 콘텐츠를 필요로 할 때까지 웹페이지의 콘텐츠 렌더링을 지연시키는 것
• 웹페이지 로딩 시간을 단축하는데 도움이 된다.

핵심

• 웹페이지가 로드될 때 사용자에게 표시되는 부분은 즉시 로드된다.
• 아래로 스크롤할 때까지 볼 수 없는 이미지는 lazy loading을 사용한다.

일반적인 구현방법

• img태그에 html 속성 사용하기 : loading=”lazy”
• 프레임워크에서 지원하는 lazy loading 사용하기

이미지 외에도 Lazy loading 할 수 있는 리소스

• JavaScript : JavaScript는 render-blocking 리소스다. 즉 JavaScript 코드가 로드될 때까지 브라우저가 페이지를 렌더링할 수 없다. JavaScript 코드를 작은 모듈로 나누어 필요할 때 로드되도록 함으로써 페이지의 로드 시간을 단축시킬 수 있다.
• CSS : CSS 역시 render-blocking 리소스다. CSS 파일을 여러개의 파일로 분할해 필요할 때만 로드되도록 함으로써 block 시간을 줄일 수 있다. Non-blocking CSS를 위해 브라우저에 로드 시기를 알려주는 media 속성이 추가된 자체 link가 있어야 한다.
• iframes : img태그와 마찬가지로 loading 속성을 넣을 수 있다.

Lazy loading의 장점

• 페이지 로드 속도 : 전체 파일을 로드하는 것도다 빠르게 페이지를 로드한다. 즉 웹 사이트 속도를 빠르게 하므로 SEO, 전환율 및 사용자 경험에서 이점이 있다.
• 불필요한 컨텐츠 없음 : 즉 불필요한 데이터 요청 등을 보내지 않으며 불필요한 이미지를 렌더링하지 않는다. 꼭 필요할 때만 요청하므로써 비용을 최소화할 수 있다.

Lazy loading의 단점

• 사용자 경험 : 사용자가 더 빠른 로드 속도를 기대할 수도 있다.
• 서버에 추가적인 요청 : 사용자 인터랙션에 따른 추가적인 서버 요청이 있다. CDN은 이러한 단점을 최소화해줄 수 있는데, 왜냐하면 이미지가 CDN에 캐시되고 브라우저는 origin server에 요청을 보내지 않기 때문이다.
• 추가적인 코드 작성 필요 : lazy loading 구현을 위한 코드를 작성해야 하며, 비효율적으로 작성하는 경우 더 안 좋을 수도 있다.

Eager loading

• 리소스를 가능한 한 빨리 로딩하는 것. 로딩 스크린을 보여주는 어플리케이션들은 이 방법을 쓰고 있을 수 있다.
• 복잡한 페이지, 게임처럼 코드가 무거운 웹 어플리케이션이 선호한다.

CSS, JavaScript 파일 minify하기

💡 당연한 말처럼 들리겠지만 코드 축소를 통해 파일 크기를 줄임으로써 웹페이지 성능을 향상시킬 수 있다.

Minification

소스코드에서 기능을 변경하지 않고 불필요한 문자를 모두 제거하는 프로세스

• 과정
  • 공백, 주석, 세미콜론 제거
  • 변수/함수 이름을 더 짧게 하기
• 결과
  • 소스코드의 크기가 작아짐에 따라 웹페이지 로딩 속도를 높여 웹사이트 경험을 개선한다.
  • 결과적으로 사용자를 만족시키고, SEO를 향상시킬 수 있다.

Obfuscation vs Compression vs Encryption vs Uglification

Obfuscation(난독화)

• 비즈니스 로직을 숨기기 위함
• 코드를 읽을 수 없으므로 reverse engineering이 불가하다.
• 컴퓨터는 읽을 수 있다는 점에서 암호화와는 다르다.
• 변수, 함수 등의 이름을 변경함으로써 파일 크기가 줄어드는 효과가 있긴 하지만 주된 목표는 아니다.

Compression(압축)

• 데이터를 표현하는 데 필요한 비트 수를 줄이는 프로세스
• 공간을 확보하고, 파일 전송 속도를 높여 네트워크 대역폭 비용을 절감할 수 있다.
  

Encryption(암호화)

• 일반 데이터(plain data)를 인코딩된 데이터(encoded data)로 변환하는 과정
• 인코딩된 데이터를 cyphertext라고도 하며, 해독하기 위해 secret key가 필요하다.
• 브라우저는 암호화된 코드를 실행할 수 없다.
• 보안이 목적이며, 반드시 파일 크기를 줄이는 것은 아니다.

Uglification(추상화라고 번역할 수 있을까?)

• 이게 본질적으로 minification(축소)와 동일하다.
• Uglify JS는 JavaScript 축소를 위한 라이브러리다.

처음부터 minified code 작성하는건 어때?

• 당연한 말이지만 코드는 사람이 쓰는 거고, 공백이나 주석 등은 사람을 위해 사용한 것이다.
• 다만 코드가 작성된 이후에는 사람이 아닌 브라우저의 영역이므로 그때서야 minify를 진행하는 것이 타당하다.

단점

• themes, 플러그인, 서버 환경 변수 등 site-dependent 변수 때문에 복잡한 스크립트가 망가질 수 있다.
  • 때문에 다른 성능 튜닝을 같이 해야하며, 축소화만으로는 충분한 소득이 없을 수도 있다.
• 디버깅이 어려운 에러를 발생시킬 수도 있다.

HTTP 요청 최소화하기

• 배경
  • 브라우저는 이미지, 스크립트, CSS 파일 등에 대해 여러 차례 HTTP 요청을 해야한다.
  • 각 요청은 서버를 왕복하므로 웹페이지 전체 로드 시간이 늘어날 수 있다.
  • 여러 호스트 중 하나에 문제가 발생하면 웹페이지가 빠르게 로드되지 않거나 실패할 수 있다.
• 방법
  • 페이지가 로드해야 하는 자산 수 최소화하기
  • 속도 테스트를 통해 많은 시간이 소요되는 HTTP 요청 식별하고 대체할 수 있는 방법 찾기(ex. 더 빠른 이미지)

브라우저 HTTP 캐싱

• 브라우저 캐시
  • 브라우저에서 정적 파일의 사본을 저장하는 임시 저장 위치
  • 동일한 콘텐츠를 반복해 요청하지 않고 최근 방문한 페이지를 훨씬 빠르게 로드할 수 있다.
  • 자주 변경되지 않는 웹페이지의 요소를 캐싱하도록 브라우저에 지시할 수 있다.
• 방법
  • 브라우저 캐싱 지침이 HTTP 응답 헤더에 포함되어 있다.
• 효과
  • 서버가 브라우저로 전송하는 데이터 양이 줄어 사용자의 로딩 시간이 단축된다.

외부 스크립트 최소화하기

• 외부 댓글 시스템, CTA(Call To Action) 버튼, 리드 생성 팝업 등 다른 곳에서 로드되는 스크립트 웹페이지 요소는 페이지가 로드될 때마다 로드해야 한다.
• 스크립트 크키에 따라 웹페이지 속도가 느려지거나 웹페이지가 한 번에 로드되지 않을 수 있다.
  • content jumping, layout shifting이라고도 한다.
  • 특히 모바일 사용자에게 불편하다.

리디렉션 최소화하기

• 다양한 이유로 일부 웹 사이트는 페이지 로드 시 리디렉션을 생성한다.
  • 예를 들어 301은 이름이 변경된 사이트 등에서 사용된다.
• 리디렉션은 페이지 로드 시간을 늘릴 수 있으므로 꼭 필요한 때에만 사용해야 한다.

Reference

Tips to improve website speed | How to speed up websites
How to test the speed of a website
What is lazy loading?
What is an image optimizer? | How to reduce image sizes