웹페이지 로딩 속도 개선 방법

이미지 압축 <- 용량 줄이기 (사진, 영상):

• 이미지를 압축하여 파일 크기를 줄이면 웹페이지의 로딩 시간이 단축되어 사용자 경험을 향상시킵니다. 이를 통해 모바일 사용자나 네트워크 속도가 느린 사용자도 웹페이지를 빠르게 로드할 수 있습니다.

불필요한 코드 정리 및 압축 (특히 js는 동적 자료로 HTML보다 많은 시간이 소요된다):

• 불필요한 코드를 제거하고 필수 코드를 압축함으로써 파일 크기를 최소화하고 로딩 시간을 단축할 수 있습니다. 특히 JavaScript는 동적 자료를 처리하는 데 시간이 많이 소요되므로, 코드 최적화는 성능 향상에 중요합니다.

브라우저 캐싱 활성화 (최초 진입은 아니더라도 그 이후에서는 빠르게 로딩):

• 브라우저 캐싱을 활용하여 사용자가 최초 방문 후에는 필요한 리소스를 다시 다운로드하지 않도록 합니다. 이로써 사용자는 이전에 방문한 웹페이지를 더 빠르게 로딩할 수 있습니다.

서버의 성능 및 호스팅 지역 변경:

• 서버의 성능을 향상시키고 호스팅 서버를 사용자에게 가까운 지역으로 변경하면 웹페이지의 응답 속도가 빨라지며, 사용자의 지리적 위치에 따라 성능 차이를 최소화할 수 있습니다.

CDN(콘텐츠 전송 네트워크) 사용:

• CDN을 통해 콘텐츠를 전 세계의 여러 서버에 분산시켜 사용자에게 가까운 위치에서 콘텐츠를 제공함으로써 로딩 시간을 최적화할 수 있습니다. 이는 전 세계 사용자에게 일관된 빠른 성능을 제공하는 데 도움이 됩니다.

웹팩 사용:

• 웹팩은 여러 모듈을 번들링하고 최적화하는 도구로, 웹페이지의 파일 크기를 줄이고 로딩 속도를 향상시키는 데 도움이 됩니다.

style은 상단, js는 하단에서 불러오기:

• CSS 파일은 페이지 상단에서, JavaScript 파일은 페이지 하단에서 불러오면 렌더링이 빨라지고 사용자는 더 빠르게 페이지를 볼 수 있습니다. 이는 페이지의 시각적인 부분이 먼저 로드되어 사용자 경험을 향상시킵니다.

SEO 검색엔진 최적화:

• 웹페이지의 SEO를 최적화하여 검색 엔진에서 높은 순위에 노출되도록 합니다. 올바른 메타 태그, 키워드 사용, 링크 구조 등을 고려하여 검색 엔진에서 페이지를 쉽게 찾을 수 있도록 합니다.

라이브러리 의존도 낮추기:

• 필요한 경우에만 라이브러리를 사용하고 불필요한 의존성을 최소화하여 파일 크기를 줄이고 성능을 향상시킵니다.

CSS 선택자를 많이 사용하면 DOM을 거슬러 올라가는 시간 소요 때문에 복잡한 셀렉터 사용은 지양:

• CSS 선택자를 간단하고 효율적으로 사용하면 웹페이지의 렌더링 성능을 향상시킬 수 있습니다. 복잡한 선택자는 DOM을 더 많이 탐색해야 하므로 성능에 부정적인 영향을 미칠 수 있습니다.