목록Web/웹 성능 최적화 (7)

거북이개발자

[웹 성능 최적화] 웹 최적화 실습

1. WebPageTest (1) WebPageTest란? : 웹 페이지의 성능을 진단하는 방법을 알려주는 페이지이다. (2) 모바일 사이트 성능 측정하기 : - [Test Location] 드롭박스 메뉴에서 선택 가능하다. - 네트워크 환경 : 설정 가능하다. (3) 모바일 사이트 성능 측정하기 : - First Byte Time : First Byte Time은 HTTP 요청을 했을 때 처음 byte가 브라우저에 도달하여 프로세싱이 시작되는 시간을 뜻합니다. 구체적으로 브라우저의 요청 준비 시간, 서버 처리시간, 네트워크 혼잡에 따른 지연시간을 포함한다. First Byte Time이 느린 경우 대부분 서버의 처리 시간이 오래 걸렸다고 의심해 봐야 한다. 일반적으로 500ms 이하의 속도가 나오도록 ..
Web/웹 성능 최적화 2021. 4. 1. 15:50
[웹 성능 최적화] 웹 프로토콜 최적화

1. HTTP의 발전 (1) : - HTTP/0.9 : 웹 콘텐츠를 요청하는 GET 메소드만 존재하고 HTML만 읽을 수 있고, 클라이언트의 정보를 서버에 전달할 방법은 없었다. - HTTP/1.0 : HTTP 페이로드 외에도 헤더를 통해 클라이언트와 서버의 정보를 전달할 수 있다. 또한 이미지나 동영상 등 다양한 정보를 주고받을 수 있게 되었다. POST 메소드를 추가하여 클라이언트의 정보를 웹 서버로 전달하는 방법도 지원하기 시작했다. Content-Encoding 헤더를 통해 클라이언트 - 서버 간 지원하는 압축 알고리즘 정보를 서로 공유함으로써 압축을 지원한다. (2) HTTP/1.1 : - HTTP의 첫 번째 공식 표준 버전이다. GET, POST 외에 PUT, DELETE를 이용해 파일 업로드..
Web/웹 성능 최적화 2021. 3. 31. 17:34
[웹 성능 최적화] 웹에서 가속 이끌어 내는 법

1. 웹 브라우저 현황 (1) 웹 브라우저 현황 : 2. 웹 브라우저 동작 이해하기 (1) 브라우저 동작 원리 : - 웹 사이트 주소를 입력함으로써 브라우저의 동작이 시작된다. - 브라우저는 가장 먼저 도메인 서버와 통신하여 접속하려는 호스트의 IP를 찾는다. - 그리고 해당 아이피를 가진 서버와 통신을 시도해 TCP 연결을 맺는다. - HTTPS는 암호화된 연결을 생성하려는 협의 단계가 더 추가된다. - 브라우저는 서버로부터 필요한 리소스들을 다운로드해 이를 화면에 표현한다. - 브라우저가 리소스를 다운로드할 때는 랜딩페이지의 HTML을 서버에 요청해 다운로드한다. - 그리고 HTML의 구문을 분석(parsing)하면서 참조된 하위 리소스들을 차례로 다운한다. (2) 브라우저 아키텍처 : 브라우저는 크..
Web/웹 성능 최적화 2021. 3. 26. 20:31
[웹 성능 최적화] 이미지 최적화

1. 이미지의 중요성 (1) 화소 밀도 : 화소 밀도란 물리 스크린 공간 안에 얼마나 많은 픽셀이 압축되어 있는가를 의미한다. 1x, 2x, 3x, 등의 기기 픽셀 비율(DPR)로 표현한다. - DPR(Device Pixel Ratio) : 단위 길이 안에 존재하는 픽셀의 개수를 상대적으로 나타내는 단위이다. - 포인트 : 1x 에서는 40픽셀, 2x 에서는 80픽셀, 3x 에서는 120픽셀의 너비를 가진 이미지를 뜻한다. - Hero 이미지(대문 이미지) : 사이트 처음 접속시 보는 가장 크고 특색 있는 이미지를 뜻한다. 사용자는 Hero 이미지를 보는 순간 홈페이지가 대부분 로딩되었다고 느낀다. - 개발자 고민 : 고품질 이미지를 그대로 사용하면서 웹 성능 문제가 생기지 않게 하는 것. 2. 디지털 ..
Web/웹 성능 최적화 2021. 3. 26. 11:44
[웹 성능 최적화] 웹 성능을 개선하는 기본적인 방법

