2012-05-10 2 views
2

며칠 전에 내 웹 사이트를 시작했습니다 ... 최근에는 매우 느립니다. 그것은 그래픽일까요? 링크는 http://britobmarketing.com입니다. onMouseOver 효과는 너무 오래 걸릴뿐입니다. 배경도로드하는 데 시간이 걸립니다. 그것은 단지 천천히 ... 누군가가 왜 이것이 일어날 수 있는지 알고 있습니까?그래픽 해상도로 인해 웹 페이지가 느려질 수 있습니까?

대단히 감사합니다!

-Brito.

답변

5

두 이미지가 개가 넘고 각 이미지는입니다. 그것은 웹에 막대한 금액입니다.

plainbgndwall.jpgbgndwall.jpg크기를 각각 최소 250kb 이하로 줄여야합니다..

+0

좋아, 나는 그것을 시도 할 것이다 : 무슨 일이 일어나고있는 페이지가로드되는 동안 당신은 또한 당신의 URL을 입력하여 아래의 링크에서 직접 유사한 테스트를 실행할 수 있습니다, 당신에 대해 더 많은 것을 배울 것이다! 고마워요! – Brito

3

예, 이미지는 다른 컴퓨터 리소스와 같습니다. 이들은 메모리를 차지하고 CPU 처리 사이클을 사용하여 렌더링합니다. 리소스가 많을수록 메모리 사용량이 많아지고 렌더링에 더 많은 CPU 사이클이 소요됩니다.

이미지의 품질이 낮고 압축 된 버전을 만들 것을 제안합니다. Adobe Fireworks (광고가 없으며, 내가 사용하는 것)와 같은 일부 이미징 도구는 중요한 세부 저하없이 이미지를 압축하는 옵션을 가지고 있습니다. 사용하지 않는 색상도 줄이거 나 제거 할 수 있습니다.

또한 모든 느린 효과의 주요 원인이 아닙니다. DOM 조작과 잘못된 코드는 성능에 영향을 미칠 수 있습니다.

1

이러한 이미지는 거대한입니다. 사용자에게 페이지로드시 4MB를 다운로드하도록 요청한 다음 이 실제로이면 모든 사이트의 속도가 느려집니다. 이미지의 크기를 줄이면 성능이 향상됩니다.

항상 페이지를 빠르게로드하기 위해 이미지를 100KB 이하로 가져 오려고합니다. 표시 할 이미지가 500KB 이상이면 사용자가 탐색 할 때 이미지로드를 지연합니다.

-1

브라우저는 단지 마우스 오버 이미지를로드합니다. 브라우저가 캐시를 저장하면 스왑 애니메이션이 훨씬 빨라집니다. 이미지를 즉시로드 할 수 있습니다. 숨겨진 <img> 태그에 넣으면됩니다.

즉, 이러한 사소한 미용 효과를 위해 너무 많은 큰 이미지가 필요하다고 말하는 것은 다소 나쁩니다. 연결 속도가 느린 사용자는 사용자 환경이 좋지 않을 수 있습니다.

+0

죄송 합니다만 숨겨진 이미지 태그가 제안되어 있지 않습니다. 미리로드하려면 JavaScript 메모리에 저장해야합니다. –

+0

좋아요, 이미지가 미리로드되는 아이디어는 꼭 필요한 것입니다. 불행히도, 저는 Java Script에서 정말 새로 왔습니다. @Travis J 그 방법에 대해 좀 더 자세히 설명해 줄 수 있습니까? 감사!! – Brito

+1

@Brito - http://stackoverflow.com/q/6693623/1026459. 꽤 많은 양의 소스 문자열을 갖게 될 것입니다. 그런 다음'new Image()'배열을 만들고 imgArr [index] .src = 소스 문자열을 서로 연관 짓습니다. 이미지를 원하면 이미지 배열에서 이미지를 가져옵니다. 'document.getElementById ("myImageTag"). src = imgArr [imageIndex] .src;'. 이렇게하면 이미지를 imgArr에 한 번 저장하고 나중에 언제든지 즉시 액세스 할 수 있습니다. –

3

웹 기반로드 테스트에서 페이지 탐색 시간을 확인했으며 멋진 경험이 아닌 페이지로드에 약 11 초가 걸렸습니다. 유 작업을 필요로하는 곳에 유 이해할 수 있도록 걸리는 시간의 대부분을 볼 수 있습니다 위의 화면에서

enter image description here

이미지입니다 다음은 결과입니다.

http://www.uptrends.com/aspx/free-html-site-page-load-check-tool.aspx

+0

좋은 도구! 대단히 감사합니다! – Brito

+0

@Brito 정보를 제공해 주셔서 감사합니다. 당신이 정보를 가치 있다고 생각한다면 "Up"하시기 바랍니다. 감사. – AvkashChauhan

+0

감사합니다. 고맙습니다. – AvkashChauhan

관련 문제