NitroPack 검토: 쉬운 모드에서 WordPress 사이트 속도 최적화

게시 됨: 2021-12-27

웹사이트가 있다면 사이트 속도 최적화에 신경을 써야 합니다.

페이지 속도는 사이트의 사용자 경험에 큰 영향을 미칩니다. 느린 사이트 속도를 높은 이탈률, 낮은 전환율 및 일반적으로 불만족스러운 사용자와 연결하는 모든 종류의 데이터가 있습니다.

하지만 솔직히 말해서, 로딩 속도가 느린 웹 사이트가 얼마나 짜증나 는지 이미 알고 있기 때문에 이 점을 증명하는 데이터가 실제로 필요하지 않습니다. 그렇죠?

또한 Google의 새로운 페이지 경험 업데이트를 통해 Google은 Largest Contentful Paint와 같은 Core Web Vitals 메트릭을 검색 엔진 순위 요소로 사용하므로 느린 페이지 속도는 사이트의 검색 엔진 최적화에 방해가 될 수도 있습니다.

그래서 – 사이트 속도가 중요합니다… 그러나 그것은 또한 복잡합니다.

캐싱, JavaScript 최적화, CSS 최적화, HTML 최적화, CDN(콘텐츠 전달 네트워크), 이미지 최적화, 프리페칭, 압축 등의 기능이 있습니다.

NitroPack은 하나의 도구에서 사이트에 필요한 거의 모든 단일 성능 최적화 전술 을 구현하는 데 도움이 되는 사용하기 쉬운 플러그인입니다.

WordPress에서 NitroPack 플러그인을 설치하고 몇 개의 버튼만 클릭하면 사이트에서 캐싱, CDN(콘텐츠 전송 네트워크), CSS/JavaScript 최적화 등과 같은 전술의 이점을 즉시 활용할 수 있습니다.

실습 NitroPack 검토에서 다음을 포함하여 이 도구를 직접 살펴볼 것입니다.

  • 기능에 대한 간략한 설명
  • NitroPack 튜토리얼 및 인터페이스 살펴보기
  • NitroPack의 개선 사항이 "실제"인지에 대한 생각(이는 나중에 이해될 것입니다)
  • NitroPack을 사용한 일부 전/후 성능 테스트
  • 가격
  • 마지막 생각들
NitroPack 사이트 속도 최적화 도구

NitroPack 검토: 그것은 무엇을 합니까?

NitroPack은 WordPress (및 일부 기타 플랫폼)용 올인원 속도 최적화 플러그인입니다.

이것이 NitroPack의 가장 독특한 점 중 하나입니다. 이 모든 것이 하나로 통합되어 있습니다.

이것은 놀랍게도 드물다. 예를 들어 WP Rocket은 그 자체로 매우 포괄적인 페이지 속도 플러그인이지만 최소한 이미지 최적화 솔루션, CDN 및 기타 조정과 연결해야 합니다.

NitroPack을 사용하면 성능 최적화 도구의 "스택"을 구축할 필요가 없습니다. 그것은 당신을 위해 모든 것을합니다. 여기에서 다루는 고급 기능은 다음과 같습니다.

  • 캐싱 – 브라우저 캐싱뿐만 아니라 사전 로드 및 스마트 캐시 지우기 기능이 있는 스마트 페이지 캐싱을 포함합니다.
  • CDN – 70개 이상의 글로벌 엔드포인트, Gzip/Brotli 압축 등이 있는 내장형 CDN.
  • CSS 최적화 – 가장 큰 콘텐츠가 포함된 페인트 측정항목을 포함하여 초기 로드 시간을 높일 수 있도록 스크롤 없이 볼 수 있는 중요한 CSS 처리를 포함합니다.
  • JavaScript 최적화 – 스크립트를 연기하여 초기 로드 시간을 개선하고 그렇지 않으면 사이트의 모든 JavaScript를 최적화할 수 있습니다. NitroPack은 또한 주 CPU 스레드에서 스크립트를 이동하고 사용자 상호 작용이 있을 때까지 스크립트를 지연시키는 고유한 방법을 가지고 있습니다. 자세한 내용은 아래에서 설명합니다.
  • 이미지 최적화 – 이미지를 자동으로 압축/크기 조정하고 WebP로 변환할 수 있습니다. 화면 크기에 따라 사용자에게 다양한 이미지를 동적으로 제공할 수 있는 새로운 적응형 크기 조정 기능도 있습니다.
  • HTML 최적화 – 주요 리소스에 대한 DNS 사전 연결과 같은 고급 세부 정보를 포함합니다.

