모바일 트래픽을 위해 WordPress 레이아웃을 최적화하는 방법

모바일 장치와이를 사용하는 사람들의 수는 지속적으로 증가하고 있습니다. 전체 인터넷 트래픽의 절반 이상이 모바일이고 수행되는 대부분의 검색 엔진 쿼리가 모바일 장치에서 발생한다는 것은 놀라운 일이 아닙니다. 또한 Google은 모바일 장치에 최적화되지 않은 웹 사이트에 불이익을줍니다.

모바일 트래픽에 맞게 WordPress 레이아웃을 최적화하려면 테마를 설치하는 것 이상을해야합니다. UX 관점뿐만 아니라 SEO, CRO, 광고 및 성능 관점에서도 웹 사이트의 모바일 버전에 투자해야합니다.

따라서이 기사에서는 모바일 트래픽에 대해 작동하고 사용자가 모바일 장치에서 웹 사이트를 방문 할 때 가능한 최상의 경험을 얻을 수 있도록 WordPress 사이트에서 해결해야 할 사항을 설명합니다.

모바일 트래픽이 중요한 이유

2016 년에 처음으로 모바일 인터넷 트래픽이 데스크톱을 능가했습니다. 이를 따라 잡으려면 모든 유형의 장치에서 들어오는 트래픽에 대해 WordPress 사이트를 준비해야합니다.

최적화는 스마트 폰에서 멋지게 보이는 것뿐만 아니라 기능적인 웹 사이트도 갖추는 것을 의미합니다. 모바일 지원 웹 사이트를 보유하면 UX가 향상되고 전환율이 향상되며, 광고 수입을 기반으로하는 웹 사이트에 매우 중요합니다.

향상된 UX 외에도 모바일 친화적 인 레이아웃은 SEO에도 긍정적 인 영향을 미칩니다. 2015 년 Google의 업데이트부터 검색 엔진 알고리즘이 크게 수정되었습니다. 이제 모바일 친화 성은 검색 순위를 높이고 웹 트래픽을 증가시키는 중요한 요소 중 하나입니다.

Statista의이 그래프에서 볼 수 있듯이 모바일 웹 트래픽은 지속적으로 증가하고 있습니다.

따라서 귀하의 웹 사이트가 모바일 장치에서 우수하게 렌더링되면 SERP에서 더 높은 순위를 차지할 것이며 모바일을 통해 더 많은 매출이 발생할 것입니다. Walmart Canada와 같은 대형 소매 업체도 모바일 웹 레이아웃 최적화를 통해 모바일 매출이 98 % 증가했습니다.

회사는 타겟 고객의 거의 50 %가 태블릿을 사용하는 엄마라는 사실을 알았을 때 모바일 경험에 대해 뭔가를해야한다는 것을 깨달았습니다. 모바일 레이아웃 문제를 성공적으로 해결하기 위해 다음 솔루션을 구현했습니다.

• 모바일 우선 계획 수립 : 팀은 디자인에 터치 중심 접근 방식을 채택해야한다는 결정을 내렸고 태블릿과 스마트 폰에서 정말 멋지게 보이도록 만들었습니다.
• 모바일 디자인 최적화 구현 : 반응 형 디자인 접근 방식은 모든 화면 크기에서 사이트 렌더링을 훌륭하게 만들었습니다. 또한 모바일 웹 트래픽을 위해 제품 페이지도 최적화했습니다.

그 결과 위에서 언급했듯이 전체 전환율이 20 % 증가하고 모바일 매출이 98 % 증가했습니다.

Google은 모바일 웹 사이트 레이아웃을 어떻게 평가합니까?

모바일 검색에서 트래픽을 수신하는 사이트의 기능을 평가할 때 Google은 다음 요소를 고려합니다.

• 페이지 레이아웃 : Google은 페이지가 모바일 화면에서 올바르게 렌더링되는지 검사합니다.
• 접근성 : 사용자가 확대하지 않고도 쉽게 액세스 할 수있을만큼 버튼, 미디어 및 텍스트가 충분히 큰지 확인합니다.
• 성능 : 페이지 속도는 데스크톱 및 모바일 웹 경험에 중요하며 Google은 SERP에서 데스크톱보다 모바일 페이지 성능을 우선시합니다.
• 광고 배치 : 광고로 가득 찬 페이지는 많은 사람들에게 방해가되며 Google에도 문제가됩니다. 그렇기 때문에 광고를 사용할 때 광고 게재 위치 가이드 라인을 위반하지 않는지 확인해야합니다.

몇 가지 테스트로 시작

가장 먼저해야 할 일은 현재 사이트가 모바일 웹 트래픽에 적절하게 반응하는지 여부를 조사하는 것입니다. 이를 위해 Google의 모바일 친 화성 테스트 도구를 사용할 수 있습니다.

