이상적인 자동 최적화 설정 + Cloudflare / StackPath CDN (2020)

자동 최적화 훌륭한 플러그인이지만 캐싱을 위해 WP Rocket은 일반적으로 Facebook 설문 조사에서 1 위입니다..


왜 그것을 사용하겠습니까?

일부 호스트는 GoDaddyWP 엔진 대부분의 캐시 플러그인을 차단합니다 (자체 내장 캐싱 시스템이 있기 때문에). HTML, CSS, JavaScript, Google Fonts 또는 CDN (콘텐츠 전송 네트워크) 최적화와 같은 작업은 수행하지 않습니다. 따라서 호스트의 캐싱 시스템은 캐싱에 효과적 일 수 있지만 Autoptimize는 물건의 “휴식”(GTmetrix + Pingdom의 고정 항목)을 도와줍니다. Google PageSpeed ​​통계를 피하십시오 로드 시간도 측정하지 않습니다.

자동 최적화 개발자조차도 플러그인 페이지에서 캐시 플러그인과 결합 할 때 가장 잘 작동한다고 말합니다. 무료 경로로 가고 있다면 Swift를 추천합니다. WP 로켓 구성하기가 쉬워서 연간 $ 49를 할 수 있다면 (내가 사용하고 GTmetrix에서 100 % 점수를 얻습니다) 대부분의 캐시 플러그인이하지 않는 많은 기능 (데이터베이스 정리, 로컬에서 Google Analyitcs 코드 호스팅, 하트 비트) 제어 및 Cloudflare + 다른 CDN과의 통합). WP Rocket에 대한 튜토리얼이 있습니다., 빠른, WP Fastest Cache, W3TC 및 WP Super Cache.

자동 최적화 설정을 구성하겠습니다. 또한 CDN을 추가하는 방법을 보여 드리겠습니다 (이상적으로 구름 플레어StackPath) 각 데이터 센터에는 고유 한 데이터 센터 세트가 있으며 더 많은 데이터 센터는 더 빠른 컨텐츠 전달입니다. CDN을 권장합니다 워드 프레스 최적화 가이드.

플러그인 자동 최적화

1. JS, CSS, & HTML

JavaScript, CSS 및 HTML 파일을 최적화하기 위해이 모든 것을 활성화 한 다음 아래 지침을 참조하십시오..

JS CSS HTML 설정 자동 최적화

자바 스크립트 코드 최적화

  • JS 파일의 집계: 활성화, GTmetrix에서 권장하는 JavaScript 파일을 결합합니다. 비활성화하면 개별 파일이로드되고 결합되지 않습니다.
  • 인라인 JS 집계: 사용, HTML 파일에있는 JavaScript 파일을 결합합니다. 자동 완성 기능은 기본적으로 사이트에서 문제가 발생하면 JavaScript 파일을 제외하거나 사용 중지합니다..
  • 자바 스크립트 강제 : JavaScript 오류가 없으면 사용하지 않습니다. JavaScript 렌더링 차단 (속도에 최적이 아님)을 생성하므로 문제가있는 파일을 찾고이 옵션을 선택하는 것보다 제외시키는 것이 좋습니다..
  • 자동 최적화에서 스크립트 제외: 특정 JavaScript 설정을 활성화 한 후 오류가 발생하면 문제가있는 JavaScript를 찾아 여기에서 파일을 제외하십시오..
  • try-catch 래핑 추가: JavaScript 오류가 없으면 사용하지 않습니다. 이것은 강제로 JavaScript를 강제로 활성화하지 않고 JS 오류를 해결하는 또 다른 방법입니다.