이 이미지는 주요 기능을 매우 잘 요약하고 있습니다.

니트로팩 기능

NitroPack의 한 가지 독특한 점은 "독점 리소스 로더"입니다. 이것의 개념/이점은 꽤 복잡하지만 기본 아이디어는 NitroPack이 사이트 로드 방법 (특히 JavaScript)을 최적화하여 모든 개별 파일이 사용자 경험을 위한 최적의 방식으로 로드되도록 한다는 것입니다.

기본적으로 이 기능을 활성화하면 스크롤 없이 볼 수 있는 콘텐츠를 렌더링하는 데 필요한 최소 파일만 로드하고 사용자가 사이트와 상호작용하기 시작할 때까지 나머지 파일을 로드할 때까지 기다립니다. 이렇게 하면 가장 큰 콘텐츠가 포함된 페인트 측정항목을 포함하여 사이트의 초기 로드 시간을 크게 단축할 수 있습니다.

여기에서 모든 내용을 읽을 수 있습니다.

니트로팩 사용 방법

NitroPack의 포괄적인 사이트 속도 최적화 기능 외에도 간편한 설정은 가장 강력한 이점 중 하나입니다.

여러 사전 설정 최적화 모드 덕분에 말 그대로 완전히 최적화된 사이트를 단 몇 분 만에 가동하고 실행할 수 있습니다.

어떻게 작동하는지 봅시다…

1. 웹사이트 추가

시작하려면 NitroPack 대시보드를 통해 웹사이트를 추가해야 합니다.

NitroPack 사이트 추가

그런 다음 커넥터 도구를 사용하여 NitroPack 계정을 사이트에 연결할 수 있습니다. WordPress의 경우 WordPress.org의 전용 NitroPack 플러그인을 의미합니다.

니트로팩 워드프레스 플러그인

2. 최적화 모드 선택

이제 최적화 모드를 선택할 준비가 되었습니다. 이것은 NitroPack을 매우 간단하게 만드는 이유이기 때문에 NitroPack에서 내가 가장 좋아하는 부분 중 하나입니다.

대부분의 플러그인에서 수행해야 하는 것처럼 여러 개의 개별 설정을 수정하는 대신 NitroPack을 사용하면 필요에 따라 사전 설정 구성을 선택할 수 있습니다. 고급 사용자의 경우 여전히 땜질할 수 있습니다 .

WordPress 대시보드 또는 NitroPack 대시보드에서 선택할 수 있습니다.

5가지 다른 모드가 있지만 대부분의 사람들은 사이트의 기능을 유지하면서 성능 향상의 균형이 잘 맞는 강력 함을 선택하고 싶어할 것입니다.

많은 사람들은 또한 PageSpeed ​​점수와 Core Web Vitals를 가장 크게 향상시킬 수 있는 Ludicrous 모드를 좋아합니다. 그러나 JavaScript를 지연시키는 방식이 사이트의 특정 기능을 방해할 수 있으므로 이 모드에 주의하는 것이 좋습니다.

예를 들어 모바일 메뉴가 JavaScript에 의존하는 경우 Ludicrous 모드에서 이상한 동작이 발생할 수 있습니다. 반면에 CSS 기반 메뉴가 있는 경우 문제가 되지 않을 수 있습니다.

따라서 – 시작하려면 Ludicrous 모드로 자유롭게 놀고 문제가 발생하면 Strong 모드로 다시 축소할 준비를 하십시오.

NitroPack 최적화 모드

3. … 이익

많은 사용자에게 이것은 문자 그대로입니다. 구성 모드를 선택하면 NitroPack이 나머지를 처리하므로 성능에 대한 생각을 멈출 수 있습니다.

4. ...또는 Tinker(고급 사용자용)

고급 사용자를 위해 NitroPack은 다양한 옵션을 제공합니다. 특정 페이지, 스크립트, 쿠키, 리소스, 쿼리 매개변수 등을 제외할 수 있습니다.

또한 광고 스크립트를 최적화하고, 웹훅으로 캐시를 지우고(이를 WP 웹훅과 결합하여 재미를 더하고) 다른 고급 작업을 수행하는 기능과 같은 몇 가지 깔끔한 옵션을 얻을 수 있습니다.

