사이트 속도 최적화를 위한 8가지 팁

귀하의 사이트는 얼마나 빠릅니까?

우리 모두는 느린 사이트가 사용자 행동에 부정적인 영향을 미친다는 것을 알고 있습니다. 그러나 사이트 속도를 최소화하기 위해 정말 최선을 다하고 있습니까?

오늘 우리는 웹 개발, 암석학, WordPress, 공상과학 소설, 진을 좋아하는 남자와 사이트 속도 최적화를 위한 8가지 팁에 대해 논의하고 있습니다. 그리고 누가 PHP로 무릎을 꿇을 때, 무대 위에서, 또는 좋은 책을 읽을 때 가장 행복한가. 그는 디지털 전략가, 디지털 마케팅 기술자, 풀 스택 개발자이며 Yoast의 SEO 책임자입니다.

In Search SEO 팟캐스트 Jono Alderson에 오신 것을 진심으로 환영합니다.

8단계는 다음과 같습니다.

1. 핵심 웹 바이탈
2. 클라우드플레어
3. 크롬 개발자 도구
4. 고급 이미지 최적화 기술
5. 고급 글꼴 최적화 기술
6. CSS 및 JavaScript 트릭
7. 캐싱 및 버전 관리
8. 영리한 타사 키트

빠른 웹사이트의 8가지 필수 요소

J: 이봐, 여기 와서 좋다. 나를 주셔서 감사합니다. 이것은 매우 흥미 진진합니다.

D: 훌륭해요, 조노. 당신이 있어 다행입니다. jonoalderson.com에서 Jono를 찾을 수 있습니다. 따라서 Jono, 느린 사이트가 실제로 사용자 행동에 어떤 영향을 미치는지에 대한 현재 입장을 말씀해 주시겠습니까?

J: 연구가 너무 많아요. 그리고 나는 그것이 뉴스가 아니라고 생각합니다. 수십 년 전으로 거슬러 올라가는 연구가 있습니다. 그리고 사람들이 기다리게 만드는 시간과 그것이 구매 가능성에 미치는 영향 사이에는 놀라울 정도로 직접적인 상관관계가 있다고 모든 것이 나와 있습니다. 사람들이 의식적으로 "아, 그건 200밀리초가 너무 오래 걸리고 나는 당신의 경쟁자와 함께 쇼핑할 것입니다."라고 의식적으로 말하는 경우는 아닐 것입니다. 그러나 창 밖을 내다보거나 다른 탭을 열거나 점심으로 무엇을 먹을지 궁금해하는 기간이 있으며 이러한 모든 것은 순간에 머물고 전환하거나 조치를 취할 가능성을 잠식합니다.

나는 최근에 큰 컨설팅 회사인 Deloitte에서 아주 흥미로운 연구를 보았습니다. 그리고 그들은 영국과 미국의 전자상거래와 리드 제네레이션, 다양한 부문에 걸쳐 가장 큰 50개 사이트의 하위 집합과 같은 것을 살펴보았습니다. 그리고 그들은 눈을 깜박이는 데 걸리는 시간인 200밀리초 지연과 같은 것을 발견했습니다. 그러면 수익이 10% 정도 증가하여 사이트 속도가 감소합니다. 그리고 이것은 하나의 그러한 연구일 뿐입니다. 이런 것들이 많이 있습니다. 그리고 그들 모두는 더 빠르고, 더 매끄럽고, 더 쉽게 접근할 수 있고 더 사용하기 쉽다는 것은 더 많은 돈을 의미한다고 말합니다. 예, 우리가 이것을 보는 것은 당연합니다.

D: Amazon의 연구를 본 기억이 있습니다. 10년은 넘은 것 같은데 최신 통계는 본 적이 없습니다. 그러나 그것은 모두 비교 대상이기도 합니다. 사람들이 다른 웹사이트를 탐색하는 데 익숙하고 귀하의 사이트가 다른 웹사이트보다 훨씬 느리다고 생각한다면 너무 오래 머물지 않을 것이기 때문입니다.

