웹사이트 속도 최적화를 위한 초보자 가이드 느린 사이트 수정

웹사이트의 전체 속도를 높이는 방법을 모르십니까?

웹사이트 속도는 현대 SEO의 기본적인 부분입니다. 저를 믿으세요. 순위에 즉각적이고 중요한 영향을 미칩니다.

내 웹사이트 TheGuideX를 방문한 적이 있다면 내 사이트가 1초 미만으로 로드되는 것을 알 수 있습니다(아래 GTmertix 결과도 첨부했습니다).

GTmetrix에 따르면 TheGuideX.com의 PageSpeed ​​점수는 100%이고 YSlow 점수는 0.9초의 로드 시간과 23개의 HTTP 요청으로 약 95%입니다. 놀랍네요.

… 그리고 여기 VPN에 대한 블로그인 VPNCoupon.com의 또 다른 보고서가 있습니다.

그리고 GTmetrix에 따르면 내 다른 블로그(TheVPNCoupon.com)의 PageSpeed ​​점수는 약 99%이고 YSlow 점수는 23-HTTP 요청에서 95%이며 이 웹사이트도 1초 미만으로 로드됩니다(로드하는 데 800ms밖에 걸리지 않지만 웹사이트).

2초 미만으로 로드되는 웹사이트는 허용되는 로드 속도로 간주됩니다. 그러나 더 나은 로딩 속도를 위해 가능한 한 사이트를 최적화하는 것이 좋습니다.

웹사이트 속도를 최적화하려면 어떻게 해야 합니까? 사이트를 최적화하기 위해 기술 또는 개발 기술이 필요합니까?

대답은 '아니오; 웹사이트를 최적화하기 위해 기술이나 개발 기술이 필요하지 않습니다. 몇 가지 WordPress 플러그인과 CDN을 사용하여 쉽게 할 수 있습니다. 그리고 사이트를 최적화하려면 먼저 더 나은 웹 호스팅 계획이 필요합니다.

대부분의 아마추어 블로거는 여기에서 실패했습니다. 사이트 최적화를 요청했을 때 사이트에서 저렴한 공유 호스팅 계획을 사용하고 있었고 저렴한 호스팅 계획을 사용하면 웹 사이트를 빠르게 만들 수 없다는 것을 알았습니다.

VPS에 대한 기본 지식이 있는 경우 먼저 웹 사이트를 DigitalOcean 또는 Cloudways로 이동하고 cPanel 기반 호스팅을 원하면 SiteGround로 변경할 수 있습니다.

또한 웹 사이트에서 CDN을 사용해야 합니다. 무료 CDN 제공업체를 찾고 있다면 Cloudflare를 추천합니다. Image CDN용 ImageKit을 사용할 수도 있습니다(저는 웹사이트에서 이것을 사용하고 있으며 실시간으로 이미지를 최적화하는 데 도움이 됩니다).

속도 최적화 기술에 대해 더 깊이 파고들기 전에 먼저

왜 속도가 중요한가?

그렇다면 웹 사이트가 로드될 때까지 얼마나 기다려야 합니까?

글쎄요, 통계에 따르면 우리 중 절반은 저에게 있어서도 웹사이트가 로드될 때까지 2초를 기다리고 싶지 않습니다.

그래서 내 웹사이트가 1초 이내에 또는 최대한 빨리 로드되도록 하고 싶었습니다. 그리고 오늘, 나는 속도를 최적화하기 위해 내 웹사이트에서 사용하는 것과 똑같은 방법을 공유할 것입니다.

하지만 웹사이트의 속도가 왜 중요한가요? 그리고 몇 초의 몇 분의 일이 어떤 차이를 만들까요?

대답? 그것은 큰 차이를 만듭니다!

그러나 그것이 어떻게 큰 차이를 만드는가? 속도가 중요한 이유에 대해 자세히 알아보려면 자세한 보고서를 살펴보겠습니다.

1. 느린 웹사이트는 전환을 죽입니다:

느린 웹사이트는 웹사이트 전환을 죽일 수 있습니다.

귀하가 전자 상거래 웹사이트이고 웹사이트를 로드하는 데 약 4초가 걸린다고 가정해 보겠습니다. 그리고 다양한 보고서에 따르면 로드하는 데 3초 이상 걸리면 40%의 사람들이 사이트를 떠날 수 있습니다.

따라서 이러한 의미에서 귀하의 웹사이트가 매월 약 1,00,000건의 트래픽을 수신하고 웹사이트를 로드하는 데 약 4초가 걸린다면 최대 40,000명의 사람들이 귀하의 사이트를 이탈할 가능성이 많습니다.

그리고 이런 식으로 40%의 사람들을 잃게 되며, 따라서 전반적인 웹사이트 전환에도 영향을 미칩니다. 이런 식으로 웹 사이트 속도는 전환율을 높이는 데 매우 중요합니다.

2. 우리는 속도와 사용자 경험을 기대합니다:

위에서 이미 언급했듯이 40%의 사람들은 로드하는 데 3초 이상 걸리면 웹사이트를 떠납니다. 그리고 저는 항상 사이트를 떠납니다. 로드하는 데 2초 이상 걸립니다.

WTH는 웹사이트를 로드하는 데 2초 동안 기다립니다.

내가 2초를 기다릴 수 없다면 내 독자들이 그렇게 오래 머물기를 기대할 수 없습니다.

좋은 사용자 경험과 관련된 두 가지 주요 요소는 다음과 같습니다.

1. 방문자에게 그들이 찾고 있는 것을 제공하고,
2. 그들에게 빨리 제공합니다.

다음은 웹사이트에서 최적화할 수 있는 Google의 새 페이지 환경에 대한 순위 요소입니다.

그리고 방문자가 혼란스러워하고 좌절하는 즉시 우리가 뭔가를 잘못했다는 의미이며 느린 로딩 시간보다 실망스러운 것은 없습니다.

전반적인 웹사이트 성능을 정말로 개선하고 싶다면 웹사이트 로딩 속도가 최우선 순위가 되어야 합니다.

3. 웹사이트 속도는 Google 순위에 영향을 미칩니다.

마지막으로 중요한 것은 Google 순위를 지배한다는 것입니다.

Google은 이미 전체 웹을 빠르게 만들기 위해 노력하고 있다고 고백했습니다. 그들은 웹 사이트를 초고속, 더 안정적이고 유용하게 만드는 임무를 수행하고 있습니다.

좋은 로딩 속도 없이는 불가능하며, 빠른 로딩 속도를 가진 사이트를 우선으로 하고 있습니다. 그리고 내가 아는 한, 그들은 2010년에 빠른 로딩 속도를 가진 웹사이트를 약간 더 선호한다고 발표했습니다.

SERoundtable의 보고서에 따르면 웹사이트에서 콘텐츠를 로드하는 데 2초 이상 걸리는 경우 Google에서 사이트로 보내는 크롤러의 수를 제한할 수 있습니다.

귀하의 사이트에 해당하는 경우 Google은 귀하의 최신 블로그 게시물을 선호하고 가져오거나 최근 업데이트를 알아차릴 가능성이 적습니다. 그리고 그것은 확실히 귀하의 웹사이트에 해를 끼칠 것입니다.

따라서 속도가 중요합니다. 웹사이트 전환에 영향을 미칩니다. 사용자 경험에 영향을 미치고 검색 엔진 순위에도 영향을 미칩니다.

지금으로서는 빠른 로딩 웹사이트가 얼마나 중요한지 배웠다고 확신합니다.

이제 웹 사이트의 전체 속도를 최적화하는 데 도움이 되는 특정 기술로 넘어가기 전에 웹 페이지의 속도를 분석하는 데 도움이 되는 도구를 잠시 살펴보겠습니다.

웹사이트 속도 테스트 도구

자, 웹사이트 속도 최적화가 중요합니다! 자, 당신이 어디에 있는지 어떻게 알 수 있습니까?

즉, 귀하의 웹사이트가 느린가요? 중간에 있습니까, 아니면 번개처럼 빠른가요? (축하합니다. 읽지 않아도 됩니다!)

알 수 있는 유일한 방법은 웹사이트를 테스트하는 것입니다. 웹사이트 속도를 측정할 수 있는 사이트가 많이 있지만 이 가이드에서는 개인적으로 선호하는 몇 가지 도구만 공유합니다.

