1. Page Speed는 SEO에서 어떤 역할을 하는가?
페이지 로딩 속도는 홈페이지의 여러가지 요소중에 절대 간과되어서는 안되는 중요한 요소입니다. 페이지 방문자들이 로딩 속도가 특정 이상 시간 이상이되면 페이지를 이탈하기 시작한다는 얘기를 많이 들었을 것입니다.
구글 리서치1)에 따른면, 페이지 로딩 속도가 3초가 되면 이탈율이 32% 증가하는 것으로 나타났고, 10초가 되면 이탈율이 123%까지 증가하는것으로 조사되었습니다.
네트워크 기술과 컴퓨팅 하드웨어 성능이 향상되면서 사이트를 방문하는 유저는 점점 더 짧은 로딩 속도에 익숙해지기 마련입니다. 아마도 시간이 흐름에 따라, 기술이 현재보다 더 발전하게 된어 더 빠른 속도가 보편화되는 시점에서는 3초에서의 이탈율은 32%보다 더 증가할 가능성이 있고, 어쩌면 1초안에 응답이 없으면 완전히 이탈해버릴 수도 있습니다. 왜냐하면 네트워크라는 영역에서 미래의 1초와 과거의 1초는 분명 다른 의미를 가질 것이기 때문입니다. 굳이 상대성 이론을 언급하지 않아도 우리는 이미 경험으로 알 수 있습니다. 2000년도 이전에 전화선을 이용하여 인터넷을 하던 시절, 인터넷에 연결하기까지만 하더라도 1분의 시간이 소요되었지만, 그당시의 우리는 그것을 느리다고 느끼지 못했습니다. 그런던것이 불과 20년만에 그 속도는 3초 이내로 줄어들었고, 현재의 3초의 인내심이 1초가 되는것도 그리 오랜 시간이 걸리지는 않을것입니다.
사람들의 인식의 변화, 다른 말로 하면, 페이지가 로딩되는 시간의 참을성으로 간주되는 사람의 감정의 영역을 그럴 수 있다고 인정하더라도, 기술적으로 빠른 페이지 로딩 속도가 비즈니스에서 홈페이지의 역할로서 중요한 역할을 하고 있다는 것은 데이타의 영역이 되고 있습니다. 왜냐하면, 구글이라는 거대 서치엔진에서 Page Ranking을 결정하기 위한 중요한 변수로서 속도를 도입하였기 때문입니다.
Page Loading 속도가 중요한 Factor로 간주되기 시작한것은 "Friday, April 09, 2010년"으로 거슬러 올라갑니다. 구글에서 발표한 문서
2)를 살펴보면, 구글이 Page Speed를 중요 요소로 인식한 이유는, 빠른 속도는 사용자에게 긍정적인 경험(User Experience)을 제공하고, Operating Cost를 줄여주기 때문이었습니다.
긍정적인 User Experience은 사용자가 느끼는 감정을 얘기하는 것입니다. 빠른 속도에서 오는 스마트한 감정들이 신뢰와 연결되는 것을 의미합니다.
반면, 구글에서는 Operating Cost에 대해서 구첵적인 언급을 하고 있지는 않지만, Operating Cost를 줄인다는 의미는 다음과 같습니다.
- 1. Google Search Engine의 Operating Cost:
구글 서치 엔진의 crawler bot은 각 사이트를 돌아다니면서, 해당 페이지를 다운로드 받습니다. 구글 입장에서는 수십만개의 사이트를 돌어다녀야하다보니, 하나의 사이트에 머무르는 시간을 최소화해야 합니다. 페이지의 사이즈가 커서, 또는 어떤 이유로든 사이트의 속도가 느리게 되면, 해당 페이지를 다운로드 받는데 더 많은 시간이 걸리는 것입니다. 그렇게 되면, Crawler Bot은 더 많은 시간을 사용하여 페이지의 정보를 수집해야 하고, 더 많은 시간이 걸린다는 것은 더 많은 리소스 즉, Cost가 소모된다는 것입니다. 그래서 빠른 속도의 페이지는 구글의 서치엔진 Oeprating Cost를 줄여주기 때문에 중요한 요소로서 간주될 수 밖에 없습니다.
- 2. 사용자의 Computing Resource:
페이지 로딩의 시간이 많이 걸린다는 것은 사용자의 Computing Resource가 더 소모된다는 뜻입니다. 시간이 더 걸리는만큼 사용자는 전기나 네트워크 자원과 같은 리소스를 더 사용해야 합니다. 단지 몇 초의 차이일지라도, 더 많은 인구로 확대를 해본다고 한다면, 1억명의 사용자가 특정 페이지를 보는데 1초가 더 걸렸다고 한다면, 총 1억초가 더 걸리는것이 되고, 1억초의 전기가 더 소모되었다는 뜻이 됩니다. 1억초를 시간으로 환산하면 약 27000시간이 되고, 일자로 계산 하면 약 1100일이 됩니다. 1초의 차이로 1억명이면 3년치의 전기를 더 소모하게 되는 것입니다.
- 3. 사용자의 시간 Resource:
단지 1초라고 하지만, 사용자는 인생의 소중한 시간을 1초 더 소모하고 있는 것입니다. 그 수많은 사람들의 1초를 인류를 위해 가치있게 사용된다면, 공공의 이익을 늘리는 작업이므로, 그것 또한 좋은 일이 아닐 수 없습니다.
2. Page Speed를 올리기 위한 방법은?
- 1. Page의 사이즈를 줄여야 합니다:
우리가 웹페이지를 접속하게 되면, 우리의 웹브라우저는 network를 통해 javascript코드를 포함하여 html코드를 홈페이지가 웹호스팅되어있는 서버로부터 다운로드 받습니다. 그러므로, 다운로드 받는 size가 작다면, network를 통해 이동되는 데이타의 총량이 적어질 수 밖에 없기때문에 그것이 바로 page loading 속도를 줄일 수 있는 하나의 방법이 됩니다.
Page의 사이즈를 줄이기 위해서 사용할 수 있는 방법은 html, css, javascript, image 파일의 사이즈를 줄이는 방법이 있습니다.
html의 사이즈는 html-minifier를 사용하여 사이즈를 최소화 할 수 있습니다. html을 작성할 때 가독성을 위해 빈공간(space)를 많이 사용하게 됩니다. html-minifier은 그러한 빈공간을 제거하여 사이즈를 줄여줍니다.
css 사이즈 축소는 cssnano를 사용할 수 있습니다.
javascript는 UglifyJS를 사용하여 Javascript 파일을 압축을 합니다. UglifyJS는 빈공간(space)를 제거해 줄 뿐만 아니라, 긴이름 변수명과 명령어들을 짧어 단어로 치환하기 때문에 압축효과와 동시에 읽기 힘든 형태로 번형시킵니다. Javascript는 사이트를 방문할 때 누구든지 파일에 접근을 할 수 있기 때문에 UglifyJS를 사용하여 가독성을 힘들게 하여 코드의 분석을 어렵게 만듭니다. (하지만 완전한 보안이 되는것은 아니기 때문에 민감한 정보는 Javascript에 넣지 않는것이 좋습니다.)
이미지의 사이즈 또한 마찬가지입니다. 하지만 홈페이지의 아름다움을 위해서 사용자를 위해서 고품질의 이미지를 사용하고 싶은것은 어쩌면 너무나 당연합니다.
고품질의 이미지를 사용할것인가, 작은 사이즈의 이미지를 사용할 것인가 선택해야 하는것이 웹디자인을 할때 필수적인 고민이 될 수 밖에 없습니다.
다행히도, 웹이미지 기술은 이런 부분을 해결하기 위해 고민을 하고 있고, 그 결과로서 계속 발전을 하고 있어서, webp라는 형태의 이미지를 우리는 사용할 수 있게 되었습니다.
webp의 경우 품질은 같으면서도 size는 50% 이상으로 줄여줄 수 있는 최신 웹이미지 기술입니다.
그 의미는 같은 품질의 이미지를 2배 빠른 속도로 사용자에게 전달할 수 있다는 것입니다.
- 2. 아키텍처의 수정:
많은 홈페이지의 경우, 마케팅용으로만 사용되어 별도 데이타 관리가 필요없는 사이트의 경우(데이타를 관리해야하는 웹사이트가 아닌 이상) static 파일로만 구성하는것이 좋습니다. 요즈음엔 wordpress와 같은 CMS툴을 많이 사용하는데, 이런 툴들을 사용하게 되면, 브라우저가 html코드를 다운로드 받기 위해서, wordpress엔진을 통해 html코드로 변환하여 사용자에게 보내주게 되어있습니다. 그러므로 변환되는데 시간이 걸릴 수 밖에 없기 때문에, 페이지 로딩 속도가 느려질 수 있습니다. 또한, 다수의 요구사항을 반영하기 위해서 CMS툴에는 쓰지도 않는 기능들이 탑재되어 있는데, 이러한 기능들이 추가적으로 서버의 Computing Resource를 더 쓰게 만들기 때문에 페이지를 변환하는데 있어서 Computing Resource가 부족하게 되면 그 속도가 더 느려질 수 밖에 없습니다. CMS툴을 사용하는 것을 고려하고 있다면, 사용하지 않는 PlugIn을 삭제하여 Compact한 엔진을 쓸 수 있도록 해야하며, 그렇지 않은 경우 SEVENWHALE에 활용하고 있는 CMS툴 없이 웹사이트를 구현하는 방법을 고민을 해야 합니다.
References
1) Daniel An. (2018). Find out how you stack up to new industry benchmarks for mobile page speed.
2) Google Search Central Blog. (2010). Using site speed in web search ranking.