J: 예, 사람들은 이에 대해 별로 생각하지 않습니다. 그들은 그들의 사이트가 아마도 충분히 빠르다고 생각합니다. 그러나 경쟁업체의 사이트는 점점 더 빨라지고 Facebook은 더 빨라지고 Instagram은 더 빨라지고 사용자 경험의 기준이 어디에서 바뀔지에 대한 기대치가 점점 더 빨라지고 있습니다. 따라서 예상보다 빨라야 합니다. 그렇지 않으면 상대적으로 느려집니다.

D: 그래서 오늘은 1위인 핵심 핵심 웹사이트에서 시작하는 빠른 웹사이트의 필수 요소를 공유하고 있습니다.

1. 핵심 웹 바이탈

J: 이 외에도 더 있을 수 있다고 생각합니다. 그러나 이것은 확실히 나의 이동 목록입니다. 지금쯤이면 모두 Core Web Vitals에 대해 들어보셨을 것입니다. 하지만 그렇지 않다면 Google에서 2020년 중반에 출시한 것 같습니다. PageSpeed가 무엇인지 측정하기 위한 일종의 표준화되고 보편적인 측정항목을 만들려는 시도입니다. 기술적으로나 개념적으로 매우 복잡하기 때문입니다. 페이지 로딩, 모든 종류의 다른 단계와 그것에 영향을 미치는 모든 종류의 다른 것들이 있습니다. 그래서 그들은 이를 모니터링하고 추세를 파악하고 시간이 지남에 따라 분석할 수 있는 일련의 메트릭으로 단순화했습니다.

이것에 대한 정말 좋은 점은 이것이 단지 1단계라는 것입니다. 현재 3개의 측정항목이 있으며 올해에는 2개를 더 추가할 예정입니다. 메트릭 자체가 진화하고 있습니다. 이것은 이러한 종류의 측정에 대해 어려운 숫자를 매기기 위한 성숙한 생태계가 되고 있습니다. 즉, 온라인 비즈니스로서 우리는 점수가 좋지 않고 경쟁업체는 점수가 더 높다고 말하는 것이 훨씬 쉬워집니다. 우리는 모든 연구가 수익과 연결된다는 것을 알고 있으므로 이를 개선하는 데 집중해야 합니다. 그래서 갑자기 이해관계자들에게 페이지 속도가 중요할 뿐만 아니라 모든 사람이 동의할 수 있는 측정값이 있다는 사실을 확신할 수 있는 방법이 생겼습니다. 그 구석에 있는 개발자와 의견이 다르고 실제로 공유 언어가 없습니다. 따라서 이것은 비즈니스 도구로서 정말 강력하며 기술적인 측정에 신경쓰지 마십시오.

D: 나는 당신의 두뇌가 웹사이트를 개선하기 위해 실제로 할 수 있는 가장 중요한 8가지 가장 빠른 일이 있다고 말하는 데 전념할 수 없다고 말하고 있다는 것을 압니다. 나는 당신의 두뇌가 현재 1024가지를 생각할 수 있다는 것을 알고 있지만, 우리는 당신이 방금 논의한 아이디어와 함께 생각해낸 8개의 초기 아이디어를 공유하고 있습니다. 그래서 두 번째는 Cloudflare였습니다.

2. 클라우드플레어

J: 내 웹사이트의 페이지 속도를 높이기 위해 한 가지 작업만 수행할 수 있는 시간과 리소스가 충분하다면 Cloudflare로 이동하게 될 것입니다. Cloudflare는 거대합니다. 그들은 이 분야에서 가장 큰 기술 기술 회사 중 하나입니다. 그러나 약간 괴상하기 때문에 당연히 들어본 적이 없는 수많은 개발 팀과 기업이 있습니다. Cloudflare는 콘텐츠 전송 네트워크입니다. 웹사이트 앞에 있는 인프라입니다. 그들은 무료 버전이 있습니다. 설정하는 데 약 10분이 소요됩니다. 그리고 그들은 마법을 사용하여 사이트 속도를 높입니다. 자동으로 이미지를 축소하고 JavaScript를 축소하며 로드 방법을 변경하고 연결이 다른 장소 및 1000가지 다른 용도로 전 세계적으로 더 효율적으로 라우팅되도록 합니다. 그리고 이것들은 이론적으로 할 수 있는 모든 것입니다. 매우 똑똑하고 자원이 풍부한 개발 팀이 있다면 일부를 수행할 수 있습니다. 그러나 Cloudflare 무료 제품이 대부분의 작업을 수행하고 월 20달러에 나머지 모든 작업을 수행할 때 왜 당신은 하시겠습니까?