1. 지티메트릭스

GTmetrix는 웹사이트 성능을 확인하는 최고의 도구 중 하나입니다. 이 도구는 일반 사용자와 개발자에게 좋은 옵션입니다.

GTmetrix는 유용하고 심층적인 최적화를 통해 사용자 친화적인 디자인을 제공합니다. 이 도구를 사용하려면 웹사이트 링크를 넣고 " 분석" 버튼을 클릭하십시오.

" 분석 " 버튼을 클릭하면 웹 사이트에 대한 자세한 분석을 다시 시작하는 데 몇 초 또는 몇 분이 걸립니다.

GTmetrix 결과를 더 자세히 살펴보고 " 권장 사항" 섹션을 확장하면 웹사이트에 특정한 권장 사항이 표시됩니다. " 이것이 무엇을 의미합니까?" 를 클릭할 수도 있습니다. 이러한 오류 및 최적화에 대해 자세히 알아보십시오.

' 권장 사항 ' 외에도 웹 사이트에서 사용하는 모든 외부 및 내부 파일의 DNS 조회 시간도 표시됩니다. 개발자이거나 기술적인 능력이 있다면 사이트를 더욱 최적화하는 데 도움이 될 것입니다.

2. 핑덤

Pingdom은 WordPress 속도 최적화를 위한 또 다른 가장 효율적이고 훌륭한 도구입니다. 초보자 또는 개발자인 경우 이 도구는 웹사이트를 효율적으로 테스트하고 사이트 최적화를 위한 권장 사항을 제공하는 데 도움이 됩니다.

이 도구를 사용하려면 웹사이트 주소를 입력한 다음 " 테스트 위치"를 선택하십시오. 테스트 위치를 선택하고 " 테스트 시작" 버튼을 클릭하면 페이지 분석이 시작됩니다.

그리고 GTmetrix와 마찬가지로 더 깊이 파고들면 웹사이트를 최적화하기 위한 다양한 권장 사항을 보여줍니다. 그리고 더 아래에서 사이트의 특정 요청에 대한 정보와 폭포수 분석을 찾을 수 있습니다.

이 도구는 웹사이트 속도를 개선하는 데 정말 유용합니다. 하지만 이를 활용하려면 고급 지식이 필요합니다. KeyCDN의 Waterfall 분석에 대한 게시물을 읽고 이에 대해 자세히 알아볼 수도 있습니다.

3. Google PageSpeed ​​인사이트

웹사이트를 테스트하기 위한 또 다른 최고의 도구는 Google의 PageSpeed ​​Insight입니다. 이 도구는 웹사이트를 최적화할 수 있는 제안을 제공할 뿐 웹사이트의 속도 테스트 결과는 공유하지 않습니다.

하지만 변경되었습니다. 이제 Google은 FCP(First Contentful Paint) 및 DCL(DOM Content Loaded )에 대한 페이지 로드 시간을 공유합니다. 여기에서 Google의 공식 개발자 페이지에서 이러한 속도 측정항목에 대해 자세히 알아볼 수 있습니다.

페이지 속도 점수가 낮고 로딩 시간이 느리다면 이 가이드가 적합합니다! 이 가이드를 끝까지 읽으면 Google PageSpeed ​​Insight 및 기타 웹사이트에서 웹사이트를 적절하게 최적화할 수 있습니다.

웹사이트의 글꼴을 최적화하기 위해 FOIT(Flash of Invisible Text) 해결에 대한 다른 가이드를 확인할 수도 있습니다.

4. 웹페이지 테스트

마지막으로 웹 사이트 속도를 확인하는 데 사용되는 도구는 WebPageTest입니다. 이 도구는 기능의 깊이와 제공하는 데이터 측면에서 가장 진보된 WordPress 속도 테스트 도구 중 하나입니다.

WebPageTest 도구를 사용하여 웹 사이트 속도를 확인할 때 몇 가지 고급 설정 을 사용하여 웹 사이트를 분석할 수 있습니다. 이러한 고급 설정을 사용하여 다음을 수행할 수 있습니다.

Google 검색에서 John Mueller의 이 트윗을 확인하면 웹사이트 로딩 속도를 확인하는 WebPageTest 도구도 추천합니다.

이러한 옵션이 혼란스럽다면 " 간단한 테스트" 탭을 시도해 보시기 바랍니다. 전반적으로 이 도구는 웹사이트의 속도를 테스트하는 데 가장 적합하며 개발자라면 웹사이트를 수정하는 데 많은 도움이 될 것입니다.

지금까지 우리는 웹사이트를 빠르게 로딩하는 것의 중요성과 웹사이트 속도를 확인하는 도구에 대해 배웠습니다.

이제 웹사이트를 올바르게 최적화하는 기술을 공유할 차례입니다.

이 튜토리얼에서는 캐시 플러그인을 사용하여 CSS, JS, HTML을 최적화하거나 다른 사람들처럼 CDN을 사용하는 단계를 공유할 뿐만 아니라 이러한 최적화를 수행할 수 있는 가장 접근하기 쉬운 방법을 공유합니다. 바르게.

이러한 방법은 예제와 함께 간단하고 간단합니다.

그러나 이러한 방법을 진행하기 전에 WordPress repo에서 무료로 제공되는 Updraft Backup 플러그인을 사용하여 WordPress 웹사이트를 먼저 백업하는 것이 좋습니다.

WordPress 웹 사이트를 백업하면 사이트 최적화를 계속할 수 있습니다.

그래서 어떻게…

웹사이트 최적화

이제 기다림이 끝났습니다!

여기에서는 웹 사이트를 최적화하기 위해 항상 사용하는 방법을 공유하고 있습니다. 동일한 기술을 따라 블로그, 소규모 틈새 시장 및 전자 상거래 상점을 최적화할 수 있습니다.

1. 빠르고 신뢰할 수 있는 웹 호스팅 선택

따라서 첫 번째 단계는 신뢰할 수 있고 빠른 웹 호스팅 제공업체를 선택하는 것입니다.

이미 언급했듯이 사람들이 나에게 웹 사이트 최적화를 요청하면 사이트에서 저렴한 공유 호스팅 계획을 사용하고 있으며 저렴한 호스팅 계획을 사용하면 웹 사이트를 빠르게 만들 수 없다는 것을 알았습니다.

따라서 저렴한 공유 호스팅 계획을 사용하는 경우 먼저 현재 웹 호스팅 제공업체에서 신뢰할 수 있는 제공업체로 이동하는 것이 좋습니다.

빠르고 최고의 웹 호스팅 플랫폼을 요구한다면 저는 항상 DigitalOcean을 추천할 것입니다. 하지만 DigitalOcean 물방울을 관리하려면 몇 가지 기술이 필요합니다. 쉽고 더 편리하게 만들기 위해 서버의 모든 제어판을 사용할 수 있습니다(저는 개인적으로 모든 프로젝트에서 DigitalOcean을 사용합니다).

이 패널에는 ServerPilot, VestaCP 등이 포함될 수 있습니다. 하지만 ServerPilot은 WordPress 설치를 위한 가장 쉬운 제어판 중 하나이기 때문에 항상 사용하는 것이 좋습니다(ServerPilot에서 $10 무료 크레딧을 받으려면 여기를 클릭하세요).

그리고 초보자이고 cPanel 기반 호스팅을 원하는 경우 SiteGround를 사용할 수도 있습니다. SiteGround는 중소기업 및 웹사이트를 위한 최고의 신뢰할 수 있는 웹 호스팅 제공업체 중 하나입니다.

1.1 추천 호스팅

1.2 권장하지 않는 호스팅

2. 최적화된 WordPress 테마 선택

워드프레스 웹사이트의 테마를 선택할 때는 속도에 최적화된 테마를 선택하는 것이 중요합니다. 일부 아름답고 인상적으로 보이는 테마는 제대로 코딩되지 않아 웹사이트를 정말 느리게 만들 수 있습니다.

웹 사이트에서 최적화된 테마를 사용하지 않는 경우 이러한 속도 최적화 방법이 효과가 있을 가능성은 적습니다.

