반응형 웹 속도빠르게 하는법

1.주된 사용 목적을 결정후 반응형 디자인의 효율적인 사용

Determine Primary Use and Deploy Responsive Design 만약 당신이 반응형 페이지를 디자인하고 있다면, 그 페이지의 목적은 방문자들의 생각이나 의견을 변화시키는 것입니다. 만약 매거진이나 온라인 출판물을 디자인하고 있다면, 그것의 반응형 버전은 그래픽이나 이미지 없이 빠르게 로딩되어야 할 것입니다.

2.모바일 우선 디자인

Go for Mobile-First Design 모바일-우선(모바일-퍼스트) 디자인은 단순하며 초점이 있어야 합니다. 그것은 당신의 작업을 간소화하고 모바일 전용 웹 사이트를 디자인하는 데 도움이 되는 디자인 방법입니다. PC를 먼저 최적화하여 디자인을 기획하는 경우에도 모바일상태에서 변화를 항상 고려하며 디자인이 구현되어야 합니다.

3.반응형 디자인은 단순하게

Responsive Design is All about Simplicity 제거하라. 제거하라. 제거하라. 로딩하는 데 시간이 걸리는 모든 것들은 화면 밖으로 치워 버려야합니다.

데스크탑 버전의 웹사이트들은 반응형 버전에 비해 훨씬 더 많은 디자인 요소를 가질 수 있습니다. 데스크탑 버전의 디자인 요소들 중 정확히 어떤 것들이 반응형 버전에 보여야 할 것인지 확인하는 것은 중요합니다.

반응형 디자인은 반드시 데스크탑 버전의 디자인과 동일할 필요는 없습니다. 고객이 웹사이트에 접속하기 위해 사용하는 기기에 맞게 "적응"시키는 것이 "반응형" 디자인의 큰 부분을 차지합니다.

4.압축!

Compress 웹사이트의 성능은 웹사이트가 요청할 때 로드해야 하는 요소들에 따라 달라집니다.

반응형 디자인에서 페이지 용량, 이미지, 텍스트, 그리고 그밖의 많은 요소들이 잘 실행되려면, 그것들의 품질을 최소화하고 잘 압축해야 합니다.

5.로딩 시간을 최소화

Minimize Loading Time Smashing Magazine의 Johan Johansson은 당신의 웹사이트를 모바일에서 더욱 빠르게 만드는 방법에 대해 유용한 포스트를 집필했습니다.

그가 언급하기를, 연구 결과에 따르면 80%가 넘는 수의 사람들이 그들의 모바일 폰으로 웹 브라우징을 하는 경험에 대해 실망하고 있다고 합니다. 적어도 64%의 스마트폰

사용자들이 웹사이트가 로드되는 데에 4초 미만이 걸리기를 기대합니다. 그것이 당신의 기회의 창입니다.

아마도 당신은 그것을 당신의 목표로 삼거나 더 빠르게 로딩되는 반응형 웹사이트를 만들기 위해 벤치마크할 수도 있을 것입니다.

6.종속성을 줄이기

Reduce Dependencies 다음과 같은 방법을 통해 종속성을 감소시킴으로써 웹사이트가 더 빨리 로드되도록 만들 수 있습니다.

- CSS를 통해 이미지를 로드한다.

- 최소한의 외부 스타일 시트를 유지한다.

- 이미지 대신 CSS3를 사용한다.

- 이미지 스프라이트를 사용한다.

- 웹폰트 아이콘을 사용한다.

- 인라인 프레임을 피한다.

- 인라인 확장 가능한 벡터 그래픽(SVG)을 사용한다.

Get Elastic의 Linda Bustos 역시 "m."으로 시작하는 모바일 사이트로의 리디렉션을 제거하고, 대신 빠르고 신뢰할 수 있는 CDN(Content Delivery Networks; 콘텐츠 전송 네트워크)을 사용할 것을 권장하고 있습니다. 그녀는 또한 반응형 이미지를 사용하고, 클라이언트 측의 프로세스를 최소화하기 위해 JavaScript를 줄이고, 위젯 사용을 피하고, RESS와 같은 특정한 서버 측 기술을 사용할 것을 권장합니다.

7.테스트!

Test, Test, Test 테스트는 마케팅 최적화를 위한 필수 요소입니다. 디자인은 작업 절차의 일부분으로써 테스트를 필요로 합니다. 브라우저 테스트, OS(운영체제) 테스트, 기기 테스트, 속도, 유용성, 링크, 내비게이션, 미학, 그리고 편리함과 같은 다양한 변수들에 대해 테스트를 준비해야합니다. 테스트는 고객을 위해 충분히 가치 있는 반응형 웹사이트를 만들 수있도록 해 주는 실시간 피드백을 제공합니다. 오늘날의 수요는 고객이 어떤 종류의 컴퓨팅 장치를 사용하는지에 구애받지 않고 그들에게 다가가는 것이기에 브라우저와 기기 종류에 걸쳐 디자인하고, 인터넷 연결 속도에 상관 없이 웹사이트에 접근할 수 있도록 해야합니다.