간단한 웹사이트 최적화로 페이지 로드 시간을 단축하는 방법

게시 됨: 2022-07-02

페이지 속도는 인터넷에서 당신을 만들거나 깨뜨릴 수 있습니다.

더 빠른 페이지 로드는 일반적으로 사이트 속도에 대해 전반적으로 더 나은 결과를 의미합니다. 웹사이트 성공의 모든 측면은 SEO에서 전환, 사용자 경험 등에 이르기까지 페이지 속도와 연결되어 있습니다.

선택한 호스팅 제공업체에서 작업하기로 결정한 애플리케이션에 이르기까지 최적화할 수 있는 영역이 많이 있습니다. 고려해야 할 영역이 너무 많기 때문에 페이지 속도를 개선하는 것은 복잡한 프로세스가 될 수 있습니다. 구현하기 쉬운 방법으로 웹 페이지 로드 시간을 최적화하는 방법을 배우는 것은 성공에 매우 중요합니다.

그렇다면 최적화를 위해 무엇을 할 수 있습니까? 웹 페이지를 더 빠르게 만드는 몇 가지 방법, 페이지 로드 시간을 높이는 방법, 페이지 로드 시간 및 속도 향상에 대한 기타 모범 사례를 살펴보겠습니다.

페이지 로드 시간이 중요한 이유

페이지 로드 시간을 빠르게 하는 방법에 대해 알아보기 전에 먼저 이것이 왜 그렇게 중요한지 이해해 보겠습니다.

Google은 2010년에 사이트 속도가 순위에 영향을 미칠 것이라고 처음 발표했으며 그 중요성을 계속해서 보여주었습니다. 2018년 Google은 모바일 사이트 속도의 순위 요소로 페이지 속도를 도입했습니다.

SEO 전문가는 신속하게 페이지 요소를 최적화하고 검색 엔진을 차단하기 시작했습니다. 뒤처지지 않은 자들입니다. 그리고 최근에 발표된 핵심 웹 바이탈로 인해 속도가 그 어느 때보다 중요합니다.

페이지 로드 속도를 개선하는 방법에 대해 자세히 알고 싶으십니까? 다음은 고려해야 할 몇 가지 주요 영역입니다.

페이지 속도의 중요성

페이지 로드 시간은 매우 분명한 이유로 항상 중요했습니다. 바로 전환입니다. 간단히 말해, 빠른 사이트는 전환을 늘리고 느린 사이트는 전환을 줄입니다.

실제로 모바일 웹사이트 속도가 0.1초 향상되면 소매 비즈니스의 전환율이 8.4% 증가한다고 Google은 2020년 연구에서 밝혔습니다.

사이트 속도는 이탈률에도 영향을 미칩니다. 사용자가 느린 사이트를 만나면 사이트를 떠납니다. Akamal Technologies의 보고서에 따르면 페이지 로드 시간이 2초 지연되면 웹사이트 이탈률이 103% 증가할 수 있습니다.

페이지 로드 시간 테스트

웹사이트의 스냅샷을 얻고 최적화 프로세스를 위한 벤치마크 전후를 만들기 위해 가장 먼저 해야 할 일은 현재 페이지 속도를 테스트하는 것입니다. 시작할 수 있는 몇 가지 도구는 Google의 Page Speed Insights 및 Webpagetest.org입니다.

여러 테스트를 실행하고 결과를 평균화하십시오. 웹 페이지 테스트를 사용하면 설정 메뉴에서 이 작업을 자동으로 수행할 수 있습니다. 가장 정확한 결과를 얻으려면 사이트가 호스팅되는 위치와 가까운 테스트 위치를 선택하는 것이 항상 현명합니다.

이것이 우리가 일반적으로 기본 속도 확인을 위해 webtest.org를 설정하는 방법입니다.

아래에서 Magento 데모 사이트의 페이지 속도 테스트 결과를 평균으로 볼 수 있습니다. 사이트 최적화에 사용하고자 하는 가장 중요하고 중요한 세 가지 통계를 선택했습니다.

로드 시간	첫 번째 바이트까지의 시간	바이트 입력
2.264초	0.318초	927KB

첫 번째 통계는 로드 시간입니다. 이것은 페이지를 로드하는 데 걸리는 전체 시간을 보여줍니다. 페이지를 로드하는 데 3초 이상 걸리면 잠재적 트래픽의 절반을 잃게 될 수 있습니다. 이 숫자는 우리에게 가장 중요한 변경 사항입니다.

두 번째 통계는 TTFB(Time To First Byte)입니다. 지침을 제공하는 데 도움이 될 수 있지만 TTFB는 상대적으로 쉽게 조작할 수 있으며 그 중요성은 다양할 수 있습니다. Google Lighthouse를 사용하는 경우 페이지가 콘텐츠 요소로 화면을 "페인팅"하는 속도를 보고하는 First Contentful Paint 및 First meaningful Paint를 추적할 수도 있습니다.

