웹 성능 및 수익을 최적화하는 방법

인내는 웹사이트 방문자와 온라인 쇼핑객에게 미덕이 아닙니다. 웹사이트 방문자를 유지하거나 잃는 데는 1분의 1초도 중요합니다.

Kissmetrics에 따르면 로드 시간은 페이지 이탈의 주요 원인입니다. 평균적인 웹 방문자는 로드하는 데 너무 오래 걸리는 페이지를 참을성이 없기 때문에 로드 시간이 1초가 될 때마다 이탈률이 증가합니다. 블로그에 따르면 사용자의 거의 40%가 10초 후에 페이지를 이탈합니다. 모바일 인터넷 사용자는 아마도 이 문제에 대해 가장 좌절감을 느꼈을 것입니다. 73%는 로드하기에 너무 느린 웹사이트를 경험했다고 말했습니다.

페이지 로드 문제는 웹사이트 방문자의 쇼핑 행동에 직접적인 영향을 미칩니다. Kissmetrics는 또한 웹사이트 성능에 만족하지 못한 쇼핑객의 79%가 같은 사이트에서 다시 구매할 가능성이 낮다는 점에 주목했습니다. 소비자의 거의 절반은 페이지가 2초 이내에 로드될 것으로 예상하며 1초 지연은 고객 만족도를 16% 감소시킵니다.

이러한 지연의 결과는 실제 현금으로 변환됩니다. 전자 상거래의 거인 아마존은 페이지 로드 속도가 1초만 느려도 16억 달러의 판매 수익이 발생할 것이라고 밝혔습니다. 마찬가지로 Google은 검색 결과가 0.4초만 느려지면 하루에 800만 건의 검색 손실이 발생하여 온라인 광고에서 수백만 건의 손실이 발생할 수 있다고 언급했습니다.

문제의 핵심에 접근하기

로드 시간에 영향을 미치는 가장 큰 기여 요인은 이미지, 비디오 및 그래픽입니다. 오늘날의 웹 사이트는 방문자를 끌어들이기 위해 더 많은 시각적 요소와 더 적은 텍스트를 통합합니다. HTTP 아카이브에 따르면 웹사이트 평균 무게의 거의 64%가 이미지이고 비디오는 8%를 차지합니다.

이러한 유형의 미디어는 웹사이트 크기의 거의 4분의 3을 차지하므로 사이트의 이미지와 비디오를 보다 효율적으로 관리하여 성능과 전환율을 개선하는 것이 중요합니다. 웹사이트 성능에 대한 이미지 및 비디오의 영향을 줄이기 위해 취할 수 있는 몇 가지 단계를 살펴보겠습니다.

보다 효율적이고 현대적인 이미지 형식 사용

Google은 Chrome 브라우저에 WebP 이미지 형식에 대한 지원을 추가했으며 Microsoft는 대부분의 Internet Explorer 및 Edge 브라우저에서 JPEG-XR에 대해 동일한 지원을 제공했습니다. 그러나 많은 개발자는 현대 형식이 사이트를 최적화할 수 있는 방법을 활용하기보다는 동일한 JPG 및 PNG 형식을 고수하면서 여전히 이러한 변경 사항을 수용하지 않습니다.

이상적으로는 적절한 경우 이미지를 WebP 및 JPEG-XR로 변환하고 압축 품질을 조정하여 형식 간의 균형을 맞춰야 합니다. 또한 각 이미지에 액세스하는 특정 브라우저를 감지하고 해당 브라우저에 최적화된 이미지 버전을 제공하는 것도 중요합니다. 이렇게 하면 사이트 속도 저하 없이 시각적 품질 및 파일 크기 최적화 측면에서 사용자가 가능한 최고의 이미지를 받을 수 있습니다.

낭비적인 브라우저 측 크기 조정 제거

개발자는 종종 서버 측에서 이미지 크기를 조정하는 대신 브라우저 측 이미지 크기 조정을 바로 가기로 사용합니다. 최종 결과는 최신 브라우저에서 정확히 동일하게 보이지만 대역폭에 미치는 영향은 상당히 다릅니다. 브라우저 측 크기 조정을 사용하면 웹 사이트 방문자가 불필요하게 큰 이미지를 다운로드하는 데 귀중한 시간을 낭비하고 이를 전달하는 데 대역폭을 낭비하게 됩니다.

구형 브라우저의 경우 크기 조정 알고리즘이 일반적으로 수준 이하이므로 문제가 훨씬 더 두드러집니다. 이미지가 필요한 웹사이트 크기에 완벽하게 맞는지 확인해야 합니다. 큰 이미지를 제공하고 크기를 조정하기 위해 브라우저에 의존하는 것보다 동일한 이미지의 다른 축소판을 만드는 것이 좋습니다. ImageMagick과 같은 오픈 소스 이미지 크기 조정 또는 Cloudinary와 같은 클라우드 기반 솔루션과 같이 이를 지원할 수 있는 몇 가지 도구가 있습니다.

올바른 이미지 파일 형식 사용

JPEG, PNG 및 GIF는 오늘날 웹사이트에서 가장 많이 사용되는 파일 형식이지만 각각의 역할은 매우 다릅니다. 잘못된 형식을 사용하면 방문자의 시간과 돈을 낭비하게 됩니다. 자주 하는 실수는 PNG를 사용하여 사진을 제공하는 것입니다. PNG는 무손실 형식으로 사진을 최대한 재현할 수 있다는 일반적인 오해가 있습니다.

