페이지 로딩 시간을 개선하는 10가지 방법

페이지 로딩 시간이 중요한 이유가 궁금하다면 이 질문에 대한 답을 드리고자 합니다. 페이지 로딩 시간은 전환율과 직접적인 관련이 있습니다.

페이지가 로드되는 데 시간이 오래 걸릴수록 더 많은 전환이 발생합니다.

무언가를 개선하려면 먼저 해당 지표의 현재 위치를 파악해야 합니다. 따라서 페이지 속도를 개선하려면 페이지 속도를 측정하는 것부터 시작해야 합니다.

아래의 세부 사항은 약간 기술적인 내용이므로 조금만 기다려주세요.

페이지 로딩 시간이 중요한 이유는 무엇인가요?

페이지 로딩 속도는 사이트의 사용성을 결정하는 중요한 요소입니다. Google은 페이지 속도를 자연 검색 결과에서 사이트의 순위에 영향을 미치고 사용자 경험을 향상시키는 200가지 순위 요소 중 하나로 간주합니다. 페이지 로딩 속도가 느리면 사용자 경험이 좋지 않으므로 페이지 로딩 속도가 빠르면 순위 상승으로 직결될 수 있습니다.

더 많은 트래픽을 발생시키기 위한 경쟁은 항상 존재하며, 더 나은 사용성을 제공한다는 것은 경쟁사보다 앞서 있다는 것을 의미합니다.

이뿐만이 아닙니다. 페이지 로딩 시간이 빨라지면 사이트의 크롤링 속도도 향상될 수 있습니다. 페이지 로딩 속도가 빠를수록 Google이 동시에 크롤링할 수 있는 페이지가 많아지므로 한 번에 더 많은 사이트를 커버할 수 있습니다.

페이지 속도가 빠르면 Google 크롤러 사이에서 사이트의 인기도를 높이는 데도 도움이 됩니다. 즉, 검색 스파이더가 사이트를 더 자주 방문하게 되므로 좋은 소식입니다. 또한 선택한 호스트와 서버에 따라 페이지 로딩 시간도 결정된다는 점도 알아둘 필요가 있습니다. 관리형 워드프레스 호스팅, 전용 호스팅 등은 속도 향상을 위한 좋은 선택입니다.

여기서 주의해야 할 점은 사이트 로딩 시간이 3초 이상 걸리면 이탈률이 3배 증가한다는 것입니다.

출처: Pingdom

프로세스는 다음과 같이 작동합니다. 사용자가 브라우저에 도메인을 입력하고 페이지에서 사용 가능한 정보를 보려고 Enter 키를 누릅니다.

잠시 후 페이지가 로딩되기 시작하고 사용자는 페이지와 상호 작용할 수 있으며 잠시 후 전체 페이지가 로드됩니다. 페이지가 완전히 로드되는 데 걸리는 시간은 매우 중요합니다.

페이지가 완전히 로드되기 전에 사용자가 이미 정보를 찾았을 수도 있습니다. 로딩 시간이 너무 오래 걸리면 다른 사용자가 포기하고 사이트를 떠날 수도 있습니다.

보시다시피 사이트를 로딩하는 동안 많은 일이 일어나며 이는 사용자가 사이트를 경험하는 방식에 영향을 미칩니다.

페이지 로딩 시간을 이해하는 방법

페이지 속도를 측정하는 방법에는 크게 두 가지가 있습니다:

• 페이지 로드 시간: 브라우저가 서버에 요청을 전송하고 페이지가 완전히 렌더링되기까지의 시간을 보여줍니다.

• 첫 바이트까지의 시간: 첫 번째 요청이 서버로 전송되고 브라우저가 첫 번째 바이트의 데이터를 가져올 때까지 걸린 시간을 보여줍니다.

사이트 속도를 최적화할 때는 페이지 로드 시간과 첫 바이트까지의 시간을 줄이는 데 집중하는 것이 가장 중요한 두 가지 우선 순위가 되어야 합니다. 이러한 방법을 사용하면 일반적으로 더 빠른 페이지를 더 쉽게 얻을 수 있습니다. 하지만 한 가지 주목할 점은 Google이 페이지의 속도를 첫 바이트까지의 시간(TTFB라고도 함)으로 측정한다는 사실입니다. 순위를 높이려면 TTFB보다 앞서야 합니다.

페이지 속도/사이트 속도 측정 방법

사이트를 변경하기 전에 먼저 사이트의 성능을 고려하세요. 페이지 속도를 테스트하고 측정할 수 있는 여러 도구가 있습니다. 두 가지 좋은 솔루션은 Pingdom 속도 테스트와 초보자 친화적인 옵션이 제공되는 GTmetrix입니다.

출처: Pingdom