CSS 코드 최적화

  • CSS 파일 집계: CSS에 대해서만 JS 파일을 집계하는 것과 동일한 기능.
  • 인라인 CSS 집계: CSS에 대해서만 인라인 JS 파일을 집계하는 것과 동일한 기능을 사용합니다. 로드 시간 + GTmetrix 점수를 더욱 향상시키기 위해 둘 다 활성화.
  • 데이터 생성 : 이미지의 URI: CDN을 사용하는 경우 비활성화합니다. MaxCDN (스택 패스) 경고합니다 이를 활성화하면 CDN 대신 원본 서버에서 이미지가 제공됩니다. 이를 사용하면 처음에는 HTTP 요청이 줄어들지 만 CDN을 설정하고이를 통해 이미지를 제공 한 후에는 그렇지 않을 수 있습니다..
  • CSS 인라인 및 지연: 활성화,이 옵션 또는 FAQ에서 자동 완성이 권장하지 않는 “모든 CSS 인라인”만 활성화 할 수 있습니다. “모든 CSS를 인라인하면 CSS가 렌더링되지 않게 차단되지만 기본 HTML 페이지가 크게 커져 더 많은”왕복 “이 필요합니다.
  • 모든 CSS 인라인: disable, Autoptimize는 이것을 사용하지 않는 것이 좋습니다.
  • 자동 최적화에서 CSS 제외: 특정 CSS 설정을 활성화 한 후 오류가 발생하면 문제가있는 CSS 파일을 찾아 여기에서 제외하십시오. 참고 : 기타 옵션에서 “제외 된 CSS 및 JS 축소”옵션을 비활성화해야합니다..

2. CDN 옵션

여기가 당신의 CDN URL 간다 (아래 지침). Cloudflare는 CDN URL을 제공하지 않습니다 (이름 서버를 대신 변경 함). CDN 기본 URL은 특히 Cloudflare가 아닌 StackPath, KeyCDN 및 기타 CDN 용입니다. CDN에 더 많은 데이터 센터가 있고 더 많은 데이터 센터가 있기 때문에 StackPath + Cloudflare를 모두 사용하는 것이 좋습니다..

1 단계: CDN에 가입하십시오. 저는 34 개 이상의 데이터 센터를 가진 StackPath를 사용합니다.이 센터는 미국에 위치하고 있으며 대부분의 방문자가있는 곳입니다. 30 일 무료 평가판으로 월 $ 10입니다..

StackPath- 데이터 센터

2 단계: StackPath 대시 보드에서 CDN 탭을 클릭하고 StackPath CDN 사이트 만들기.

StackPath-CDN- 탭

StackPath-CDN- 도메인

StackPath- 서버 -IP- 주소

*이 섹션의 5 단계에서 필요에 따라 서버 IP 주소를 복사하십시오..

StackPath-CDN-URL-Autoptimize

3 단계: http : // 또는 https : //를 사용하여 CDN URL을 자동 완성에 붙여 넣기.

CDN URL 자동 최적화

4 단계: StackPath에서 CDN → 캐시 설정으로 이동 한 다음“모두 제거”를 클릭하십시오.

StackPath-Purge-Cache

5 단계: StackPath에서 서버 IP 주소 허용 (WAF → 방화벽).

StackPath- 화이트리스트 -IP

6 단계: GTmetrix에서 사이트를 실행하고 YSlow에서 “콘텐츠 전송 네트워크”가 녹색이어야합니다.

CDN GTmetrix YSlow

3. 기타 설정

기타 설정은 다음과 같습니다.

기타 설정 자동 최적화

집계 된 스크립트 / css를 정적 파일로 저장 – 활성화 된 경우 이는 CSS 및 JS 파일이 캐시에 저장되고 서버를 통해 제공됨을 의미하므로 호스팅에서 이러한 파일을 처리하지 않으면 활성화하십시오..

제외 된 CSS 및 JS 파일 축소 – 특정 CSS 및 JavaScript 파일을 제외하는 경우 파일을 최적화하려고 할 때 문제가 발생하여 축소하지 않기 때문입니다..

로그인 한 편집자 / 관리자를 위해 최적화 – 비활성화, 일반적으로 Cloudflare 성능 기능을 포함하여 WordPress 관리자에서 성능 기능을 비활성화하려고합니다..

4. 이미지 설정

자동 최적화는 또한 이미지를 더 빠르게로드하는 데 도움이 될 수 있습니다.

이미지 자동 최적화 설정

이미지 최적화 – 웹 사이트의 URL이를 가리 키도록 변경됩니다. ShortPixel의 CDN. 무손실 압축 인 경우 모양에 영향을 미치지 않지만 더 빠르게로드됩니다..

이미지 최적화 품질 – 압축과 품질 간의 고유 한 균형을 찾으십시오 (광택 사용). ShortPixel과 각 압축 수준의 차이점은 다음과 같습니다.

ShortPixel 이미지 압축 수준

  • 로시: 대부분의 압축, 품질 손실.
  • 광택: 중간 압축, 적은 품질 손실.
  • 무손실: 낮은 압축, 최저 품질 손실.

지원되는 브라우저에서 WebP로드 – WebP 이미지 및 지연로드 이미지를 사용하는 경우 사용 가능.

