모바일에서 웹사이트를 빠르게 로드하는 방법(2022)

게시 됨: 2020-07-31

이제 모바일 장치에서 웹사이트 성능이 데스크톱에서보다 더 중요합니다.

데스크톱을 사용하는 사람보다 모바일을 사용하여 인터넷에 액세스하는 사람이 더 많기 때문입니다.

StatCounter에 따르면 전 세계 인터넷 사용자의 50% 이상이 모바일 장치를 사용합니다. 데스크탑을 사용하는 비율은 47%에 불과합니다.

주로 데스크톱 전용으로 사이트를 최적화하는 경우 비즈니스 성공을 저해합니다. 모바일은 그 어느 때보다 중요합니다.

귀하의 사이트가 모바일에서 수행되는 방식은 SEO에 매우 중요합니다. Google의 접근 방식은 이제 모바일 우선 인덱싱입니다. 즉, Google은 인덱싱 및 순위 지정을 위해 모바일 버전의 웹사이트를 사용합니다.

귀하의 사이트가 데스크탑에서 빠르고 모바일에서 느리다면 귀하의 순위가 저하될 것입니다. 모바일에서의 사이트 성능은 데스크톱에서의 성능보다 더 중요해야 합니다.

모바일에서 웹사이트를 빠르게 로드하면 SEO가 향상되고 이탈률이 감소하며 전환이 증가합니다.

그러나 모바일 속도에 맞게 사이트를 최적화하는 것은 데스크톱 속도에 맞게 사이트를 최적화하는 것만큼 쉽지 않습니다. 고맙게도 여기 나열된 팁을 따르면 이 문서를 통해 모바일에서 웹사이트를 빠르게 로드할 수 있습니다.

웹사이트 속도 테스트

가장 먼저 해야 할 일은 모바일에서 사이트 속도를 테스트하는 것입니다. 이렇게 하면 사이트가 얼마나 빠르거나 느린지 명확하게 파악할 수 있습니다.

사이트가 데스크톱에서 빨리 로드된다고 해서 모바일에서도 빨리 로드된다는 보장은 없습니다. 귀하의 사이트가 데스크톱에서는 매우 빠르지만 모바일에서는 매우 느릴 수 있습니다.

많은 모바일 테스트 도구가 있지만 모바일 속도 테스트는 Google의 내 사이트 테스트를 사용하는 것이 좋습니다.

ThinkWithGoogle을 방문하여 사이트의 URL을 입력하기만 하면 됩니다. 사이트가 얼마나 빠른지 테스트할 수 있어야 합니다.

저에게는 3초 안에 로딩되는 사이트면 충분합니다. 그러나 Think With Google은 최소 2.4초를 권장합니다.

모바일에서 웹사이트를 빠르게 로드하는 방법

다음은 모바일에서 사이트 속도를 높이는 모범 사례입니다.

반응형 테마 사용

반응형 테마는 모든 장치에 맞게 조정되는 테마입니다. 즉, 사용자가 데스크톱, 모바일 또는 태블릿에서 온 경우에도 테마는 사용자가 사용하는 장치에 맞는 웹사이트 버전을 제공합니다.

모바일 사용자에게 웹사이트의 데스크톱 버전을 제공하면 로드 시간이 느려집니다. 그리고 그것은 사용자 경험에 끔찍합니다.

반응형 테마를 사용하는 것은 매우 중요합니다. 모바일에서 빠른 웹 사이트의 첫 번째 기반입니다. 선택할 수 있는 몇 가지 반응형 테마가 있습니다. 내 Top 10 가장 빠르고 최고의 WordPress 테마 목록을 읽으십시오. 거기에 나열된 테마 중 어느 것이든 충분히 훌륭하고 반응이 좋습니다.

빠른 웹 호스트 사용

웹 호스트는 웹 사이트 속도를 높이는 데 가장 중요한 역할을 합니다. 최신 호스팅 기술을 갖춘 매우 빠른 웹 호스트는 모바일에서 웹사이트를 빠르게 로드할 것입니다.

웹 호스트가 느린 경우 웹 사이트를 최적화하는 방법에 관계없이 크게 개선되지 않을 수 있습니다.

확립된 웹사이트에는 Cloudways와 Kinsta를 추천합니다. TargetTrend는 Cloudways에서 호스팅됩니다. 초보자 사이트의 경우 Bluehost를 권장합니다.

AMP 사용