나는 일반적으로 화려하고 거대한 애니메이션과 복잡한 레이아웃의 테마를 선호하는 것보다 단순하고 깨끗한 UI가 있는 테마를 선호합니다. 안정적이고 품질이 좋은 WordPress 플러그인을 사용하여 항상 이러한 기능을 추가할 수 있습니다.

테마 추천이 필요한 경우 StudioPress, MyThemeShop 및 GeneratePress의 프리미엄 WordPress 테마를 선호하는 것이 좋습니다. 이러한 마켓플레이스의 테마는 속도와 SEO 모두에 최적화되고 잘 코딩되어 있습니다. (저는 개인적으로 웹사이트에서 GeneratePress 테마를 사용하는 것을 선호합니다)

속도와 SEO에 최적화된 또 다른 테마인 Astra도 확인하실 수 있습니다. GeneratePress와 마찬가지로 이 테마에는 많은 사용자 지정 옵션이 제공되며 700,000개 이상의 활성 설치가 있는 WordPress 저장소에서 가장 많이 다운로드된 테마 중 하나입니다.

2.1 추천 테마

지금까지 우리는 신뢰할 수 있고 빠른 웹 호스팅 제공업체와 빠르고 안정적인 WordPress 테마에 대해 논의했습니다.

이 두 가지는 몇 가지 WordPress 플러그인을 사용하여 블로그/웹사이트를 최적화하는 세 번째 단계로 이동하는 데 필수적입니다.

3. WordPress 플러그인을 사용한 최적화

따라서 몇 가지 플러그인을 사용하여 WordPress 웹 사이트를 최적화하는 방법에 대해 논의하기 전에 이미 두 가지를 처리했다고 가정합니다.

이 두 상자를 선택하면 다양한 플러그인을 사용하여 WordPress 최적화를 진행하고 웹사이트 로딩 속도를 높이는 포괄적인 방법을 탐색할 수 있습니다.

3.1 WP Rocket으로 사이트 최적화

따라서 WordPress 속도 최적화에 사용하는 첫 번째 플러그인은 WP Rocket입니다.

WP Rocket은 웹사이트 로드 속도를 높이는 데 도움이 되는 최고의 WordPress 캐시 플러그인 중 하나입니다. 몇 번의 클릭만으로 웹사이트의 성능을 높일 수 있는 다양한 사용자 정의 기능이 있는 초보자 친화적인 도구입니다.

플러그인을 사용하면 최적화할 수 있습니다.

이제 이 플러그인을 사용하는 기본 사항을 이해했습니다. 이제 WP-Rocket 캐시 플러그인을 사용하여 웹사이트를 올바르게 최적화하는 방법을 보여드리겠습니다.

다른 캐시 플러그인을 사용하는 경우 WP-Rocket으로 전환하는 것은 거의 권장하지 않습니다.

이것은 가장 쉬우면서도 최고의 캐시 플러그인 중 하나이며 다른 캐시 플러그인처럼 설정을 엉망으로 만들 필요가 없습니다. 클릭만 하면 바로 사용할 수 있습니다.

그래서…

WP-로켓을 효과적으로 사용하는 방법?

WP-Rocket 플러그인에서 수많은 기능을 찾을 수 있으며 웹사이트를 빠르게 만들기 위해 어떤 설정을 활성화해야 하는지 궁금하신가요?

WordPress 웹사이트에서 WP-Rocket 플러그인을 설치하고 활성화했으면 " 설정 " > " WP Rocket "으로 이동하여 구성 페이지를 엽니다.

이제 " 캐시 " 설정을 클릭하여 WP-Rocket 플러그인을 사용하여 웹사이트 캐시를 설정합니다. (다음과 같이 표시됩니다)

먼저 " 모바일 캐시 "를 활성화해야 하며 전자 상거래용 캐시를 설정하는 경우 " 로그인 사용자 캐시 " 설정을 활성화해야 합니다.

그런 다음 " 캐시 수명 " 을 " 10 시간 " 으로 설정하십시오 .

캐시 설정이 끝나면 HTML, CSS, JS, Defer JS 및 Combine CSS & JS를 축소할 수 있는 " 파일 최적화 "로 이동합니다.

이러한 설정은 WP-Rocket의 가장 중요한 설정 중 하나입니다. 또한 사이트의 CSS와 JS를 결합하여 HTTP 요청을 줄이는 데 도움이 됩니다.

" 파일 최적화 " 부분을 클릭하면 HTML, CSS, JS를 축소하고 더 ​​적은 수의 파일로 결합할 수 있는 다양한 옵션이 표시됩니다.

그리고 " 기본 설정" 에서 " HTML 축소", " Google 글꼴 파일 결합", " 쿼리 문자열 제거"의 세 가지 옵션을 모두 선택합니다. 웹사이트에는 영향을 미치지 않습니다. 그러나 " CSS 파일 " 및 " JS 파일 " 설정을 활성화할 때 사이트가 손상되지 않는지 확인하십시오.

이제 CSS 파일에서 "CSS 축소", "CSS 결합" 및 "CSS 전달 최적화" 옵션을 선택하여 CSS 를 축소하고 더 ​​적은 수의 파일로 결합합니다. 또한 웹사이트에서 " Render-blocking CSS 제거 " 문제를 해결합니다.

마찬가지로 JS 파일 섹션에서 "JQuery Migrate 제거", "JS 축소", "JavaScript 파일 결합", "JavaScript 지연 로드"를 클릭한 다음 JS 지연 섹션에서 "JQuery용 안전 모드"를 활성화합니다.

파일 최적화 에서 이러한 설정을 완료했으면 캐시를 지우고 홈페이지나 웹사이트의 페이지를 방문하여 사이트가 손상되지 않는지 확인하십시오.

파일 최적화 설정 후 Lazy loading & Media를 관리하기 위한 설정을 받게 됩니다. 미디어 옵션을 클릭하여 미디어 설정을 변경합니다.

여기 이 옵션에서 이미지 및 비디오에서 지연 로드를 활성화하는 옵션이 제공되며, 임베드, 이모티콘을 비활성화하고 WebP 호환성을 활성화하는 옵션도 제공됩니다.

이미지, iframe 및 비디오에 대해 Lazyload 설정을 활성화하는 것이 좋습니다. YouTube 동영상이나 iframe을 이미지로 바꿀 수도 있습니다(저를 믿으세요. 웹사이트가 빠르게 빛나게 될 것입니다).

또한 이모티콘 및 삽입을 비활성화할 수 있는 옵션이 제공되며 대부분은 우리에게 쓸모가 없으며 포함을 비활성화하면 웹사이트 리소스를 절약할 수 있으므로 이 설정을 활성화하는 것이 좋습니다.

미디어 설정 후 웹사이트에서 사전 로드 를 활성화하는 옵션이 표시됩니다.

사이트 성능을 개선하기 위해 현금 사전 로딩이 필수적인 이유는 무엇입니까?

미리 로드하면 방문자가 사이트의 더 빠르고 캐시된 버전을 즉시 얻을 수 있습니다. WP Rocket은 이를 자동으로 처리하며 귀하의 홈페이지와 여기에 있는 모든 링크가 미리 로드됩니다.

사전 로드 설정을 완료하면 고급 설정을 구성할 수 있는 옵션이 표시됩니다. 고급 설정에서 사용자 지정 URL 또는 사용자 지정 쿠키, User-Agent에 대한 캐시 비활성화 및 원하는 URL 제거를 포함할 수 있는 몇 가지 설정을 쉽게 관리할 수 있습니다.

그런 다음 데이터베이스 최적화 및 CDN 을 관리할 수 있는 옵션이 표시되지만 여기에서는 이 설정을 건너뜁니다. 그리고 데이터베이스를 효율적으로 최적화하기 위해 WP-Optimize 플러그인을 사용합니다. CDN 섹션의 뒷부분에서 CDN을 구현하는 방법을 보여드리겠습니다.

그리고 다시, 이러한 설정 후에 WordPress Heartbeat API를 관리할 수 있는 옵션이 표시됩니다. 기본적으로 WordPress Heartbeat API는 서버와 브라우저 간의 실시간 데이터 전송 및 동기화를 위한 연결을 제공합니다.