따라서 점수가 좋지 않은 사이트가 있는 경우 약간 느릴 수 있습니다. 버튼 몇 개만 클릭하면 로드하는 데 6초가 걸리는 사이트를 2초로 줄일 수 있습니다. 기본 수준은 경이롭지만 고급 사용자와 고급 케이스를 사용하면 더 멀리 갈 수 있습니다. 내 사이트가 작동하는 방식에 Cloudflare를 더 깊이 통합하고 싶다고 말할 수 있습니다. 그리고 저는 이 비즈니스 로직의 일부를 오프로드하고 싶습니다. 그리고 사용자가 있는 곳과 가까운 클라우드의 에지에서 Google Analytics에서 이 태그 지정 및 추적을 실행하고 싶습니다. 사이트 자체를 더 빠르게 만드는 데 어려움을 겪고 있거나 레거시 하드웨어에서 실행 중이거나 호스팅이 약간 형편없는 경우와 같은 경우에 경이로운 도구입니다. 다시 고민하기 위해. 이는 스택에서 얼마나 많은 다른 부분을 담당하고 비즈니스 로직을 얼마나 오프로드하고 싶은지에 대한 몇 가지 흥미로운 질문을 제기합니다. 그러나 빠른 해킹으로서는 경이로운 도구입니다.

D: 세 번째는 Chrome 개발자 도구를 사용하여 성능 병목 현상을 찾아내는 것입니다.

3. 크롬 개발자 도구

J: 예, PageSpeed ​​Insights 및 Web Page Test와 같은 Core Web Vitals 도구를 실행하면 최상위 점수와 몇 가지 일반적인 조언을 얻을 수 있습니다. 그리고 JavaScript를 덜 사용하는 것과 같은 일반적인 조언의 문제는 이를 웹사이트와 과제에 적용하는 것이 실제로 쉽지 않을 것이라는 점입니다. 귀하의 웹사이트는 고유하며 매우 구체적인 방식으로 내장되어 있습니다. 기회가 어디에 있는지 실제로 파악하는 다음 단계에 도달하려면 웹 사이트가 어떻게 로드되는지 살펴봐야 합니다. 이를 위해 사용할 수 있는 최고의 도구 중 하나는 Chrome 개발자 도구입니다.

저는 Windows 컴퓨터를 사용 중입니다. 그래서 브라우저에서 F12 키를 눌렀습니다. Mac에 해당하는 것이 있다고 확신하고 Inspect 개요를 얻습니다. 네트워크 탭을 클릭하면 페이지에 로드되는 모든 항목을 로드 순서와 시간에 따라 표시하는 폭포식 다이어그램을 얻을 수 있습니다. 새로 고침을 몇 번 누르면 그 일이 일어나는 것을 볼 수 있고 패턴을 보기 시작할 수 있습니다. 그리고 이 하나의 특정 작업이 다른 모든 작업보다 두 배나 더 오래 걸린다는 사실을 확인하기 위해 깊이 있는 개발자일 필요는 없습니다. 그리고 그것은 많은 것을 들고 있습니다. 그리고 그것은 큰 JPEG입니다. 아마도 우리는 이 JPEG를 줄여야 할 것입니다. 따라서 사이트, 특히 페이지별로 또는 템플릿별로 템플릿을 진단하는 방법으로 가장 큰 위반자가 어디에 있는지 확인하는 강력한 방법입니다.

예, 그 밖에 미묘한 차이가 있지만 가장 큰 병목 현상을 해결하는 방법을 안다는 것은 보류된 모든 항목이 더 빨리 로드된다는 것을 의미합니다. 그리고 쉽게 기회를 포착하고 포착하는 방법으로서 이것은 접근하는 좋은 방법입니다. 다른 것을 잡고 있는 것을 찾아 조금 더 빠르게 만드십시오. 그리고 그것을 스크린샷하여 개발자에게 전달할 수 있습니다. 그리고 그들은 그것이 무엇이든 공격할 수 있어야 합니다.