AMP(Accelerated Mobile Pages)는 모바일에서 웹사이트 속도를 높이기 위한 Google의 프로젝트입니다.

AMP는 모바일 브라우징에 최적화되어 있으며 웹사이트 로드 시간을 크게 단축할 수 있습니다. 또한 연구에 따르면 요청 수를 77% 이상 줄일 수 있습니다.

공식 AMP 플러그인을 설치하여 AMP를 시작할 수 있습니다. 다른 AMP 플러그인도 있으므로 사용할 수 있습니다.

플러그인을 활성화하면 사용 가능한 세 가지 모드 중 하나를 선택할 수 있습니다. 방문자의 대다수가 모바일에서 오는 경우 전환 또는 표준 모드를 사용하는 것이 좋습니다. 그러나 테마는 AMP와 호환되어야 합니다.

이미지 로드 지연

이미지는 특히 모바일 장치에서 웹사이트 속도를 저하시킬 수 있습니다. 이를 처리하는 가장 좋은 방법은 사용자가 스크롤했을 때 로드하는 것입니다. 그렇게 하면 필요할 때만 로드되므로 로드 시간에 거의 또는 전혀 영향을 미치지 않습니다.

PageSpeed Insight 또는 Web.dev에서 웹사이트를 테스트하려고 할 때 "화면 밖의 이미지를 연기"하라는 경고가 표시되면 이미지가 로드 시간을 늦추고 있다는 의미이므로 지연 로드를 고려해야 합니다.

이미지 로딩 지연은 사용자가 이미지를 스크롤할 때까지 이미지 로딩을 지연시키는 것입니다. 이것은 속도를 향상시킬 수 있습니다.

지연 로딩을 처리하는 많은 플러그인이 있습니다. 대부분의 캐시 플러그인과 이미지 최적화 플러그인에는 지연 로딩 옵션이 있습니다.

렌더링 차단 리소스 제거

렌더링 차단 리소스를 제거하면 모바일에서 웹사이트의 로드 시간을 단축할 수 있습니다.

일반적으로 사용자가 방문할 때 브라우저가 웹사이트를 빠르게 렌더링하는 것을 어렵게 만드는 일부 Java 스크립트 및 CSS가 있습니다. 이는 브라우저가 사용자에게 사이트를 렌더링하기 전에 이러한 파일을 중지하고 읽어야 하기 때문입니다.

이러한 리소스를 제거하면 로드 시간이 빨라질 수 있습니다. 렌더링 차단 리소스를 제거하는 데 도움이 될 수 있는 Autooptimize와 같은 플러그인이 있습니다.

이에 대한 유용한 기사가 있습니다. 읽어야 합니다. WordPress에서 렌더링 차단 리소스를 제거하는 방법.

사용하지 않는 CSS 제거

사용하지 않는 CSS가 많으면 웹사이트 속도가 느려질 수 있습니다. 미사용 CSS는 웹사이트를 로드하는 데 필요하지 않은 CSS입니다. 그러나 존재하기 때문에 브라우저는 여전히 이를 다운로드, 구문 분석 및 처리해야 합니다.

사용하지 않는 CSS를 제거하는 데 도움이 되는 Perfmatters 및 Asset CleanUp과 같은 플러그인이 있습니다.

저는 이에 대한 간단한 가이드를 작성했습니다: WordPress에서 사용하지 않는 CSS 및 JS를 제거하는 방법.

중요한 CSS 생성

Critical CSS는 스크롤 없이 볼 수 있는 콘텐츠를 쉽게 추출하여 사용자에게 빠르게 렌더링하는 데 사용됩니다. 중요한 CSS 경로가 있으면 모바일 및 데스크톱에서 웹사이트의 로드 시간을 단축할 수 있습니다.

Critical CSS 생성에 도움이 되는 플러그인이 있습니다. WP Rocket은 이를 수행할 수 있으며 LiteSpeed Cache 및 WP Performance도 중요한 CSS를 생성할 수 있습니다.

좋은 캐싱 시스템을 가지고

캐싱은 웹사이트 속도를 높이는 매우 안정적인 방법입니다. 모바일 방문자에게 캐시된 콘텐츠를 제공하려면 효과적인 캐싱 플러그인을 사용해야 합니다. WP 로켓은 매우 효과적인 프리미엄 캐싱 플러그인입니다. W3 전체 캐시는 잘 구성되어 있으면 매우 효과적일 수 있습니다.