아직도 하트비트 설정을 이해할 수 없습니까? 여기에서 하트비트 설정이 관련된 몇 가지 예를 공유하고 있습니다.

리소스가 적은 서버를 사용하는 경우 리소스를 절약하기 위해 서버를 비활성화할 수 있지만 소규모 웹사이트의 경우 큰 문제가 되지 않습니다.

그리고 이제 WP-Rocket 플러그인의 마지막이지만 최소한의 설정은 아닌 애드온 설정 입니다. 웹사이트에서 Facebook Pixel 및 Google Analytics를 사용하는 경우 서버에 로컬로 저장하여 사이트 속도를 최적화하는 데 도움이 됩니다.

웹사이트에서 브라우저 캐싱 활용 문제를 개선하기 위해 간단히 활성화할 수 있습니다.

또 다른 훌륭한 추가 기능에는 웹 사이트를 WP-rocket 대시보드에서 바로 Cloudflare 및 Sucuri 와 통합하는 것이 포함될 수 있습니다. 웹 사이트에서 무언가를 제거할 때마다 이러한 CDN 공급자의 캐시를 지우고 제거하는 데 도움이 됩니다.

날 믿어; 이것은 웹사이트를 정말 빠르게 만드는 최고의 설정 중 하나입니다. 웹 사이트를 빠르게 로드하려면 이 설정을 활성화하는 것이 좋습니다.

현재 WP-Rocket 플러그인을 사용하여 몇 가지 최적화를 구현했습니다.

이제 데이터베이스 최적화를 위한 WP-Optimize 및 추가 속도 최적화를 위한 AssetCleanUp Pro와 같은 다른 플러그인을 사용할 것입니다.

3.2 Asset CleanUp Pro로 사이트 최적화

WP Rocket을 사용하여 웹사이트를 최적화하고 GTmetrix & Pingdom 결과를 확인하면 페이지 로딩 속도가 즉시 향상되는 것을 볼 수 있습니다.

하지만 여기서 끝이 아닙니다. 위에서 이미 최대한 웹사이트를 최적화해야 한다고 언급했습니다.

이제 웹 사이트의 추가 최적화를 위해 Asset CleanUp Pro와 같은 몇 가지 다른 플러그인을 사용할 것입니다(최적화를 위해 Asset CleanUp의 무료 버전을 사용할 수도 있지만 유료 버전을 사용하는 것이 좋습니다).

이 플러그인은 웹사이트의 FOIT(Flash of Invisible Text) 문제를 해결하는 데 도움이 될 수 있으며 XML-RPC 파일 에 대한 액세스를 차단하고 더 많은 작업을 수행합니다.

우리는 이미 WP Rocket으로 사이트를 최적화했기 때문에 HTML, CSS 및 JS 및 기타 몇 가지 설정의 수정이 차단되고 활성화할 수 없습니다 (좋은 일입니다!)

테스트 모드를 활성화했으면 이제 CSS 최적화 옵션을 클릭한 다음 캐시 동적 로드 CSS 설정으로 스크롤한 다음 활성화합니다.

완료했으면 저장 버튼을 클릭합니다.

마찬가지로 Optimize JS 섹션에서 Cache Dynamic Loaded JavaScript를 활성화합니다.

이 옵션은 CSS 및 JS의 동적 값을 캐시하는 데 도움이 됩니다. 그러나 WP-Rocket을 사용한 후에는 WordPress에서 이러한 문제가 발생하지 않습니다.

이러한 설정을 완료했으면 " CDN " 옵션 다음에 있는 " 사이트 전체 공통 언로드 " 설정을 클릭하십시오 .

여기에서 Emojis , Embeds , Dashicons , Gutenberg CSS Block Library , JQuery Migrate 및 Comment Reply Site-wide 를 비활성화하는 몇 가지 옵션을 찾을 수 있습니다.

그러나 블로그에서 Gutenberg, Dashicons 아이콘을 사용하지 않는 경우 비활성화할 수 있습니다.

그리고 WordPress를 블로그로 사용하지 않거나 방문자가 댓글을 남기는 것을 원하지 않거나 기본 WordPress 댓글을 Disqus 또는 Facebook과 같은 댓글 플랫폼으로 대체한 경우 " 댓글 회신 사이트- 와이드 ” 설정에서.

이제 <head> 섹션에서 사용하지 않는 요소를 제거할 수 있는 " HTML 소스 정리 " 섹션으로 이동합니다.

이 설정에서 <head> 섹션에서 원하지 않는 요소를 제거할 수 있습니다.

괜찮아요!

이러한 요소를 제거해도 사이트에 전혀 영향을 미치지 않습니다.

댓글 RSS, 메타 생성기 태그, WordPress 버전 태그, REST API 및 RSD 링크를 포함하여 이러한 설정에서 여러 옵션을 제거했습니다.

웹사이트에서 이러한 설정을 제거할 수 있으며 웹사이트에 해를 끼치지 않습니다. RSS 피드 링크를 사용하지 않는 경우에만 제거할 수도 있습니다.

그리고 Asset Cleanup Pro 의 프리미엄 버전을 사용하는 경우 " 글꼴 표시 CSS 적용 " 값을 " 적용 안 함"에서 " 교체"로 변경할 수 있습니다. 이것은 보이지 않는 텍스트 문제의 플래시로부터 웹사이트를 방지할 수 있습니다. 여기를 클릭하여 이 문제에 대해 자세히 알아볼 수 있습니다.

사전 로드 섹션에 로컬 글꼴 파일의 URL을 입력하여 즉시 로드할 수도 있습니다. 글꼴 파일을 미리 로드할 때 리소스의 우선 순위를 명시적으로 높입니다.

로컬 글꼴 최적화 설정 후에 " Google 글꼴"에 유사한 옵션이 표시됩니다. 환경.

글꼴 표시 설정에서 " 교체 " 옵션을 선택하고 사전 연결 도 활성화하십시오. 사전 연결 옵션을 활성화하면 CSS를 로드하는 동안 브라우저가 Google 글꼴에 사전 연결하도록 지시하고 로드 시간을 절약할 수 있습니다.

Asset CleanUp Pro를 사용하여 필요한 페이지에서만 플러그인 및 도구를 사용하십시오.

현재로서는 사이트의 로딩 속도를 개선하기 위해 Asset CleanUp을 사용하여 몇 가지 최적화를 수행했습니다. 그러나 이 플러그인에서 우리가 알지 못하는 놀라운 기능이 몇 가지 더 있습니다.

이러한 기능에는 웹사이트의 특정 게시물에 플러그인 로드가 포함될 수 있습니다.

쉽게 말해 웹사이트에서 " Contact Form 7 "(연락처 양식을 만드는 데 가장 많이 사용되는 플러그인)을 사용 중이고 웹사이트의 특정 " 연락처 페이지 "에서 사용했다고 가정해 보겠습니다.

그러나 이 플러그인의 주요 문제는 사이트의 <head> 섹션에 CSS 및 JS 파일을 로드하므로 모든 페이지(연락처 페이지 포함)에서 두 번 더 요청이 증가한다는 것입니다. 특정 페이지가 바로 연락처 페이지 입니다.

예를 들어; TheVPNCoupon을 확인하면 연락처 페이지와 "최고의 애니메이션 영화"와 같은 다른 게시물/페이지에서 "문의 양식 7" 플러그인을 사용하고 있습니다. 문의 양식을 사용하지 않고 있지만 여전히 CSS 및 JS를 로드합니다. 이 페이지 의 Contact Form 7 플러그인(아래 이미지에서 확인할 수 있음).

그러나 이 문제를 어떻게 해결할 수 있습니까?

솔루션은 매우 간단합니다. 게시물 또는 페이지를 게시한 다음 " 게시물/페이지 편집 " 옵션을 다시 클릭하면 이 플러그인이 WordPress 게시물 대시보드의 모든 파일을 로드합니다.

그런 다음 자산 정리 옵션에서 특정 CSS 및 JS 파일을 언로드합니다 .

예를 들어; " Contact Form 7 " 플러그인을 사용하여 내 사이트에 " Contact Us " 페이지를 만드는 경우 페이지가 준비되면 게시하고 다시 " Edit Page " 옵션을 클릭합니다. .