#1. Google 페이지 속도 인사이트로 최적화

Google 페이지 속도 인사이트로 사이트를 확인하여 현재 상태를 파악할 수도 있습니다. Google 페이지 속도 인사이트는 몇 분 안에 페이지 속도를 개선할 수 있는 실행하기 쉬운 제안 목록을 생성합니다.

Google이 소유하고 있는 이 도구는 Google이 중요하게 생각하는 지표에 맞게 최적화하는 데 필요한 모든 것을 제공합니다. 텍스트 필드에 페이지의 URL을 입력합니다. 그런 다음 분석을 클릭합니다.

그러면 페이지스피드 인사이트가 페이지의 콘텐츠를 분석하여 1~100점 사이의 점수를 매깁니다. 페이지의 로딩 속도를 개선하기 위한 제안 사항도 확인할 수 있습니다. 아래 보고서는 제 사이트에 대한 보고서입니다: kamayobloggers.com/blog.

여기에 많은 제안이 있습니다.

출처: 페이지 속도 인사이트

또한 사이트의 데스크톱 및 모바일 버전에 대한 별도의 점수와 제안 목록이 제공됩니다. 이를 통해 사이트의 모바일 버전과 데스크톱 버전 모두에 대해 개별적으로 최적화하는 데 사용할 수 있는 편리한 제안 목록을 제공합니다.

이 정보는 페이지의 속도를 이해하고 최적화하기 위한 출발점을 제공합니다. 또한 스타트업의 모든 기술적 문제를 해결할 수 있는 서비스형 CTO를 찾아볼 수도 있습니다.

#2. 관리형 호스트 선택

사용하는 호스트는 웹사이트 관리와 성능에 중요한 역할을 합니다. 여기에는 페이지 속도도 포함됩니다. 평범한 호스팅의 한 가지 실수는 월별 요금으로 절약한 금액만큼 수입이 줄어든다는 것입니다. 저렴한 호스팅은 페이지 로딩을 느리게 만드는 가장 큰 원인입니다. 저렴한 호스팅 클럽은 과부하가 걸린 서버에서 여러 사이트와 동일한 리소스를 공유하므로 페이지 로딩 시간에 부담을 줍니다.

속도에 최적화된 플랫폼을 제공하는 Kinsta와 같은 성능 중심 호스트가 있습니다.

#3. 이미지 압축 및 최적화

이미지는 콘텐츠 품질을 향상시키면서 웹 페이지를 향상시킵니다. 하지만 이미지가 크면 사이트 속도가 느려집니다. 오늘날 사람들은 더 나은 독자가 되었기 때문에 장기적인 목표를 가지고 잘 연구된 양질의 콘텐츠를 제공해야 합니다. 따라서 이미지 없이는 할 수 없습니다. 하지만 이미지를 최적화할 수는 있습니다.

이미지 최적화에는 파일 형식 변경(PNG/JPG에서 WEBP로), 지연 로딩 활성화, 무손실 압축을 통한 이미지 압축 등이 포함됩니다.

이미지 파일 크기를 줄이면 이미지의 무게가 줄어들어 페이지 로딩 속도가 빨라집니다. 이를 위해 사용할 수 있는 플러그인으로 WP Smush가 있습니다.

플러그인을 설치하고 활성화하면 화질에 영향을 주지 않고 이미지 크기를 조정하고 압축합니다. 무손실 압축, 지연 로딩, 이미지 일괄 최적화 기능이 포함되어 있습니다.

플러그인에는 크기를 85%까지 효과적으로 줄일 수 있는 다양한 압축 옵션이 있으므로 플러그인을 사용할 수 있습니다.

이 플러그인은 지연 로딩 및 기타 기능을 허용하는 Webp 형식도 사용합니다.

제가 인용할 수 있는 예는 Fyle입니다. 이 블로그는 경비 관리에 관한 양질의 콘텐츠로 가득합니다. 경비 관리, 부기, 국제 결제 및 글로벌 뱅킹의 다양한 측면을 다루는 400여 개의 기사가 있습니다. 모든 이미지는 최적화되어 있고 빠르게 로드됩니다. 이 모든 것이 최적화되지 않았다고 상상해 보세요. 사이트가 로드되는 데 시간이 오래 걸릴 것입니다.

출처: Fyle

#4. 브라우저 캐싱 활성화

브라우저 캐싱은 로딩 시간을 개선하기 위한 또 다른 형태의 캐싱입니다. 이를 통해 브라우저는 스타일시트, 이미지, 자바스크립트 파일과 같은 정보를 저장할 수 있습니다. 사용자가 페이지를 방문할 때마다 이러한 이질적인 요소가 모두 포함된 페이지를 다시 로드할 필요가 없습니다.