지연로드 이미지 – 페이지를 아래로 스크롤 할 때 지속적으로 이미지를로드하면 사용자에게 성 가실 수 있으므로 개인적으로 이미지를 게으르지 않습니다. 예, 요청 횟수가 줄어들고 구글 추천 더 빠른 로딩 시간을 위해 성가시다. 이것은 전적으로 당신에게 달려 있습니다.

5. 중요 CSS

이것은 criticalcss.com 파워 업 플러그인 자동 최적화.

프리미엄이 필요합니다 criticalcss.com에서 유료 플랜 (월 $ 7).

플러그인은 중요한 CSS 규칙을 생성하여 전체 CSS가로드되기 전에 페이지가 렌더링되도록하여 “렌더링 시작 시간”을 향상시킵니다. 플러그인 설치, 계획 가입, 자동 CSS의“Critical CSS”섹션에 Critical CSS API 키를 입력하면 플러그인이 나머지를 수행하기 만하면됩니다. 플러그인 확인 FAQ 페이지 사용자 정의 구성에 대한 자세한 내용.

개인적으로 사용하지 않고 더 강력한 서버에서 월 $ 7를 추가로 사용하고 싶습니다..

criticalcss com 전원 켜기 자동 최적화

중요한 CSS 설정 자동 최적화

6. 추가 설정

자동 최적화 추가 설정

구글 글꼴 – 사용하는 경우 활성화 구글 글꼴 외부 리소스 (Google Font 라이브러리)에서 가져 오면로드 시간이 느려집니다. 글꼴로드를 볼 수없는 가시성없이로드 시간이 향상되기 때문에 ‘헤드에 결합 및 연결’옵션을 선호합니다 (일반적으로 비동기식으로로드 할 때 발생 함). 마지막 Google 글꼴 옵션 인 “글꼴을 비동기식으로 결합 및로드” webfont.jsGTmetrix에서 어떤 결과가 더 좋은지 확인하십시오.

이모티콘 제거 – 사용 (이모지가로드 시간에 좋지 않습니다).

정적 리소스에서 쿼리 문자열 제거 – 쿼리 문자열은 일반적으로 플러그인에 의해 생성되며 (GTmetrix / Pingdom에서) 간단히 활성화 할 수는 없지만 시도해 볼 수 있습니다. 더 좋은 해결책은 사이트에서 높은 CPU 플러그인을 확인하고 경량 플러그인으로 교체하는 것입니다. 대부분의 CPU 플러그인에는 소셜 공유, 갤러리, 페이지 빌더, 관련 게시물, 통계 및 라이브 채팅 플러그인이 포함됩니다. 또한 불필요한 플러그인을 모두 삭제하고 데이터베이스를 정리해야합니다 (예 : WP 최적화) 제거 된 플러그인으로 남은 테이블을 지우려면.

타사 도메인에 사전 연결 – 브라우저가 외부 리소스 (Google Fonts, Analytics, Maps, Tag Manager, Amazon Store 등)의 요청을 예상 할 수 있도록 도와줍니다. 이들은 GTmetrix 보고서에서 일반적으로 “DNS 조회 감소”로 표시되지만 아래는 일반적인 예입니다..

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

특정 요청 미리로드 – 예압 및 브라우저 리소스 힌트 WP 로켓에서, 그러나 기본적으로 특정 파일이 우선 순위로 다운로드되도록합니다..

비동기 자바 스크립트 파일 – 즉, 콘텐츠가 겹친 콘텐츠가 빠르게로드되지 못하게합니다. 이 튜토리얼 JavaScript 차단 렌더링 GTmetrix와 Pingdom에 JavaScript 오류가 표시되면 비동기 JavaScipt 플러그인 트릭을 할 수도 있습니다.

YouTube 동영상 최적화 – 사이트에 비디오가있는 경우, WP YouTube Lyte 지연로드는 사용자가 아래로 스크롤하여 재생 버튼을 클릭 할 때만로드되므로 YouTube 서버에 대한 초기 요청을 제거합니다. 이렇게하면 페이지에서 가장 무거운 요소 중 하나 인 비디오가 포함 된 콘텐츠의로드 시간을 몇 초 단축 할 수 있습니다. WP Rocket 및 Swift Performance에는 이러한 설정이 내장되어 있으므로 캐시 플러그인으로 사용하는 경우 필요하지 않습니다..

7. 더 최적화