페이지 편집 을 클릭하면 누군가 연락처 페이지를 로드할 때 요청되거나 로드된 모든 파일이 표시됩니다.

이제 설정을 약간 변경하고 연락처 페이지를 제외한 모든 페이지에서 Contact Form 7의 CSS 및 JS를 언로드합니다 (위 이미지에서 수행한 것과 동일한 설정을 수행할 수 있음).

3.3 웹사이트에서 이미지 최적화

아시다시피 이미지 최적화는 웹사이트 속도를 늦추는 가장 중요한 요소 중 하나입니다. 이것은 사이트 속도를 늦추는 주요 원인이므로 귀하의 웹사이트에 업로드하기 전에 항상 이미지를 압축해야 합니다.

GuideX에서 블로그 게시물을 확인하더라도

… 이미지는 내 웹사이트의 다른 어떤 것보다 무겁습니다.

따라서 이미지를 최적화하면 웹사이트 속도가 가장 크게 향상되며 실제로도 그렇습니다.

이미지는 모든 웹사이트에 필수적이라는 것을 우리 모두 알고 있지만 상당히 높은 품질의 이미지를 사용하는 것은 권장되지 않습니다. 따라서 업로드하는 이미지가 제대로 최적화되었는지 확인해야 합니다.

이미지의 전체 품질을 저하시키지 않고 크기만 줄이는 방식으로 이미지를 압축해야 합니다.

이를 위해 Image Optimization에 웹사이트를 만들었습니다. 이 사이트를 사용하여 WordPress에 이미지를 업로드하기 전에 이미지를 최적화할 수 있습니다 .

이미지를 적절하게 최적화하려면 다음 5단계를 따라야 합니다.

올바른 유형의 이미지 형식 사용

웹에서 가장 일반적으로 사용되는 두 가지 유형의 이미지는 JPG와 PNG입니다.

그리고 그들은 비슷하지 않습니다.

JPEG 이미지의 예

이미지 세부 정보
이미지 형식	JPEG
이미지 크기	2.893kb
최적화된 이미지 크기	607kb
이미지 압축률(%)	79%
이미지 설명	색상 정보가 많은 복잡한 이미지.

PNG 이미지의 예

이미지 세부 정보
이미지 형식	PNG
이미지 크기	716kb
최적화된 이미지 크기	173kb
이미지 압축률(%)	75%
이미지 설명	색상 정보가 거의 없는 단순한 이미지

위의 예에서는 79% 이미지 압축률의 JPG 이미지와 비슷한 압축 수준의 PNG 이미지를 보여 주었습니다. 그러나 JPEG 이미지의 압축 크기는 복잡성과 압축률로 인해 PNG 이미지의 원본 크기보다 훨씬 큽니다. 많은 색상 정보.

따라서 다음에 웹사이트에 이미지를 업로드할 때마다 올바른 이미지 형식을 사용하고 있는지 확인하세요.

3.4 WP-Optimize를 사용한 데이터베이스 최적화

현재로서는 WP Rocket 및 Asset CleanUp을 사용하여 사이트를 최적화했지만 여전히 웹사이트를 로드하는 데 훨씬 더 많은 시간이 걸린다고 생각되면 데이터베이스를 최적화하고 게시물의 수정본을 삭제할 수 있습니다.

때때로 우리가 웹사이트의 내용을 업데이트하거나 WordPress Editor에 무언가를 작성할 때 자동으로 데이터베이스에 게시물 수정본을 저장합니다.

따라서 데이터베이스 최적화는 웹사이트의 속도를 높이는 또 다른 매우 유용하고 중요한 프로세스입니다.

이를 위해 " WP-Optimize"라는 무료 WordPress 플러그인을 사용합니다. 플러그인은 Team Updraft에서 개발했으며, 놀라운 플러그인도 개발했으며 사이트 백업용으로 권장합니다.

이 플러그인을 사용하려면 WordPress 저장소에서 "WP-Optimize" 플러그인을 설치하기만 하면 됩니다.

플러그인이 설치되면 데이터베이스를 백업한 다음 " WP-Optimize " > " 데이터베이스"로 이동하는 것이 좋습니다. 데이터베이스 페이지에서 " 선택한 모든 최적화 실행 "을 클릭하면 데이터베이스 최적화가 시작됩니다.

데이터베이스를 최적화하는 데 몇 분이 걸리며 완료되면 모든 게시물 수정, 스팸 댓글, 보류 중인 댓글, 트랙백, 휴지통에 있는 게시물 및 자동 초안이 삭제됩니다.

괜찮아요!

게시물과 초안은 안전하게 유지됩니다. 웹사이트에 게시된 게시물이나 초안 게시물은 삭제되지 않지만 수정본만 삭제됩니다. 그래서 당신은 안전합니다.

3.5 귀하의 웹사이트에서 이러한 플러그인을 사용하지 마십시오

특정 플러그인은 웹사이트 속도를 늦추고 CPU 사용량을 높일 수 있습니다. 나는 항상 귀하의 웹사이트에서 무거운 플러그인을 사용하지 말 것을 제안할 것입니다.

이러한 플러그인에는 다음이 포함될 수 있습니다.

이 단계에서는 사이트를 효과적으로 최적화하기 위해 몇 가지 WordPress 플러그인을 사용했으며 웹 사이트의 GTmetrix & Pingdom 결과를 확인하면 성능이 즉시 향상되는 것을 볼 수 있습니다.

그러나 속도 최적화는 일부 플러그인을 사용하거나 WordPress 테마를 빠르게 로드하여 사이트를 최적화하는 것이 전부는 아닙니다.

웹사이트의 전반적인 성능을 높이려면 해야 할 일이 훨씬 더 많습니다. 예를 들어 웹사이트에서 CDN을 사용하고 사용 가능한 가장 가까운 서버에서 파일, 이미지 또는 데이터를 제공합니다.

4. 콘텐츠 전송 네트워크(CDN) 사용

CDN을 사용하여 웹사이트의 성능을 높이는 방법을 설명하기 전에 먼저 CDN이 무엇이며 웹사이트 성능을 개선하는 데 CDN이 어떻게 도움이 되는지 알아보겠습니다.

그렇다면 CDN 또는 콘텐츠 전송 네트워크는 무엇입니까?

Akamai에 따르면 CDN(콘텐츠 전송 네트워크)은 서버와 사용자 간의 물리적 거리를 줄여 웹 페이지 콘텐츠 로드 지연을 최소화하는 데 도움이 되는 고도로 분산된 서버 플랫폼입니다. 이를 통해 전 세계 사용자가 느린 로딩 시간 없이 동일한 고품질 콘텐츠를 볼 수 있습니다.

그렇다면 웹사이트의 성능을 높이는 데 어떻게 도움이 될까요?

정답은; 웹 사이트를 방문할 때마다 원격 서버에 요청하고 이 서버가 데이터로 응답합니다. 데이터 전송은 공용 인터넷을 통해 이루어지며 약간의 지연이 발생합니다.

그리고 로컬 시스템과 서버 간의 거리를 줄이면 지연 시간이 확실히 줄어들고 웹 사이트 성능이 향상됩니다.

이제 우리는 웹사이트에서 CDN을 사용하고 웹사이트의 전반적인 성능을 높이는 것이 얼마나 중요한지 이해했습니다.

이제 우리는 웹사이트의 성능을 향상시키기 위한 몇 가지 CDN에 대해 논의할 것입니다.

4.1 웹사이트에서 Cloudflare 사용

대부분의 사람들이 웹사이트에서 사용하는 최초의 CDN은 Cloudflare입니다.

Cloudflare는 정적 콘텐츠를 사용자에게 더 가깝게 캐시하고 가장 빠르고 안정적인 개인 백본 링크를 통해 동적 콘텐츠를 제공하는 광범위한 글로벌 데이터 센터 네트워크를 구축했습니다.

도메인 이름에 Cloudflare를 설정하는 것은 매우 쉽습니다. 현재 호스트에서 Cloudflare로 네임서버를 변경하기만 하면 Cloudflare에서 직접 DNS를 쉽게 관리할 수 있습니다.

도메인 이름에서 Cloudflare가 활성화되면 Cloudflare 계정에 로그인한 다음 대시보드에서 웹사이트를 선택합니다.