W3 토탈 캐시와 마찬가지로 WP Rocket은 사이트에서 사용할 수 있는 강력한 캐싱 플러그인입니다. 페이지 캐싱 및 사전 로딩을 통해 페이지 속도를 최적화할 수 있습니다. WP Rocket은 동일한 기능을 가진 또 다른 플러그인입니다.

예를 들어 고객 서비스 아웃소싱에 관한 이 페이지를 보세요. 브라우저 캐싱은 페이지의 모든 이미지가 로컬에 저장되어 다음에 페이지를 불러올 때 페이지가 빠르게 로드되는 것을 의미합니다.

출처: TheCXlead

사용할 수 있는 또 다른 팁은 이것입니다:

사이트의 정적 구성 요소에는 만료 헤더를 사용하고 동적 구성 요소에는 캐시 제어 헤더를 사용합니다. 이러한 헤더를 사용하면 이미지 스타일시트, 플래시 등 사이트의 다양한 구성 요소를 캐시할 수 있습니다. 이렇게 하면 HTTP 요청이 최소화되고 페이지 로드 시간이 개선됩니다. 만료 헤더를 사용하면 페이지의 구성 요소를 캐시할 수 있는 기간을 제어할 수 있습니다.

Expires: 2028년 10월 15일 수요일 20:00:00 GMT

Apache를 사용할 때 만료 기본 아카이브를 사용하여 캐시된 콘텐츠의 시간을 설정할 수 있습니다. 이렇게 하면 만료 날짜가 현재 날짜로부터 설정된 기간으로 설정됩니다.

ExpiresDefault "액세스 + 15년"

페이지의모든 질문에 답변하고 페이지의 리디렉션 횟수를 제한하여 페이지를 더욱 최적화하세요.

#5. 비동기 로딩 사용

사이트는 거의 전적으로 CS와 자바스크립트 파일로 구성되어 있습니다. 이러한 스크립트에는 동기식과 비동기식의 두 가지 로드 방식이 있습니다. 비동기 로딩이 SEO에 더 좋습니다.

동기식이란 파일이 페이지에 표시되는 순서대로 한 번에 로드되는 것을 의미합니다.

브라우저에서 스크립트를 볼 때 다른 요소는 일시 중지되고 스크립트가 먼저 로드됩니다.

비동기 로딩을 사용하면 여러 파일을 한 번에 로드하여 성능을 높일 수 있습니다.

워드프레스를 사용하는 경우 자동 최적화 또는 비동기 자바스크립트를 조합하여 사용하세요.

WP Rocket을 사용할 수도 있습니다.

#6. 쓸모없는 플러그인 삭제

모든 플러그인이 똑같이 만들어지는 것은 아닙니다. 사이트에 플러그인이 너무 많으면 불필요한 부풀림이 발생하여 속도가 느려질 수 있습니다.

게다가 제대로 관리되지 않는 플러그인은 보안 위협을 초래하고 호환성 문제를 일으켜 성능에 영향을 미칩니다. 사이트의 플러그인 수를 최소화하는 것이 현명합니다. 이를 위한 한 가지 방법은 더 이상 필요하지 않거나 사용하지 않는 플러그인을 비활성화하거나 완전히 삭제하는 것입니다.

일부 플러그인은 유용할 수 있지만 더 이상 관련이 없는 경우 비활성화하고 기능을 방해하는 플러그인이 있는지 확인해야 합니다. 페이지 속도를 저하시키는 플러그인을 식별하려면 개별적으로 테스트하세요.

#7. 웹 페이지 캐시

사이트 페이지를 캐싱하는 것도 웹 페이지 속도를 높이는 또 다른 효과적인 방법입니다. 페이지를 캐싱하면 서버가 페이지를 로드하는 데 더 적은 리소스를 사용하게 되어 첫 바이트까지의 시간이 단축됩니다.

웹사이트 캐싱은 서버 수준에서 이루어질 수 있으므로 호스트가 대신 처리합니다.

또 다른 방법은 무료 워드프레스 플러그인인 W3 토탈 캐시를 사용하는 것입니다. 설치하고 활성화한 후 일반 설정으로 이동한 다음 페이지 캐시로 이동하여 활성화 옵션을 선택합니다.

WP 로켓 로딩 시간을 늘리고 페이지 속도 인사이트 점수 및 핵심 웹 바이탈을 최적화하는 또 다른 플러그인입니다.

#8. CSS, JavaScript 및 HTML 축소

파일 로드 방식을 최적화하면 페이지 로딩 속도를 개선할 수 있습니다. CSS, 자바스크립트 및 HTML 코드를 축소하세요. 이렇게 하면 코드에서 불필요한 공백, 주석 및 기타 불필요한 요소를 제거하여 파일 크기를 줄일 수 있습니다.

