웹 퍼포먼스

Web performance

웹 퍼포먼스는 웹 페이지가 다운로드되어 사용자의 웹 브라우저에 표시되는 속도를 말합니다.웹 성능 최적화(WPO) 또는 웹 사이트 최적화는 웹 성능 향상에 대한 지식 분야입니다.

웹 사이트 다운로드 속도가 빨라짐에 따라 특히 인터넷 접속 속도가 느린 사용자나 모바일 [3]기기를 사용하는 사용자에게 방문자 유지율[1][2], 충성도 및 사용자 만족도가 향상되는 것으로 나타났습니다.또, Web 퍼포먼스는, Web 경유로 이동하는 데이터의 양을 줄여, Web 사이트의 소비 전력과 환경에의 [4]영향을 저감 합니다.페이지 로드 속도에 영향을 줄 수 있는 측면에는 브라우저/서버 캐시, 이미지 최적화 및 암호화(SSL 등)가 있으며, 이는 페이지를 [5]렌더링하는 데 걸리는 시간에 영향을 미칠 수 있습니다.웹 페이지의 성능은 다층 캐시, 프레젠테이션 레이어 컴포넌트의 경량 설계, 서버 측 컴포넌트와의 비동기 통신 등의 기술을 통해 향상될 수 있습니다.

역사

웹이 생겨난 첫 10여 년 동안 웹 성능 향상은 주로 웹 사이트 코드를 최적화하고 하드웨어 한계를 극복하는 데 초점을 맞췄습니다.Patrick Killea의 2002년 저서 Web Performance Tuning에 따르면 사용된 초기 기술 중 일부는 단순한 서블릿 또는 CGI를 사용하여 서버 메모리를 늘리고 패킷 손실 및 재전송을 [6]찾는 것이었습니다.비록 이러한 원칙들이 현재 인터넷 애플리케이션의 최적화된 기초의 대부분을 구성하고 있지만, 브라우저 디스플레이 속도를 개선하려는 시도가 훨씬 적다는 점에서 현재의 최적화 이론과 다르다.

Steve Souders는 2004년에 "[7]웹 퍼포먼스 최적화"라는 용어를 만들었습니다.그 당시 Souders는 WPO가 "신흥 산업"으로 웹에 미치는 영향에 대해 몇 가지 예측을 했습니다.예를 들어 웹사이트의 디폴트 속도, 통합 속도, 퍼포먼스에 대한 웹 표준, 최적화의 환경 영향,[8] 차별화 요소로서의 속도 등이 그것입니다.

Souders가 2007년에 밝힌 주요 요점 중 하나는 웹 사이트를 다운로드하고 표시하는 데 걸리는 시간의 최소 80%가 프론트 엔드 구조에 의해 제어된다는 것입니다.이 지연 시간은 일반적인 브라우저 동작 및 HTTP [9]작동 방식을 인식함으로써 단축할 수 있습니다.

최적화 기술

웹 퍼포먼스 최적화는 웹 사이트 방문 시 사용자 환경(UX)을 개선하므로 웹 디자이너 및 웹 개발자가 매우 선호합니다.웹 페이지 로드 시간을 단축하기 위해 웹 최적화 작업을 간소화하는 몇 가지 기술을 사용합니다.이 프로세스를 프론트 엔드 최적화(FEO) 또는 콘텐츠 최적화라고 합니다.FEO는 파일 크기를 줄이고 "특정 페이지를 로드하는 데 필요한 요청 수를 최소화"하는 데 주력합니다.

컨텐츠 전송 네트워크(전세계의 다양한 장소에 분산되어 있는 프록시 서버 그룹)의 이용은, 네트워크의 근접성에 근거해 특정의 유저의 서버를 선택하는 효율적인 전송 시스템입니다.일반적으로 응답 시간이 가장 빠른 서버가 선택됩니다.

다음 기술은 일반적으로 사용되는 웹 최적화 태스크로 웹 개발자에 의해 널리 사용됩니다.

웹 브라우저는 웹 페이지를 다운로드할 때 전송되는 각 Hypertext Transfer Protocol(HTTP) 요청에 대해 별도의 TCP(Transmission Control Protocol) 연결을 엽니다.이러한 요청은 다운로드에 필요한 페이지 요소의 총 수입니다.단, 브라우저는 단일 호스트에 대한 특정 수의 동시 연결만 열 수 있습니다.병목현상을 방지하기 위해 자원 통합을 통해 개별 페이지 요소의 수를 줄입니다.이것에 의해, 작은 파일(이미지등)이 1개의 파일로 번들 됩니다.따라서 HTTP 요청과 웹 페이지를 로드하는 데 필요한 "라운드 트립" 수가 줄어듭니다.

웹 페이지는 JavaScript 및 Hypertext Markup Language(HTML)와 같은 코드 파일로 구성됩니다.웹 페이지가 복잡해지면 웹 페이지의 코드 파일 및 로드 시간도 복잡해집니다.파일 압축으로 코드 파일을 최대 80% 줄일 수 있으므로 사이트 응답성이 향상됩니다.

