Jetpack Boost – 웹사이트 속도, 성능 및 주요 CSS

설명

Jetpack Boost로 페이지 성능을 최적화하여 워드프레스 사이트의 속도를 높이세요. 쉽게 원클릭 최적화를 활성화하여 Core Web Vitals를 강화하세요.

더 빠른 웹사이트의 이점:

  • Google에서 순위가 올라갑니다.
  • 이탈률을 개선하세요(사람들이 사이트에 더 오래 머무릅니다).
  • 전환율을 늘리세요.

검색 엔진 목록에 더 잘 표시되도록 워드프레스 사이트의 성능을 강화하고 Core Web Vitals 점수를 개선하는 원클릭 최적화를 통해 웹사이트 성능을 증대하고 웹사이트 속도를 높이세요.

Core Web Vitals를 개선하면 Google에서 순위를 높이는 데 도움이 됩니다. 웹사이트 속도가 빨라지면 SEO도 개선되어 이탈률을 줄이고 전자상거래 전환율을 늘리는 데 도움이 됩니다.

  • LCP(최대 콘텐츠풀 페인트): 로딩 성능을 측정합니다. LCP를 개선하고 웹사이트 로딩 속도를 개선하세요.
  • FID(최초 입력 지연): 상호작용성을 측정합니다. 사용자 환경이 개선되려면 페이지의 FID가 낮아야 합니다.
  • CLS(누적 레이아웃 이동): 시각적 안전성을 측정합니다. CLS를 줄이면 사용자 환경 개선에 도움이 됩니다.

성능 모듈

세계에서 가장 성공적인 웹사이트에서 사용되는 것과 동일한 기법으로 웹사이트를 최적화하세요.

웹사이트 성능을 높이는 데 사용되는 각 기법은 활성화하여 사용해 볼 수 있는 모듈로 묶여 있습니다.

현재 6가지 성능 모듈을 플러그인에서 사용할 수 있습니다.

  1. CSS 로딩 최적화에서는 홈페이지, 글 및 페이지에 대한 주요 CSS가 생성됩니다. 특히 모바일 장치를 사용하는 독자의 경우 콘텐츠가 화면에 훨씬 더 빠르게 표시될 수 있습니다.

    web.dev에서 주요 CSS 생성에 대해 자세히 알아보세요.

  2. 페이지 캐시는 정적 파일로 페이지를 저장하므로 사이트 속도가 개선됩니다. 이러한 파일은 방문자에게 빠르게 제공되어 로드 시간이 감소하고 사용자 환경이 개선됩니다.

  3. 필수적이지 않은 JavaScript 지연 실행을 통해 일부 작업이 페이지 로드 후로 이동하므로 중요한 시각적 정보를 더 빨리 볼 수 있으며 웹사이트 로드가 빨라집니다.

    web.dev에서 JavaScript 지연 실행에 대해 자세히 알아보세요.

  4. 이미지 가이드는 웹사이트의 이미지를 최적화하려는 모든 사람에게 꼭 필요한 기능입니다. 이 가이드를 통해 사이트의 이미지 크기와 규격이 적합한지 확인할 수 있습니다. 이는 사용자 환경, 페이지 속도 및 사이트 순위 향상에 매우 중요합니다. 가이드에 간략하게 설명된 팁과 모범 사례에 따라 이미지 파일 크기를 줄이고 사이트 속도를 높일 수 있습니다. 지원 페이지를 확인하여 이 기능의 자세한 내용과 더 빠르고 더 원활한 사용자의 웹사이트 환경을 달성하는 데 이 기능이 어떻게 도움이 될 수 있는지 알아보세요.

  5. 이미지 CDN을 통해 사이트에서 자동으로 크기가 조정된 이미지를 젯팩의 전 세계 콘텐츠 전송 네트워크에서 바로 현대적인 웹 형식으로 제공할 수 있습니다.

    web.dev에서 이미지 CDN에 대해 자세히 알아보세요.

  6. CSS와 JS 연결 및 축소를 통해 JavaScript와 CSS 리소스가 결합되고 축소되어 서버에 대한 요청 수와 크기가 줄어들므로 콘텐츠가 더 빠르게 로드됩니다.

    web.dev에서 파일 축소에 대해 자세히 알아보세요.