이것은 일반적으로 사실이지만 이는 또한 상당히 불필요한 최적화이기도 합니다. 표시되는 콘텐츠에 어떤 이미지 형식을 사용해야 하는지 기억하는 것이 중요합니다. PNG는 컴퓨터에서 생성된 이미지(차트, 로고 등) 또는 이미지의 투명도가 필요한 경우(이미지 오버레이)에 사용해야 합니다. 캡처한 사진을 표시할 때 JPEG; 애니메이션이 필요한 경우 GIF(Ajax 로딩 애니메이션 등).

모든 전달 매체에서 단일 이미지 크기를 사용하지 마십시오.

특히 스마트폰, 태블릿 및 스마트워치가 소비자의 선호도가 높아짐에 따라 귀하의 웹사이트는 다양한 기기에서 조회되고 있습니다. 종종 개발자는 이미지에 대한 클라이언트 측 크기 조정을 사용하여 모든 장치 해상도에서 동일한 이미지를 제공합니다. 이미지는 좋아 보일 수 있지만 방문자는 불필요하게 큰 이미지를 장치에 로드하는 데 시간을 낭비하고 중복 대역폭 사용에 대한 비용을 지불해야 합니다.

이는 불필요한 추가 고해상도 이미지를 다운로드하기 위해 많은 추가 비용을 지불하는 3G 사용자 및 로밍 사용자에게 특히 불공평합니다. 이러한 문제를 방지하려면 방문자의 사용자 에이전트를 사용하여 방문자의 모바일 장치 및 해상도를 식별해야 합니다. 올바른 해상도를 사용하여 서버에서 가장 적합한 이미지를 검색하십시오. 이를 위해서는 원본 이미지 각각에 대해 미리보기 이미지 세트를 사용할 수 있어야 합니다. 이 프로세스를 자동화할 수 있는 우수한 Javascript 패키지가 있습니다.

반응형 디자인 활용

방문자가 사이트에 액세스하는 데 사용하는 각 장치는 해상도가 다릅니다. 웹사이트의 마크업은 다양한 장치와 다양한 해상도, 픽셀 밀도 및 모바일 장치 방향에서 완벽하게 보이도록 조정되어야 합니다. 이미지 관리, 조작 및 전달은 웹 개발자가 직면하는 반응형 디자인의 주요 과제 중 하나입니다.

이러한 문제로 인해 많은 웹 사이트가 필요할 수 있는 최고 해상도 이미지로 구축되고 중단점에 따라 클라이언트 측에서 간단히 축소됩니다. 이 프로세스는 비효율적이며 성능에 해를 끼칩니다. 그러나 필요한 모든 이미지 크기와 적절한 HTML 코드를 생성하는 데 도움이 되는 오픈 소스 도구인 Responsive Breakpoints와 같은 옵션이 있습니다.

CDN(콘텐츠 전송 네트워크) 활용

CDNS는 일반적으로 콘텐츠 왕복 시간을 단축하기 위해 전 세계에 전략적으로 서버를 배치합니다. CDN을 사용하면 이미지를 사용자에게 더 빠르게 제공하고 충돌 가능성을 줄이고 SEO 성능을 향상하며 사용자 경험을 개선할 수 있습니다. CDN을 선택할 때는 전역 적용 수준, 캐싱 속도, 에지에서 논리 작업을 실행할 수 있는 능력, 평균 응답 시간, 평균 무효화 시간과 같은 기타 지표를 고려해야 합니다.

변화의 영향

이러한 모범 사례를 적용하면 방문자가 더 오래 머물고, 더 많이 탐색하고, 참여하고, 구매하도록 장려하여 사용자 경험에 진정으로 차이를 만들 수 있습니다. 다음 회사의 결과를 고려하십시오.

개인이 임대 주택을 찾는 데 도움을 주는 온라인 리소스인 Apartment List는 사이트에 있는 다양한 아파트 커뮤니티에서 이미지 데이터 피드를 수집하면서 다양한 이미지 형식과 해상도를 처리하고 있다는 사실을 알게 되었습니다. 이러한 모든 이미지를 데스크탑은 물론 다양한 크기의 모바일 장치에 표시하기 위한 최적의 이미지로 변환하고 반응형 디자인 기법을 활용함으로써 회사는 전환율이 거의 20% 증가하는 것을 보았습니다.

SaaS 기반 전자 상거래 플랫폼인 KartRocket은 SMB가 온라인 상점을 빠르고 쉽게 만들 수 있도록 도와주는 투명하고 완전한 전자 상거래 생태계를 제공합니다. 클라이언트. 이미지를 동적으로 제어하는 ​​도구를 활용하여 작은 썸네일, 큰 배너 이미지 및 주요 제품 이미지에 최적화되었습니다. 이 접근 방식을 통해 KartRocket은 이미지 로딩에 대한 응답 시간을 100배 늘릴 수 있었습니다.

결론

시간이 돈일 때 웹사이트 소유자는 방문자의 경험을 개선하기 위해 필요한 모든 조치를 취하지 않을 수 없습니다. 페이지 로드가 1초라도 지연되어도 소비자 입장에서는 수익과 신뢰를 잃을 수 있습니다.

이미지와 비디오가 대부분의 웹사이트에서 가장 큰 대역폭을 차지하는 것을 고려하면 웹 디자인과 이미지 형식을 진지하게 검토한 다음 미디어가 사이트에 최적화되도록 필요한 조치를 취해야 합니다. 고객 인식 – 결과로 고통받지 마십시오.