웹 캐싱 최적화를 통해 서버 부하, 대역폭 사용률 및 지연 시간을 줄일 수 있습니다.CDN은 전용 웹 캐싱 소프트웨어를 사용하여 시스템을 통과하는 문서의 복사본을 저장합니다.특정 조건이 적용되는 경우 캐시로부터의 후속 요구가 충족될 수 있습니다.웹 캐시는 CDN의 클라이언트 측(전방 위치) 또는 웹 서버 측(후방 위치)에 있습니다.웹 브라우저는 HTTP 캐시 또는 웹 캐시를 통해 재사용할 수 있도록 콘텐츠를 저장할 수도 있습니다.웹 브라우저의 요청은 보통 HTTP 캐시로 라우팅되어 캐시된 응답을 사용하여 요청을 수행할 수 있는지 여부를 확인합니다.이러한 조회가 이루어지면 캐시에서 응답이 이루어집니다.이를 통해 네트워크 지연 및 데이터 전송 관련 비용을 줄일 수 있습니다.HTTP 캐시는 요청 및 응답 헤더를 사용하여 설정됩니다.

코드 최소화는 웹 개발자가 작성한 코드와 네트워크 요소가 코드를 해석하는 방식 간의 불일치를 구별합니다.최소화를 통해 코드의 최소화를 위해 코멘트 및 추가 공간을 제거하고 변수 이름을 크런치하여 파일 크기를 60%까지 줄일 수 있습니다.캐시 및 압축과 더불어 손실 압축 기술(오디오 파일에 사용되는 것과 유사)은 많은 고해상도 이미지에서 불필요한 헤더 정보를 삭제하고 원본 이미지 품질을 낮춥니다.픽셀의 복잡성이나 색상의 변화 등, 이러한 변화는 최종 유저에게 있어서 투과적이며, 이미지의 인식에 현저하게 영향을 주지 않습니다.또 다른 기술은 래스터 그래픽을 해상도에 의존하지 않는 벡터 그래픽으로 대체하는 것입니다.벡터 치환은 단순한 기하학적 [citation needed]영상에 가장 적합합니다.

이미지와 비디오를 천천히 로드하면 초기 페이지 로드 시간, 초기 페이지 무게 및 시스템 리소스 사용량이 감소합니다.이 모든 것이 웹 사이트 [10]성능에 긍정적인 영향을 미칩니다.오브젝트가 필요한 시점까지 오브젝트의 초기화를 연기하기 위해 사용됩니다.브라우저는 사용자가 한 번에 모든 이미지가 아닌 페이지를 스크롤할 때 등 필요할 때 이미지를 페이지 또는 게시물에 로드합니다.이것은 기본 동작으로 당연히 시간이 걸립니다.

HTTP/1.x 및 HTTP/2

웹 브라우저는 병렬 사용자 요청에 여러 TCP 연결을 사용하기 때문에 네트워크 리소스의 폭주와 브라우저 독점 현상이 발생할 수 있습니다.HTTP/1 요구에는 관련 오버헤드가 수반되기 때문에 대역폭 제한과 사용률 증가에 따라 웹 퍼포먼스가 영향을 받습니다.

HTTP/1, HTTP/2와 비교

  • 텍스트가 아닌 바이너리입니다.
  • 순서가 매겨져 차단되지 않고 완전히 다중화되어 있습니다.
  • 따라서 병렬 처리를 위해 하나의 연결을 사용할 수 있습니다.
  • 헤더 압축을 사용하여 오버헤드를 줄입니다.
  • 서버가 클라이언트[11] 캐시에 응답을 프로 액티브하게 「접속」할 수 있습니다.

웹 사이트의 호스팅 서버 대신 CDN은 이미지, JavaScript 파일, Cassading Style Sheet(CSS; 캐스케이드 스타일 시트) 파일 등의 웹 리소스를 [12]최종 사용자에게 보다 효율적으로 제공하기 위해 HTTP/2와 함께 사용됩니다.

레퍼런스

  1. ^ "Google Adds Site Speed To Search Ranking". Retrieved 4 December 2012.
  2. ^ Sharon, Bell. "WPO Preparing for Cyber Monday Traffic". CDNetworks. Retrieved 4 December 2012.
  3. ^ Souders, Steve. "Web First for Mobile". Retrieved 4 December 2012.
  4. ^ Bellonch, Albert. "Web performance optimization for everyone". Retrieved 4 December 2012.
  5. ^ "Why Website Speed Matters [Infographic] - LoveUMarketing". LoveUMarketing. 2018-10-06. Retrieved 2018-10-21.
  6. ^ Killelea, Patrick (2002). Web Performance Tuning. Sebastopol: O'Reilly Media. p. 480. ISBN 059600172X.
  7. ^ Frick, Tim (2016). Designing for Sustainability: A Guide to Building Greener Digital Products and Services. Boston: O'Reilly Media. p. 195. ISBN 1491935774.
  8. ^ Frick, Tim (2016). Designing for Sustainability: A Guide to Building Greener Digital Products and Services. Boston: O'Reilly Media. p. 56. ISBN 1491935774.
  9. ^ Souders, Steve (2007). High Performance Websites. Farnham: O'Reilly Media. p. 170. ISBN 0596529309. Archived from the original on 8 March 2019.
  10. ^ "Lazy loading - Web Performance MDN". developer.mozilla.org. Retrieved 2022-03-15.
  11. ^ "HTTP/2 Frequently Asked Questions". HTTP Working Group. Retrieved 14 April 2017.
  12. ^ "HTTP/2 – A Real-World Performance Test and Analysis". CSS Tricks. Retrieved 14 April 2017.