웹사이트에서 페이지 속도가 중요한 이유에 대한 대본
게시 됨: 2019-12-18팟캐스트로 돌아가기
성적 증명서
John Jantsch: 이 에피소드는 덕트 테이프 마케팅 팟캐스트이며 pixelz.com에서 제공합니다. 이미지를 멋지게 보이게 해야 합니다. 돋보이게 하고 싶거나 제품을 표현하고 싶다면 이미지를 멋지게 만들어주는 리터칭 서비스입니다.
덕트 테이프 마케팅 팟캐스트의 다른 에피소드에 오신 것을 환영합니다. 존 얀츠입니다. 오늘의 손님은 Lukas Haensch입니다. 그는 전 Google UX 관리자이자 pathmonk.com의 Pathmonk 설립자입니다.
John Jantsch: 그리고 우리는 페이지 속도, 웹사이트 로드 속도, 모든 UX 요소에 대해 이야기할 것입니다. 사람들이 귀하의 웹사이트를 방문하고 매우 느리게 로드되는 경우 이는 좋지 않은 경험이며 이것이 중요한 요소인 이유입니다. 사실, 구글이 외부적으로는 SEO 목적을 위한 순위 요소라고 부르는 것은 매우 중요한 요소입니다. 루카스, 함께해주셔서 감사합니다.
Lukas Haensch: John에게 감사합니다. 나를 주셔서 감사합니다.
John Jantsch: 다시 말하지만 사람들이 페이지 속도에 대해 이야기하는 경우가 많으며 많은 요인이 작용합니다. 누군가는 빠르게 로드되는 훌륭한 웹사이트를 가질 수 있지만 누군가는 내가 전화 접속이라고 말했던 것처럼 느립니다. 우리는 더 이상 전화 걸기라고 말하지 않죠? 그러나 느린 연결. 그래서 그들은 나쁜 경험을 하고 있습니다. 내 말은, 우리가 어디에 서 있는지 어떻게 알 수 있습니까? 페이지 속도는 어떻게 측정합니까?
Lukas Haensch: 질문해주셔서 매우 기쁩니다. 그래서 제 생각에 가장 먼저 생각해야 할 핵심 개념 중 하나는 페이지 속도에 관심을 갖는 이유입니다. 아주, 아주 간단히, 왜 우리가 이것에 신경을 쓰는 걸까요? 이것을 소매점과 비교한다면 소매점의 미닫이문과 비교하는 것이 아주 아주 좋은 비유일 것입니다. 이것이 슈퍼, 슈퍼, 슈퍼 슬로우가 열리면 실제로 통과하기 위해 얼마나 많은 사람들이 기다릴까요?
Lukas Haensch: 오늘 이 모든 일을 겪고 나면 그런 종류의 유추를 마음 속에 간직하고 있습니다. 따라서 페이지 피드는 기본적으로 사용자에게 문을 여는 역할을 합니다. 거기에는 수많은 메트릭이 있었고 많은 마케터가 듣고 있다는 것을 알고 있습니다. 그래서 저는 기본적으로 우리가 Google의 가장 큰 고객과 작업하는 동안 Google 내에서 사용한 하나의 측정항목을 제공할 것입니다. 바로 속도 지수입니다. 따라서 로드 시간, 로드되는 첫 번째 바이트, 렌더링 시작 시점 등의 수많은 메트릭이 있습니다.
Lukas Haensch: 하지만 속도 지수를 보면 어떻게 얻는지 잠시 후에 알려 드리겠습니다. 하지만 속도 지수를 보면 실제로 측정할 것은 첫 화면까지 걸리는 시간입니다. 위의 스크롤 없이 볼 수 있는 콘텐츠에서 이것이 완전히 칠해질 때까지 얼마나 걸립니까? 즉, 사용자가 웹사이트에 대해 의미 있는 경험을 하게 되는 것입니다. 그래서 이것이 바로 우리 팀에서 Google 내에서 스크롤 없이 볼 수 있는 렌더링보다 먼저 최적화하기 위해 정말로 집중한 것입니다.
Lukas Haensch: 그리고 다른 모든 행동은 거기에서 시작됩니다. 행동 촉구가 이미 거기에 있고 영웅 이미지가 이미 거기에 있을 것이고 다른 모든 것이 거기에서 펼쳐지기 때문입니다. 따라서 속도 지수는 매우 쉽게 얻을 수 있는 것입니다. webpagetest.org라는 도구가 있습니다. 실제로 Google에서 구축되었습니다. 그런 의미에서 공식 Google 도구는 아니지만 페이지 속도 웹사이트를 보기 위해 Google 내 팀에서 구축되었습니다.
Lukas Haensch: 거기에 URL을 입력하면 페이지 속도 인덱스라는 측정항목이 표시되고 3000 또는 4,000과 같은 값을 알려줍니다. 기본적으로 밀리초입니다. 따라서 페이지 속도 지수가 3000이면 스크롤 없이 볼 수 있는 부분에 있는 것입니다. 콘텐츠는 3초 후에 완전히 로드됩니다. 그것은 일종의 정말 좋은 것 중 하나입니다. 주의를 기울이십시오.
John Jantsch: 다시 반복합니다. 웹페이지 테스트.org?
Lukas Haensch: 맞습니다. Webpagetest.org는 몇 가지 매개변수를 입력할 수 있는 진한 파란색 웹사이트와 같습니다. 네트워크를 선택할 수 있습니다. 선택하는 것이 정말 중요합니다. 사용자 기반에 많은 의미가 있는 것을 선택해야 합니다. 모든 사람이 5G를 사용하는 것은 아니며 모든 사람이 4G를 사용하는 것도 아닙니다. 듣기만 해도 우스꽝스러울 수 있지만 약 2년 전, 1년 반 전에 Google에서 이 작업을 수행했을 때 실제로 우리는 3G에서 빠르게 테스트하고 있었습니다. 왜냐하면 그러한 대규모 사용자 기반은 실제로 느리고 저가형 장치. 따라서 사무실의 Wi-Fi에서 테스트하는 것은 아마도 최선의 방법이 아닐 것입니다.
John Jantsch: 사이트 속도를 느리게 하는 가장 큰 원인 중 일부를 어디에서 찾거나 무엇을 찾았습니까?
Lukas Haensch: 그리고 이것은 우리가 방금 전에 말한 이 개념과 정확히 연결됩니다. 우리는 위의 폴드 콘텐츠 렌더링을 보고 있으며 매우 높은 수준이 하나만 있습니다. 중요한 렌더링 경로라고 하는 한 가지 핵심 개념이 있습니다. 즉, 브라우저가 화면에 아무 것도 표시하기 시작하기 전에 많은 리소스를 거쳐야 함을 의미합니다. 따라서 웹사이트에 아무것도 표시되기 전에 공백이 많다면 일반적으로 중요한 렌더링 경로를 차단하고 있는 것입니다.
Lukas Haensch: 실제로 시각적으로 볼 수 있습니다. 웹페이지 테스트.org에 가면 기본적으로 페이지 로드 속도가 느려지는 버전이기 때문에 정확히 볼 수 있습니다. 두 번째 화면에는 흰색 화면이 있고 두 번째 1.5에는 흰색 화면이 있습니다. 이런 식으로 첫 번째 콘텐츠가 실제로 표시될 때까지 계속됩니다. 따라서 영향을 미치는 가장 큰 요소는 렌더링을 차단하는 모든 것입니다. 렌더링을 차단하는 경우 넓은 페이지가 있고 일반적으로 두 가지가 있기 때문입니다.
Lukas Haensch: 기본적으로 이것은 단순히 렌더링 차단이기 때문에 항상 그럴 것입니다. 페이지의 CSS와 JavaScript입니다. 너무 자세히 설명하지 않고. 그러나 많은 Java 스크립트가 있고 비디오 플레이어가 될 수 있는 항목이 있을 때마다 웹사이트 상단에 뒤집히는 마케팅 메시지가 있는 회전목마가 될 수 있습니다. 이는 매우 자주 Java 스크립트에 의해 구동됩니다. .
Lukas Haensch: 기술자들은 더 이상 사용하지 않을 수도 있는 오래된 AB 테스트 도구를 갖게 될 것입니다. 그것은 자바 스크립트가 될 것입니다. 따라서 화면 상단에서 실제로 필요하지 않더라도 화면에서 실제로 무언가를 보기 시작하면 차단됩니다. 따라서 핵심 연습 중 하나는 항상 확인하는 것입니다. 우리가 사용하고 있는 모든 자바 스크립트 파일이 실제로 필요한지, 아니면 우리가 사용하고 있는 모든 CSS 파일이 필요한지, 호출하여 파일을 지연시키거나 기술적인 측면에서, 몇 가지 항목을 로드하는 것을 지연할 수 있습니다. 그러면 중요한 렌더링 경로의 차단이 해제되고, 그러면 서버 사이트에서 아무것도 변경하지 않고 동일한 콘텐츠를 더 일찍 표시하고 극적인 것을 변경하지 않아도 됩니다.
Lukas Haensch: 그래서 우리가 Google 내에서 항상 배우고 소통한 핵심은 그렇게 큰 변화를 수행할 필요가 없다는 것입니다. 기본적으로 로드하는 모든 파일이 개선될 가능성이 있습니다. CSS 파일입니까? 이 시점에서 필요하지 않을 수도 있습니다. 나중에 로드할 수 있습니다. 자바스크립트 파일인가요? 연기될 수 있습니다. 폰트 파일인가요? 아마도 오래된 글꼴 형식 일 것입니다. 등등. 당신은 모든 사실과 분명히 그림을 살펴볼 수 있습니다. 이미지에 정말 도움이 된다고 생각하는 한 가지 큰 핵심 트릭이 있습니다.
Lukas Haensch: 그 부분에 대해 말씀드릴 수는 있지만 궁극적으로는 개별 항목을 살펴보고 마케터로서 귀하를 다루는 것입니다. 그렇다면 항상 작업하지 않은 항목일 수 있습니다. URL을 통해 웹페이지 테스트.org로 이동하십시오 그리고 단계별로 볼 수 있습니다. 알겠습니다. 실제로 무엇을 로드하고 있으며 내 화면에서 무엇을 볼 수 있습니까? 그러면 페이지에서 무슨 일이 일어나고 있는지 잘 알 수 있습니다. 수많은 자바 스크립트가 있다면, 수많은 이미지가 있다면, 거기에 긴 로딩 파일이 있다면 그 모든 것입니다.
John Jantsch: 궁극적으로 어떤 역할을 하는지 알고 있습니다. 하지만 호스팅이 사이트 속도를 늦추거나 더 빠른 로드를 제공하는 데 어떤 역할을 합니까?
Lukas Haensch: 내 말은, 기본적으로 얼마나 빨리 보내는지에 대한 전반적인 방정식의 첫 부분에 영향을 미칩니다. 첫 번째 물음은 기본적으로 얼마나 빨리 정보를 보내는지 기본적으로 파이프를 따라 내려가는 것입니다. 우리가 발견한 것은 분명히 그 역할을 하고 있지만 이전에 논의한 것처럼 중요한 렌더링 클러스터를 차단하는 기능이 있기 때문에 개별 파일을 최적화하는 데 훨씬 더 큰 역할, 훨씬 더 빠른 승리가 있다는 것입니다. 해당 호스팅을 전혀 만지기 전에 할 수 있는 작은 일이 너무 많습니다. 따라서 중요한 렌더링 경로와 주요 설정을 전환하기 전에 파일을 몇 번 로드하는 방법을 살펴보겠습니다.
John Jantsch: 오늘날 존재하는 콘텐츠 관리 시스템 중 일부는 분명히 WordPress가 단연코 가장 인기 있는 것입니다. 사람들이 테마와 플러그인 등을 추가하기 시작할 때 특히 문제가 되는 부분입니까?
루카스 헨쉬: 100%. 플러그인이 무엇인지 생각해봐야 할 것 같습니다. 플러그인은 기본적으로 많은 경우에 JavaScript의 무리입니다. 분명히 그것은 그것이하는 일에 달려 있지만 많은 기능과 함께라면 그렇습니다. 예를 들어 동일한 논리가 적용되고 있으므로 WordPress에서 플러그인 논리를 가져오겠습니다. 따라서 몇 가지 플러그인을 로드하고 있습니다. 그들 중 일부는 실제로 이 페이지에서 필요하지 않을 것입니다. 그들 중 일부는 하나의 특정 페이지에서만 필요합니다. 또는 그 중 일부는 페이지 하단에만 필요합니다.
Lukas Haensch: 그래서 당신이 할 수 있는 것은, 당신이 될 수 있고, 심지어 그런 종류의 메타 플러그인을 위한 플러그인도 있다는 것입니다. 그러나 코드를 통해 실행할 수도 있습니다. 플러그인을 조건부로 로드할 수 있습니다. 따라서 첫 번째 이동인 경우 내 화면이 로드되고 내 페이지가 로드되는 경우 플러그인에 대해 해당 컨디셔너 로더를 사용한 다음 실제로 어떤 플러그인을 로드해야 하는지 선택하고 선택하면 됩니다.
Lukas Haensch: 코드를 통해 이 작업을 수행하는 경우 지금 어느 것이 로드되어야 합니까? 그리고 다시, 그리고 팀이 많은 Java 스크립트와 함께 제공되고 모든 것이 처음에 로드되기 때문에 거기에서 테마를 언급했습니다. 그러면 렌더링이 차단됩니다. 그리고 확인을 통해 파일별로 다시 이동할 수 있습니다. 어느 것이 지연되고 나중에 로드될 수 있습니다.
Lukas Haensch: 여기에서 마케팅이 개발자와 함께 앉아서 [들리지 않음] 실제로 Java 스크립트 파일을 확인해야 합니다. 간단한 예를 들어보겠습니다. 체크아웃 페이지에 필요한 Java 스크립트가 있습니다. JavaScript는 처음 몇 초 동안에는 전혀 필요하지 않습니다. 사용자는 거기에 도달해야 합니다. 그래서 조합입니다. 그것은 정말로, 당신이 플러그인을 보고, [inaudible 00:10:52] Java 스크립트를 보고, 일부를 연기하려고 하고, 이것이 기본적으로 초단위로 자르는 방법입니다.
John Jantsch: 그래서 공유한 페이지 테스트와 Google의 페이지 속도 통계를 사용하여 테스트를 수행했습니다. 그리고 데스크톱과 모바일 로드에 상당한 차이가 있는 것 같습니다. 사실, 나는 많은 사이트를 테스트했지만 모바일에서 Google로부터 호평을 받는 사이트를 거의 찾지 못했습니다. 우리가 해야 할 일이 있습니까? 내 말은, [들리지 않음] 거의 별도의 사이트나 모바일용 별도의 경험이 있어야 합니까?
Lukas Haensch: 아주 좋은 질문입니다. 내 말은, 모바일 로드라고 생각합니다... 내 말은, 모바일에서 로드 시간이 특히 디바이스와 우리가 연결되어 있기 때문에 명백해집니다. 그래서 훨씬 더 많은 한계점, 또는 훨씬 더 많은 점들이 있습니다. 일종의 위험에 처하여 성능을 저하시키는 것입니다. 즉, 내 모바일 페이지를 보고 있는 경우 WordPress를 사용하더라도 특정 항목을 로드하지 않도록 조건을 지정할 수 있습니다.
Lukas Haensch: 거기에는 특정한 요소가 있습니다. 캐러셀의 예를 들어 보겠습니다. 상단에 다른 이미지가 있는 분홍색 회전목마가 있는 경우. 따라서 데스크탑에 이 기능이 있고 실제로 성능에 영향을 미치지는 않지만 모바일을 보면 갑자기 5~6개의 이미지를 로드하기 때문에 성능에 큰 영향을 미칩니다. 짐.
Lukas Haensch: Java 스크립트를 로드하고 있습니다. 이 스크립트는 제가 언급한 무작위 차단입니다. 또한, 이는 이제 기본적으로 있어야 하는 상황이 발생했다는 것을 의미합니다. 즉, 성능 예산을 가지고 '알겠습니다. 이 예산과 저 예산을 사용할 수 있습니다. 모바일 페이지를 보고 있고 이미 6개의 이미지와 자바 스크립트에 상당한 예산을 지출하고 있다면 로드하는 데 몇 초가 걸리고 그 후에는 다섯 번째 또는 여섯 번째 이미지와 상호 작용하는 사람들에게 메트릭 및 분석을 제공합니다.
Lukas Haensch: 아니면 마케팅이나 다른 누군가가 여러 메시지를 전달하기를 원했기 때문입니까? 그래서 특히 무겁고 무거운 물건, 예를 들어 비디오를 보면서 확실히 고려할 것입니다. 동영상을 사용하지 말라는 것이 아니라 동영상을 표시하는 더 똑똑한 방법도 있습니다. 회전 목마, 이러한 유형의 항목은 일반적으로 강력한 UX 가치가 없고 확실히 속도 예산에서 많은 부분을 차지하기 때문에 모바일에서 사용하지 않는 것이 매우 엄격합니다.
John Jantsch: 웹사이트가 있고 오늘날 온라인으로 제품을 판매하고 있다면 이미지가 사람들이 귀하의 제품과 서비스에 대한 의견을 내는 데 매우 중요하다는 것을 알고 있을 것입니다. z.com과 함께하는 픽셀인 pixelz.com은 모든 이미지를 촬영할 수 있는 이미지 리터칭 서비스입니다. 그들은 그것들을 수정하고, 모양과 대칭을 추가하고, 요철을 부드럽게 하고, 어깨를 정렬하고, 주름을 줄일 수 있고, 보푸라기 꼬리표를 줄이거나 제거할 수 있고, 실제로 맞지 않는 것 같은 모든 것을 할 수 있습니다. 당신을 위해 그것을 할 사람을 얻을. 다음날 아침 수정된 이미지를 제공하므로 출시 시간을 앞당길 수 있습니다. 픽셀즈닷컴(PIXELZ.com)으로 이동하여 감동적인 이미지 서비스에 대해 알아보세요.