NitroPack 고급 설정

일반 사용자라면 이 모든 것을 무시하셔도 됩니다. 그러나 고급 사용자라면 이러한 설정에 감사할 것입니다.

이러한 설정은 로딩을 지연시키고 싶지 않은 특정 스크립트를 제외할 수 있기 때문에 문제 없이 Ludicrous 모드를 사용하는 데 도움이 될 수 있습니다.

NitroPack 및 "Blackhat SEO" – 그게 진짜입니까?

다른 NitroPack 리뷰를 검색해 본 적이 있다면 NitroPack이 실제로는 그렇지 않아도 귀하의 사이트가 빠르게 로드된다고 Google을 속이는 "블랙햇 SEO" 도구라는 비난을 보았을 것입니다.

그래서 – 여기서 거래는 무엇입니까?

글쎄요, 대답은 꽤 기술적인 것이지만 NitroPack이 나쁜 일을 하고 있지 않다는 것은 꽤 분명하다고 생각합니다.

여기서 주요 문제는 실험실 속도 테스트 데이터와 실제 "현장" 속도 테스트 데이터 간의 차이인 것 같습니다.

  • 실험실 데이터(합성) – 속도 테스트 도구에서 수집한 시뮬레이션된 성능 데이터입니다.
  • 현장 데이터 – 실제 방문자가 경험한 사이트의 실제 성능 데이터입니다. 일반적으로 사이트에 트래픽이 충분한 경우 PageSpeed ​​Insights에서 사용할 수 있는 Chrome 사용자 경험 보고서를 통해 이를 수집합니다.

필드 데이터는 실제 성능(및 Google의 Page Experience SEO 알고리즘 업데이트)에 실제로 중요한 것이지만 대부분의 사람들은 실험실 데이터와 "점수" 대신 수집하기가 더 쉽기 때문에 너무 많이 집중합니다.

NitroPack의 독점 리소스 로더가 특정 프로세스를 메인 스레드에서 옮기고 JavaScript 실행을 지연시켜 Ludicrous 모드에서 작동하는 방식은 귀하의 사이트가 일부 실험실 속도 테스트 도구에서 "비정상적으로" 좋아 보인다는 것을 의미합니다( 많은 도구가 오프 스레드 프로세스 ).

NitroPack과 Ludicrous 모드를 사용하는 사이트는 특정 속도 테스트 도구에서 "의심스럽게" 좋게 보일 것입니다.

그러나 여기서 진짜 문제는 NitroPack이 Google을 "속이기 위해" 악의적으로 이 작업을 수행한다고 생각하는지 아니면 리소스 로더가 작동하고 사이트를 최적화하는 방식의 자연스러운 부산물인지 여부입니다.

개인적으로 NitroPack이 실제 거래라는 것이 매우 분명하다고 생각하며 이것은 NitroPack이 시스템을 게임하려는 것보다 일부 속도 테스트 도구가 작동하는 방식과 관련된 문제입니다.

이유는 다음과 같습니다.

우선, NitroPack은 NitroPack 사용자가 실험실 데이터에만 의존하기보다는 실제 사용자 성능 데이터를 보도록 권장하기 때문에 여기서 아무 것도 숨기려고 하지 않습니다.

NitroPack은 현장 데이터를 권장합니다.

또한 NitroPack은 NitroPack 대시보드에서 실제 필드 데이터를 전면 중앙에 배치하기 위해 노력하고 있습니다. 실제 현장 데이터를 보면 NitroPack이 실험실 데이터와 실제 현장 데이터 모두 를 크게 개선했음을 알 수 있습니다.

실제 데이터를 속일 수는 없습니다. 따라서 NitroPack이 실제로 사람들에게 빠른 시도를 하려고 한다면 사용자가 실험실 데이터보다 실제 데이터에 집중하도록 권장하는 것은 현명하지 않을 것입니다.

마지막 주장은 NitroPack이 Google이 궁극적으로 처벌할 일종의 검은 모자 SEO를 수행하고 있다는 것입니다.

솔직히, 이것은 나에게 의미가 없습니다.

첫째, 페이지 속도는 여전히 작은 순위 요소이므로 Google이 빠른 사이트가 있다고 생각하도록 "속이는" 것과는 다릅니다. Google은 사이트 속도가 그 자체로 순위를 향상시키는 것보다는 동등하게 관련성이 높은 사이트 간의 "타이브레이커"라고 말했습니다.