D: 네 번째는 고급 이미지 최적화 기술을 사용하는 것입니다.

4. 고급 이미지 압축 기술

J: 예, 큰 JPEG를 예로 들었습니다. 그리고 이것은 여전히 ​​부끄럽게도 일반적입니다. 많은 사이트가 느려지는 가장 큰 이유 중 하나는 누군가가 10메가바이트 GIF를 자신의 홈페이지에 업로드했거나 휴대전화나 카메라로 사진을 찍어 CMS에 넣었기 때문입니다. 그리고 우리가 그것을 조금 줄여야 할지도 모른다는 논리가 없습니다. 크기에 맞게 맞춰야 할 것 같습니다. Chrome 개발자 도구 및 Cloudflare를 볼 때 많은 경우 병목 현상이 크기 때문에 이 이미지를 로드하는 데 시간이 오래 걸린다는 것을 알 수 있습니다. 이를 해결하는 데 사용할 수 있는 모든 종류의 도구가 있습니다. 가장 중요한 것은 해당 이미지를 생성하는 데 사용하는 프로세스가 무엇이든, 아마도 워크플로가 있을 것입니다. Photoshop에서 항목을 만드는 경우 항목을 내보낼 때 웹용으로 내보내는지 확인하십시오. 이 JPEG가 정말로 완벽한 픽셀 품질을 필요로 하는지, 아니면 품질을 약간 낮추고 파일 크기를 줄일 수 있는지 생각해 보십시오. 이 모든 것이 약간의 기술적인 것이라면 squoosh.app으로 이동하십시오. Squoosh는 일부 Google 개발 팀에서 구축한 도구입니다. 그들은 매우 괴상하고 이미지 공간에 정말로 빠져 있습니다. 이미지를 끌어다 놓으면 PNG를 JPEG로 변경할 수 있는 위치를 클릭할 수 있는 옵션이 제공됩니다. 드래그 앤 드롭하면 이미지의 품질이 변경되는 것을 볼 수 있습니다. 나는 그 트레이드 오프에 만족합니까? 그리고 클릭하면 무슨 일이 일어나는지 볼 수 있고 여기 저기에서 또 다른 몇 킬로바이트를 줄일 수 있는 많은 고급 확인란이 있습니다. 그리고 드래그 앤 드롭 및 설정으로 재생하는 몇 초 만에 2MB에서 200KB까지의 이미지를 매우 쉽게 얻을 수 있습니다. 워크플로에 크게 적용되지는 않지만 큰 병목 현상을 일으키는 이미지 중 일부를 축소하기 위한 빠른 수정으로 정말 멋집니다.

D: 예, 인정하기 싫기 때문에 이미지 최적화를 가장 먼저 해야 합니다. 하지만 실제로는 여전히 Macromedia Fireworks를 사용하여 소프트웨어를 생산하고 있습니다.

J: 아, 불꽃놀이가 그리워요. 그것이 내 장난감이었던 좋은 10년 정도가 있었습니다.

D: 알겠습니다. 그리고 이미지를 만든 다음 약 80% 품질의 JPEG로 내보내고 "웹에서는 괜찮습니다."라고 말합니다. 10년 전만 해도 그게 먼 이야기였을 수도 있다.

J: 아마 많은 사람들의 워크플로가 80%에 도달하고 괜찮을 것입니다. 그리고 그것은 대부분의 경우 괜찮을 것입니다. 그리고 병목 현상을 풀고 차단을 해제하고 싶다면 모든 단일 이미지를 보고 "크기의 절충안이 만족스럽습니까?"라고 말하는 시간을 할애할 가치가 있습니다.

D: 물론입니다. 그리고 최고의 사이트와 경쟁해야 하는 초고속 현대 사이트의 경우 제가 방금 설명한 내용은 확실히 그렇게 할 수 없을 것입니다. 그래서 우리는 고급 글꼴 최적화 기술을 사용하는 5번까지 오게 되었습니다.