사이트를 더욱 최적화하려면 다음 도구를 권장합니다.

WP 로켓 – 여러 Facebook 설문 조사에서 1 위 캐시 플러그인을 평가했으며 자동 정리에 포함되지 않은 많은 옵션 (데이터베이스 정리, 하트 비트 제어, Google 웹 로그 분석 호스팅, YouTube iframe을 미리보기 이미지로 교체, Facebook 캐시에 브라우저 캐시 추가 등)이 있습니다. WP Rocket은 또한 Autoptimize가 수행하는 거의 모든 것을 처리하므로 모든 속도 최적화를 위해 1 개의 플러그인 만 있으면됩니다. 그렇기 때문에 정말 좋습니다. 여기서 10 % 할인을받을 수 있습니다.

숏 픽셀 – 인기있는 이미지 최적화 플러그인과 내가 사용하는 플러그인.

StackPath – 30 개 이상의 데이터 센터가있는 CDN. 설치가 매우 쉽습니다. 플랜에 가입 ($ 10 / 월) 한 다음 CDN URL을 CDP URL 자동 정리 옵션에 복사 / 붙여 넣기.

SiteGround – 일반적으로 Facebook 설문 조사에서 # 1 호스트를 평가했으며 Yoast가 사용.

Yoast-on-Twitter-Wast-Switched-to-Siteground

2019 호스팅 설문 조사

2017-WordPress-Hosting-FB-Poll

Elementor 호스팅 권장 사항

2019 년 7 월 호스팅 추천

WordPress- 호스트-폴 -2018 년 8 월

공유 호스팅 설문 2017

2019- 호스팅 폴

호스팅 회사

워드 프레스 호스팅-폴 2017

관리 호스팅 폴

WooCommerce-Hosting-FB-Poll

2016- 웹 호스팅-폴

베스트 프레스 호스팅 호스팅 제공 업체 설문 조사

최고의 웹 호스팅 2019- 폴

WP 프렌 들리 호스팅 설문 조사

2016-WordPress-Hosting-FB-Poll

Elementor를위한 좋아하는 호스팅

2018 호스팅 권장 사항

매니지드 워드 프레스 호스팅 폴 2017

2019- 호스트-폴 -1

호스팅 폴 포스 피드

워드 프레스 호스팅-폴 6 월 1 일

사이트 권장 사항

2014-Managed-WordPress-Hosting-FB-Poll

최고의 웹 호스팅 공급자 폴

호스팅-폴 -2019 년 2 월

호스팅 권장 사항 설문 조사

블루 호스트 및 사이트 그라운드

워드 프레스 웹 호스트 설문 조사

사람들은 보통 속도 기술 보다 훨씬 빠르다 EIG 또는 GoDaddy :

SiteGround로 전환

SiteGround로드 시간 마이그레이션

GTmetrix에 SiteGround에 블루 호스트

HostGator To SiteGround

SiteGround Google PageSpeed ​​통계

사이트에서 100 점 만점

SiteGround 창세기

사이트 별 속도 제공

SiteGround를 통한로드 시간 단축

새로운 사이트 접지 응답 시간

HostGator에서 SiteGround로 마이그레이션

Joomla의 지상 반응 시간

SiteGround 호스팅으로 전환

Site 지구 로켓은 콤보를 상상

SiteGround PageSpeed ​​통계

사이트 접지 온 줌라

SiteGround 감소 된로드 시간

SiteGround 빠른 호스팅

새 사이트 접지 응답 시간

SiteGround 응답 시간 개선

SiteGround도 무료 마이그레이션 GrowBig과 함께+.

Cloudways – SiteGround보다 빠르며 (클라우드 호스팅이며 공유되지 않음) Facebook 설문 조사에서 높은 평가를 받았습니다. 월 $ 10부터 시작합니다. DigitalOcean 계획. 그들은 1 개의 무료 마이그레이션 (내가 채택한)을 제공하며 서버 응답 시간은 다음과 같습니다.

SiteGround-vs-Cloudways- 클라우드 호스팅

호스팅 권장 사항 Facebook

VPS 클라우드 호스팅 WooCommerce 설문 조사

VPS 클라우드 호스팅 설문 조사

워드 프레스 호스팅 제안

Cloudways 응답 시간

Cloudways에 WP 엔진

제목 없음

Cloudways Pingdom로드 시간

Cloudways-Facebook-Review