이제 SSL/TLS 페이지로 이동하여 SSL을 Flexible 로 설정합니다. SSL 설정을 전체 로 설정할 수도 있습니다. 그러나 SSL 설정을 전체로 설정하기 전에 웹사이트에서 이미 SSL을 사용하고 있는지 확인하십시오.

웹 사이트에서 SSL을 설정한 후 SSL의 Edge 인증서 설정으로 이동하여 " 항상 HTTPS 사용", " TLS 1.3 "을 활성화하고 " 자동 HTTPS 재작성"을 활성화합니다.

이제 SSL을 사용하여 웹 사이트에서 SSL 설정을 완료했습니다. 이 단계가 끝나면 속도 설정을 클릭한 다음 속도 설정 에서 최적화 를 클릭합니다.

Speed의 최적화 페이지에서 JavaScript, CSS 및 HTML용 자동 축소 를 활성화합니다.

그런 다음 웹 사이트에서 Brotli 압축을 활성화하십시오. Brotli는 Google에서 개발한 압축 알고리즘으로 텍스트 압축에 가장 적합합니다.

다음은 웹사이트에서 Brotli 압축을 사용하는 몇 가지 기능입니다.

웹 사이트에서 Brotli 압축을 활성화하면 로켓 로더 옵션까지 아래로 스크롤한 다음 활성화할 수 있습니다. 기본적으로 이 설정은 활성화되어 있지만 때때로 이 플러그인이 WP Rocket 플러그인과 충돌하여 문제를 일으킬 수 있습니다.

이제 Cloudflare의 캐시 설정으로 이동한 다음 캐싱 수준 을 " 표준 "으로 설정하고 브라우저 캐시 TTL 을 " 1년 "으로 설정합니다.

이러한 설정을 활성화한 후에는 항상 온라인 으로 스크롤하고 클릭하여 활성화합니다. 이러한 설정을 사용하면 어쨌든 서버가 다운되는 경우 Cloudflare는 캐시에서 웹사이트의 정적 페이지를 제공합니다.

여기에서 권장 설정에 대해 자세히 알아볼 수 있습니다.

이제 가장 중요한 것은 Cloudflare를 사용하여 블로그에서 페이지 규칙 을 설정하는 것입니다.

그렇게 하려면 Cloudflare에서 페이지 규칙 설정을 엽니다. Cloudflare 무료 플랜에서는 3페이지 규칙만 생성할 수 있으며, 3페이지 이상 규칙을 생성하려면 Cloudflare에서 추가 페이지 규칙을 구매해야 합니다.

위 이미지에서 볼 수 있듯이 성능을 향상시키기 위해 웹사이트 TheGuideX에 3페이지 규칙을 만들었습니다. 이 3페이지 규칙은 웹사이트를 최적화하는 데 도움이 되는 가장 중요한 규칙 중 하나입니다.

이제 첫 번째는 파란색으로 표시되는 페이지 규칙 만들기 버튼을 클릭하는 것입니다. 클릭하면 첫 번째 페이지 규칙을 만들 수 있는 페이지가 열립니다.

위 이미지에서 볼 수 있듯이 첫 번째 필드에 페이지 규칙 설정을 적용해야 하는 페이지의 URL을 입력한 다음 드롭다운 메뉴에서 설정을 선택해야 합니다. 완료되면 저장 및 배포 버튼을 클릭하여 이러한 페이지 규칙을 활성화합니다.

Cloudflare의 첫 페이지 규칙

따라서 첫 번째 규칙은 다음과 같습니다.

• URL : example.com/wp-login.php
• 규칙(드롭다운에서 선택) : 보안 수준을 선택한 다음 높음 또는 공격 을 받고 있습니다.

예시;

이 페이지 규칙의 사용

이 페이지 규칙은 wp-login.php 파일에 보안 계층을 추가합니다. 누군가 WordPress 대시보드에 로그인하려고 할 때마다 먼저 브라우저 무결성을 확인하고 웹사이트에 대한 무차별 대입 공격을 방지합니다.

우리는 또한 무차별 대입 공격으로부터 우리 웹사이트를 방지하기 위해 몇 가지 플러그인을 사용할 수 있지만 이러한 유형의 플러그인은 막대한 웹사이트 리소스를 필요로 하고 웹사이트 속도를 늦출 수 있습니다. 따라서 로그인 페이지가 악의적인 시도로부터 보호하기 위해 Cloudflare를 사용하고 있습니다.

Cloudflare에 대한 두 번째 페이지 규칙

두 번째 규칙은 다음과 같습니다.

