2022년 WordPress 사이트가 모바일 속도에 최적화되도록 하는 7가지 팁
게시 됨: 2021-08-16
마케팅 조사 기관 Gartner에 따르면 2022년에는 전체 온라인 구매의 약 절반이 모바일 장치에서 이루어졌습니다.
웹사이트가 로드되는 데 3초 이상 걸리면 모바일 방문자의 절반이 뒤로 버튼을 누를 것이라는 점을 고려하면 속도를 우선 순위로 지정하는 것이 경쟁을 따라가는 데 중요합니다.
다음은 2022년 이후에 모바일 방문자를 위해 웹 개발자가 WordPress 사이트의 속도를 높일 수 있는 몇 가지 단계입니다.
모든 밀리초가 중요한 이유
WordPress 사이트를 로드하는 데 시간이 오래 걸릴수록 더 많은 잠재 고객을 잃게 됩니다. Google은 이제 모바일 검색 순위에 페이지 속도를 고려하므로 웹사이트를 더 빠르게 만들면 새로운 사람들에게 도달할 가능성도 높아집니다.
실제로 Google은 점차 "모바일 우선" 인덱싱을 향해 나아가고 있습니다. 즉, 검색 알고리즘이 전체 검색 순위를 결정하기 위해 웹사이트의 모바일 버전을 사용합니다.
Google 은 모바일 사이트의 로드 시간을 1초 미만으로 설정하는 것이 좋습니다. 모든 개발자에게 이는 현실적인 목표가 아닐 수도 있지만 2022년에는 로드 시간이 2초를 초과하는 전자 상거래 웹사이트에서 허용되지 않는 것으로 간주됩니다.
페이지 최적화를 시작하기 전에 몇 가지 속도 테스트를 수행하고 몇 가지 벤치마크를 설정하십시오. Google의 속도 스코어카드는 사이트의 모바일 속도를 경쟁업체와 비교하여 보여줍니다.
소매 웹사이트가 있는 경우 Google의 Impact Calculator를 사용하면 모바일 속도를 몇 초만 개선하여 얻을 수 있는 수익을 추정할 수 있습니다.
중대한 변경을 수행할 때마다 몇 가지 추가 테스트를 실행하여 영향을 미쳤는지 확인하십시오. 느린 3G 연결을 통해 5초 이내에 웹사이트를 로드할 수 있다면 대부분의 사용자가 만족할 것입니다.
2022년 WordPress 사이트를 더 빠르게 만들기 위한 팁
1. 반응형 웹사이트 만들기
모바일 사용자는 데스크톱 사용자와 기대하는 바가 다릅니다. 예를 들어, 스마트폰으로 쇼핑하는 사람은 거래를 얼마나 빨리 완료할 수 있는지보다 이미지 품질에 덜 신경을 쓸 수 있습니다.
따라서 모바일 방문자에게 약간 더 낮은 해상도의 이미지를 제공하는 것이 실제로 유리할 수 있습니다. 고해상도 이미지는 온라인 상점에서 특히 중요하지만 수신하는 모든 데이터 바이트에 대해 비용을 지불하는 모바일 사용자를 몰아낼 수 있습니다.
따라서 모바일 속도에 최적화된 자산 사이트를 자신의 디바이스에 전달하여 모든 사용자를 수용할 수 있는 반응형 웹 디자인을 구현해야 합니다.
특정 WordPress 테마 및 플러그인을 사용하면 다양한 사용자에 대한 콘텐츠 가시성의 우선 순위를 쉽게 지정할 수 있습니다. WordPress 템플릿의 반응형 옵션으로 이동하여 모바일 방문자가 볼 수 있는 항목을 사용자 지정하기만 하면 됩니다.
모바일 사용자가 신경 쓰지 않아도 되는 더 큰 이미지와 기타 콘텐츠를 숨길 수 있습니다.
그렇지 않고 테마 또는 플러그인에 반응형 옵션이 없는 경우 미디어 쿼리를 사용하여 페이지의 특정 시각적 요소를 숨길 수 있습니다.
CSS 파일에서 이를 정의하고 뷰포트의 크기에 따라 페이지의 특정 요소를 숨기거나 표시할 수 있습니다. 예를 들어 다음 스니펫은 뷰포트 크기가 480px 미만인 경우 CSS 클래스 .big_image 를 숨깁니다.
@미디어 화면 및 (최대 너비: 480px) {
.big_image {
디스플레이:없음;
}
}2. 콘텐츠 전송 네트워크 제공업체에 가입
모바일 속도에 최적화된 사이트를 만드는 가장 간단한 방법은 웹사이트 성능의 모든 측면을 CDN 또는 콘텐츠 전송 네트워크에 투자하는 것입니다. CDN은 전 세계에 전략적으로 배치된 서버 네트워크입니다.
접속 지점이라고 하는 이러한 서버는 웹 사이트 사본을 호스팅하여 가까운 곳과 먼 곳의 방문자가 일관된 사용자 경험을 할 수 있도록 합니다.
다른 국가의 사용자가 웹사이트를 요청할 때 CDN은 지리적으로 가장 가까운 접속 지점을 통해 콘텐츠를 제공합니다 . 또한 CDN은 캐싱을 최적화하여 사용자가 재방문할 때 페이지가 더 빨리 로드되도록 합니다.
첫 번째 바이트를 만드는 시간을 줄이는 것 외에도 CDN은 사용량이 많은 시간에 호스트 서버에서 리소스를 오프로드하여 사용자가 트래픽 급증으로 인한 중단을 경험하지 않도록 할 수 있습니다.
사이트 사본이 전 세계 서버에 저장되기 때문에 CDN을 사용하면 사이트가 충돌하지 않도록 할 수 있습니다. 한 서버에 장애가 발생하면 CDN이 방문자를 다음으로 가장 가까운 접속 지점으로 다시 라우팅합니다.
CDN 서비스 사용의 다른 이점으로는 DDoS 공격에 대한 보호, SEO 개선 등이 있습니다. CDN에 투자하면 웹사이트가 이미 전 세계적으로 배포되어 있기 때문에 확장도 간소화됩니다.
3. 이미지 최적화
말하자면 지금은 JPEG 및 GIF와 같은 기존 이미지 형식을 사용하는 것에서 WebP와 같은 보다 효율적인 대안으로 전환하기에 완벽한 시기일 수 있습니다.
이 새로운 형식은 이전 형식보다 더 나은 압축 알고리즘을 사용하므로 더 작은 파일에 더 높은 품질의 이미지를 저장할 수 있습니다.
따라서 이미지를 변환하면 대부분의 방문자가 로드 시간을 단축할 수 있습니다. 새로운 이미지 형식은 아직 모든 브라우저에서 지원되지 않지만 여전히 옵션을 제공해야 합니다.
이미지는 종종 웹사이트 무게의 대부분을 차지하므로 이미지를 최적화하기 위해 할 수 있는 모든 작업은 페이지 속도에 긍정적인 영향을 미칩니다.
HTTP 캐싱 지시문을 활용하여 웹사이트의 변경되지 않는 요소가 재방문 사용자를 위해 더 빠르게 로드되도록 합니다.
4. AMP 플러그인 사용
Google AMP는 모바일 장치용 웹사이트를 최적화하는 오픈 소스 프레임워크입니다. AMP WordPress 플러그인은 모바일 방문자에게 웹사이트의 "제거된" 버전을 제공할 수 있도록 하여 반응형 웹 디자인을 용이하게 합니다.
Forrester에서 실시한 연구에 따르면 AMP 는 전자상거래 웹사이트의 모바일 전환율을 20% 높였습니다.
5. CSS 및 JavaScript 전달 최적화
HTML 마크업에 JavaScript 및 CSS의 작은 비트를 인라인하면 지연 및 차단을 방지할 수 있습니다. Google PageSpeed Insights는 렌더링 차단 코드를 식별하는 데 도움이 될 수 있으며 Autooptimize와 같은 JavaScript 및 CSS 최적화를 제공하는 수십 개의 플러그인이 있습니다.
관련 게시물: 모바일 전환율을 높이는 8가지 효과적인 방법
6. 테마 및 플러그인 최적화
때로는 테마와 플러그인이 성능 병목 현상의 원인이 될 수 있습니다. 정기적으로 새 업데이트를 확인하여 사용 중인 모든 것이 최신 상태인지 확인하십시오.
플러그인 중 하나가 문제를 일으키는 것으로 의심되면 문제를 정확히 찾아낼 때까지 스테이징 사이트에서 플러그인을 하나씩 비활성화하십시오. 사용자 정의 테마를 사용하는 경우 기본 WordPress 테마 중 하나로 전환하여 차이가 있는지 확인하십시오.
7. 캐싱 플러그인 설치
캐싱 플러그인을 설치하면 WordPress 사이트를 훨씬 더 캐시할 수 있으므로 CDN만 사용하는 경우보다 로드 시간이 훨씬 더 빨라집니다.
Cache Enabler와 같은 플러그인은 페이지의 정적 HTML 버전을 자동으로 생성하므로 페이지가 로드될 때 발생해야 하는 PHP 프로세스가 없습니다. 이는 대기 시간이 단축되고 모바일 방문자가 더 행복해짐을 의미합니다.
요약
모바일 속도에 최적화된 사이트는 한 번에 끝나는 것이 아닙니다. 계속 움직이는 골 포스트를 향한 끝없는 경주입니다.
사이트가 성장하고 더 많은 방문자를 유치함에 따라 분석을 사용하여 이러한 변경이 성능에 미치는 영향을 측정합니다. 새로운 WordPress 플러그인 및 업데이트를 확인하여 사용자의 진화하는 기대에 부응할 수 있습니다.