5. 고급 글꼴 최적화 기술

J: 큰 JPEG는 종종 차단 문제라고 언급했습니다. 그리고 큰 위반자 중 하나는 글꼴, 특히 Google 글꼴 또는 실제로 타사 도메인에서 로드하는 모든 글꼴입니다. 이것들은 종종 페이지에서 가장 느리고 페이지에서 가장 큰 것이며 사용자로서 항상 이것을 보게 될 것입니다. 페이지를 로드할 때 정렬하는 데 몇 초가 걸리고 글꼴이 깜박입니다. 정말 나쁜 사용자 경험입니다. Core Web Vitals에는 여러 가지 면에서 정말 좋지 않지만 수정 사항이 있습니다. 따라서 Google 글꼴 및 이와 유사한 글꼴의 문제 중 하나는 도메인 간 연결을 하는 데 시간이 조금 걸린다는 것입니다. 연결하는 것은 시간이 걸리는 전체 백엔드 시스템을 쿼리합니다. 글꼴을 다시 뱉어내면 해당 글꼴을 다운로드한 다음 렌더링해야 합니다. 그 과정에는 5단계가 있으며 몇 초가 걸리며 더 빠르게 할 수 있는 방법은 없습니다.

따라서 가장 쉬운 승리 중 하나는 해당 글꼴을 현지화하는 것입니다. Google 글꼴에서 로드하지 말고 CSS 복사 및 붙여넣기에 대해 Google 글꼴이 제공하는 지침을 무시하십시오. 약간의 인터넷 검색을 하고 해당 글꼴을 자체 호스팅하는 방법에 대한 가이드를 찾으십시오. 설정과 CMS에 따라 다릅니다. 일반적으로 이를 매우 간단하게 만드는 플러그인과 프로세스가 있습니다. 그 모든 것을 없애줍니다. 그리고 나서 여러분이 하고 싶은 또 다른 것은 제가 로드하고 있는 이 글꼴이 실제로 무엇이며 어떻게 로드하는지 살펴보는 것입니다.

최신 글꼴 로딩 CSS에서는 특정 문자 집합을 정의할 수 있습니다. 따라서 예를 들어 웹 사이트가 대부분 영어로 되어 있다는 것을 알고 있다면 실제로 기본적으로 발생하는 확장된 라틴 글리프 전체에 대해 글꼴 문자를 로드할 필요가 없을 것입니다. 따라서 로드하는 글꼴은 AZ(1~9)만 사용하고 있지만 실제로는 페이지에 표시되지 않는 200개의 이상한 문자를 로드하고 있습니다. 그래서 그것을 조각할 수 있다면 훨씬 더 빠릅니다. 또한 "이 글꼴이 빨리 로드되기를 원하지만 잠재적으로 캐시되지 않기를 원합니까? 아니면 절충점이 있는 곳에서 로드될 때까지 얼마나 기다려야 합니까? 그리고 다른 것으로 대체해야 합니까?"라고 말할 수도 있습니다. 아니면 빈 공간이 있어야 할 자리를 표시할까요?” 수정할 수 있는 다양한 설정과 최적화를 위해 Google에서 할 수 있는 도구가 있습니다. 같은 방식으로 이미지를 하나하나 살펴보고자 할 때 이러한 글꼴을 로드하는 방법에 대해 정말로 질문해야 합니다. csstricks.com에는 몇 가지 훌륭한 가이드가 있습니다. 다양한 방법으로 선택할 수 있지만 CMS와 스택을 살펴보면 이를 쉽게 만들어주는 플러그인과 구매가 있을 것입니다.

D: 여섯 번째, CSS와 JavaScript 트릭을 사용하세요.

6. CSS와 자바스크립트 트릭

