스크린샷 2019 07 02 02.52.12
견적:
살아남는 종 중 가장 강한 종은 아니지만 변화에 가장 잘 적응하는 종입니다.
- 찰스 다윈에 기인
변화하는 사용자 행동에 적응하기
인터넷은 아직 비교적 새롭고 계속 진화하고 있습니다. 사람들은 인터넷을 검색할 때 더 이상 컴퓨터 앞에 앉아 신중하게 검색어를 입력하지 않습니다. 2017년부터 인터넷 사용자의 약 절반이 컴퓨터 대신 모바일 기기를 사용하여 인터넷을 검색하고 있습니다.
사용자가 인터넷을 검색하는 방식이 변화함에 따라 검색 엔진은 가장 관련성이 높고 유용한 결과를 표시하기 위해 콘텐츠 색인 생성 방식을 변경해야 합니다. 즉, 검색 결과에서 더 높은 순위를 차지하려면 웹사이트를 통해 정보를 구성하고 표시하는 방식을 지속적으로 변경해야 합니다.
지역마다 다르지만, 약 절반은 글로벌 사용자가 인터넷 모바일 기기를 사용하는 것으로 나타났습니다.
이는 중요한 증가 2015년의 약 30%에서 크게 증가했습니다. 웹사이트가 데스크톱 컴퓨터용으로 설계되었거나 모바일 친화적인 사이트가 없는 경우, 다음과 같은 문제가 발생할 수 있습니다. 검색 엔진 순위 결과는 시간이 지남에 따라 감소합니다.
데스크톱 및 데스크톱 라이트 웹사이트
웹사이트는 처음에 사람들이 데스크톱 컴퓨터에서 인터넷에 접속할 것이라는 가정 하에 개발되었습니다. 이로 인해 회사 를 사용하여 데스크톱 컴퓨터의 브라우저에서 매우 빠르게 로드되고 처리되는 복잡한 프로그래밍 로직이 포함된 웹사이트를 구축할 수 있습니다.
그러나 사용자가 휴대폰과 태블릿을 사용하는 방향으로 전환함에 따라 이러한 웹사이트는 모바일 디바이스의 브라우저에서 빠르게 로드 및 처리되지 않는 경우가 많습니다.
그 결과 일부 기업에서는 모바일 장치에서 합리적인 시간 내에 로드되고 처리되는 웹사이트의 '라이트' 버전을 만들기도 합니다. 이러한 버전을 만들기 위해 기업은 데스크톱 버전의 많은 기능을 제거해야 하는 경우가 많습니다.
사용자가 웹사이트에 액세스하면 웹사이트는 사용 중인 디바이스 종류를 파악하여 데스크톱 사용자와 모바일 디바이스 사용자에게 다른 웹 페이지 집합을 제공합니다.
모바일에서 Google 검색을 수행한다고 상상해 보세요. 전화 정확히 일치하는 검색 결과를 볼 수 있습니다. 무엇 를 검색할 수 있습니다. 그러나 검색 결과를 클릭하면 검색 결과에 표시된 내용이 표시되지 않습니다. 대신 웹사이트가 모바일 장치를 사용 중이라고 판단하여 다른 웹 페이지 세트를 제공했기 때문에 예상했던 것과는 다른 축소된 버전이 표시됩니다.
일반 사용자는 다음과 같은 이유로 이러한 부적절함에 대해 Google을 비난합니다. 콘텐츠 가 검색 결과에 설명된 내용과 일치하지 않습니다.
Google의 모바일 우선 색인 전략
바로 이러한 이유로 구글은 모바일 우선 색인을 발표했습니다. 전략 2018년 3월에 출시되었습니다. 오히려 인덱싱 를 통해 데스크톱 버전의 웹사이트를 색인화하기 시작한 이후, Google은 모바일 버전도 색인화하기 시작했습니다. 2018년 7월, Google은 또한 페이지 속도 를 모바일 검색 순위에서 제외합니다, 어느 은 검색 결과의 순위를 매길 때 모바일 기기에서 빠르게 로드되는 웹사이트를 느리게 로드되는 웹사이트보다 더 선호한다는 의미입니다. 이는 모바일 버전이 없는 웹사이트가 색인되지 않는다는 의미는 아니지만, 로딩이 빠르고 모바일 친화적인 웹사이트가 다음과 같은 검색 결과를 얻을 가능성이 더 높다는 것을 의미합니다. 순위 데스크톱 컴퓨터가 필요한 느리고 무거운 웹사이트보다 Google 검색 결과에서 더 높은 순위를 차지합니다.
모바일 우선 색인을 사용 설정하는 방법:
1. 웹사이트 재설계
순수한 Google 모바일 우선 색인 생성 전략은 종종 완전한 재설계 로 변경할 수 있습니다. 이 디자인은 모바일 디바이스를 대상으로 한 다음 데스크톱 컴퓨터와 같은 다른 플랫폼에 맞게 조정됩니다. 모바일 우선 색인 디자인은 일반적으로 단순하고 간결하며 기하학적 모양, 밝은 색상, 강렬한 타이포그래피 및 공백을 디자인 요소로 사용합니다.
이 디자인은 콜투액션 요소를 전면 중앙에 배치하고 채팅 및 챗봇과 같은 최신 커뮤니케이션 방법을 통합합니다. 말할 필요도 없이 Google 모바일 우선 색인화된 사이트는 빠르게 로드되며, 속도를 유지하거나 개선하기 위해 지속적으로 측정됩니다.
2. 웹사이트 조정
웹사이트를 완전히 모바일 우선 색인화하여 재설계할 준비가 되지 않았다면 현재 보유하고 있는 콘텐츠를 모바일 친화적으로 조정할 수 있습니다. 데스크톱 버전을 그대로 가져와 모바일 기기에 맞게 조정하는 것이므로 엄밀히 말해 Google 모바일 우선 전략이라고 할 수는 없습니다. 하지만 모바일 우선 색인 웹사이트 디자인으로 가는 실용적인 단계로, 검색 엔진에 모바일 우선으로 표시될 수 있습니다.
현재 웹사이트를 이러한 Google 모바일 우선 환경에 맞게 조정하는 경우 일반적으로 사용하는 기기에 관계없이 모든 사용자에게 동일한 콘텐츠를 제공하는 것이 목표입니다.
그러나 콘텐츠를 보는 데 사용되는 화면 크기에 따라 콘텐츠의 형식과 표시 방식이 달라집니다. 이러한 전환 과정에서도 컴퓨터로 웹사이트에 액세스할 때만 표시되는 메뉴 옵션이나 버튼과 같은 일부 추가 기능을 포함하는 것은 여전히 허용됩니다. 구글도 이렇게 하고 있습니다.
다행히도 모바일 친화적으로 전환하는 데 도움이 되는 도구가 그 어느 때보다 많이 나와 있습니다. 또한 성공 여부를 측정하고 개선이 필요한 부분을 파악할 수 있는 도구도 있습니다.
3. 반응형 웹사이트 및 모바일 우선 색인 생성
보다 모바일 친화적인 웹사이트 또는 Google 모바일 우선 웹사이트로 전환하려면 반응형이라는 단어를 받아들여야 합니다. 반응형 웹 디자인은 사용자의 플랫폼, 방향, 화면 또는 창 크기에 따라 웹사이트의 프레젠테이션을 자동으로 조정하는 접근 방식입니다.
데스크톱 컴퓨터에서 열려 있고 컴퓨터 모니터에 보이는 웹사이트를 상상해 보세요. 창 모서리를 클릭하고 드래그 를 눌러 창을 작게 만들면 어떻게 되나요? 반응형 웹 사이트에서는 아무 일도 일어나지 않습니다. 이전에 표시되던 모든 내용이 잘려나가고 이제 해당 콘텐츠를 보려면 좌우로 스크롤해야 합니다.
그러나 반응형 웹사이트에서는 보기 창이 특정 크기에 도달하면 웹사이트가 자동으로 다시 포맷되어 모든 콘텐츠가 해당 창에 계속 표시되도록 합니다. 콘텐츠가 나란히 표시되는 것이 아니라 세로로 쌓여 표시됩니다. 모든 콘텐츠를 보려면 페이지를 아래로 스크롤해야 할 수도 있지만, 표시되는 콘텐츠는 보기 창에 맞기 때문에 좌우로 스크롤하지 않아도 볼 수 있습니다.
4. 콘텐츠 관리 시스템(예: 워드프레스) 4.
콘텐츠를 사용하는 경우 관리 시스템 (CMS예를 들어 워드프레스를 선택했다면 반응형 테마를 사용해야 합니다. 현재 테마가 반응형 테마가 아닌데 최신 반응형 버전이 있는 경우 해당 버전으로 업그레이드하세요. 반응형 버전이 없는 경우 반응형 테마로 전환합니다.
대부분의 무거운 작업은 테마에서 자동으로 처리합니다. 다음을 수행해야 합니다. 리뷰 반응형 페이지가 다양한 모바일 장치에서 어떻게 표시되는지 확인하고 반응형 페이지로 잘 변환되지 않는 일부 정보를 표시하는 방식을 변경해야 하는지 결정합니다.
5. 웹 개발 툴킷(예: 부트스트랩) 5.
CMS를 사용하지 않는다면 부트스트랩과 같은 툴킷을 사용해 보세요. 부트스트랩은 HTML, CSS, JavaScript를 사용하는 웹 개발용 오픈소스 툴킷입니다. 반응형 그리드 시스템, 사전 빌드된 프런트엔드 구성 요소 및 플러그인을 사용하여 반응형 Google 모바일 우선 색인 웹사이트를 구축하는 데 도움이 됩니다.
6. 모바일 친화적인 디자인을 테스트하는 도구
새 디자인을 확인하려면 Google 모바일 친화성 테스트로 이동하여 웹사이트 URL을 입력합니다. 그러면 보고서 웹 사이트가 얼마나 모바일 친화적인지 알려주며, 개선 방법에 대한 구체적인 제안과 함께 점수.
7. 빠른 로딩 웹사이트
데스크톱 사이트, 모바일 친화적인 웹사이트, 모바일 우선 웹사이트 등 어떤 웹사이트를 운영하든 웹사이트가 빠르게 로딩된다는 가정은 오늘날의 기본 전제입니다. 웹사이트 로딩 속도에 영향을 미치는 모든 요소에 대해 설명하는 것은 이 글의 범위를 벗어나지만, 웹사이트 로딩 속도를 크게 늦출 수 있는 몇 가지 디자인 요소에 대해 알아두어야 합니다.
다행히도 대부분의 반응형 테마와 툴킷에는 적어도 부분적으로 다음과 같은 기능이 포함되어 있습니다. 주소 모바일 기기에서 웹사이트를 더 빠르게 로드하는 데 도움이 되는 몇 가지 영역이 있습니다.
8. 웹사이트 처리 방법
웹사이트를 방문하면 보고 있는 페이지의 코드를 모바일 장치의 메모리에 로드한 다음 코드를 처리하여 장치에서 페이지의 형식을 지정하고 표시합니다. 링크를 클릭하여 다음 페이지로 이동하면 현재 보고 있던 페이지를 삭제하고 다음 페이지를 메모리에 로드합니다. 로드해야 하는 페이지가 많을수록 데이터를 가져와서 인터넷을 통해 전송하고 장치에 로드하는 데 시간이 오래 걸립니다.
처리해야 할 코드가 많을수록 화면에 로드된 내용을 포맷하고 표시하는 데 시간이 오래 걸립니다. 즉, 로드하고 처리하는 코드가 적으면 일반적으로 웹사이트가 더 빨리 로드됩니다.
9. 이미지 및 Google 모바일 우선 색인 생성
이미지 또는 사진 파일은 웹사이트가 느리게 로드되는 원인인 경우가 많습니다. 이미지 해상도가 높을수록 파일 용량이 커지고 로드하는 데 시간이 더 오래 걸립니다. 필요한 해상도를 현실적으로 설정하세요. 이미지 를 사용하면 이미지를 표시하고 축소하여 더 빠르게 로드할 수 있습니다.
사용하는 형식에 따라 화질을 유지하거나 유지하지 않고 이미지를 축소할 수 있습니다. 품질이 일부 희생되는 이미지는 일반적으로 동일한 수준의 품질을 유지하는 이미지보다 크기가 훨씬 작습니다.
10. 코드 및 Google 모바일 우선 색인 생성
데이터가 로드되면 브라우저에서 웹 페이지 서식을 지정하기 시작합니다. 그러나 일부 코드는 브라우저가 서식 지정을 중지하고 더 많은 코드 또는 전체 페이지가 로드될 때까지 기다렸다가 서식 지정 작업을 다시 시작하도록 강제합니다.
이를 차단이라고 합니다. 가능한 한 로드되는 코드의 크기를 줄이고 차단 코드를 제거해야 합니다. 코드 크기를 줄이는 한 가지 방법은 주석과 과도한 공백을 제거하여 크기를 최소화하는 것입니다.
프로그래머가 코드를 이해하는 데는 중요하지만 브라우저에서 코드를 처리하는 데는 필요하지 않습니다. 코드를 축소할 수 없는 경우 일부 웹 서버는 압축된 버전의 코드를 브라우저로 전송하고, 브라우저는 더 작은 버전을 로드한 다음 압축을 해제합니다.
11. 백그라운드 로딩 및 Google 모바일 우선 색인
웹 페이지를 볼 때는 보기 창 안에 있는 페이지의 일부만 표시됩니다. 브라우저가 창에 표시되는 내용을 먼저 로드하고 서식을 지정하면 페이지가 완료될 때까지 백그라운드에서 다른 데이터를 계속 로드하고 서식을 지정할 수 있습니다.
웹 페이지가 빠르게 로드되는 것처럼 보이고 아래로 스크롤할 때 오래 기다리지 않는 한 콘텐츠가 계속 로드되고 서식이 지정되고 있다는 사실을 인지하지 못할 수 있습니다.
12. 속도 측정 및 개선 도구
Google 개발자 사이트의 웹을 더 빠르게 만들기라는 페이지에서는 웹사이트를 더 빠르게 로드하는 데 도움이 되는 팁, 모범 사례 조언 및 리소스를 제공합니다. 이 툴킷의 주요 도구는 페이지 속도 인사이트라고 합니다. 페이지 속도 인사이트는 웹사이트 로딩을 시작한 시점부터 모바일 또는 데스크톱 장치에 로드, 서식 지정 및 표시될 때까지 어떤 일이 발생하는지 보여줍니다.
이 도구를 사용하면 웹사이트가 느리게 로드되는 원인을 확인할 수 있으므로 무엇을 변경해야 하는지 알 수 있습니다. 이 도구는 종종 성능을 개선하는 방법에 대한 구체적인 제안을 제공하고 더 빠르게 로드되는 이미지 파일의 최적화된 버전도 제공합니다.
13. 생존을 위한 적응
지금 당장 진정한 Google 모바일 우선 디자인을 구현할 수 없더라도 반응형 웹 페이지를 사용하고 사이트를 로드하고 표시하는 데 걸리는 시간을 줄임으로써 웹사이트가 모바일 우선으로 보이도록 만들 수 있습니다. 이 두 가지 전략은 필수 사항이기 때문에 검색 엔진 순위를 높일 수는 없지만 모바일 우선 접근 방식을 채택하지 않아 불이익을 받는 것을 방지하는 데 도움이 됩니다.
이 게시물은 2022년 12월 28일에 마지막으로 수정되었습니다.