IE11으로 원하는 콘텐츠를 더 빠르게 액세스
Internet Explorer 11은 네트워크 대기 시간의 영향을 최소화하여 배터리 사용 시간, CPU, 네트워크 대역폭, 메모리 등의 저하 없이 일상적인 검색에서 속도와 응답성이 향상되었습니다. 현재는 대역폭이 그 어느 때보다 넓어졌음에도 불구하고 네트워크 대기 시간이 웹 성능에 문제가 되고 있습니다. IE11은 백그라운드에서 페이지와 웹 리소스 다운로드 및 미리 로드, SPDY/3 프로토콜을 사용한 다중 리소스 병렬 다운로드, 페이지에서 리소스 중요도에 따른 다운로드 우선순위 지정 등을 통해 네트워크 대기 시간의 영향을 줄입니다.
페이지 예측, 미리 로드, 프리페치
IE11은 페이지 예측, 미리 로드(사전 렌더링이라고도 함), 프리페치 덕분에 브라우저에서 간편하게 다음 페이지를 다운로드하고 렌더링하고 다음 페이지 리소스의 다운로드를 시작할 수 있습니다. 일반적인 검색 패턴의 경우, 페이지를 백그라운드에서 우선적으로 가져오고 숨겨진 탭으로도 구성하여 해당 링크를 클릭하면 즉시 나타나도록 합니다. 이러한 기술은 검색, 기사 읽기, 사진 검색 등 일반적으로 웹에서 하는 작업의 속도를 빠르게 하여 마치 로컬 콘텐츠를 검색하는 것과 같은 느낌이 들게 합니다.
웹에서 일반적으로 하는 작업의 속도를 빠르게 하는 IE11의 페이지 예측, 미리 로드, 프리페치 기능
IE11은 두 가지 출처의 정보를 사용하여 미리 로드 또는 프리페치할 대상을 결정합니다. 그것은 IE의 "페이지 예측" 기술과 개발자들이 제공하는 마크업입니다.
자동 페이지 예측으로 웹 페이지 미리 로드
Internet Explorer는 자동 페이지 예측으로 사용자가 다음에 이동할 곳이 어디인지 예측하여 미리 그 페이지를 로드하기 때문에 탐색이 거의 즉각적으로 이루어집니다. 예측이 가능한 이유는 검색 패턴, 사용자의 검색 습관, "다음" 링크나 페이지 매김 같은 웹 페이지상의 일반적인 단서 등을 파악하고 있기 때문입니다. Bing에 웹과 데이터에 대한 광범위한 정보가 있어서 이와 같은 매우 정확한 예측이 가능합니다.
예를 들어, 최신 브라우저에서 기사를 읽을 때 페이지 넘기기를 사용하면 앞으로 살짝만 밀어도 이미 렌더링된 다음 페이지로 이동할 수 있어 마치 잡지를 보듯이 빠르고 자연스러운 환경을 즐길 수 있습니다. 이 기능은 페이지 예측 테스트 드라이브에서 살펴볼 수 있습니다.
페이지 예측 테스트 드라이브에서는 페이지 넘기기, 페이지 예측, 페이지 미리 로드 기능이 있는 IE11에서 페이지 로드가 거의 즉각적으로 이루어지는 모습을 볼 수 있음
개발자가 마크업으로 제공한 힌트를 사용하는 웹 페이지 미리 로드
IE가 사용자의 탐색을 예측하고 페이지와 콘텐츠를 자동으로 미리 로드하지만 웹 개발자들은 간단한 마크업을 사용하여 사이트 환경을 제어할 수도 있습니다. 사용자가 다음에 어느 링크를 클릭할지를 사이트 개발자가 확실하게 알고 있다면 페이지에 힌트를 포함시켜 IE에서 미리 그 다음 페이지를 다운로드하고 준비하도록 할 수 있습니다. <link rel=”prerender”> 태그를 사용하면 되는데, 이 태그는 W3C 웹 성능 작업 그룹의 표준화 작업을 거치고 있습니다. 이를 통해 상당한 성능 개선이 이루어지고 웹 사이트의 사용자 참여도도 증가할 것입니다.
<linkrel="prerender"href="http://example.com/nextpage.html"/>
Bing 검색 환경을 개선하고 검색 작업을 더 신속하게 완료할 수 있도록 미리 로드를 사용했습니다. Bing에서 이 예제 검색 사용을 통해 확인해 보세요. Bing에는 사용자가 상위 결과를 클릭할 가능성이 높을 때는 항상 백그라운드에서 상위 검색 결과를 로드하는 힌트가 포함되어 있습니다.
개발자가 마크업으로 제공하는 힌트를 사용하는 개별 리소스 프리페치
IE11에는 또한 전체 페이지를 미리 로드하는 대신 리소스를 개별적으로 프리페치하는 기능도 도입되었습니다. 프리페치는 미리 로드와는 다르게 메모리 또는 CPU 리소스를 거의 사용하지 않습니다. 예를 들어, 프리페치는 사이트의 여러 페이지에 사용되는 스타일 시트와 스크립트 파일을 검색할 때 매우 유용합니다. 이 방법을 사용하면 사이트에 있는 여러 링크의 클릭 가능성이 동일할 경우 실제로 어느 링크를 클릭하든지 관계없이 페이지 로드에 필요한 중요 차단 리소스가 준비된 브라우저 캐시가 도움이 될 것입니다. 웹 개발자는 이 용도로 <link rel=”prefetch”> 태그를 사용할 수 있습니다.
<linkrel="prefetch"href="http://example.com/style.css"/>
다음은 프리페치를 사용하거나 사용하지 않는 간단한 시나리오의 네트워크 시간 표시 막대를 단순화된 렌더링으로 표시한 것입니다. 간단한 페이지의 경우에도 리소스가 몇 개라도 프리페치되면 페이지 로드 시간이 약 66% 줄어드는 것을 볼 수 있습니다. 녹색 표시줄은 네트워크로 리소스를 다운로드하는 데 소요된 시간을 나타냅니다. 프리페치를 사용하면 로컬 캐시에서 리소스를 가져오기 때문에 녹색 표시줄의 수가 훨씬 적어집니다.
대량 리소스를 프리페치하면 페이지 로드 속도가 66% 빨라지는 사례
페이지 예측, 미리 로드, 프리페치는 IE10에 도입한 개념을 확장해 주는데 이것은 특정 호스트명에 대해 DNS 변환을 우선적으로 실행하여 페이지 로드 시간을 최대 500ms 절약합니다. 다음과 같은 예가 있습니다.
<linkrel="dns-prefetch"href="http://example.com/"/>
MSDN에서 상세한 미리 로드 및 프리페치 설명서를 제공합니다.
배터리, CPU 또는 대역폭 손실 없이 빠른 속도 유지
IE11은 배터리 사용 시간에 영향을 주지 않고, 예상하지 못한 인터넷 서비스 제공업체의 데이터 요금을 발생시키지 않고, 포그라운드에서 페이지의 성능에 영향을 주지 않고 이러한 성능 개선 효과를 제공합니다. 리소스 사용량을 제어하기 위해, IE는 백그라운드에서 다운로드하는 리소스를 제한하고 백그라운드 다운로드의 타이밍과 우선순위를 관리합니다.
IE11은 탐색 성능에 영향을 줄 가능성이 높은 리소스만 다운로드합니다. 예를 들어, IE11은 사용자가 방문할 가능성이 높을 경우에만 페이지와 콘텐츠를 미리 로드합니다. 특이하게도, IE는 각 웹 페이지에서 미리 로드 및 프리페치 작업의 수를 제한함으로써 사이트에서 장치 리소스가 고갈되지 않도록 하기도 합니다.
또한 IE11은 우선 다운로드의 타이밍과 우선순위를 관리합니다. 다른 브라우저와는 달리, IE는 바이트당 요금을 부과하는 데이터 통신 연결 네트워크일 경우나 데이터 한도가 거의 다한 경우에는 페이지를 미리 로드하거나 콘텐츠를 프리페치하지 않습니다. IE11은 활성 페이지가 백그라운드 작업으로서 활성 탭의 성능에 영향을 주지 않도록 로드된 후에 프리페치와 미리 로드 작업을 실행하는 유일한 브라우저입니다. IE의 경우에만 해당 페이지를 포그라운드에 가져올 때까지 백그라운드 페이지의 프리페치와 미리 로드 요청이 지연됩니다. 이를 통해 메모리 사용량을 최소화하고 시스템 리소스가 현재 집중하고 있는 작업과 다음 탐색에 리소스를 할애할 수 있습니다. 마지막으로, 이러한 요청은 활성 작업의 대역폭을 침해하지 않도록 낮은 우선순위로 처리됩니다.
Bing 검색 결과 페이지에서 IE 방식의 이점을 즉시 확인할 수 있었습니다. 앞에서도 설명했지만 Bing은 첫 검색 결과에 대한 미리 로드 힌트를 추가합니다. 다른 브라우저에서는 검색 결과 페이지에서 페이지 로드 시간이 4.36% 회귀되는 것을 확인했습니다. 그 이유는 백그라운드 페이지 로드로 인해 포그라운드 페이지의 네트워킹 및 처리 리소스가 줄어들기 때문입니다. IE는 포그라운드 페이지가 미리 로드 요청을 실행하기 전에 로드될 때까지 대기하여 백그라운드 작업 때문에 활성 페이지의 로드 시간이 영향을 받지 않도록 합니다.
IE11의 리소스 관리 방식의 이점을 자세한 예를 통해 살펴보기 위해, IE와 역시 미리 로드를 구현하는 대표적인 브라우저를 비교하는 예제 시나리오를 살펴보겠습니다. Bing에서 할로윈 의상을 검색하는 시나리오입니다. 상위 검색 결과가 미리 로드되었습니다. 매장 비교를 할 수 있도록 상위 검색 결과 2개를 백그라운드 탭에서 엽니다. 두 번째 결과 페이지에는 미리 로드 힌트가 포함되어 있습니다. 첫 번째 결과 탭으로 전환하여 찾고 있던 의상을 찾습니다. 두 번째 검색 결과 탭으로 전환할 필요가 없습니다. 아래에서 IE11이 네트워크와 시스템 메모리를 더욱 효율적으로 사용하는 것을 볼 수 있습니다.
| Internet Explorer 11 | 다른 브라우저 | |
| 전송된 요청의 총 건수 | 260 | 373 |
| DNS 변환의 총 건수 | 30 | 57 |
| 전송 바이트 | 209,151 | 232,605 |
| 수신 바이트 | 2,879,642 | 3,918,390 |
| 사용된 메모리 | 102.4MB | 152.7MB |
아래 CPU 사용량 그래프를 보면 IE11의 CPU 사용량 그래프가 확실히 더 여유가 있음
IE11(위)과 다른 브라우저(아래)의 미리 로드 시나리오의 CPU 사용량 그래프를 보면 IE11가 CPU 유휴 공간을 더 두고 있음을 볼 수 있습니다.
이러한 리소스 차이는 사용자가 웹 검색을 하는 시간이 지나면서 누적됩니다. 리소스가 제한되어 있는 휴대용 장치에서 IE11의 방식을 사용하면 배터리 사용 시간과 시스템 성능에서 큰 차이를 볼 수 있습니다. 데이터 통신 연결 네트워크 사용 시 이러한 절감으로 실제 비용도 절약할 수 있습니다!
페이지 예측, 미리 로드, 프리페치의 실제 사용
미리 로드와 페이지 예측의 실제 사용을 더 자세히 보고 싶다면 다음 도구 설명을 살펴보십시오.
-
배경에서 로드 중인 링크를 길게 누르면(또는 마우스로 가리키면) 백그라운드 페이지 로드를 나타내는 도구 설명이 보일 것입니다.
링크 가리키기에 대한 IE11 도구 설명이 미리 로드가 진행 중임을 표시
미리 로드된 페이지에서 새로고침 단추를 길게 누르면(또는 마우스로 가리키면) 페이지가 미리 로드되었음을 표시하는 도구 설명이 보일 것입니다.
새로고침 단추 가리키기에 대한 IE11 도구 설명이 미리 로드된 페이지 표시
Fiddler와 같은 HTTP 디버거에서도 우선 트래픽을 볼 수 있습니다.
페이지 예측, 미리 로드, 프리페치 제어
설정의 새로운 개인 정보 보호 탭을 사용하여 페이지 예측을 켜거나 끌 수 있습니다.
IE11의 페이지 예측 설정은 개인 정보 보호 탭에서 액세스할 수 있음
고급 설정을 선택하지 않으면 모든 미리 로드 및 프리페치 작업이 꺼집니다.
미리 로드와 프리페치를 제어하는 IE11 고급 설정
SPDY/3를 통한 더 빠른 페이지 로드, HTTP/2.0을 위한 대비
IE11에는 다수의 요청을 하나의 네트워크 연결로 결합하여 페이지 로드 시간을 빠르게 하는 실험적인 프로토콜인 SPDY/3 지원 기능이 포함됩니다. IE11의 SPDY 지원 기능 덕분에 페이지 로드 속도가 더 빨라질 뿐만 아니라 웹 개발자들이 현재 개발 중이며 곧 제공될 HTTP/2.0 표준에 대비해 웹 사이트를 조정할 수 있습니다.
최신 웹 사이트에는 보통 많은 수의 개별 리소스가 포함됩니다. 브라우저는 일반적으로 여러 개의 병렬 연결을 열어 페이지 다운로드의 속도를 높입니다. 하지만 브라우저는 네트워크 과부하를 방지하기 위해 동시 다운로드의 수를 제한하고 이런 연결을 열 때 브라우저가 연결 완료 시까지 기다려야 하고 연결이 "워밍업"될 때 차단됩니다. 그 결과, 브라우저는 요청과 응답이 전달될 때까지 기다리면서 시간을 보내게 되고, 대기 시간이 긴 모바일 네트워크에서는 특히 그렇습니다. 대량의 리소스가 들어있는 페이지를 다운로드하고 표시하려면 필요 이상의 시간이 소요될 수 있습니다.
IE11은 SPDY/3 프로토콜을 지원하여 이러한 한계를 극복하고 페이지 로드 시간과 최신 웹 사이트의 응답성을 높여줍니다. SPDY/3는 하나의 연결로 요청/응답의 다중화를 구현합니다. SPDY/3는 미처리 요청 건수 제한을 없애고 각 병렬 다운로드에 "워밍업된" 연결을 사용하여 페이지 로드 시간을 개선합니다. 다음은 많은 리소스로 인해 페이지 완성이 차단되는 페이지에서 로드 시간이 개선되는 것을 확인할 수 있는 차트입니다.
이 샘플 페이지에서 SPDY/3는 HTTP/1.1에 비해 여러 리소스를 더 빠르게 받고 CPU를 더욱 효율적으로 사용하여 페이지 로드 시간을 개선
IE11은 프로토콜을 지원하는 사이트를 통해 SPDY/3를 자동으로 조정합니다. 사용자는 특별한 조치를 취할 필요가 없습니다. 여러 가지 유명 웹 사이트(Facebook, Twitter 포함)는 이미 SPDY/3를 배포했습니다. 사이트에 연결하거나 리소스를 다운로드하는 동안 IE가 SPDY/3를 사용하고 있는지 확인하려면 새로운 F12 개발자 도구의 네트워크 탭을 사용하면 됩니다.
IE11의 F12 개발자 도구는 어느 리소스가 SPDY/3를 사용하여 다운로드되고 있는지를 표시
SPDY/3는 실험적인 프로토콜이지만 최근에 부상하고 있는 HTTP/2.0 표준 개발의 토대입니다. Microsoft는 HTTP/2.0 표준화 노력에 적극적으로 참여하고 있습니다. IETF 참여의 일환으로, Microsoft는 대역폭 사용량을 보호하고 배터리 영향을 관리하면서 기존 웹에서 HTTP/2.0으로의 원활한 마이그레이션을 실행하는 일의 중요성 등 HTTP Speed+Mobility 제안에 요약되어 있는 일련의 사용자 요구 사항을 게시했습니다. IE11의 SPDY/3 구현은 이 방식과 일치합니다.
리소스 우선순위 지정을 통한 효율적인 페이지 로드
IE11은 페이지 로드에 가장 중요한 리소스 다운로드 요청을 최우선으로 처리하여 검색의 속도와 응답성을 높입니다. 우선순위가 가장 높은 리소스가 먼저 다운로드되고 가장 빠른 TCP 연결을 사용하여 다운로드됩니다. 예를 들어, IE11은 페이지 로드를 차단하는 요청을 우선 처리합니다.
우선순위가 지정 또는 제외된 요청의 몇 가지 예는 다음과 같습니다.
- CSS와 Javascript와 루트 HTML과 같은 차단 리소스 우선순위 지정
- UI 대화목록과 동기식 XHR로 시작된 통화 우선순위 지정
- 백그라운드 탭의 콘텐츠 우선순위 제외(여기에는 미리 로드된 페이지 포함)
- iFrame 콘텐츠 우선순위 제외
개발자는 IE11이 리소스 다운로드의 우선순위를 지정하는 방식을 미세 조정할 수 있습니다. 내장된 우선순위 방식은 일부 웹 페이지에는 충분하지 않을 수 있습니다. 예를 들어, 개발자는 "화면 하단"에 위치한 이미지보다 "화면 상단"에 위치한 더 중요한 리소스에 더 높은 우선순위를 주도록 표시할 수 있습니다.
개발자는 lazyload 태그를 추가하여 리소스의 우선순위를 낮출 수 있습니다.
<imgsrc="image.jpg" lazyload />
IE는 이 개발자용 기능을 지원하는 최초의 브라우저이며 현재 W3C 웹 성능 작업 그룹 내에서 이 동작을 표준화하기 위해 작업하고 있습니다.
결론
IE11은 페이지와 콘텐츠 우선 가져오기, SPDY/3 프로토콜로 네트워크를 더 효율적으로 사용, 검색 속도를 높이는 리소스 우선순위 지정 등의 방법을 통해 네트워크 대기 시간의 영향을 줄입니다. IE9와 IE10에 도입한 네트워크 성능 최적화 및 캐시 개선을 토대로 작업을 진행했습니다.
IE11을 직접 사용해 보시고 Connect를 통해 의견을 보내 주십시오.
즐겁고 빠른 검색을 체험해 보시기 바랍니다!
Internet Explorer
프로그램 관리자,
Ritika Kapadia와 Bogdan Brinza