대부분의 관리 웹 호스팅 회사는 서버 수준 캐싱을 제공합니다. 웹 호스트가 동일한 서비스를 제공하는지 확인하고 즉시 사용할 수 없는 경우 사이트에 대해 활성화하도록 요청하십시오.

Varnish 캐시를 설치하고 활성화하도록 호스트를 요청할 수 있습니다. Varnish 캐시는 웹 사이트 속도를 높이는 것으로 알려져 있습니다.

이미지 최적화

이미지를 압축했는지 확인하십시오. 이미지를 업로드하기 전에 완전히 압축하는 것을 선호합니다. 그러나 WordPress 내에서 이미지를 압축하는 데 도움이 될 수 있는 optimole 및 기타 플러그인과 같은 많은 플러그인이 있습니다.

WebP 이미지를 제공하면 웹사이트 속도도 높일 수 있습니다. WebP는 JPG 및 PNG보다 작기 때문에 속도 친화적입니다.

WebP 이미지를 변환하고 제공하는 데 도움이 되는 많은 플러그인이 있습니다. Optimole 및 비행 이미지는 이를 매우 잘 수행할 수 있습니다.

코드 축소

축소는 웹 사이트의 코드를 더 큰 크기에서 더 작은 크기로 압축하는 프로세스입니다. 아무것도 깨지지 않는 한 작을수록 좋습니다.

JS와 CSS를 축소하는 것을 고려해야 합니다.

대부분의 캐싱 플러그인은 축소 기능을 제공합니다. 그러나 축소는 웹 사이트를 손상시키는 것으로 알려져 있으므로 스테이징을 사용하여 테스트하십시오.

리디렉션 최소화

리디렉션이 너무 많으면 특히 모바일에서 웹사이트 속도가 느려질 수 있습니다. 서버 응답 시간이 느려질 수 있습니다.

리디렉션이 너무 많지 않은지 확인하십시오. 그렇다면 가능한 한 줄이십시오.

압축 활성화

파일을 압축하여 모바일에서 웹사이트를 빠르게 만드십시오. 작을수록 사이트가 더 빨라집니다.

Gzip 또는 Brotli는 웹사이트 파일을 압축하여 웹사이트 속도를 크게 높일 수 있습니다. 일반적으로 Brotli가 Gzip보다 낫습니다. 그러나 그들 중 하나는 잘 작동합니다. 압축을 활성화하려면 웹 호스트에 문의하십시오.

플러그인 솔루션이 더 적합한 경우 압축을 활성화하는 데 도움이 되는 플러그인도 있습니다.

페이지당 애드센스 수 줄이기

Google 애드센스는 블로그로 돈을 버는 가장 인기 있는 방법 중 하나이지만 웹사이트 속도를 크게 저하시키는 것으로도 알려져 있습니다.

내 관찰에 따르면 애드센스를 비활성화하면 로드 시간에 매우 큰 차이가 있음을 즉시 알 수 있습니다.

그러나 속도와 함께 돈도 매우 중요합니다. 따라서 타협에 도달해야 합니다. Google은 페이지당 3개의 광고 단위를 권장합니다. 그것만 지키면 괜찮을 겁니다.

일치하는 콘텐츠 단위와 페이지 수준 광고가 모바일 로딩 시간에 가장 부정적인 영향을 미친다는 사실을 알게 되었습니다.

CDN 사용

콘텐츠 전송 네트워크는 웹사이트의 정적 복사본을 만들어 웹사이트를 방문하려고 할 때 더 가까운 위치에서 전 세계 사용자에게 제공함으로써 웹사이트 속도를 높이는 데 도움이 될 수 있습니다.

CDN을 사용하지 않는다면 놓치고 있는 것입니다!.

최고의 WordPress CDN 제공업체를 확인하세요.

시스템 스택 글꼴 사용

최근에 모바일에서 이 웹사이트의 로드 시간을 단축하려고 했습니다. 그래서 구글폰트 사용을 중단하고 시스템 스택을 시도했는데 놀랍게도 속도가 크게 향상되었습니다.

Google 글꼴과 멋진 글꼴은 훌륭하지만 웹사이트 속도를 늦출 수 있습니다. 시스템 스택을 사용하면 사용자가 사용하는 모든 장치의 글꼴이 필요하므로 외부 요청이 발생하지 않도록 합니다.

일부 테마를 사용하면 시스템 스택으로 쉽게 변경할 수 있습니다. 시스템 스택으로 전환하기만 하면 됩니다.