J: 다음으로 가장 흔한 위반자는 스타일과 스크립트가 로드되는 방식입니다. 그리고 복잡한 시각적 요소가 많고 움직임과 상호 작용, 위젯이 있고 클릭하여 작업할 수 있는 웹 사이트가 있는 경우 CSS와 JavaScript가 전원을 공급하는 데 시간이 걸리는 경우가 거의 확실합니다. 다양한 방식으로 페이지를 로드하고 상호작용합니다. 다른 것들을 지탱하는 폭포수를 볼 때 Chrome 개발자 도구 보고서에서 이것을 볼 수 있습니다. JavaScript는 이것에 대해 정말 나쁜 범죄자입니다. 내 페이지 상단에 캐러셀을 구동하는 스크립트가 있는 경우 캐러셀이 스크롤되기 시작하기 전에 해당 스크립트가 로드될 때까지 기다릴 필요가 없습니다. 그래서 이것으로 할 수 있는 몇 가지가 있습니다. 하나는 그것들을 더 작게 만들 수 있다는 것입니다. Cloudflare는 이 점에서 정말 좋습니다. 더 작으면 바이트 수가 적고 페이지 로드 시간이 더 빠릅니다. 그러나 당신이 할 수 있는 또 다른 강력한 기능은 이 JavaScript 파일에 대해 즉시 로드할 필요가 없으며 페이지가 완료될 때까지 기다릴 수 있다는 것입니다.

그리고 당신이 그것을 할 수 있는 다양한 방법이 있습니다. 비동기식으로 로드할 수도 있고 지연할 수도 있습니다. 연기는 일반적으로 오늘날 가장 좋은 방법입니다. 사람들은 비동기를 결합하고 그것을 지연시키면서 모든 종류의 이상한 일을 합니다. 그러나 당장 필요하지 않은 자바스크립트 파일에 defer 속성을 사용하는 것만으로도 페이지를 훨씬 더 빠르게 만들 수 있습니다. 따라서 바닥글에서 무언가를 제어하는 ​​JavaScript가 있는 경우, 특히 JavaScript와 CSS가 상호 작용하는 방식이 매우 흐릿해진다고 생각할 때 페이지의 나머지 부분을 로드할 때까지 기다릴 필요가 없습니다. 내 페이지에 많은 스크립트와 많은 스타일이 있는 경우 그 중 일부는 JavaScript가 로드될 때까지 대기합니다. 그래서 당신은 모든 곳에서 다른 것들을 붙잡고 있는 것들이 있습니다. 따라서 정말 전술적이며 즉시 필요하지 않다고 말하면 엄청난 성능 향상을 달성할 수 있습니다. 다시 말하지만, Chrome 개발자 도구에서 이러한 위반자가 어디에 있는지 쉽게 확인할 수 있습니다. 개발 리소스가 있다면 매우 쉽게 수행할 수 있습니다. 말 그대로 태그에 속성을 추가하기만 하면 자동으로 수행됩니다.

D: 일곱 번째는 캐싱과 버전 관리를 최대한 활용하는 것입니다.

7. 캐싱 및 버전 관리

J: Cloudflare가 정말 잘하는 것 중 하나는 리소스를 처음 만났을 때 이미지든 JavaScript든 스타일이든 상관없이 Cloudflare에 저장한 다음 나중에 이를 요청하는 모든 사람입니다. 캐시된 버전을 가져옵니다. 그리고 그것은 그들에게 매우 지역적인 곳에서 제공되었습니다. 매우 효율적입니다. 정말 좋습니다. 많은 웹사이트는 이를 상당히 까다롭게 만드는 방식으로 작동합니다. 예를 들어, 스타일 시트와 스크립트의 버전을 관리하고 있는지 확인하려고 합니다. 따라서 최신 버전의 JavaScript를 게시할 때 이것이 버전 6이라고 말하고 싶을 것입니다. 그런 다음 Cloudflare와 방문하는 모든 사람을 위해 멋지게 캐시될 수 있습니다. 업데이트할 때 해당 파일 형식을 변경하고 파일 이름을 변경하려고 하므로 버전 7입니다. 그런 다음 모든 캐시가 만료되고 사람들이 다른 리소스를 요청하며 정말 빨리 돌아오기 시작합니다.