모든 광고와 내러티브를 지나치려고 하기 때문에 레시피를 로드했는데 절반이 스크롤 속도를 따라잡지 못했습니까? FCP/FMP 시간이 매우 느리기 때문입니다.

세 번째 통계는 페이지에 다운로드되는 정보의 크기입니다. 이 숫자가 매우 크면 다른 페이지 요소에 걸리는 시간을 자세히 살펴보는 것이 유용할 수 있습니다.

페이지 속도 폭포

페이지 로드 시간을 단축하는 방법을 배우고 싶다면 페이지 속도를 늦추는 요소를 분리하고 폭포수를 살펴보세요. 폭포가 어떻게 생겼는지의 예는 아래에서 볼 수 있습니다.

폭포를 보고 나면 개선할 수 있는 것이 무엇인지 더 잘 알 수 있을 것입니다. 위에서 일부 프론트 엔드 .js 파일이 약간 빨라질 수 있음을 알 수 있습니다.

폭포 아래로(페이지 외부), 로드하는 데 시간이 오래 걸리고 최적화해야 하는 일부 이미지 파일도 있습니다. 초점이 더 빠른 페이지 로드 시간인 경우 페이지 지연을 유발하는 요소를 이해하는 것이 중요합니다.

웹 콘텐츠를 통해 페이지 로드 시간을 단축하는 방법

이미지 압축 및 최적화

페이지 로드 시간을 단축하는 방법을 살펴볼 때 이미지 압축을 시작하는 것이 좋습니다. 너무 자주 웹 디자이너는 쓸데없이 고해상도를 채택하는 이미지를 만듭니다. 고해상도 이미지는 서버에서 더 많은 저장 공간을 차지하며 로드 시간을 크게 증가시킬 수 있습니다.

이미지의 크기를 적절하게 조정하는 것이 좋습니다. 이미지가 사이트에서 100 x 100픽셀 공간만 차지할 경우 1000 x 1000으로 만들 필요가 없습니다. WordPress 사이트를 실행하는 경우 Smush 또는 EWWW Image Optimizer와 같은 플러그인을 권장합니다.

WordPress에서 WebP 이미지로 변환하는 방법 >>

이미지 유형 확장자

이미지를 저장할 때 사용할 확장자를 아는 것이 중요합니다. .jpg 또는 .png여야 합니까? 누군가 .svg로 로고를 보냈습니까? 무엇이 최선인지에 대해 상충되는 정보가 많이 있습니다.

많은 사람들이 .png(Portable Network Graphics)가 품질 손실 없이 이미지를 최대한 압축하도록 설계되었기 때문에 더 나은 옵션이라고 말합니다. 그것은 부분적으로 사실입니다. 즉, 규칙에 예외가 있습니다. 예를 들어 .JPEG 파일은 사진을 사용할 때 실제로 훨씬 더 잘 작동합니다.

페이지 미리보기에 표시될 때 파일을 몇 가지 다른 방식으로 저장하면 크기와 품질에 어떤 영향을 미치는지 확인하는 것이 좋습니다. 분명한 차이를 발견하면 더 나은 확장을 선택하십시오.

사이트 콘텐츠 압축

압착이 필요한 페이지 요소는 이미지만 있는 것이 아닙니다. 또한 사이트에서 CSS, HTML 및 JavaScript 요소를 압축해야 합니다. GZip은 Google이 프로덕션 환경에서 구현하기 전에 테스트를 제안하는 적극 권장되는 압축 도구입니다. 이 작업을 수행할 계획이라면 자신의 프로덕션 환경을 모방한 개발 사이트 환경을 사용하는 것이 좋습니다.

사이트 콘텐츠를 압축하는 방법은 Time To First Byte 기간을 약간 증가시킬 수 있다는 증거가 있다는 것입니다. 그러나 일부 SEO 전문가는 Google이 실제로 우선 순위를 지정할 수 있다고 제안하는 전체 페이지 속도 로드 시간도 크게 증가합니다. 사이트 전체를 전환하는 것보다 개별 페이지에서 압축을 테스트하는 것이 좋습니다.

웹 디자인 단순화

더 빠른 페이지 로드 시간을 원하면 거의 항상 더 적습니다. 핵심 페이지에 기능을 추가하는 대신 더 간단하고 빠르게 정착하는 것은 어떻습니까? 페이지에 있는 HTTP 요청이 적을수록 일반적으로 더 빨리 로드됩니다.

페이지 속도를 향상시키는 것 외에도 단순한 웹 디자인은 많은 경우에 사용자 경험을 향상시키는 것으로 나타났습니다. Google에서 실시한 UX 연구에서 사용자는 웹사이트의 미학을 1/50~1/20초 이내에 판단하는 경향이 있으며 시각적으로 복잡한 사이트는 거의 항상 단순한 사이트보다 덜 아름답다고 판단되는 것으로 나타났습니다.