사이트를 업데이트할 때마다 주요 CSS를 수동으로 생성하기가 힘드신가요? 자동화된 주요 CSS로 부담을 덜어드리겠습니다. 사이트를 업데이트할 때마다 주요 CSS가 자동으로 다시 생성되고 성능 점수가 업데이트됩니다. 업그레이드하면 전담 이메일 지원도 이용할 수 있습니다.

젯팩의 마음 💚을 담아

이는 시작에 불과합니다!

더 많은 기능과 개선 사항을 Jetpack Boost에서 제공하려고 열심히 노력하고 있습니다. 여러분의 생각과 아이디어를 알려주세요!

또한 플러그인의 초기 연구 및 범위 지정을 도와주고 프로젝트 내내 당사 팀과 협력한 XWP 팀에 특별한 감사를 전하고 싶습니다.

스크린샷

  • Jetpack Boost 주요 CSS 생성
  • Jetpack Boost 속도 향상

설치

  1. 플러그인 디렉터리를 통해 Jetpack Boost를 설치하고 활성화하세요.
  2. 젯팩 연결 활성화
  3. 성능 모듈을 하나씩 켜고 성능 점수가 어떻게 변하는지 지켜보세요.

FAQ

Jetpack Boost는 워드프레스 사이트의 속도를 높이는 데 어떤 도움이 되나요?

Jetpack Boost는 WordPress 사이트에서 사용자 브라우저로 데이터를 전송하는 방식을 약간 변경해서 브라우저가 여러분의 사이트를 더 빠르게 표시하게 합니다.

Jetpack Boost에는 개별적으로 작동하여 사이트의 성능을 개선할 수 있는 몇 가지 개별 기능이 점점 더 많이 포함되고 있습니다. 포함된 기능은 다음과 같습니다.

  • CSS 로딩 최적화: 이 기능에서는 사이트의 초기 콘텐츠를 최대한 빨리 표시하려면 사이트에 필요한 가장 중요한 CSS를 결정하고 사이트 헤더에 바로 임베드합니다.
  • 페이지 캐시: 이 기능에서는 동적 요소를 생성할 필요 없이 정적 HTML 파일로 웹사이트의 페이지를 저장합니다. 따라서 방문자에게 페이지가 더 빠르게 표시되어 기다리는 시간이 감소하고 전반적인 사이트 성능이 개선됩니다.
  • 필수적이지 않은 JavaScript 지연 실행: 이 기능에서는 사이트 표시에 필수적이지 않다고 간주하는 모든 JavaScript를 강제로 사이트의 기본 콘텐츠가 로드된 후에 로드되도록 합니다.
  • 이미지 CDN: 이 기능을 통해 자동으로 이미지가 방문자의 화면에 더 적절한 크기로 조정되고, 현대적인 이미지 형식으로 변환되며, 젯팩의 전 세계 서버 네트워크에서 제공됩니다.
  • JS 연결: 이 기능을 통해 JavaScript 리소스의 크기가 줄어들고 더 적은 수의 파일로 결합되므로 더 적은 요청으로 사이트를 더 빠르게 로드할 수 있습니다.
  • CSS 연결: JavaScript 연결과 마찬가지로 이 기능을 통해 CSS 파일이 축소되어 더 적은 요청으로 로드할 수 있습니다.

Jetpack Boost 사용하면 어떤 속도 개선을 예상할 수 있나요?

웹사이트 성능은 복잡하며 수많은 요인의 영향을 받을 수 있습니다. 결과적으로 각 사이트에 미치는 영향을 정확하게 예측하기 어렵습니다.

일반적으로 처음에 속도 점수가 낮을수록 Jetpack Boost가 성능에 미칠 수 있는 영향이 클 수 있습니다. 단순히 Jetpack Boost를 설치하고 사용하여 속도 점수가 25점까지 개선된 사용자 보고서를 본 적이 있습니다.

그러나 성능은 아주 많은 요인의 영향을 받을 수 있으므로 일부 드문 경우에 Jetpack Boost가 성능에 약간 부정적인 영향을 미칠 수도 있습니다.

Jetpack Boost를 설치하고 직접 사용해 보는 것이 좋습니다. 사이트에 미치는 영향을 점검하는 속도 점수 측정 도구가 포함되어 있습니다.

