본문 바로가기

Web Programming

높은 성능의 웹사이트 만들기

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Building High Performance Websites

(원문 : https://divshot.com/blog/web-performance/building-high-performance-websites)

 

 

 

원문의 내용을 살펴보면 웹사이트의 성능(Performance)가 얼마나 중요한지에 대해서 이야기를 하고 있다. 웹사이트가 로드(Load)되는데 까지 시간이 비즈니스에 중요한 영향을 미친다고 언급하고 있다. 실제로 이런 성능의 개선이 비즈니스에 영향을 미치는 지는 검색 엔진 랭킹으로 대변이 된다고 하는데 이는 How Website Speed Actually Impacts Search Ranking이라는 내용을 살펴보면 된다.

 

CDN 을 쓴다던가 혹은 GZIP 을 통한 압축으로 텍스트 컨텐츠들의 용량을 줄인다던가 하는 것, Cache-Control 헤더를 사용하여 캐시 설정을 하는 것들로 이미 성능을 향상시키기 위한 작업들을 하여 성능과 관련된 이슈가 없을 것으로 판단이 되지만 실제 웹사이트는 그렇지 않은 듯 하다.

 

최초 페이지에 도착하거나 다른 페이지로의 이동 시에 화면이 아주 잠깐 흰색으로 깜빡인다거나 리소스들이 표현되는데 걸리는 시간이 조금 다르다거나 하는 경우가 있다. 이런 현상들을 줄이고 개선하기 위해서는 여러 가지 팁들을 제공하는데 이를 확인해 보면 좋을 것 같다.

 

 

Chrome Developer Tools

 

Network 나 Audit 탭을 통해서 성능 최적화와 관련된 팁을 얻을 수 있다. Network 는 요청에 대한 로딩이 걸리는 정보를 모니터링 할 수 있는 정보를 제공해주고 Audits 에서는 페이지 성능이나 네트워크 비용 향상에 대한 정보들을 분석할 수 있다.

 

 

 

 

PageSpeed Insights

 

PageSpeed Insights 는 Chrome Extension 으로 포함되어있는 개발지원 툴이다. 이것 역시 적절한 성능을 내기 위한 적절한 지표들을 가지고 페이지 별로 점수를 매겨주는데 꽤나 유용할 것으로 보인다.

 

 

 

Leaner Dependencies

 

보통 여러 가지 Javascript framework 이나 library들을 사용하게 되면 사이트의 리소스 크기가 늘어남에 따라 그 성능에도 영향을 미친다. 예를 들면 Bootstrap 같은 것의 경우에도 여러가지 컴포넌트들이 있지만 이들 역시 사용하지 않는 것들이 있으니 커스터마이즈(Customize)하여 필요한 것들만 다운 받을 수 있다. 이런 것들만 잘 정리해도 상당히 리소스의 크기를 줄이는데 도움이 된다.

 

 

External CDNs

 

위에 있는 프레임워크들을 커스터마이징 할 수 없는 경우가 있는데 그런 경우에는 CDN 을 사용하는 것이 좋다. CDN 을 사용하게 되면 정말 많은 이점들이 있다.

 

 

  • CDN에 있다는 것 그 자체의 이득!
  • CDN과 도메인이 분리 되어있어서 로컬 컨텐츠들과 CDN을 병렬로 다운로드 할 수 있다.
  • CDN캐시를 통해서 더 빠른 속도로 읽어올 수 있다.

 

뭐 결국 내용을 살펴보면 CDN에 의해 CDN이니까 CDN이라서 인 것 같지만 이런 공개되어있는 무료 CDN 을 지원하는 Google 을 통해서 해당 라이브러리들을 사용할 수 있다.

 

 

Page-Specific Dependencies

 

작성자의 케이스를 보면 컨텐츠 위주의 사이트를 개발할 때 보통 모든 라이브러리와 플러그인까지도 전역 스크립트로 통째로 선언하는 경우가 많은데 이때 보통 그런 플러그인들을 한 두번 정도 쓰는 경우가 많다고 한다.

 

해당 라이브러리나 플러그인들을 자주 써야하는 경우에는 글로벌로 선언해 두는 것이 맞지만 적은 빈도수로 호출이 되거나 한번만 사용하는 경우에는 해당 리소스들을 페이지 별로 불러서 호출하는 것이 좋다고 한다. 이렇게 자바스크립트를 통째로 패키징 할 때의 문제점이 있다고 하니 해당 내용도 읽어보면 도움이 될 것이다.

 

 

Web Fonts & Icon Sets

 

이 경우는 사이트의 특성에 따라서 필요할 수도 있고 없을 수도 있다. 보통 웹 폰트를 사용하는 경우에 웹 사이트의 속도에 많은 영향을 미치게 되는데 폰트를 여러 개 사용하게 되면 더욱 그렇다. 아래와 같은 사이트들을 통해서 외부 CDN을 통해 폰트와 아이콘을 사용할 수 있다.

 

 

 

 

The Little Things Add Up

 

다음 방법들은 필수적인 것들은 아니지만 성능 향상에 도움을 준다.

  • 비용이 많이 드는 CSS Property 사용 자제 (예 : box-shadow)
  • 불필요한 background 와 디자인 리소스를 삭제
  • CSS 나 javascript를 정리 하는 것
  • 이미지 에 width, height 속성을 부여하는 것

 

페이지가 로드되면서 하얀 플래시처럼 번쩍번쩍 하는 것은 스타일 시트가 로드 되기 전에 배경화면을 검정색으로 표시하는 트릭을 써서 해결할 수도 있습니다.