파일 크기를 줄이면 파일을 결합하기가 더 쉬워집니다. 그 결과 깔끔하고 간결한 웹 페이지가 빠르게 로드됩니다. 파일의 각 코드 줄을 살펴보는 것은 효율적이지 않습니다.

W3 토탈 캐시 플러그인을 사용하면 CSS, 자바스크립트, HTML을 간편하게 축소할 수 있습니다. 캐시 활성화 옵션 바로 아래에는 축소를 활성화할 수 있는 옵션이 있습니다. 이렇게 하면 HTML, CSS 및 기타 속성을 축소할 수 있습니다. 상단에 있는 사용 확인란을 선택하기만 하면 됩니다.

#9. 리디렉션 줄이기

사이트에 리디렉션이 너무 많으면 로딩 시간이 길어질 수 있습니다. 새 도메인으로 이동할 때와 같이 사이트 리디렉션을 사용해야 하는 경우도 있습니다. 하지만 대부분의 경우 불필요한 리디렉션을 사용하면 페이지 로딩 시간이 늘어날 수 있습니다. 새 내부 링크나 메뉴를 만들 때 불필요한 리디렉션을 만들지 마세요. 하지만 웹사이트에 리디렉션이 너무 많으면 로딩 시간이 길어질 수 있습니다. 다른 곳으로 리디렉션하는 페이지가 있을 때마다 HTTP 요청 및 응답 시간을 연장하는 것은 좋지 않습니다.

리디렉션을 줄이는 한 가지 방법은 불필요한 내부 링크와 메뉴를 만들지 않는 것입니다. 또 다른 방법은 TLD가 한 번의 리디렉션으로 해결되도록 하는 것입니다.

사이트 전체에서 올바르게 설정해야 하는 리디렉션을 식별하는 데 도움이 필요하다면 리디렉션 매퍼 도구를 사용하세요. 이 도구는 기능과 사용 사례를 이해할 수 있는 제한된 무료 티어의 부분 유료화 도구입니다.

출처: 리디렉션 매퍼

이 도구는 중복 리디렉션을 확인하고 수정하는 데 도움이 됩니다. 또한 Screaming Frog(무료)를 사용하여 리디렉션과 리디렉션이 어디로 연결되는지 식별할 수 있습니다. 이렇게 하면 목적에 맞지 않는 리디렉션을 쉽게 식별할 수 있습니다.

.htaccess 파일을 통해 필요 없는 리디렉션을 삭제할 수 있습니다.

#10. 쿠키 크기 줄이기

쿠키 크기를 줄여야 하는 이유를 이해하려면 먼저 쿠키가 무엇인지 이해해야 합니다.

쿠키란 무엇인가요?

쿠키는 서버에서 전송되어 PC에 저장되는 작은 데이터 조각입니다. 쿠키는 브라우저 상태 정보를 식별합니다. 쿠키는 HTTP가 상태 비저장 프로토콜이라는 사실을 우회하기 위해 도입되었습니다.

쿠키는 다양한 용도로 사용됩니다:

• 사용자 식별 및 인증 목적

• 장바구니에 있는 제품을 기억하기 위해

• 사용자가 방문한 페이지를 이해하기 위해

• 기본 설정에 대한 정보 기록

쿠키는 웹서버에 요청을 할 때마다 브라우저가 요청에 포함된 쿠키를 서버로 전송하기 때문에 성능에 중요한 역할을 합니다. 쿠키 크기가 커질수록 각 요청의 크기가 커지기 시작하여 성능이 저하됩니다.

쿠키는 도메인별로 설정됩니다. 쿠키가 설정되면 브라우저는 요청에 대한 정보를 서버로 다시 전송합니다.

한 연구에서 웹 페이지의 로딩 시간을 쿠키가 있을 때와 없을 때를 비교했습니다.

쿠키가 설정되지 않은 경우 로드 시간은 6.63초, 4KB 쿠키가 설정된 경우 로드 시간은 7.89초였습니다.

왼쪽 차트는 쿠키를 설정했을 때 사이트가 로드되는 시간을 보여줍니다. 녹색 막대가 더 길며 첫 바이트까지의 시간을 나타냅니다. 대부분의 시간은 쿠키를 업로드하는 데 소요되었습니다. 물론 쿠키는 목록에서 가장 마지막에 있지만 기억해야 할 사항입니다.

출처: Thisisoptimal

결론

사이트 속도를 최적화하는 것은 사용자 경험을 최적화하고 더 나아가 방문자가 모든 방문에서 더 많은 것을 얻을 수 있도록 돕기 위해 할 수 있는 가장 중요한 일 중 하나입니다. 사용성이 향상되면 점점 더 많은 사람들이 사이트를 방문하고 더 오래 머무르게 됩니다.