웹사이트가 더 아름답다고 인식될수록 더 나은 UX와 SEO가 될 것이고 더 많은 전환이 증가할 것입니다. 더 간단한 웹사이트 디자인은 짧은 시간 내에 페이지 속도를 향상시키는 가장 빠른 방법 중 하나입니다. 그러나 즉시 100% 변경을 수행하는 것보다 변경이 실제로 어떻게 수행되는지 확인하기 위해 A/B 테스트를 실행하는 것이 좋습니다.

호스트를 통해 페이지 로드 시간을 단축하는 방법

호스트는 페이지 로드 시간에서도 큰 역할을 합니다. 다음은 호스트에서 페이지 로드 시간을 단축하는 몇 가지 방법입니다.

캐싱 활성화

캐싱은 페이지 요소가 하드 드라이브의 캐시 또는 임시 저장소에 저장되기 때문에 반복 방문자가 사이트를 훨씬 빠르게 로드할 수 있는 곳입니다. WordPress 및 WooCommerce 사이트의 경우 Redis Object Cache를 사용하여 캐싱 기능을 관리합니다. 이것은 Nexcess를 통해 WordPress에 최적화된 호스팅 계획을 구매할 때 사전 설치되고 사전 구성되어 제공됩니다.

페이지 속도를 더욱 최적화하기 위해 Nexcess Cloud에서는 Cloud Accelerator를 사용할 수 있습니다. 이는 클라이언트 포털의 성능 섹션 아래에 있는 버튼 클릭으로 쉽게 켜고 끌 수 있습니다.

Varnish를 켜야 하는지 NGINX를 켜야 하는지 확실하지 않습니까? Magento 2 최적화에 대한 최종 가이드에서 Varnish와 NGINX의 차이점에 대해 자세히 알아보십시오.

캐싱 및 CDN

CDN(Content Delivery Network)을 사용하여 캐싱하는 것은 더 복잡한 프로세스이며 고급 설정이 필요할 수 있습니다. 그러나 CDN을 사용하여 적절한 캐싱 구성을 사용하면 마치 로컬 호스트에 있는 것처럼 해당 글로벌 청중에게 다가갈 수 있습니다.

WordPress CDN이 필요한 이유 >>

WordPress 및 WooCommerce의 경우 WordPress 및 CDN Enabler로 Nexcess CDN을 구성하는 방법에 대한 가이드를 확인하세요.

고려해야 할 다른 영역

어떤 페이지를 최적화하고 있습니까?

사이트 구조는 최적화와 관련하여 큰 차이를 만듭니다. 어떤 페이지를 최적화하고 있으며 전체 사이트 구조와 어떤 관련이 있는지 생각하는 것이 중요합니다. 한 페이지를 업데이트하는 경우 해당 페이지와 상호 작용하는 페이지도 고려해야 합니다.

예를 들어 Nexcess.net을 단순히 최적화하는 것은 도움이 되지 않으며 Nexcess.net/magento/hosting 및 Nexcess.net/cloud/hosting도 최적화해야 합니다.

이 프로세스를 시작하기 전에 가장 많은 전환을 유도하고 가장 많은 ROI를 유도하는 주요 페이지에 대한 계획을 세우십시오. 가장 큰 효과를 얻으려면 여기에서 시작하십시오.

페이지 속도 및 SEO

페이지 속도와 SEO는 본질적으로 연결되어 있지만 페이지 순위를 결정하는 결정적인 요소가 아니라는 점을 실수하지 마십시오. Google은 콘텐츠가 더 관련성이 있고 사람들이 콘텐츠가 로드될 때까지 기다릴 의향이 있다면 해당 사이트에 불이익을 주지 않을 것이라고 밝혔습니다.

궁극적으로 페이지 속도는 최적화의 중요한 부분이지만 콘텐츠, 품질 및 사용자 경험은 항상 주요 초점이 되어야 합니다.

적합한 호스트로 로드 시간 가속화

이미지가 한 줄씩 로드되기를 기다리는 것에서 먼 길을 왔습니다. 페이지 속도는 소비자가 불평하는 것뿐만 아니라 전환, 순위 등을 만들거나 깨뜨릴 수 있습니다. 페이지 속도를 높이기 위해 할 수 있는 모든 일을 하는 것은 항상 좋은 생각입니다.

페이지 로드 시간을 개선하기 위해 시간과 노력을 투자하고 있다면 디지털 비즈니스를 보호하고 있는 것입니다. 귀하의 땀 자산을 현명한 투자와 일치시키십시오. Nexcess와 같이 확장성, 보안, 속도 및 지원이 입증된 호스트를 선택하여 다음 단계로 나아가십시오.

Nexcess는 다음을 포함하는 완전 관리형 WordPress 호스팅을 제공합니다.

자동 업데이트.
보안을 위한 SSL.
내장 CDN.
이미지 압축.
캐싱.
그리고 더!

2주 무료 평가판을 통해 직접 확인하십시오.

내 무료 평가판 시작