• URL : example.com/wp-admin/*
• 규칙(드롭다운에서 선택) : 성능 비활성화

예시;

이 페이지 규칙의 사용

이 페이지 규칙은 wp-admin 폴더 내부의 성능을 비활성화했습니다. 비활성화하면 사이트의 백엔드 측에서 Minification, Rocket Loader, Mirage 및 Polish가 비활성화됩니다.

Cloudflare에 대한 세 번째 페이지 규칙

세 번째 규칙은 다음과 같습니다.

• URL : example.com/wp-content/*
• 규칙 1 : 브라우저 캐시 TTL => 1년
• 규칙 2 : 항상 온라인 => 켜짐
• 규칙 3 : 캐시 수준 => 모든 항목 캐시
• 규칙 4 : Edge Cache TTL => 한 달

예시;

이 페이지 규칙의 사용

세 번째 페이지 규칙은 wp-content 폴더 내부에서 작동하며 wp-content 폴더 내부의 모든 항목을 캐시하고 브라우저 캐시 만료 TTL 은 Cloudflare가 방문자의 브라우저에 리소스를 캐시하도록 지시하는 시간입니다.

시간이 만료될 때까지 브라우저는 로컬 캐시에서 리소스를 로드하므로 웹 사이트 속도를 높이는 데 도움이 됩니다.

그리고 Edge Cache TTL 은 Cloudflare 서버가 새 복사본을 요청하기 전에 리소스를 캐시하는 시간을 제어하는 ​​설정입니다.

Cloudflare를 사용하여 웹사이트에 동일한 설정을 구현한 경우 웹사이트가 GTmetrix 및 기타 페이지 속도 테스트 도구에서 잘 수행되기 시작할 가능성이 많습니다.

그리고 지금까지 웹 사이트의 전반적인 성능을 향상시키기 위해 하나의 CDN만 공유했습니다. 이제 Cloudflare CDN과 함께 작동할 수 있는 몇 가지 CDN을 더 공유하겠습니다.

4.2 이미지 최적화를 위한 ImageKit 사용

이제 실시간으로 이미지를 최적화하기 위해 ImageKit을 사용할 것입니다. 실시간 이미지 최적화 및 변환 CDN 네트워크 중 하나로서 웹사이트가 실제로 이미지의 가시적인 화질에 영향을 미치지 않으면서 사진의 실제 크기를 줄이는 데 도움을 줍니다.

이 CDN에서 가장 마음에 들었던 점 중 하나는 WordPress와 같은 애플리케이션과의 빠른 통합입니다. 합리적인 가격을 제공하며 더 나은 이미지 최적화를 위해 선택하는 것이 훨씬 더 나은 옵션이라는 것을 알았습니다.

ImageKit은 CDN에 대해 세 가지 유형의 가격을 제공하며 웹 사이트 요구 사항에 따라 선택할 수 있습니다(저는 웹 사이트에서 Forever Free Plan 을 사용하고 있습니다).

가격을 선택하고 해당 플랫폼에 등록하면 끝점 을 만들어야 합니다. 끝점 을 생성하면 CDN URL 이 표시됩니다(아래 이미지에서 확인).

보시다시피 TheGuideX 도메인 이름에 대한 웹 서버 기반 CDN URL을 만들었습니다. 내 CDN URL은 https://ik.imagekit.io/tgx/ 입니다.

ImageKit URL을 얻었으면 WordPress 웹사이트에서 활성화해야 합니다. 이렇게 하려면 WordPress 관리자 패널 > 설정 > WP Rocket > CDN 을 방문하여 WP Rocket CDN 설정을 열어야 합니다.

CDN 페이지로 이동하면 웹사이트에 대해 CDN 을 활성화한 다음 필드에 ImageKit의 URL을 입력하고 " reserve for" 설정에서 이미지로 변경해야 합니다.

일단 그렇게 하면 WP Rocket은 https://theguidex.com 이름에서 https://ik.imagekit.io/tgx로 이미지의 URL만 다시 씁니다 . 따라서 이미지가 실시간으로 CDN URL에서 로드되기 시작합니다.

이러한 변경을 수행하면 이제 더 나은 압축 및 이미지 전달을 위해 ImageKit에서 몇 가지 최적화 조정을 수행합니다.

이러한 최적화 조정을 위해 ImageKit 대시보드에 다시 로그인한 다음 이미지 설정을 클릭합니다.

이미지 설정 페이지에서 필요에 따라 설정을 사용자 지정할 수 있습니다.

보시다시피 여기에서 " 이미지 전달에 최상의 형식 사용" 을 활성화하고 이미지 품질 을 70%로 활성화했습니다.

원하는 경우 Data Saver에 대한 설정을 활성화할 수도 있습니다. 웹사이트 사용자가 브라우저에서 데이터 절약 모드를 사용하는 경우 ImageKit은 품질 감소 및 자동 DPR 지원 없음을 비롯한 다양한 방법을 사용하여 이미지를 더 가볍고 빠르게 로드합니다.

최적화 설정 옆에 네트워크 최적화 옵션이 표시됩니다. 네트워크 최적화 설정에서 사용자의 네트워크 유형에 따라 이미지 품질을 제공할 수 있는 옵션이 제공됩니다.

대부분 사람들은 4G 기기를 사용합니다. 네트워크 유형에 대해 자세히 알아보려면 분석을 자세히 살펴보세요. 사람들이 느린 네트워크를 사용하여 웹사이트에 액세스하고 있다는 사실을 알게 되면 여기에서 이미지 전송 품질을 수동으로 설정할 수 있습니다.

따라서 이것이 ImageKit의 가장 중요한 설정이지만 이미지 설정 페이지에서 더 많은 설정을 수행할 수 있습니다.

이러한 설정에는 모바일 및 데스크톱 장치의 이미지 높이와 너비 수동 설정, 이미지 사본 저장 등이 포함될 수 있지만 이 게시물에서는 이러한 설정에 대해 논의하지 않으며 우리에게 아무 소용이 없습니다.

이제 웹 사이트에서 CDN을 사용하는 세 번째 부분으로 이동합니다. 그리고 이 단계에서는 JS 및 CSS용 웹 사이트에서 Cloudfront를 구현하고 사용하는 방법을 보여줍니다.

4.3 JS 및 CSS용 Amazon Cloudfront 사용

아시다시피 Amazon CloudFront는 가장 인기 있는 CDN 중 하나이며 세계 최대의 웹 사이트는 Amazon CloudFront CDN 서비스에 의존합니다.

그들은 전 세계에 61개의 서버를 배치했으며 특정 위치에서 웹사이트의 이미지를 더 빠르게 전송하고 전달할 수 있습니다.

먼저 " Amazon Cloudfront 시작하기 "를 클릭하고 기존 Amazon ID를 사용하여 웹사이트에 등록하거나 새 이메일 ID를 사용하여 플랫폼에 등록할 수도 있습니다.

Amazon AWS 계정에 로그인하면 Cloudfront를 검색하고(여기를 클릭하여 Cloudfront 페이지를 직접 방문할 수도 있음) " 배포 생성 "을 클릭한 다음 웹 속성 을 선택하고 " 시작하기"를 클릭합니다.

원본 도메인 이름에 도메인 이름을 입력합니다. 이 경우 내 도메인 이름은 https://theguidex.com 이므로 www 또는 https 없이 guidex.com 을 입력합니다.

그 옆에 원본 경로 를 입력하고 wp-content 폴더 경로를 입력한 다음 SSL 프로토콜에서 TLSv1 을 선택하고 원본 프로토콜에서 " 뷰어 일치" 를 선택해야 합니다.

이제 " Distribution Settings "까지 아래로 스크롤한 다음 가격 등급에서 " Use All Edge Locations" 를 선택하고 기본 CloudFront SSL 설정을 지정합니다.

지원되는 HTTP 버전 을 설정 하고 "HTTP/2, HTTP/1.1, HTTP/1.0"으로 변경할 수도 있습니다. 이 설정을 완료했으면 " 배포 만들기 "를 클릭하십시오.

다시 Cloudfront 배포 페이지로 이동하여 배포가 제대로 활성화되었는지 확인합니다(상태 섹션 아래에 녹색 텍스트로 표시됨).

활성화되면 원본 도메인의 ID 를 클릭합니다.

배포 ID를 클릭하면 위 이미지에 표시된 것과 유사한 페이지가 열립니다. 도메인 이름(빨간색 상자에 표시)을 복사하여 WP Rocket의 CDN 섹션에 붙여넣습니다.

WP Rocket에 도메인 이름을 붙여넣은 다음 예약된 => " Javascript/CSS "를 선택합니다.

이제 도메인 이름에 AWS Cloudfront를 성공적으로 설정했습니다.

이러한 설정은 웹사이트가 Google PageSpeed ​​Insight, GTmetrix 및 Pingdom에서 성능을 높이는 데 충분합니다. 이제 웹 사이트 성능이 즉시 증가하는 것을 볼 수 있습니다.

그래도 웹사이트 속도를 높이는 방법을 잘 모르거나 웹사이트 속도 최적화 서비스가 필요한 경우 [email protected] 이메일로 연락할 수 있습니다.

지금까지 웹사이트 속도를 최적화하기 위해 가능한 모든 작업을 수행했습니다. 하지만 고급 사용자라면 웹사이트 속도를 높이는 데 도움이 되는 몇 가지 방법을 더 공유하겠습니다.

그러나 초보자이거나 기술 지식이 없는 경우 이러한 종류의 항목을 관리하기 위해 호스팅 지원에 문의하는 것이 좋습니다.

속도를 위해 WordPress 미세 조정(고급)

이 미세 조정 WordPress 속도 최적화 방법에서는 웹사이트 속도를 최적화하는 데 놀랍도록 작동하는 몇 가지 고급 팁을 공유합니다.

1. 최신 PHP 버전 사용

따라서 웹 사이트를 최적화하는 첫 번째 방법은 최신 PHP 버전을 사용하는 것입니다. 최신 PHP 7은 이전 버전보다 2배 빠릅니다. 이는 사이트에서 활용해야 하는 엄청난 성능 향상입니다.

최신 버전의 PHP를 사용하는 이유는 무엇입니까?

웹 사이트에서 최신 버전의 PHP를 사용해야 하는 이유를 모르겠다면 여기에 답이 있습니다. WordPress는 주로 PHP 언어로 작성되었으며 PHP는 서버 측 언어입니다.

따라서 웹 사이트에서 최신 PHP 버전을 사용하면 웹 사이트의 성능을 높일 수 있습니다. 최신의 안정적인 PHP 버전은 v7.4입니다. 나는 심지어 이 웹사이트에서 이 버전의 PHP를 사용합니다.

2. 게시물 수정 제한

때때로 우리는 WP-Optimize와 같은 플러그인을 사용하여 데이터베이스를 최적화하는 것을 잊습니다. 위에서 언급했듯이 이 게시물을 작성할 때 데이터베이스에 40개 이상의 수정본이 저장되어 있습니다.

때때로 이 정도의 수정을 자동으로 저장하면 웹사이트의 성능이 최악의 수준으로 떨어질 수 있습니다. WordPress가 각 기사에 대해 유지하는 개정 수를 쉽게 제한할 수 있습니다.

이 코드 줄을 wp-config.php 파일에 추가합니다.

 정의( 'WP_POST_REVISIONS', 4 );

3. 콘텐츠의 핫링크 및 리칭 비활성화

때때로 우리 웹사이트에서 양질의 콘텐츠를 만들면 RSS를 사용하여 도난당하고 때로는 다른 웹사이트가 자체 서버에 업로드하는 대신 웹사이트의 URL에서 직접 이미지를 제공합니다.

이렇게 하면 웹사이트 대역폭을 훔쳐 사이트에 피해를 입히고 아무런 이점도 얻지 못합니다.

따라서 이 경우 웹사이트 리소스와 대역폭을 절약하기 위해 .htaccess 코드를 사용하여 이미지의 핫링크를 차단해야 합니다. 코드는 다음과 같습니다.

 #금지 또는 사용자 정의 이미지 옵션이 있는 이미지 핫링크 비활성화
RewriteEngine 켜기
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?theguidex.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L] 

참고: 자신의 도메인 이름으로guidex.com을 변경하는 것을 잊지 마십시오.

웹사이트에서 RSS 피드를 사용하지 않는 경우 RSS 피드를 비활성화할 수도 있습니다.

4. DNS 수준 웹사이트 방화벽 사용

속도 최적화를 위한 또 다른 가장 중요한 요소는 DNS 수준 웹사이트 방화벽을 사용하는 것입니다. 내 로그인 페이지의 보안을 강화하기 위해 guidex.com/wp-login.php에 Cloudflare 페이지 규칙을 만들었습니다.

글쎄, 나는 또한 내 웹 사이트에서 프리미엄 버전의 Wordfence를 사용하고 있습니다. 환상적인 플러그인이며 실시간으로 위협, 무차별 대입 공격을 차단하는 데 도움이되지만 의심의 여지가 없습니다. 그것은 무거운 플러그인이며 위협에 맞서기 위해 많은 웹 사이트 리소스가 필요합니다.

그리고 높은 CPU 리소스 사용을 방지하기 위해 내 웹사이트에서 DNS 수준 웹사이트 방화벽을 사용하고 있습니다. 따라서 웹 사이트의 성능을 개선하고 DNS 수준에서 위협을 차단하려면 DNS 수준 방화벽을 사용하고 있는지 확인하십시오.

5. 데이터베이스 호출 줄이기

이 단계는 좀 더 복잡하며 테마에서 데이터베이스 호출을 줄이려면 기술 지식이 필요합니다. WordPress 지침을 따르지 않고 데이터베이스에 불필요한 호출을 너무 많이 하는 잘못 코딩된 테마가 많이 있습니다.

이러한 테마는 웹사이트의 속도를 늦추고 데이터베이스 호출을 줄이고 웹사이트의 전반적인 성능을 높일 수 있습니다.

깔끔하게 코딩되고 최적화된 테마 중 일부라도 데이터베이스에서 기본 정보를 가져오기 위해 불필요한 데이터베이스 호출을 수행합니다. 따라서 자식 테마를 만들고 이 기본 정보를 정적으로 추가하여 데이터베이스 호출 수를 줄이십시오.

6. 댓글을 페이지로 나누기

블로그에 댓글이 많이 달렸다면 우선 축하드립니다! 이는 훌륭한 청중을 구축한다는 좋은 신호입니다.

그러나 단점은 모든 댓글이 포함된 게시물을 로드하면 속도가 느려질 수 있다는 것입니다.

이 경우 주석을 여러 페이지로 분할하여 웹 페이지의 속도를 더욱 향상시킬 수 있습니다. 프로세스는 간단합니다. 설정»토론 으로 이동하여 " 페이지에 댓글 나누기 " 옵션 옆에 있는 확인란을 선택하기만 하면 됩니다.

7. GZIP 압축 확인

GZIP 압축은 웹사이트의 속도를 높이는 또 다른 가장 중요한 요소입니다. 웹사이트에서 wp 로켓 플러그인을 사용하는 경우 자동으로 활성화됩니다.

GZIP 압축은 서버 측에서 활성화되며 HTML, JS, CSS 파일의 크기를 압축하는 데 도움이 됩니다. 이미지는 이미 다른 방식으로 압축되어 있으므로 작동하지 않습니다.

GZIP 압축 확인과 같은 도구를 사용하여 웹사이트에서 GZIP을 사용하는지 여부를 확인할 수 있습니다.

사이트에서 GZIP을 사용하지 않는 경우 .htaccess 파일에서 이 코드를 사용하여 웹사이트에서 GZIP을 활성화할 수 있습니다. 그러나 이 코드를 사용하기 전에 사이트에서 아파치 서버를 사용하고 있는지 확인하십시오.

 # HTML, CSS, JavaScript, 텍스트, XML 및 글꼴 압축
  AddOutputFilterByType DEFLATE 애플리케이션/자바스크립트
  AddOutputFilterByType DEFLATE 애플리케이션/rss+xml
  AddOutputFilterByType DEFLATE 애플리케이션/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE 응용 프로그램/x-글꼴
  AddOutputFilterByType DEFLATE 응용 프로그램/x-font-opentype
  AddOutputFilterByType DEFLATE 응용 프로그램/x-font-otf
  AddOutputFilterByType DEFLATE 애플리케이션/x-font-truetype
  AddOutputFilterByType DEFLATE 응용 프로그램/x-font-ttf
  AddOutputFilterByType DEFLATE 애플리케이션/x-javascript
  AddOutputFilterByType DEFLATE 애플리케이션/xhtml+xml
  AddOutputFilterByType DEFLATE 애플리케이션/xml
  AddOutputFilterByType DEFLATE 글꼴/개방형
  AddOutputFilterByType DEFLATE 글꼴/otf
  AddOutputFilterByType DEFLATE 글꼴/ttf
  AddOutputFilterByType DEFLATE 이미지/svg+xml
  AddOutputFilterByType DEFLATE 이미지/x-아이콘
  AddOutputFilterByType DEFLATE 텍스트/css
  AddOutputFilterByType DEFLATE 텍스트/html
  AddOutputFilterByType DEFLATE 텍스트/자바스크립트
  AddOutputFilterByType DEFLATE 텍스트/일반
  AddOutputFilterByType DEFLATE 텍스트/xml

  # 브라우저 버그 제거(정말 오래된 브라우저에만 필요)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  헤더 추가 Vary User-Agent

8. 프리페칭 사용

리소스 미리 가져오기는 웹사이트의 성능을 향상시키는 또 다른 훌륭한 최적화 기술입니다. 이를 사용하여 사용자가 필요로 하기 전에 사용자에게 앞으로 필요할 수 있는 자산이 무엇인지 브라우저에 알릴 수 있습니다.

개발자로서 우리는 브라우저보다 애플리케이션을 더 잘 알고 있습니다. 따라서 우리는 이 정보를 사용하여 브라우저에 핵심 리소스에 대해 알립니다.

예를 들어,

 < 링크 rel = " 프리페치 " href = " image.png " >

9. 웹폰트 사용 줄이기

때로는 텍스트를 눈에 띄게 만들기 위해 여러 웹 글꼴을 사용합니다. 그러나 웹 글꼴을 너무 많이 사용하면 페이지의 렌더링 시간이 길어진다는 가장 큰 단점이 있습니다. 이것은 또한 외부 리소스에 추가 HTTP 요청을 추가합니다. 그리고 일반적으로 HTTP 요청을 최소한으로 유지하려고 합니다.

위 이미지에서 볼 수 있듯이 저는 제 웹사이트에서 실제로 필요한 웹폰트를 4개만 사용하고 있습니다. 또한 블로그에서 페이지의 렌더링 시간을 줄이기 위해 불필요한 웹 글꼴을 많이 사용하고 있지 않은지 확인해야 합니다.

이제 당신의 차례입니다

WordPress 블로그를 최적화하는 다양한 방법 중에서 속도 최적화를 위해 내 웹사이트에서 개인적으로 사용하는 몇 가지 최적화 기술을 공유했습니다. 이러한 방법은 간단하고 구현하기 쉽습니다.

이제 WordPress 웹 사이트의 속도를 개선하는 데 한 시간을 투자할 때입니다.

저를 믿으세요. 이러한 방법을 사용하여 블로그를 신중하게 최적화하면 웹사이트의 성능이 향상되고 웹사이트의 전체 로딩 시간도 향상됩니다.

이 기사가 WordPress 블로그의 속도를 높이는 효율적인 방법에 대한 명확한 설명을 제공하기를 바랍니다. 이 기사가 도움이 되었다면 댓글 섹션에 알려주십시오. 웹사이트를 최적화하기 위해 다른 방법을 사용하는 경우에도 아래 댓글 섹션에 알려주십시오.