여러 사이트를 접속하다보면 어떤 사이트는 금방 접속되는 반면에 한참이 걸린 후에야 페이지가 나타나는 것을 본 적이 있을 것이다. 사이트의 구조에 따라 페이지가 로딩되는 속도가 다르며 너무 오래 걸릴 경우에는 접속자에게 나쁜 인상을 줄 수 있으며 기업이나 회사와 같은 곳의 사이트에서 접속이 오래 걸릴 경우에는 브랜드에 안 좋은 영향을 줄 수도 있다. 어떤 사이트의 속도가 다른 사이트에 비해 어떤지 알아보는 방법에는 구글의 'Testmysite' 라는 사이트를 이용하는 방법이 있다.


모바일 페이지 로드 속도 테스트 : 'Testmysite'


'Testmysite'는 구글에서 운영하는 사이트이다.

한글 버전 : https://testmysite.withgoogle.com/intl/ko-kr

영어 버전 : https://testmysite.thinkwithgoogle.com/intl/en-us


[ 'Testmysite' 메인 페이지 ]


사이트에 접속을 하고 테스트하고 싶은 사이트 주소를 입력한다.


[ 사이트 검사중 ]


사이트 분석하기를 누르면 3g에서의 속도 테스트와 html, css, javascript 등을 여러 소스를 분석하게 되며 모바일 사용 편의성도 검사하게 된다.


[ 사이트 검사 결과 ]


사이트 검사결과 3g에서 로드시간은 7초가 나오며 양호함을 나타냈고 그로 인해 26%의 예상 방문자 손실률이 나타났다. 

검사 결과는 조금씩 차이가 있을 수 있으나 대부분 비슷한 결과를 나타낸다.


[업종 비교]


해당 사이트는 양호함을 받긴 했지만 같은 업종의 사이트들보다 로드 속도가 느린 결과를 얻었다.



[속도 높이기]


사이트 속도가 높아지면 방문자를 더 많이 확보할 수 있는데 그 방법을 알려주기도 한다.



[최고 해결 방안]


초기 렌더링에 중요하지 않은 자바스크립트는 첫 번째 렌더링 이후까지 비동기 또는 지연되어야 한다는 등 여러가지 해결 방안이 제시된다. 그리고 무료 보고서를 제공해주는데 이때 필요한 것은 결과를 받을 이메일 주소이다.



사이트를 제작하거나 운영하고 관심이 많은 분들은 'Testmysite' 사이트를 이용해보는 것도 좋은 방법일 것 같다.



과거에는 PC로만 인터넷에 접속했기 때문에 웹 사이트 디자인을 할 때 PC의 모니터를 기준으로 했다면 요즘은 PC, 테블릿, 스마트폰 등 다양한 기기들의 출현으로 글씨가 작게 보이는 등의 문제가 발생했다. 그런 이유로 PC버전과 모바일버전의 웹사이트를 따로 제작하게 되면 비용, 시간, 인력이 모두 2배로 들기 때문에 비효율적이다. 그리고 드디어 반응형 웹이라는 기술이 등장했다.


반응형 웹이라는 것은 다양한 기기, 환경마다 최적화된 웹사이트를 제공하는 것을 말한다.





반응형 웹의 장점


1. 유지보수가 간편하다.

- 모바일 버전과 데스크톱 버전을 따로 만들 경우 새로운 내용을 추가하거나 수정할 때 개별적으로 수정하는 반면 반응형 웹에선 한번에 할 수 있다.


2. 모바일 점유율의 증가.

- 모바일로 인터넷에 접속하는 사람들을 위한 모바일화면에 최적화된 화면을 구성할 수 있다.


3. 마케팅에 유리하다.

- 각 기기들에 최적화된 화면을 제공함으로써 웹 사이트에서 보여주고자 하는 내용을 잘 전달할 수 있다.


4. 검색 엔진 최적화가 가능하다.

- 검색 엔진 최적화(SEO, Search Engine Optimize)란, 포털 사이트나 검색 사이트에서 사용자가 특정 키워드로 검색했을 때 검색 결과에서 상위권에 나타나도록 관리하는 작업을 말하는데 데스크톱 전용 웹사이트와 모바일 전용 웹사이트 등으로 사이트가 나눠지면 주소 또한 나눠지게 되고 이런 경우, 검색엔진이 검색 결과를 나타냄에 있어서 불리함을 가진다. 반면에 반응형 웹을 이용하여 웹 사이트를 만들면 하나의 주소만을 사용하게 되어 검색 결과 노출에 유리함을 가지게 된다.


5. 미래 지향적 기술이다.

- 미래에는 테블릿, 스마트폰뿐만 아니라 TV, 냉장고, 내비게이션 등 더 다양한 기기들로 웹 사이트를 접속할 수 있게 될 것이다. 그렇기 때문에 다양한 화면에 최적화가 가능한 반응형 웹 기술이 필수적이다.



반응형 웹의 단점


1. 기획력과 디자인의 어려움

- 기기, 환경마다 최적화된 구조를 설계해야 하기 때문에 제작함에 있어서 조금 더 어렵다.


2. 높은 비용

- PC만 지원하는 웹 사이트 제작보다 더 많은 비용이 발생하며 유지 보수 비용 또한 높다.




반응형 웹을 만들기 위해서는 미디어 쿼리가 필요하다. 


미디어 쿼리는 CSS3부터 지원되는 기술로 미디어 타입, 화면 크기 등을 기준으로 다른 스타일 시트를 적용시켜 주며 이를 이용하여 화면 크기가 달라질 때 스타일을 바꿀 수 있고 반응형 웹을 만들 수 있다.



+ Recent posts