즉, 사이트가 2초에서 1초로 이동한다고 해서 모든 것이 달라지는 것은 아닙니다. 2초는 이미 Google의 타이 브레이커에서 이기기에 충분히 빠릅니다.

그 외에도, 얼마나 많은 인기 사이트가 NitroPack을 사용하고 있고 여전히 좋은 순위를 기록하고 있기 때문에 SEO 주장이 말이 되지 않는다고 생각합니다.

사실, 우리는 여기 WP Mayor에서 NitroPack을 사용합니다! SEO에 부정적인 영향이 있다고 생각했다면 그렇게 하지 않았을 것입니다.

이를 확인하려면 WP Mayor의 헤더를 보면 실제로 NitroPack을 사용하고 있음을 알 수 있습니다.

WP 시장 NitroPack 헤더

마지막으로, 정말 걱정된다면 Google Search Console의 URL 검사 도구를 사용하여 Google이 크롤링할 때 NitroPack으로 사이트가 어떻게 보이는지 확인할 수 있습니다. 그렇게 하면 Google이 NitroPack이 없는 경우와 마찬가지로 페이지의 전체 콘텐츠를 감지하는 것을 볼 수 있습니다.

즉, Google의 자체 크롤링 도구에 따라 Google의 눈에는 사이트 콘텐츠에 아무런 차이가 없습니다.

NitroPack 성능 전/후

긴 토론을 마치고 WP Mayor의 성능 데이터를 살펴보고 싶습니다.

실험실 데이터보다 필드 데이터가 더 중요하다고 위에서 말했지만 여기에서는 합성 속도 테스트 도구를 사용할 것입니다. 글쎄요, 실제 사용자 로드 시간으로 전후 데이터를 수집하기가 어렵기 때문입니다.

그러나 전체 페이지 속도 경험을 캡처하는 데 평균보다 더 나은 작업을 수행하는 WebPageTest를 사용할 것입니다. 전체 페이지 속도가 완전히 로드된 메트릭과 문서 전체 메트릭을 모두 보여주기 때문입니다.

완전히 로드된 메트릭은 NitroPack이 초기 로드에서 연기/지연하는 많은 JavaScript를 캡처합니다.

우리는 모바일 우선 세계에 살고 있기 때문에 모바일 우선 접근 방식으로 WebPageTest를 구성했습니다.

  • 에뮬레이트된 iPhone 8에서 테스트
  • 조절된 LTE 연결 사용
  • 9개의 개별 테스트를 실행하고 중앙값을 취합니다.

NitroPack이 있거나 없는 WP Mayor 홈페이지의 데이터는 다음과 같습니다.

니트로팩 사용 전 니트로팩 사용
첫 번째 바이트까지의 시간 0.722초 0.742초
가장 큰 콘텐츠가 있는 페인트 2.123초 0.970초
누적 레이아웃 이동 0.006 0
총 차단 시간 * 0.174초 0.033초
문서 완료 시간 3.063초 1.598초
완전한 HTTP 요청 문서화 88 9 **
문서 전체 크기 1.45MB 0.48MB
완전히 로드된 시간 3.161초 2.457초
완전히 로드된 HTTP 요청 89 46
완전히 로드된 크기 1.45MB 0.85MB

*이것은 필드 데이터에서만 사용할 수 있는 첫 번째 입력 지연에 대한 좋은 프록시입니다 .

**NitroPack이 이러한 스크립트를 많이 지연시키기 때문에 HTTP 요청이 처음에는 정말 낮다는 것을 알 수 있습니다.

전반적으로 NitroPack을 사용하면 특히 가장 큰 콘텐츠가 포함된 페인트 및 문서 완료 메트릭과 관련하여 전반적으로 상당히 개선된 것을 볼 수 있습니다.

몇 번의 클릭만으로 이러한 개선 사항을 달성할 수 있습니다. 다시 말하지만, NitroPack을 독특하게 만드는 것은 성능 향상 단순성의 조합이라고 생각합니다.

PageSpeed ​​Insights 점수에 관심이 있으시면( 개인적으로 저는 아닙니다 ) NitroPack이 있거나 없는 WP Mayor 홈페이지에 대한 점수도 수집했습니다.

니트로팩 사용 전 니트로팩 사용
모바일 점수 38 80
데스크탑 88 96