이것이 실제로 강력해지기 시작하는 곳은 실제 웹 페이지 자체를 캐싱하기 시작할 때입니다. 따라서 Cloudflare는 기본적으로 JavaScript 비트와 CSS 비트만 캐시합니다. 웹 페이지를 캐싱하려고 합니다. 그러나 로그인한 사람이나 장바구니에 물건이 있는 사람을 실수로 캐시하지 않는 방식으로 이 작업을 수행하려고 합니다. WordPress를 사용 중이라면 이를 자동으로 수행하는 자동 플랫폼 최적화라는 Cloudflare 서비스가 있습니다. 이제 사용자에게 가장 가까운 Cloudflare 데이터 센터가 있는 곳이면 어디에서나 웹 사이트를 제공하고 있으며 사용자는 600밀리초가 아니라 50밀리초 내에 캐시된 저장된 버전을 받고 있습니다.

더 복잡한 웹 사이트가 설정되어 있는 경우에는 Page Rules 제품 아래에 있는 Worker 제품을 사용하여 Cloudflare를 사용하여 이에 대한 고유한 논리를 정의할 수 있습니다. 그러나 기본적으로 전제는 귀하의 웹사이트가 아무 것도 하는 것을 원하지 않는다는 것입니다. 누군가가 귀하의 페이지를 여는 경우 가장 가까운 데이터 센터가 어디에서든 해당 페이지, 모든 JavaScript 및 모든 스타일이 제공되기를 원합니다. 내 서버는 노르웨이에 있는 것 같습니다. 하지만 내 웹사이트를 열면 이제 모든 것이 맨체스터에서 옵니다. 왜냐하면 그곳이 Cloudflare에 데이터 센터가 있는 가장 가까운 곳이기 때문입니다. 그리고 이것으로 땜질할 수 있습니다. Chrome 개발자 도구에서 이를 볼 수 있으며, 이것이 Cloudflare를 캐싱하는지 여부를 표시하는 추가 열을 보기에 추가할 수 있습니다. 그리고 이러한 설정을 선택하고 조정하여 백엔드에 아무 것도 닿지 않도록 할 수 있습니다.

D: 그리고 그것은 우리를 마지막으로 데려갑니다. 여덟째, 영리한 타사 키트를 사용하십시오.

8. 영리한 타사 키트

J: 많은 것들이 있습니다. 이것으로 치트를 적용할 수 있습니다. 현재 제가 정말 좋아하는 두 가지가 있습니다. 하나는 흥미로운 도메인이 있는 Instant.page에 있는 Instant Page입니다. 정말 멋지네요. 따라서 사이트가 즉시 빨라지는 것이 아니라 이후 탐색 속도가 빨라집니다. 따라서 사용자가 페이지의 링크 위로 마우스를 이동하면 브라우저의 배경에 미리 로드되어 클릭할 때 이미 사용할 수 있습니다. 그리고 그들은 평균적인 사람이 실제로 클릭하기 전에 16밀리초 동안 링크 위로 마우스를 움직인다는 많은 연구 결과를 얻었습니다. 그래서 거기에 약간의 버퍼 시간이 있습니다. 그리고 그 16밀리초 안에는 백그라운드에서 페이지 로드를 시작하기에 충분한 시간입니다. 그래서 순간적으로 느껴진다.

그리고 그것이 정말 좋은 몇 가지 이유가 있습니다. 하나는 훌륭한 사용자 경험입니다. 둘째, Core Web Vitals에 영향을 줍니다. 초기 페이지 로드는 아니지만 Core Web Vitals는 URL의 전체 사이트에 걸쳐 속도와 로딩 시간을 집계합니다. 따라서 이러한 탐색이 매우 즉각적이라면 전체 점수에 놀라운 일이 될 것이며, 이는 개선된 Google 순위의 성배에 더 가까워질 수 있습니다.