사이트의 모바일 반응 형 레이아웃을 검사하는 최고의 도구 중 하나 인 Google의 모바일 친 화성 테스트입니다.

사이트 URL을 입력하고 URL 테스트를 선택하기 만하면됩니다. 분석에는 몇 초 이상 걸리지 않습니다. 웹 사이트가 모바일 장치에서 작동하는 경우 도구는 사이트가 스마트 폰에서 어떻게 보이는지 스크린 샷과 함께 알려줍니다. 또는 사이트가 모바일 친화적이지 않은 경우 도구가 조정해야 할 사항을 알려줍니다.

다음과 같이 모바일 친 화성을 테스트하는 데 사용할 수있는 몇 가지 유용한 도구가 있습니다.

• Varvy 모바일 SEO
• W3C 모바일 검사기
• 반응 형 디자인 검사기

도구는 훌륭하지만 실제로 경험을 능가하는 것은 없습니다. 항상 사이트 전체를 방문하여 사용자에게 우선적으로 고려되는 작업 (예 : 장바구니에 제품 추가, 양식 제출, 페이지 탐색, 게시물 공유)을 수행하는 것이 좋습니다. 프로세스 전반에 걸쳐 잠재적 인 문제에주의하십시오. 이것은 UX 테스트의 가장 간단한 형태입니다.

성능 테스트

속도는 그 어느 때보 다 중요합니다. Google은 속도를 가장 중요한 순위 요소 중 하나로 간주하고 최대 85 %의 사용자가 모바일 사이트가 데스크톱 버전보다 훨씬 빠르게로드 될 것으로 기대합니다.

다음은 웹 사이트 속도를 테스트하는 데 사용할 수있는 몇 가지 도구입니다.

• PageSpeed ​​Insights
• GTMetrix
• Pingdom

모바일에서 콘텐츠의 속도를 높이려는 경우 CDN을 사용하면 여러 위치에서 캐싱 및 배포를 통해 콘텐츠를 더 빠르게 제공 할 수 있습니다.

예를 들어 호스팅 서버가 캘리포니아 주 샌프란시스코에 있고 모바일 웹 방문자가 파리 출신이라고 가정 해 보겠습니다. 콘텐츠 횡단 속도를 늦출 수있는 거리입니다. CDN은 파리 근처의 프랑스 서버에 사이트 버전을 저장하고 결과적으로 콘텐츠를 훨씬 빠르게 제공 할 수 있습니다.

또한 WordPress 웹 사이트를위한 강력한 관리 호스팅 제공 업체를 선택해야합니다. 공유 호스트는 한 번에 수백 개의 웹 사이트를 실행하며 사이트 중 하나가 정상적인 트래픽 스파이크보다 더 많이 발생하면 다른 사이트의 속도를 떨어 뜨립니다.

Pagely와 같은 WordPress 호스팅으로 업그레이드하면 성능이 크게 향상 될 수 있습니다. Pagely는 웹 사이트 속도를 즉시 높여주는 서버 인프라를 사용합니다. 또한 최신 PHP 7 버전을 사용하고 사이트 자산을 급증시킬 수있는 CDN을 포함합니다.

단순성 유지

스마트 폰은 데스크톱 레이아웃보다 화면이 훨씬 작기 때문에 사용자에게 보여줄 수있는 요소의 양이 적습니다. 따라서 많은 양의 콘텐츠를 표시하려는 경우 사용자 경험을 방해 할뿐입니다.

예를 들어 Toyota의 브라질 지점 웹 사이트를 살펴 보겠습니다. 노트북에서는 정말 견고 해 보입니다.

보기 좋은 데스크톱 웹 사이트가 모바일 레이아웃이 그에 맞는다는 것을 의미하지는 않습니다. 이미지 출처 : Toyota Brazil

그러나 스마트 폰에서 차량을 탐색하려면 어떻게해야합니까?

어수선한 모바일 웹 레이아웃은 트래픽을 줄이고 전환율을 감소시킵니다. 이미지 출처 : Toyota Brazil

그렇게 나쁘지는 않지만 다시 상단 바와 메인 메뉴가 너무 많아서 전체 경험을 구식이고 어수선하게 만듭니다.

디자인을 단순하게 유지하면 모바일 UI가 개선되고 사용자는 페이지를보다 효율적으로 탐색 할 수 있습니다. 또한 브라우저가로드해야하는 요소가 적을수록 페이지 속도가 빨라지므로 간단한 레이아웃은 모바일 페이지 속도 점수를 향상시킵니다.

Swell의 모바일 용 간단한 WordPress 레이아웃

