웹페이지에서 페이지 로딩 시간 채크

글쓴이: 망치 / 작성시간: 화, 2005/08/16 - 1:11오전

종종 웹페이지 로딩시간을 표시하는 사이트를 보는데..
보통 어떤식으로 동작이 되는건지 궁금해서 글을 써 봅니다.

막연히 생각하기에 jsp 나 asp,php 등 사용시, 서버 내부에서 파싱되는 부분인 소스 첫부분 끝부분에서 시작시간 끝난시간을 계산하는건 실제 클라이언트에서 보여지는 체감 속도랑은 차이가 날듯하고, 자바스크립트등을 이용해서 클라이언트에서 체크하도록 하는게 그나마 실제 체감 속도와 비슷할것같습니다..

실제 브라우저 주소창에다 URL 을 입력후, 엔터치고 페이지 로딩이 마쳐질때까지의 시간을 정확하게 뽑아낼 방법이 있나요?

브라우저에서 접근 시작 시간과 완료 시간 정보를 넘겨준다거나 하면 가능할법도 한데.. 스크립트나 웹언어에 대해 잘 알지 못하니 그냥 막연한 추측만 하게 되는군요..;

Forums:

설치 및 활용 QnA

댓글 달기

benchbee.co.kr 이나 speed.nca.or.kr에 있는 웹페

글쓴이: 익명 사용자 / 작성시간: 화, 2005/08/16 - 3:05오전

benchbee.co.kr 이나 speed.nca.or.kr에 있는 웹페이지 테스트를

말씀하시는거 같네요

URL호출할때 시간 한 페이지 내의 모든 원소 다운로드 후의 시간을 확인하시면

되지 않나요?

http://www.httpwatch.com/

답글

아.. 제가 얘기한건 로딩된 페이지 하단에 페이지 로딩 되는데 걸린 시간

글쓴이: 망치 / 작성시간: 화, 2005/08/16 - 7:38오전

아.. 제가 얘기한건 로딩된 페이지 하단에 페이지 로딩 되는데 걸린 시간이 표시되는 '페이지' 를 얘기한겁니다. 제가 '사이트' 라고 글을 써서 헷갈리셨나봐요.

참고 페이지 주소입니다. 하단에 time : xxx.. 로딩 시간이 표시됩니다.
http://www.locke-sn.de/phpbb/

어차피 방법은 비슷할듯 한데, 구체적인 설명좀 부탁드립니다.

---------------------------------------
http://www.waitfor.com/
http://www.textmud.com/

답글

페이지 안에 이미지나 여타의 컴포넌트 (플래쉬 등)이 모두 완벽하게 로딩

글쓴이: atdda / 작성시간: 화, 2005/08/16 - 10:37오전

페이지 안에 이미지나 여타의 컴포넌트 (플래쉬 등)이 모두 완벽하게 로딩되는 시간을 구하기는 쉽지 않을텐데요. 보통 사이트에서 보여주던 로딩시간은 서버가 메인 html을 생성하는 시간을 보여줬던 것으로 기억합니다. (예전에는 네이버에서도 보여줬던것 같은데.. 지금은. 아닌것 같군요.)

간단히 처음과 끝부분의 스탬프를 찍어서 계산 하는 방법이 있겠구요
좀더 구조적으로 구성해서 (모든 컴포넌트를 그런식으로 계산해서) 찍을 수도 있긴 하겠습니다만, 그럴 것 까지야. :?

링크로 보여주신 싸이트는 main 화면의 html을 생성하는 시간을 계산한 것으로 보이는 군요. script진입점부터 마지막의 (시간을 프린트하는) 템플릿을 프린트하는 순간까지의 시간인 듯합니다.

May The Force Be With You.

답글

[code:1]<script language="javasc

글쓴이: sh. / 작성시간: 화, 2005/08/16 - 10:37오전

<script language="javascript">
var now = new Date();
var then;

function stopclk(){
    then = new Date();
    var pInfo = document.getElementById('pInfo');
    var loadtime = ((then-now)/1000)+' secs to load.';
    pInfo.value = loadtime;
    pInfo.style.display = 'block';
}

window.onstop = stopclk;
window.onload = stopclk;
</script>
<input id="pInfo" style="position:absolute; border:0px; top:0px; right:0px; display:none; background:#FFDADA; font-size:8pt; font-family:Tahoma;" />

코드가 좀 지저분한데.... 대략 이런식으로 하시는게 체감속도에 제일 비슷합니다.
저 부분을 소스의 제일 상단 (아마도 head 안에..) 에 넣어주시면 됩니다.

답글

^^ 감사합니다.

글쓴이: 익명 사용자 / 작성시간: 화, 2007/10/09 - 4:05오후

답글

Firefox extension로 가능한 영역일까요? Opera에서 비슷

글쓴이: Prentice / 작성시간: 화, 2005/08/16 - 11:42오전

Firefox extension로 가능한 영역일까요? Opera에서 비슷한 기능을 본 것 같은데 확신이 안 서네요. 착각일지도 모릅니다.

예로 들어주신 서버측 시간 계산은 PHPBB2의 기능인 것 같습니다.

답글

댓글 달기

이름

제목

댓글 *

텍스트 포맷에 대한 자세한 정보

텍스트 양식

Filtered HTML

텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
You can use Textile markup to format text.
사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
Quick Tips:
- Two or more spaces at a line's end = Line break
- Double returns = Paragraph
- *Single asterisks* or _single underscores_ = Emphasis
- **Double** or __double__ = Strong
- This is [a link](http://the.link.example.com "The optional title text")
For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

HTML 태그를 사용할 수 없습니다.
web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
줄과 단락은 자동으로 분리됩니다.

CAPTCHA

이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.

부 메뉴