1. HTTP 요청 수 줄이기 (1) HTTP 요청 : 웹 페이지에서 요청하는 콘텐츠의 수가 많을수록 로딩 시간이 길어진다. 콘텐츠는 동일하게 유지하며 HTTP 요청 수를 줄이는 방법을 찾아야 한다. (2) 클라이언트가 웹 서버와 통신하는 법 : - 브라우저는 DNS 시스템으로 특정 도메인의 접속 IP를 알아내 접속을 하고 - HTML 파일을 먼저 응답받은 후 HTML 내에 있는 CSS, JS, Image 등을 차례로 호출한다. - 브라우저가 HTML을 모두 해석하여 콘텐츠를 전부 받아오기까지 호출이 계속 진행 된다. (3) 스크립트 파일 병합 : -소프트웨어 공학에서 제안하는 정복과 분할 : HTTP 요청 수를 증가시키므로 웹 성능에 부정적인 영향을 미친다. - 기능 단위 모듈화 : 여러 파일을 하나의..
Web/웹 성능 최적화 2021. 3. 24. 21:47
[웹 성능 최적화] 웹 최적화

1. 웹 최적화란? (1) 웹 최적화란 : 웹 최적화란 최고의 웹 성능을 구현하기 위해 최고의 조건을 만드는 다양한 노력을 의미한다. 즉 최고의 성능을 만드는 최적화 조건을 갖추는 것이다. 최적화에는 크게 세 가지 방법이 있다. (2) 프런트엔드 최적화 : 웹 UI/UX 관련된 최적화이다. 주로 HTML, JS, CSS, Image을 최적화를 진행한다. 최적화가 잘되어 있는 웹사이트는 브라우저에서 콘텐츠를 다운로드, 로딩, 렌더링 할 때 속도가 빨라진다. 브라우징 시간별 콘텐츠를 볼 때 대부분 프런트엔드에서 발생한다. 프런트엔드 최적화하는 대표적 기술은 표와 같다. 스트립트를 병합하여 브라우저의 호출 개수를 줄인다. 도메인 수를 줄여 DNS조회를 최소화한다. 스크립트 크기를 최소화해 바이트자체를 줄인다...
Web/웹 성능 최적화 2021. 3. 24. 16:36
[웹 성능 최적화] 웹 성능이란?

1. 웹이란? (1) 웹 : 오늘날 인터넷에 연결된 컴퓨터를 통해 정보를 공유할 수 있는 인터넷 대표적 서비스이다. (2) 웹 3요소 : - URL(Uniform Resource Locator) : 웹 자원이 인터넷상 어느 위치에 존재하고 있는지 알려주는 방법. 구성 요소로는 클라이언트와 서버가 어떤 방식으로 주고받을지 결정하는 프로토콜, 서비스의 이름을 대표하는 도메인 영역, 해당 자원이 위치하는 장소를 구조적으로 나눈 디렉터리 실제 자원이 존재하는 파일 확장자를 포함하는 자원의 결로 - 네트워크 프로토콜 : URL을 통해 알게 된 웹의 자원 위치에 접근하는 방식이다. 웹에서는 대부분 HTTP를 사용한다. HTTP는 정보를(클라이언트와 서버 사이에 필요한 정보) 주고받는 헤더 부분과 실제 데이터를(HT..
Web/웹 성능 최적화 2021. 3. 23. 18:55
Prev 1 Next