모바일 레이아웃을 디자인 할 때 페이지에서 더 많은 스크롤을 촉진하려면 1 열 페이지 레이아웃에 초점을 맞추는 것이 가장 좋습니다. 생각해보십시오. Facebook과 Instagram이 모바일 플랫폼만큼 성공적인 이유는 무엇입니까?

사용자는 자연스럽게 수직으로 스 와이프합니다. 이미지 출처 : Giphy

또한 "햄버거 메뉴"와 같은 단순한 모바일 웹 디자인을 위해 다른 허용 가능한 기능을 고려해야합니다.

왼쪽 상단의 햄버거 메뉴 버튼. 이미지 출처 : AMC

이제 모바일 웹 디자인의 표준 구성 요소이며 사용자가 다른 페이지를 탐색하려는 경우 페이지 레이아웃의 상단을 검색합니다. 광범위한 드롭 다운 메뉴를 사용하지 마십시오. 스마트 폰에서 탐색하기가 어렵고 때로는 데스크톱 웹 사이트의 사용성을 방해하기도합니다.

불필요한 콘텐츠 제외

불필요한 요소를 제거하여 페이지의 모바일 장치 전환을 간소화하는 것 외에도 추가 콘텐츠도 제거 할 수 있습니다. 물론 전환율을 높이는 콘텐츠를 삭제해서는 안됩니다. 그러나 사이트의 모바일 버전에 필요하지 않은 일부 콘텐츠가 있습니다.

페이지에 표시되어야하는 콘텐츠를 검토 할 때 다음 사항을 자문 해보십시오.

• 이 콘텐츠가 페이지와 얼마나 관련이 있습니까?
• 콘텐츠가 사용자 여정에 중요한가요?
• 이 콘텐츠를 포함해야하는 경우 모바일 용으로 어떻게 단순화 할 수 있습니까?
• 모바일에서 제거 할 수 있다면 데스크톱에서도 여전히 필요합니까?

불필요한 콘텐츠를 제거하면 사용자 경험과 전환율이 향상됩니다. 모바일 웹 방문자를 위해 가장 중요한 콘텐츠 만 저장하십시오. 가능한 한 콘텐츠를 단순화하되 사용자가 제품을 선택하도록 설득 할 수있는 핵심 콘텐츠를 제거하지 마십시오.

BuildFire 모바일 웹 사이트의 간단한 사용자 인터페이스.

클릭 가능한 영역 제한

사람들이 모바일 장치에서 웹 사이트를 방문 할 때 클릭 할 수있는 옵션이 너무 많기를 원하지 않습니다. 그것은 압도적 일 수 있으며 작동 가능한 모바일 UX를 제공하지 못할 것입니다. 대신 페이지에서 가장 중요한 클릭 유도 문안 및 클릭 가능한 영역을 강조 표시해야합니다.

Todoist 는 클릭 유도 문안과 아름다운 그래픽 만 가지고 있습니다.

스마트 폰에서 웹 사이트를 탐색하는 것은 화살표로 가리키는 대신 손가락으로 터치 스크린을보고 클릭하는 것으로 구성됩니다. 따라서 제한된 수의 링크를 포함하고 적절하게 간격을두면 모바일 장치 사용자가 탐색 할 수있는 액세스 가능한 페이지를 확보 할 수 있습니다.

Quicksprout 모바일 웹 사이트에는 클릭 할 수있는 큰 영역이 있습니다.

이는 클릭 가능한 영역이 모바일 화면에서 가까우면 사람들이 잘못된 링크를 클릭 할 수 있기 때문에 중요합니다. 또한 Google은 귀하의 사이트를 모바일 사용자에게 적합하지 않은 것으로 표시 할 수 있으며 잠재적 인 자연 검색 트래픽을 놓칠 수 있습니다.

반응 형 디자인 활용

웹 사이트를 데스크톱과 모바일에 제대로 표시하려면 반응 형으로 만들어야합니다. 반응 형 웹 사이트는 데스크톱 및 모바일 버전에 대해 동일한 페이지 요소를 사용합니다. 장치에 따르면 디자인은 화면에 맞게 모양이 변경됩니다.

모바일 장치에서 웹 방문자를위한 향상된 UX 외에도 반응 형 디자인은 사이트에 다음과 같은 이점을 제공합니다.

• 유연성 : 반응 형 디자인을 사용하면 두 개의 웹 사이트에서 디자인을 변경하는 것에 대해 생각할 필요가 없습니다. 요소를 한 번만 수정하거나 추가하면되고 모바일 및 데스크톱 버전 모두에 적용됩니다.
• 비용 효율성 : 데스크톱 및 모바일 사이트를 운영하는 데 비용이 많이들 수 있습니다. 반응 형 디자인을 활용하면 불필요한 비용을 없앨 수 있습니다.
• SEO 이점 : 반응 형 디자인은 검색 순위에 도움이됩니다. 기사의 시작 부분에서 설명한 것처럼 Google은 SERP에서 모바일 친화적 인 사이트의 우선 순위를 지정하기 때문입니다.