Jetpack Boost로 필수적이지 않은 CSS의 실행도 지연시킬 수 있나요?

‘CSS 로딩 최적화’ 기능이 활성화되어 있으면 자동으로 Jetpack Boost에서 필수적이지 않은 CSS의 실행을 지연시킵니다.

‘CSS 로딩 최적화’ 기능은 사이트 페이지를 최대한 빠르게 표시하는 데 필요한 가장 중요한 CSS 규칙(흔히 ‘주요 CSS’라고 함)을 알아내서 주요 콘텐츠가 로딩될 때까지 다른 모든 CSS 규칙의 로딩을 연기합니다.

Web Vitals가 무엇인가요?

Web Vitals는 Google에서 웹사이트의 사용자 환경을 더 잘 이해하려고 사용하는 측정값입니다. Web Vitals 점수를 개선하면 사이트의 사용자 환경도 개선됩니다.

web.dev에서 Web Vitals에 대해 자세히 알아보실 수 있습니다.

Jetpack Boost 플러그인은 Core Web Vitals를 어떻게 개선하나요?

Core Web Vitals의 각 지표는 사이트가 로딩되어서 새로운 방문자의 화면에 얼마나 빠르게 표시되는지와 관련이 있습니다.

Jetpack Boost에서는 콘텐츠가 더 빠르게 로드될 수 있도록 데이터가 WordPress 사이트에서 사용자의 브라우저로 전송되는 방식을 약간 변경합니다. 결과적으로 Core Web Vitals 점수가 개선될 수 있습니다.

예컨대 ‘CSS 로딩 최적화’ 기능은 가장 중요한 CSS 규칙이 사용자 브라우저에 최대한 일찍 전송되게 하여 FCP(최초 콘텐츠풀 페인트) 점수와 CLS(누적 레이아웃 이동) 점수를 모두 개선합니다.

이 플러그인에 젯팩이 필요한가요?

Jetpack Boost는 젯팩 브랜드의 일부이지만, 실행하는 데는 젯팩 플러그인이 필요하지 않습니다. 젯팩의 별도 플러그인이며 항상 그대로 유지됩니다.

이 플러그인을 사용하면 어떤 웹사이트든 성능이 개선되나요?

이 플러그인에는 거의 모든 워드프레스 사이트의 성능을 개선하는 데 도움이 될 수 있는 다양한 성능 개선 사항이 포함되어 있습니다.

다만, 사이트가 이미 굉장히 잘 최적화되어 있다면 Jetpack Boost를 통해 사이트를 개선할 부분이 많지 않을 수 있습니다.

Jetpack Boost에는 사이트의 속도 점수를 측정하는 도구가 포함되어 있습니다. 이 도구를 사용해 보고 여러분에게 어떤 영향을 미칠 수 있는지 확인해 보시길 바랍니다.

작동하는지 어떻게 알 수 있나요?

모든 사이트가 다르므로 각 모듈의 성능 이점이 사이트마다 다를 수 있습니다. 따라서 성능 모듈을 하나씩 활성화하여 사이트의 성능 향상을 측정하는 것이 좋습니다. 무료로 사용하여 성능 향상을 측정할 수 있는 도구가 많이 있습니다.

Google PageSpeed 측정은 Jetpack Boost 알림판에서 기본적으로 제공됩니다.

Jetpack Boost로 속도를 최적화해도 안전한가요?

그렇습니다. Jetpack Boost는 어떤 워드프레스 사이트에서든 안전하게 사용할 수 있습니다.

Jetpack Boost에서는 사이트의 콘텐츠를 조작하지 않으며, 콘텐츠가 더 빨리 표시되도록 콘텐츠를 사용자 브라우저로 전송하는 방법만 수정합니다.

그래서 다른 플러그인과 호환되지 않는 경우 Jetpack Boost의 모든 기능을 안전하게 해제할 수 있습니다.

Jetpack Boost는 다른 속도 최적화 플러그인과 어떤 점에서 차별화되나요?

WordPress의 속도 최적화 플러그인은 복잡하고 사용자가 이해하기 어려울 수 있습니다. 주로 간단한 설명이 포함된 확인란 열이 제공되며, 사용자의 변경하거나 선택한 각 사항에 따른 영향을 측정하는 도구가 포함되어 있지 않습니다.