특히 모바일 점수에서 엄청난 개선을 볼 수 있습니다.

니트로팩 가격

이제 다른 모든 것을 다루었으므로 NitroPack 가격에 대해 이야기해 보겠습니다.

우선 NitroPack 에는 매월 최대 5,000명의 방문자를 지원하는 무료 요금제와 모든 기능이 포함된 1GB CDN 대역폭이 있습니다. 트래픽이 적은 사이트가 있는 경우 해당 무료 계획이 적어도 처음에는 잘 작동할 수 있습니다.

그러나 무료 계획의 단점은 사이트 바닥글에 NitroPack 배지가 포함되어 있다는 것입니다. 그다지 방해가되지는 않지만 명심해야 할 사항입니다.

무료 한도를 초과하거나 NitroPack 배지를 제거하려는 경우 요금제를 지불해야 합니다. NitroPack의 유료 요금제는 월별 및 연간 청구를 모두 허용합니다. 매년 지불하면 2개월을 무료로 사용할 수 있습니다.

모든 계획에는 동일한 기능이 있습니다. 유일한 차이점은 페이지 보기 제한과 CDN 대역폭입니다. 또한 각 계획은 단일 사이트만 지원합니다. 사이트가 많은 경우 NitroPack의 영업 팀에 연락하여 비용을 절감할 수 있는 맞춤형 에이전시 및 다중 사이트 계획 옵션에 대해 알아볼 수 있습니다.

니트로팩 가격

사이트의 페이지 뷰가 100만 회 이상이거나 CDN 대역폭이 500GB 이상인 경우 NitroPack 영업팀에 연락하여 맞춤형 계획을 요청할 수도 있습니다.

또한 모든 계획에는 14일 환불 보장이 제공되므로 위험을 감수할 필요가 없습니다.

NitroPack에 대한 최종 생각

전반적으로 NitroPack을 사용하여 웹 사이트 속도를 높이는 데는 몇 가지 확실한 장단점이 있다고 생각합니다.

NitroPack의 주요 장점은 매우 간단 하고 포괄적 이라는 것입니다. JavaScript를 지연시키고 주 CPU 스레드에서 이동시키는 방식과 같은 고유한 접근 방식을 포함하여 거의 모든 성능 최적화 전술을 구현하는 하나의 도구입니다. 0에서 완전히 최적화된 사이트로 가는 더 간단한 방법을 찾지 못할 것이라고 생각합니다.

많은 사람들, 특히 비기술적인 사람들에게 이것은 정말 강력한 가치 제안입니다.

NitroPack의 주요 단점은 적어도 WordPress 공간에서는 비싸다 는 것입니다. 예산이 충분하다면 WP Rocket과 같은 사이트를 최적화하는 더 저렴한 사이트 속도 플러그인을 찾거나 완전히 무료인 WordPress 플러그인을 사용하여 꽤 좋은 최적화 스택을 구축할 수도 있습니다.

결국, 이런 식으로...

사이트 속도는 매우 중요하므로 무시할 수 없습니다.

사이트 속도와 관련하여 다음 질문에 답해야 합니다.

사이트의 속도 문제를 해결하기 위해 거의 원 클릭 솔루션에 대해 약간의 프리미엄을 지불할 의향이 있습니까?

기술적인 사람이 아니거나 성능 최적화 대신 콘텐츠 제작 및 사이트 마케팅에 집중하고 싶다면 "예" 범주에 적합할 것입니다.

반면에 비용을 최대한 낮추고 싶다면 "아니요" 범주에 속할 수 있습니다. 이 경우 더 저렴하거나 무료 WordPress 페이지 속도 플러그인을 선호할 수 있습니다.

해당 플러그인이 NitroPack만큼 간단합니까? 설마. 그러나 기꺼이 노력한다면 무료 또는 저렴한 도구를 사용하여 빠르게 로딩되는 웹사이트를 구축할 수 있습니다.

경계에 서 있다면 NitroPack에 가입하고 몇 가지 테스트를 실행하는 것이 좋습니다. 설정 프로세스는 몇 분 밖에 걸리지 않으므로 많은 시간을 투자할 필요가 없습니다.

그 외에도 14일 환불 보장이 있으므로 돈을 위험에 빠뜨리지 않아도 됩니다( 또는 NitroPack 배지에 문제가 없는 경우 무료 요금제를 사용해 볼 수 있음 ).

니트로팩 웹사이트