그러나 조심해야합니다. 대부분의 반응 형 웹 사이트는 데스크톱 콘텐츠의 세 열을 하나의 열로 변환합니다.

반응 형 사이트는 모든 화면에 맞는 사이트입니다. 데스크톱에서 모바일 버전으로 동일한 데이터를로드합니다. 예를 들어 300px 모바일 화면에 1,200px 데스크톱 사진을 표시하려는 경우 전체 1,200px가로드되고 더 작게 렌더링됩니다.

이미지 출처 : Giphy

이미지와 관련하여 WordPress는 이미 더 나은 경험을 향한 상당한 진전을 이루었습니다. 4.4 버전부터 CMS는 srcset HTML 속성을 통해 가장 큰 이미지도 자동으로 확장합니다.

PNG 및 JPEG는 가장 일반적인 이미지 파일 형식입니다. 그러나 최신 기술 및 디지털 이미지 개발로 인해 WebP 및 SVG 형식이 점점 더 많이 사용되고 있습니다.

SVG는 벡터 이미지이며 모든 화면 크기에 맞게 크기를 조정할 수 있습니다. 일반적으로 SVG는 PNG보다 훨씬 작기 때문에로드하는 동안 귀중한 시간을 절약 할 수 있습니다.

그러나 여전히 조심해야합니다. 비디오, 사진 및 그래픽과 같은 시각적 요소는 웹 사이트에서 중요한 성능을 발휘하는 요소 중 하나 일 수 있습니다. 미디어 파일 크기에 대해 엄격하게 정의 된 규칙은 없지만 파일 크기가 작을수록로드 시간이 단축됩니다.

WordPress 사이트의 데스크톱 버전과 동일한 시각적 요소가 항상 모바일 디자인에서 작동하지 않을 수 있습니다. 그렇기 때문에 큰 배경 이미지를 제거하고 모바일에서 UX를 방해하지 않는 이미지로 교체하는 것이 훨씬 더 나은 옵션입니다.

HubSpot의 홈페이지를 예로 들어 보겠습니다. 히어로 섹션의 그래픽은 CRM이 사물을 움직이는 방식을 완벽하게 보여줍니다. 각 창에 많은 사람이있는 사무실 건물의 사실적인 이미지를 상상해보십시오. 이것만큼 잘 작동하지 않을 것입니다.

출처 : HubSpot

양식 최적화

특히 사용자가 너무 많은 데이터를 제출하고 너무 많은 필드를 탐색해야하는 경우 스마트 폰에서 양식을 작성하는 것이 어려울 수 있습니다. 그렇기 때문에 모바일 양식을 단순화하고 가장 중요한 정보 만 수집해야합니다.

모바일 페이지의 양식을 가능한 한 간단하게 유지하십시오. 출처 : Copyblogger

WordPress에서 WPForms와 같은 플러그인을 설치하고 모바일 웹 방문자를 변환하는 데 도움이되는 반응 형 양식을 빠르고 쉽게 작성할 수 있습니다.

개발자 관점에서 우리는 가장 융통성있는 Contact Form 7을 사용합니다. UI는 양식에 대한 사용자 정의 디자인을 원하는 비 기술적 인 사용자에게는 사용자 친화적이지 않습니다.

Contact Form 7은 개발자 관점에서 볼 때 더 나은 양식 최적화 도구입니다.

마무리

오늘날 모바일 친화적 인 WordPress 레이아웃을 갖는 것이 중요합니다. 대상 사용자와 검색 엔진이 사이트를 수락하는 것은 필수 요구 사항입니다.

모바일 친화적 인 WordPress 웹 사이트는 더 많은 유기적 트래픽을 유도하고 새로운 리드와 고객을 끌어들이는 힘을 가지고 있습니다.

이제 테스트 할 항목, 모바일 UI 문제를 찾고 추가 문제를 식별하는 방법을 더 잘 이해했습니다. 위에 설명 된 조언에 따라 WordPress 사이트의 모바일 UX가 항상 제자리에 있는지 확인할 수 있습니다.

최고의 CMS를 만든 사람들은 향상된 네이티브 모바일 UX를 향한 큰 진전을 이루고 있습니다. 모바일 브라우저의 이미지 크기 조정에서 향상된 백엔드에 이르기까지 다른 CMS를 사용하는 웹 사이트 소유자보다 앞서 있다는 확신을 가질 수 있습니다.

더 많은 질문이 있거나 모바일 UX 문제에 대한 도움이 필요하고 장치에서 최신 웹 경험을 생성해야하는 경우 주저하지 말고 연락하십시오.