좀 더 기술적인 사람들을 위해, 내가 현재 정말로 빠져있는 또 다른 장난감은 파티 타운입니다. 그리고 전제는 사이트에 로드하는 일부 항목이 제3자라는 것입니다. 그리고 그것은 종종 픽셀과 Google 태그 관리자, 그리고 아마도 다른 가능성과 끝을 추적하는 것입니다. 당신은 당신의 웹사이트에 중요한 주요 중요한 것들과 경쟁하는 것을 원하지 않습니다. 따라서 페이지 로드를 지원하는 자바스크립트가 많다면 Google 태그 관리자가 이에 대해 로드하고 리소스를 훔친 다음 싸우는 것을 원하지 않습니다. 브라우저의 내 페이지가 실제로 중요한 항목에 우선 순위를 지정해야 하고 백그라운드에서 타사 항목이 발생할 수 있으며 별도로 발생할 수 있음을 알 수 있도록 이러한 항목을 분리하고 싶습니다. 그리고 기술적인 관점에서 보면 이러한 모든 타사 리소스를 별도의 작업자에 로드합니다. 즉, 정상적인 스트림 외부에서 발생하고 성능에 영향을 미치지 않으며 백그라운드에서 조용히 발생합니다. 나는 이런 종류의 것들로부터 놀라운 성능 향상을 보았습니다. 나는 이것이 성능 최적화가 진행되는 곳이라고 생각합니다. 설정하기가 약간 까다롭습니다. 모든 항목에서 완벽하게 작동하지는 않습니다. 하지만 정말 경쟁에서 앞서고 싶다면 가지고 놀기에 정말 멋진 장난감입니다. 따라서 약간의 베타 버전이지만 탐색할 가치가 있습니다.

D: Google에서 검색하면 찾기가 꽤 까다롭기 때문에 Party Town의 URL을 찾으려고 했지만 GitHub에 있습니다.

J: 네. 공유할 수 있는 링크를 ping했습니다. 매우 베타입니다. 그것은 매우 GitHub입니다. 현재 매우 괴상하고 개발자입니다.

파레토 피클 - 100가지 작은 변화 만들기

D: 파레토 피클로 끝내자. 그래서 파레토는 노력의 20%에서 결과의 80%를 얻을 수 있다고 말합니다. 적당한 수준의 노력으로 놀라운 결과를 제공하는 SEO 활동은 무엇입니까?

J: 제가 드릴 수 있는 최선의 조언은 SEO에 최적인 Pareto를 무시하라는 것입니다. 나는 이것이 더 이상 작동하는 방식이라고 생각하지 않습니다. 100년 전에 오프라인 소매점을 운영하던 우리 조부모님이라면 훌륭한 조언이라고 생각합니다. 나는 우리 생태계가 다르다고 생각한다. 특히 SEO의 경우 오늘과 내일 죽을 때까지 한 번에 하나씩 100개의 작은 변경을 수행하는 것이 승리하는 방법이라고 생각합니다. 그렇지 않으면 경쟁자들이 더 빠르게 움직이고 있습니다. 품질, 브랜드 및 비즈니스에 관한 모든 것입니다. 전술적으로 "아, 그냥 하세요"라고 말할 수 있는 것은 무엇이든 경쟁업체도 그렇게 할 수 있습니다.

예, 브랜드 평판을 두 배로 늘리는 것과 같은 영리한 답변이 있을 수 있습니다. 확실히 잘 될 것이기 때문입니다. 그러나 그것은 너무나 크고 복잡한 일입니다. 그리고 저는 그것에 대해 훨씬 더 나은 방법으로 생각합니다. 오늘 오후에 제가 개선할 수 있는 10가지 사항은 무엇입니까? 그리고 그냥 가세요. 그리고 그들은 거대하거나 똑똑할 필요가 없습니다. 단지 반복하고 더 나아지기만 하면 됩니다.

D: 우선순위를 매길 필요는 없습니다. 그러나 분명히 어떤 것들은 다른 것들보다 더 큰 영향을 미칩니다.

J: 네, 하지만 큰 일들은 모두 더 나은 솔루션, 더 나은 콘텐츠, 더 많은 제품 시장 조정, 청중에게 깊은 인상을 주고 도움을 주지만 그 어느 것도 당신이 할 수 있는 가시적이고 전술적인 일이 아닙니다.

알다시피, 난 내 마음을 바꿉니다. 당신이 할 수 있는 80%는 Cloudflare를 얻는 것입니다.

D: 나는 당신의 호스트인 David Bain이었습니다. Jono, In Search SEO 팟캐스트에 참여해주셔서 감사합니다.

J: 만나줘서 고마워. 이것은 즐거웠다.

D: 그리고 들어주셔서 감사합니다.