John Jantsch: 여기 사람들을 흐뭇하게 만들지 않으면서 이 방정식의 AMP, 가속화된 모바일 페이지에 대해 이야기할 수 있습니까? 더 나은 로드, 더 나은 경험을 위해 사람들이 사용해야 하는 것이지만 그래픽이 적고 제어력이 떨어지나요? 그래서 당신은 그것에 대해 어떻게 생각합니까?
Lukas Haensch: 그래서 개인적으로, 제 말은, 이것이 기본적으로 모든 규칙이 이미 주어진 정상적인 웹사이트라는 것입니다. 이미 자바 스크립트에 많은 제한을 가하고 있습니다. 그것은 이미 당신에게 제공하고 있으며 분명히 HTML에 추가 최적화가 있습니다. 그래서 어떤 면에서는 우리가 방금 논의한 이러한 유형의 규칙을 취하고 어떤 방식으로 당신에게 그것들을 강요하고 있습니다. 이것이 바로 이 페이지가 정말 빨리 로드되는 한 가지 이유이자 한 가지 이유입니다.
Lukas Haensch: 저는 제 자신을 AMP 전문가라고 생각하지 않겠습니다. 하지만 순수하게 그것이 실제로 무엇인지는 확실히 생각합니다. 기본적으로 웹사이트, 규칙이 많이 포함된 일반 웹사이트일 뿐이며 기본적으로 속도 예산을 과도하게 사용하여 페이지가 빠릅니다. 그래서 나는 그것이 당신의 콘텐츠 유형에 맞는다면 누군가에게 좋은 방법이라고 생각합니다. 당신이 그것을 통해 메시지를 전달할 수 있다면 좋은 방법이라고 생각합니다.
John Jantsch: 그래서 일화를 들자면, 아무 일도 일어나지 않으면 사이트에 3~4초의 시간을 줍니다. 특히 모바일 장치에서 클릭할 수도 있습니다. X의 사람들이 X의 시간을 기다릴 것이라고 결정적으로 말하는 통계가 있습니까? 그러나 귀하의 사이트가 그 시간 동안 로드되지 않으면 나쁜 경험일 뿐만 아니라 그냥 떠날 것입니다.
루카스 헨쉬: 네. 수많은 지표가 있습니다. 우리 팀 내에서 사용하고 있던 몇 가지 메트릭은 아마도 최악의 상태가 아니더라도 적어도 상태가 악화되고 있을 것입니다. 로드하는 데 초. 따라서 해당 측정항목에 따르면 더 빠르게 또는 3초 이내에 로드하지 않으면 트래픽의 절반이 이미 모바일로 이동한 것입니다.
Lukas Haensch: 그리고 제가 3초 속도 지수 3000이라고 하면 3초 안에 화면에 칠할 수 있다는 것입니다. 그러면 사람이 떠날 이유가 없기 때문입니다. 속도 지수나 페이지 속도에 대해 이야기할 때 중요한 요소 중 하나가 있을 수 있다고 생각하기 때문에 의미 있는 무언가를 보고 있는 사람에 대해서도 이야기하고 있습니다. 수많은 다른 측정항목을 살펴봄으로써 인간의 경험에서 그것을 분리하는 것은 좋은 생각이 아닐 수도 있습니다.
Lukas Haensch: 사람에게 의미 있는 것을 보여줄 수 있나요? 그들은 아마도 다른 이유로 떠날 것입니다. 따라서 53%, 1초 더 빨리 로드하면 전환율이 약 20% 이상 증가할 수 있는 방법에 대한 다른 메트릭이 많이 있습니다. 릴리스하기가 어렵습니다. 실제로 사용 사례와 트래픽에 따라 다릅니다. 하지만 이 53%는 학습이 3초보다 빠르지 않다면 마음에 새기기에 정말 좋은 것입니다. 귀하의 경우 100 %인지 여부는 그것에 대한 또 다른 이야기입니다.
John Jantsch: 일부 기업, 마케터가 예산에 집중할 수 있는 시간, 작업할 시간이 많지 않은 경우가 많습니다. 그리고 저는 그들이 왜 이것이 우선순위가 되어야 하는지 깨닫는 것이 중요하다고 생각합니다. 이에 대한 좋은 지표라고 생각합니다.
루카스 헨쉬: 100%. 소매점을 운영하는 것처럼 문이 열리지 않으면 즉시 뛰어들 것입니다.
John Jantsch: 맞습니다. 문제의 일부는 많은 마케터가 실제로 자신의 웹사이트를 방문하지 않는다는 것입니다. 그들은 실제로 고객이나 잠재 고객이 불행하게도 경험한 것과 동일한 경험을 갖고 있지 않습니다.
루카스 헨쉬: 네. 그리고 그렇게 하면 캐시된 버전인 경우가 많습니다. 캐시된 버전 또는 Wi-Fi에 있습니다. 그러니 정말 노력하세요. Chrome과 같은 도구를 사용하거나 Chrome을 사용하여 수행할 수도 있습니다. 그러나 웹페이지 테스트.org로 이동하여 대부분의 사람들이 실제로 귀하의 웹사이트에서 경험하는 경험을 직접 확인하기 위해 테스트합니다.
John Jantsch: Google이 반드시 순위를 매기는 데 사용하는 모든 요소의 목록을 제공할 필요는 없다는 것을 알고 있습니다. 하지만 페이지 속도 또는 페이지 속도 부족이 페이지 순위를 결정하는 변수라는 것은 널리 받아들여지고 있다고 생각합니다. 당신은 그것에 대해 말할 수 있습니까?
Lukas Haensch: 제 말은, 분명히 저는 순위에 영향을 미치는 모든 것에 대한 모든 통찰력을 갖고 있지 않습니다. 그렇다면 아마 더 이상 일하지 않아도 될 것입니다. 그러나 한 가지 중요한 것은 아마도 명심해야 할 것입니다. 이 모든 것에는 일정한 이유가 있습니다. 따라서 점점 더 많은 트래픽이 모바일에서 발생하고 있습니다. 따라서 모바일 트래픽은 분명히 데스크톱 트래픽을 능가했습니다. 따라서 데스크톱보다 모바일에서 Google 검색을 통해 더 많은 트래픽이 발생하므로 방문자가 많아지고 시장이 늘어납니다. 이러한 채널에는 더 많은 마케팅 기회가 있습니다.
Lukas Haensch: 하지만 일반적으로 데스크톱보다 모바일에서 전환율이 더 낮습니다. 따라서 사용자 경험에 영향을 미치는 한 측면이기 때문에 페이지 속도를 개선하는 데 분명히 상당한 관심이 있습니다. 그래서 순위에 중요한 이유와 마찬가지로 사용자에게 좋은 이유이기도 합니다. 이것이 전환에 좋은 이유이며, 이는 다시 해당 채널에서 광고를 실행하는 누군가에게 좋은 이유입니다. 따라서 순위 요소에 대한 추가 통찰력이 없습니다. 나는 모든 것이 아주 좋은 이유에서 나온다고 말할 수 있습니다.
John Jantsch: 그리고 내가 사람들에게 항상 말하는 것은 당신이 말한 것입니다. 느리게 로드되는 페이지는 좋지 않은 경험입니다. 따라서 Google은 사람들이 나쁜 경험을 하는 것을 원하지 않습니다. 그래서 그들은 그 페이지를 보여주지 않을 것입니다. 그리고 그것이 그것을 바라보는 방식이라고 생각합니다. 나는 그것이 항상 그들의 의도였다고 생각합니다. 따라서 결과적으로 페이지의 모든 요소가 사이트에 있는 것을 더 잘 이해하게 되었기 때문에 알고리즘 및 기타 등등에 따라 상황이 변경됩니다.
John Jantsch: 그래서 저는 사실 이것을 테스트하는 가장 쉬운 방법 중 하나가 디자인이든 로드 속도이든 간에 모바일 경험이 정말 나쁜 클라이언트가 있을 때 모바일 검색에 표시되도록 할 수 없습니다. 그들은 그냥하지 않습니다. 그래서 제 생각에는 누군가가 그것을 순위에서 어디에 두든 상관없이 그것이 하나의 요인이라고 제안해야 할 필요가 있을 만큼 분명한 표시라고 생각합니다.
Lukas Haensch: Google에서 이 작업을 하면서 얻은 가장 큰 장점은 많은 팀이 작은 수정을 수행하는 데 필요한 노력을 과대평가했다는 것입니다. 따라서 모바일 페이지의 페이지 속도 최적화는 일종의 큰 프로젝트라는 제목의 것입니다. 하지만 앞서 강조했던 것처럼 개선하기 위해 할 수 있는 작은 일들이 많지 않습니다.
Lukas Haensch: 이것을 매우 극적으로 강조할 수 있는 한두 가지 예를 말씀해 주십시오. 많은 사람들이 영웅 이미지를 최적화하려고 합니다. 할 수 있는 것처럼 아주 간단하게 할 수 있는 것은 영웅 이미지를 가져와 코드 문자열로 전송할 수 있습니다. 코딩에서는 base 64라고 하며 갑자기 HTML 파일의 첫 번째 요청과 함께 영웅 이미지를 보낼 수 있습니다. 내가 말하려는 것은 큰 변화가 없다는 것입니다.
Lukas Haensch: 하나의 이미지를 가져와서 다른 형식으로 전송하고 첫 번째 파일과 함께 보내면 처음 접을 수 있는 콘텐츠의 큰 덩어리가 이미 그려질 수 있습니다. 그래서 나는 그것을 만드는 것보다 할 수 있는 작은 것들이 많다는 것이 가장 큰 시사점이라고 생각합니다.
John Jantsch: 그래서 듣는 사람이 바깥에서 생각하고 있다고 가정해 봅시다. 그는 몇 가지 의미가 있는 말을 했지만 나는 그 중 어떤 것도 할 수 없습니다. Google 페이지 속도 컨설턴트라면 매우 기술적인 사람들과 할 수 있다고 말하는 사람들을 얻게 될 것이기 때문입니다. 하지만 그들은 정말로, 그들이 원하는 것은 새로운 호스팅이나 무언가로 당신을 옮기는 것뿐입니다. 제 말은, 이러한 작은 문제를 해결하는 데 도움이 되는 적절한 리소스를 어떻게 찾습니까?
Lukas Haensch: 정말 좋은 질문이라고 생각합니다. 내가 말할 수 있는 것은, 당신의 팀이 파일을 하나씩 합리적으로 검토한다면 이 중 많은 부분이 이미 밝혀질 수 있다는 것입니다. 글꼴 파일이 이전 글꼴 파일 형식일 수 있습니까? TTF라는 글꼴 파일 형식이 있습니다. [inaudible]로 옮기면 30% 작아집니다. 글꼴이 더 크고 빠르게 표시됩니다. 그래서 한 곳처럼 말할 수 없는 유일한 것은 웹사이트의 폭포를 통해 팀과 함께 간다는 것입니다. 정직한 최고의 소스라고 생각합니다.
John Jantsch: 그래서 우리는 소개에서 당신이 최근에 Pathmonk라는 회사를 설립했다고 언급했습니다. Pathmonk가 하는 일에 대해 조금 알려주세요.
루카스 헨쉬: 물론입니다. 따라서 확실히 Pathmonk 내에서는 모바일과 데스크톱에서의 전환을 훨씬 더 자세히 살펴보고 있었습니다. 그리고 우리가 깨달은 것은 마케터가 사용자가 실제로 전환하는 데 얼마나 많은 방문이 필요한가와 같은 질문에 대답하는 것이 실제로 매우 어렵다는 것입니다. 또는 실제로 그들을 설득하기 위해 페이지에 몇 초가 있습니까? 이탈률에 대해 말하는 것이 아니라 누군가가 가입할 때까지 걸리는 평균 시간(초)은 얼마입니까? 또는 방문자가 전환할 준비가 되었음을 나타내는 사용자 작업은 무엇입니까?
Lukas Haensch: Google 분석 데이터와 같은 일종의 익명 정보를 소급적으로 이해하거나 누군가의 행동과 같은 히트 맵 비디오를 보는 것에는 큰 격차가 있음을 알았습니다. 하지만 실시간으로 사람들이 즉각적으로 대응하기 어려운 갭이 있음을 발견했습니다. 사용자 X가 페이지에 있었고 전환에 도달할 것처럼 보이는 행동을 했다면 시장에 반응할 수 있습니까? 그리고 우리는 대부분의 시장이 현재라는 것을 발견했습니다.
Lukas Haensch: 그래서 우리는 기본적으로 인공 지능을 기반으로 사용자가 페이지에서 무엇을 하는지, 전환 패턴이 무엇인지 학습하는 기본적으로 도움이 되는 스마트 카드라는 기술을 구축합니다. 따라서 사용자가 페이지에 있을 때 어떤 인텐트를 갖게 됩니까? 그런 다음 자주 묻는 질문, 평가, 슬라이딩 방식으로 하단 또는 상단에서 스마트 카드라고 부르는 사례 연구와 같은 제품에 대한 콘텐츠를 보여줍니다. 그리고 이것은 기본적으로 웹사이트가 페이지에서 일어나는 일에 대해 실시간으로 반응하도록 하는 방법입니다. 각 방문자가 관심 있는 제품 또는 기능의 유형에 이르기까지 각 방문자와 함께 합니다.
John Jantsch: 가장 간단한 용어로 누군가가 특정 페이지를 방문한다면 아마도 그 주제에 관심이 있을 것이라고 생각합니다. 따라서 일반 슬라이드를 제공하는 대신 거의 모든 페이지 또는 모든 방문 또는 귀하가 말했듯이 전체 경로에서 경험을 개인화하는 방법입니다. 사이트에 있는 경우가 많기 때문에 사람들은 특정 주제를 탐색 중이거나 특정 의도가 있음을 확실히 나타내는 5~6가지 작업을 수행합니다. 그리고 나서 실시간으로 말씀하신 것처럼 그에 대응할 수 있다는 것은 불행히도 사람들이 기대하기 시작하는 행동이 되고 있다고 생각합니다. 불행히도 마케터의 기준을 확실히 높였기 때문입니다.
Lukas Haensch: 그리고 재미있긴 하지만 우리가 보는 것은 요소가 있고 예상되는 요소가 있으며 분명히 누군가가 특정 백서를 다운로드하고 있다는 것입니다. 그러나 누군가가 귀하의 페이지에 깊숙이 집중하는 것과 같은 다른 것들이 있습니다. 우리는 누군가가 귀하의 페이지에 깊이 집중한 다음 다시 초점을 다시 맞춘 항목 중 하나에 제출하는 것 사이에 강한 상관 관계를 보았습니다. 그리고 그것은 데이터가 일종의 공개이며 스마트 카드가 자동으로 반응할 수 있는 것입니다.
John Jantsch: 그리고 다시 생각해보니 도구를 방문하여 작동하는 모습을 보았기 때문에 스마트 카드가 전달되는 방식 면에서 상당히 우아하다고 생각합니다. 그들은 단지 화면을 차지하거나 실제로 누군가의 얼굴에 들어가는 것이 아닙니다. 그러나 그것들은 일종의 개인화되어 있기 때문에 볼 수 있을 것이라고 생각하고 훨씬 더 환영받을 것이라고 생각합니다.
Lukas Haensch: 흥미롭네요. 똑똑한 사람들이 극복해야 하는 선입견이 많기 때문에 UX 테스트를 많이 했고 UX도 많이 했습니다. 챗봇에 대한 선입견이 많기 때문에 쏘지 않고 챗봇과 같은 모양과 느낌을 느끼지 않습니다. 많은 사람들은 챗봇이 옳다고 생각하고 로봇과 대화하고 싶지 않기 때문에 챗봇과 대화를 시작조차 하지 않습니다.
Lukas Haensch: 지표에 따르면 많은 사람들이 대화를 시작하지 않을 것임을 분명히 알 수 있습니다. 또는 쿠키 배너처럼 보이면 쿠키 배너를 1억 번 클릭한 것입니다. 따라서 기본적으로 스마트 카드를 사용하여 웹사이트의 일부처럼 보이고 느껴지도록 하므로 웹사이트의 스타일과 테마에 맞게 완전히 사용자 정의할 수 있습니다. 그런 다음 기본적으로 위아래로 슬라이딩하여 웹 사이트의 일부가 되고 아무데도 나타나지 않습니다.
John Jantsch: Lukas, 우리와 함께하고 페이지 속도에 대해 이야기해 주셔서 감사합니다. 곧 길에서 만나실 수 있기를 바랍니다.
Lukas Haensch: 감사합니다. 나를 주셔서 감사합니다.