Jetpack Boost는 사용 편의성을 최대화하고자 하며, 사용자가 선택 항목의 영향을 즉시 측정하는 데 도움이 되는 속도 점수 표시기가 포함되어 있습니다.

정적 페이지 캐시와 연동하나요?

물론입니다! WP Super Cache 또는 W3 Total Cache와 같은 플러그인이 설치되어 있다면 Jetpack Boost는 성능 이점을 높이는 데만 도움이 됩니다! Jetpack Boost 개선 사항이 반영되려면 캐시가 지워질 때까지 기다려야 한다는 점을 유념하세요.

Jetpack Boost를 이용하면 대용량 데이터베이스가 있는 웹사이트도 더 빨리 로딩되나요?

지금은 Jetpack Boost에 대용량 데이터베이스를 대상으로 하는 최적화가 포함되어 있지 않습니다. 그러나 사용자의 성능 향상에 도움이 되는 새로운 방법을 항상 찾고 있습니다.

Jetpack Boost가 이미지 최적화에 도움이 되나요?

젯팩 부스트의 이미지 CDN 기능을 통해 자동으로 이미지가 더 현대적인 웹 형식으로 전환되므로 품질 손실 없이 이미지 파일 크기가 더 작아집니다.

Jetpack Boost는 다른 캐싱 및 속도 최적화 플러그인과 호환되나요?

거의 예외 없이 Jetpack Boost는 대다수 캐싱 및 속도 최적화 플러그인과 함께 실행하는 데 문제가 없습니다. 가이드라인을 말씀드리자면, 같은 기능을 여러 최적화 플러그인에서 활성화하지 않는 것이 좋습니다.

예를 들어, 플러그인 2개에서 필수적이지 않은 JavaScripts의 지연 실행을 시도하면 결국 서로 충돌하여 사이트에서 표시 문제가 발생할 수 있습니다.

호환성 문제가 발생하면 알려주세요. 언제든지 Jetpack Boost 지원 포럼에 글을 남기실 수 있습니다.

후기

2024년 3월 25일 1 reply
Da quando ho installato il plugin, diversi conflitti con tutti i temi (generated press, ocean wp, astra ecc.). In particolare nel mio caso non permetteva la visualizzazione del menu su dispositivi mobili, causando la perdita del 90% il numero degli utenti. Tutto è ritornato alla normalità dopo la disattivazione del plugin English: Since I installed the plugin, several conflicts with all themes (generated press, ocean wp, astra etc.). In particular in my case it did not allow the menu to be displayed on mobile devices, causing the number of users to be lost by 90%. Everything returned to normal after deactivating the plugin
2024년 3월 3일 1 reply
It solved css issues I had since long time
2024년 1월 25일 1 reply
It does speed up the website with few clicks!
모든 452 평가 읽기

기여자 & 개발자

“Jetpack Boost – 웹사이트 속도, 성능 및 주요 CSS”(이)가 27(으)로 번역되었습니다. 기여해 주셔서 번역자님께 감사드립니다.

자국어로 “Jetpack Boost – 웹사이트 속도, 성능 및 주요 CSS”(을)를 번역하세요.

개발에 관심이 있으십니까?

코드 탐색하기는, SVN 저장소를 확인하시거나, 개발 기록RSS로 구독하세요.

변경이력

3.1.1 – 2024-03-11

Added

  • Cache: Added a Page Cache module.
  • Defer JS: Automatically exclude JSON-LD schemas.
  • Speed Scores: Added support for annotating points of time in the speed score history graph.

Changed

  • General: Better error handling for invalid data when running wp-admin pages.
  • General: Enabled React.StrictMode for development.
  • General: Improved error handling.
  • General: Indicate compatibility with the upcoming version of WordPress, 6.5.
  • General: Switch to using Blog ID links instead of site slugs in checkout flow.
  • Image Guide: Removed beta flag

Fixed

  • Critical CSS: Prevent errors when page_for_posts misconfigured.
  • Critical CSS: Prevent missing archive pages from breaking the generation process.
  • General: Prevent missing pricing information from affecting the getting started flow.
  • Image Size Analysis: Update summary groups to align with status icons.
  • Concatenate JS/CSS: Ensure minification is enabled.

이전 변경 로그는 여기에서 확인하세요