최적화

최적화란?최적화는 보통 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것컴퓨터 공학에서의 최적화는 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미최적화의 필요성1) 이탈률 감소화면을 불러오는 시간이 길어지면 사용자가 페

DOM 트리 가볍게 만들기 DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커지고, 복잡도가 클 수록 DOM 트리가 변경되었을 때 계산해야 하는 것도 많아진다.따라서 HTML 요소들의 관계를 잘 살펴보고, 불필요하게 깊이를 증가시키는 요소가 있다면

사용하지 않는 CSS 제거하기CSS 파일의 모든 코드의 분석이 끝난 후에 CSSOM 트리가 생성된다. 그만큼 불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어진다. 따라서 사용하지 않는 CSS 코드가 있다면 제거하는 것이 좋다. 보통 해당 CSS 코드를 사용

HTML 파일에서 JavaScript 파일을 불러올 땐 script 요소를, CSS 파일을 불러올 땐 link 요소를 사용한다. 이때 파일을 불러오는 위치가 어디인가에 따라서 렌더링 완료 시점이 달라진다.CSS 파일 불러오기화면을 렌더링할 때는 DOM 트리와 CSSOM

이미지 스프라이트클라이언트에서 서버 요청이 증가할수록 로딩 시간은 점점 늘어난다. 따라서 웹 페이지를 로드하는 데 필요한 서버 요청 수를 줄이기 위해 이미지 스프라이트 기법을 사용할 수 있다.e.g. 네이버의 메인 화면에 있는 박스에 표시한 아이콘 이미지의 경우 각각의

캐시는 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻하며, 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 캐시를 사용하면 리소스를 매번 다운로드받을 필요 없이 캐시에서 꺼내와 재사용하면 되기 때

CDN은 콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계되었다. 네트워크 지연(latency)은 유저와 호스팅 서버간의 물리적 거리의 한계가 존재하기 때문에 발생할 수 밖에 없다. 유저와 서버의 거리가 멀다면 지연(latency) 또한 늘어난다. CDN은 이를 해

말 그대로 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미웹 개발을 할 때, 애플리케이션의 규모가 커지면서 코드의 양이 방대해지고, 다양한 라이브러리를 가져다 사용하게 되면 불필요한 코드를 그대로 가져가는 경우가 생각보다 많이 생기는데 이런 불필요한

필요한 모듈만 import 하기import 구문을 사용해서 라이브러리를 불러와서 사용할 때, 라이브러리 전체를 불러오는 것이 아니라 필요한 모듈만 불러오면 번들링 과정에서 사용하는 부분의 코드만 포함시키기 때문에 트리쉐이킹이 가능해진다.import React from

Lighthouse구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있다.Lighthouse는 Chrome DevTool

1) Chrome 개발자 도구에서 실행하기크롬에서 검사하고 싶은 페이지의 url을 입력한다.개발자 도구를 연다.lighthouse 탭을 클릭한다.Generate report를 클릭한다. Categories에서 특정한 지표만 선택하여 검사할 수도 있다.대략 30-60초간