웹사이트 로딩 속도를 높이는 6가지 방법

귀하의 웹사이트는 세계에서 가장 아름다운 사이트일 수 있지만 로드하는 데 시간이 오래 걸린다면 아무 소용이 없습니다. 현실을 직시하자. 사람들은 참을성이 없고 느린 웹 사이트는 잠재 고객이 구매를 완료하지 못하게 합니다.

나는 온라인 쇼핑을 할 때 최악의 경우 5-10초 안에 페이지가 로드될 것으로 예상합니다. 그 이상이 되면 짜증이 나거나 아예 가게를 떠납니다.

물론, 어떤 사람들은 나보다 더 참을 ​​수 있지만 왜 기회를 잡습니까? 안전하게 플레이하고 비즈니스 웹사이트를 최대한 빠르게 만드십시오.

사진 제공: Meddygarnet

그러나 시작하기 전에 가장 먼저 결정해야 할 것은 충분히 빠른 속도입니까? 웹사이트 최적화의 이 정도는 웹 방문자의 분석 및 인구 통계에 크게 좌우됩니다.

예를 들어, 3년 전 아내와 내가 처음으로 온라인 상점을 시작했을 때 고객의 35% 이상이 전화 접속을 사용하고 있었습니다. 결과적으로 우리는 56K 다운로드 비율을 가정하여 활발한 쇼핑 경험을 제공하기 위해 웹 사이트 디자인을 과감하게 줄여야 했습니다.

오늘날 우리 고객의 2%만이 전화 접속을 사용하고 있습니다(감사합니다!). 따라서 사용자 경험에 영향을 주지 않고 더 많은 멀티미디어 콘텐츠를 안전하게 추가할 수 있습니다.

주어진 페이지의 최대 크기를 결정하기 위해 보통 5초에 웹 방문자의 가중 평균 대역폭을 곱합니다. 예를 들어 대부분의 방문자가 DSL을 사용하는 경우 1Mbit 다운로드 속도를 가정하고 5Mbit가 주어진 웹 페이지의 최대 크기라고 결정할 수 있습니다.

이것은 정확한 과학이 아닙니다. 궁극적으로 웹사이트가 얼마나 빨라야 하는지 스스로 결정해야 합니다.

그러나 모든 경우에 항상 빠를수록 좋습니다. 지난 게시물에서 언급했듯이 웹사이트 속도가 항상 웹호스트의 기능은 아닙니다. 사실 대부분의 경우 웹마스터는 느린 서버가 아니라 느린 웹사이트에 대한 책임이 있습니다. 이 기사에서는 속도를 높이는 방법에 대한 몇 가지 팁을 설명합니다.

가장 중요한 것을 결정하고 로딩 순서를 바꾸십시오

웹사이트를 더 빠르게 만드는 것이 항상 이미지와 콘텐츠를 잘라내는 것은 아닙니다. 때로는 사이트가 있는 그대로가 마음에 들어 아무것도 변경하고 싶지 않을 수 있습니다.

이 경우 웹 사이트가 느리다면 페이지 로드 방식의 우선 순위를 지정하는 것만으로 벗어날 수 있는 경우가 많습니다.

사용자가 가장 먼저 보기를 원하는 것은 무엇입니까? 대부분의 경우 방문자는 중요한 항목이 먼저 로드되고 보풀이 나중에 완료되는 한 느린 사이트를 신경 쓰지 않을 것입니다.

예를 들어 MyWifeQuitHerJob.com을 사용하는 경우 광고가 표시되기 전에 모든 흥미로운 콘텐츠가 먼저 표시되는지 확인합니다. 그렇게 하면 광고 로드 속도가 약간 느려도 전체 블로그를 끌어내리지 않습니다.

웹페이지는 항상 순차적으로 로드되므로 항상 로드하려는 항목을 페이지 상단에 먼저 배치하고 가장 덜 중요한 항목을 html 문서의 끝에 배치해야 합니다.

페이지의 특정 위치에 나타나야 하는 요소의 경우 javascript 또는 css를 사용하여 로드 순서를 제어할 수 있습니다.

예를 들어, 내 728×90 리더보드 광고가 MyWifeQuitHerJob.com의 맨 위에 표시되더라도 다음 단계를 수행하여 마지막으로 로드되도록 합니다.

• 광고가 있어야 할 빈 <div id=”banner728″>를 만들고 ID를 “banner728”로 설정했습니다. 이것은 나중에 javascript를 사용하여 로드할 수 있는 빈 자리 표시자를 효과적으로 만듭니다.
• 페이지 맨 끝에 다음 자바스크립트 스니펫을 포함합니다.
  <스크립트 유형=”텍스트/자바스크립트”>
  document.getElementById("banner728").innerHTML = "원하는 광고 배너 코드";
  </스크립트>
  이 코드는 위에서 설정한 자리 표시자 "banner728"을 찾아 <div>에 광고 배너를 삽입합니다. 이 스크립트는 파일의 맨 끝에 있으므로 다른 모든 항목 다음에 로드됩니다.