프로모션 코드를 사용하여 처음 2 개월의 Cloudways를 25 % 할인받을 수 있습니다 OMM25.

Kinsta – 월 $ 30의 프리미엄 호스팅으로 시도하지는 않았지만 Kinsta의 속도, 지원, 가동 시간 및 호스팅에 대한 거의 모든 점에 대한 훌륭한 소식은 없습니다..

성능 – Kinsta의 플러그인은 플러그인 선택 해제, 수정 후 게시 제한, 자동 저장 비활성화, 로컬로 Google 웹 로그 분석 호스팅 등과 같은 ‘기타 최적화’라고 부르는 것을 관리합니다. 속도의 최종 10 %를 처리합니다.

이 중 일부는 Autoptimize에서 권장하지만 다른 것은 권장하지 않습니다.

애드온 자동 최적화

8. Cloudflare

자동 완성에는 추가 할 설정이 없습니다 Cloudflare ‘CDN, 그러나 이것은 설정하기 쉽습니다. 그리고 이것은 당신이 추가해야하기 때문에 분명히해야합니다 200 개 더 센터 CDN (콘텐츠 전송 네트워크).

Cloudflare 데이터 센터

1 단계. Cloudflare에 가입하면 사이트를 추가하고 스캔을 시작하라는 메시지가 표시됩니다.

클라우드 플레어 시작 스캔

2 단계. 스캔이 완료되면 무료 요금제를 선택하면 Cloudflare가 일련의 페이지를 안내합니다. Cloudflare에서 사용자를 할당 한 페이지로 이동합니다. 2 네임 서버.

Cloudflare 이름 서버 대쉬 보드

3 단계. 도메인 등록 기관 (예 : Namecheap)에 로그인하고 Google에서 “Namecheap에서 네임 서버를 변경하는 방법”(도메인 registar 만 검색)을 검색 한 다음 지침을 따르십시오. Cloudflare에서 제공 한 2 개의 네임 서버를 복사하여 도메인 등록 기관의 커스텀 네임 서버 옵션에 붙여 넣습니다. 전파에 72 시간 허용.

GoDaddy Cloudflare 이름 서버

그게 다야!

무엇 향후 계획?

내 비디오보기 – 42 분 분량의 비디오이지만 거의 모든 내용 (비디오 설명의 타임 스탬프)을 다루므로 워드 프레스 사이트 속도에 대한 많은 정보를 배워야합니다.

GTmetrix에서 100 % 점수를 얻는 방법을 알고 싶습니다?
PHP 7로 업그레이드, 이미지 크기 지정, 이미지 크기 지정, 데이터베이스 정리, 로컬로 Google 웹 로그 분석 호스팅, WP Disable 등을 포함하여 GTmetrix / Pingdom 항목 수정에 대한 38 개 이상의 팁이있는 전체 WordPress 속도 최적화 안내서를 참조하십시오..

자주 묻는 질문

&# x1f680; 자동 최적화 외에 다른 속도 플러그인이 필요합니까??

일반적으로 캐싱, 이미지 최적화, 데이터베이스 정리, 하트 비트 제어 및 선택적으로 플러그인 비활성화를 위해 플러그인을 사용하려고합니다. WP Rocket, ShortPixel 및 Perfmatters를 권장합니다..

&# x1f680; 자동 최적화를 사용하여 CDN을 설정하는 방법?

CDN (StackPath 사용)을 선택하고 CDN URL을 복사하여 Autoptimize의 CDN UR 필드에 붙여 넣습니다..

&# x1f680; 자동 최적화를 사용하여 Google 글꼴을 최적화하는 방법?

머리에 결합 및 연결 옵션을 사용하고 자동 마무리를 사용하여 글꼴을 미리 연결하는 것이 좋습니다.

&# x1f680; 자동 최적화는 캐싱을 처리합니까??

아니요, 캐싱을 위해 별도의 플러그인을 사용해야합니다. SiteGround를 사용하는 경우 WP Rocket 또는 SG Optimizer를 권장합니다.

&# x1f680; 자동 최적화 설정을 구성하는 방법?

이 튜토리얼에는 모든 것이 나열되어 있습니다. GTmetrix 보고서와 수정해야 할 특정 항목을 주시하십시오. 자동 최적화에서 설정을 구성해도 문제가 해결되지 않으면 다른 플러그인을 사용하여 항목 수정을 고려하십시오..

질문이 있으십니까? 나에게 라인을 드롭!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map