HTML 이미지 크기 조정을 사용하지 마십시오

많은 초보자가 저지르는 일반적인 실수는 이미지를 축소하고 크기를 조정하기 위해 html에 의존하는 것입니다. 이 기술은 효과가 있고 무해한 것처럼 보이지만 웹사이트의 성능을 절대적으로 죽일 것입니다.

그 이유는 훨씬 작은 이미지만 보여주더라도 전체 원본 이미지를 로드해야 표시되기 때문입니다.

이 함정에 빠지지 않으려면 사이트에 표시하기 전에 이미지를 원하는 크기로 축소하는 데 시간을 할애해야 합니다. 디지털 카메라에서 바로 이미지를 가져오지 마십시오.

이미지 최적화

인간의 눈은 컴퓨터 모니터에서 독립 실행형 이미지를 볼 때 이미지 품질을 훨씬 더 관대합니다. 따라서 웹 사이트에 대해 훨씬 낮은 품질의 이미지로 벗어날 수 있습니다.

이미지를 페이지에 표시하기 전에 이미지를 최대한 최적화하고 축소하세요. 나는 종종 내 사이트의 이미지와 함께 Photoshop을 사용하여 50% 이하의 JPEG 품질을 선택합니다.

GIFS를 사용하는 경우 실제로 필요한 것보다 더 큰 색상 팔레트를 사용하고 있지 않은지 확인하십시오. 16가지 색상만 사용할 수 있다면 16가지 색상 팔레트만 있는 GIF를 선택하세요.

모든 GIF를 분석하여 중복된 색상 슬롯이 없는지 확인하십시오.

타사를 통해 비디오 및 대용량 이미지 호스팅

강력한 서버 세트에서 웹사이트를 호스팅하지 않는 한 풍부한 멀티미디어 콘텐츠로 인해 사이트 속도가 느려집니다. 일반적으로 스트리밍을 더 잘 지원하는 더 강력한 인프라를 사용하여 타사 서비스에서 비디오와 대용량 파일을 호스팅하는 것이 훨씬 더 경제적입니다.

예를 들어 자체 서버에서 동영상을 호스팅하는 대신 YouTube 또는 Vimeo를 사용하는 것이 어떻습니까? 자신이 제작한 콘텐츠를 소유하고 싶다면 Amazon의 S3와 같은 서비스를 지불하고 사용할 수도 있습니다. 큰 소년을 위해 고대역폭 콘텐츠를 남겨주세요.

타사 코드 또는 핫링크 이미지 사용을 피하십시오

이미지를 핫링크하거나 다른 서버에서 호스팅되는 코드를 활용할 때마다 웹 사이트 속도가 위험에 처하게 됩니다. 타사 서버가 느리거나 다운되면 자체 웹 사이트도 다운될 수 있으므로 타사 코드 사용을 최소화하는 것이 중요합니다.

또한 사이트가 타사 서버에 액세스할 때마다 네트워크 혼잡에 따라 상당한 시간이 소요될 수 있는 DNS 조회를 수행해야 합니다.

수백 밀리초의 지연 시간은 그리 많지 않은 것처럼 보일 수 있지만 10개의 다른 서버에서 코드를 가져오는 경우 이러한 조회로 인해 최대 몇 초의 지연 시간이 추가될 수 있습니다.

캐싱 및 압축 활용

대부분의 웹사이트는 텍스트이며 텍스트는 매우 잘 압축됩니다. 그렇기 때문에 서버에서 압축을 활성화하면 다운로드 시간을 최대 75%까지 줄일 수 있습니다.

불행히도 모든 공유 웹호스트가 서버에서 압축을 활성화한 것은 아닙니다. 웹사이트가 공유 웹호스트에 있는 경우 해당 서버가 mod_deflate 또는 mod_gzip을 지원하는지 확인하십시오.

서버에서 압축을 지원하는 경우 이 문서에 설명된 단계에 따라 웹 사이트에서 압축을 활성화해야 합니다. WordPress를 사용하는 경우 WP-SuperCache 플러그인이 이미 압축을 처리합니다.

압축 외에도 웹 사이트에서 자주 액세스하는 페이지를 캐싱하여 사이트 속도를 높일 수 있습니다. 우리 온라인 상점의 경우 실제로 한 단계 더 나아가 자주 변경되지 않는 트래픽이 많은 웹 페이지에 대한 정적 페이지를 만듭니다.

속도 문제

다른 사람이 귀하의 웹사이트보다 훨씬 느린 연결로 귀하의 웹사이트를 보고 있을 가능성이 있습니다. 그리고 온라인 비즈니스의 잠재적인 수익을 극대화하려면 항상 가장 낮은 공통 분모를 고려해야 합니다.

나는 우리 온라인 상점에 여전히 전화 접속 고객이 있다는 것을 보고 꽤 충격을 받았습니다! 내가 아직 가지고 있다면 당신도 그럴 수 있습니다.