플러그인을 사용하여 WordPress 웹 사이트를 더 빠르게 로드하는 방법

독자의 관심을 끌고 싶다면 훌륭한 콘텐츠가 많은 멋진 웹사이트를 보유하는 것이 중요합니다. 불행히도 페이지가 너무 느리게 로드되면 독자가 귀하의 콘텐츠를 보지 못할 수 있습니다. 왜요? 그들의 주의를 끌고 다음 사이트로 넘어가지 않도록 할 수 있는 시간은 단 몇 초뿐입니다. 독자는 콘텐츠가 로드될 때까지 기다리기를 원하지 않습니다. 오래 기다릴수록 잃어버릴 확률이 높아집니다.

이러한 이유로 페이지 로딩 속도를 최적화하는 것이 매우 중요합니다. 속도를 측정하고 문제를 해결하는 데 도움이 되는 몇 가지 유용한 도구가 온라인에 있습니다. 가장 인기 있는 도구 중 하나는 Google PageSpeed ​​Insights입니다.

PageSpeed ​​인사이트

Google PageSpeed ​​Insights는 웹사이트의 로딩 속도를 테스트하고, 문제를 식별하고, 우선순위를 지정하고, 문제 해결을 위한 제안을 제공하는 무료 온라인 도구입니다.

이 기사에서는 기본 블로그로 우아한 테마의 Divi를 사용하는 내 사이트를 사용하고 있습니다. 수정해야 할 사항, 도구에서 제안하는 사항 및 수정한 방법을 보여주고 있습니다. 점수는 모바일 및 데스크톱 모두에 대한 결과를 제공합니다. 저는 데스크탑에 집중하고 있습니다. 일부 모바일 문제는 그 과정에서 해결될 것입니다.

이러한 문제의 대부분은 플러그인을 사용하여 해결됩니다. 플러그인을 결정할 때는 최근에 업데이트되고 평판이 좋은 플러그인을 사용하십시오. 많은 플러그인이 하나 이상의 문제를 해결합니다.

주의 사항 - 일부 플러그인은 동일한 작업을 수행하려고 하기 때문에 다른 플러그인과 잘 작동하지 않습니다. 이것은 원하는 것과 다른 효과를 가질 수 있습니다. 기본 사이트에서 사용하기 전에 테스트 사이트에서 사용하는 것이 좋습니다. 플러그인 자체뿐만 아니라 플러그인 조합도 마찬가지입니다. 라이브 사이트에서 플러그인을 시도하기 전에 최근 백업이 있는지 확인하십시오.

내 점수

내 점수는 끔찍한 46 입니다. 가장 먼저 주목해야 할 것은 결과에 세 개의 다른 섹션이 있다는 것입니다.

• 수정해야 함(2개 항목)
• 수정 고려(6개 항목)
• 합격(2개 항목)

각 섹션은 문제가 무엇인지 보여주기 위해 확장되고 문제 해결 방법에 대한 조언을 제공합니다. 첫 번째 항목부터 시작하여 순서대로 진행하는 것이 가장 좋습니다. 순서대로 해결하면 목록의 다른 문제도 해결됩니다.

참고 – 그 과정에서 몇 번의 실패도 겪었습니다. 나는 당신이 가능한 문제를 알 수 있도록 그들을 포함 시켰습니다.

수정해야 함

즉각적인 주의가 필요한 두 가지 항목이 있습니다.

• 압축 활성화
• 스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 차단 JavaScript 및 CSS 제거

압축 활성화

가장 중요한 문제는 압축을 사용하지 않는다는 것입니다. 파일 전송 크기를 79%까지 줄일 수 있음을 보여줍니다. 이것은 gzip 또는 deflate를 사용하여 수행할 수 있습니다.

WP 성능 점수 부스터

이 무료 플러그인은 gzip 압축을 지원하며 쿼리 문자열을 제거하고, vary: accept-encoding 헤더를 추가하고, 캐싱 만료를 설정하여 CSS 및 JavaScript 문제와 같은 여러 다른 문제를 해결할 것입니다. 10,000개가 넘는 활성 설치가 있는 4.7/5가 있기 때문에 선택했습니다. 페이지 로딩 속도를 높이고 페이지 점수 테스트를 개선하기 위해 개발되었습니다.

이것은 서버 응답 시간을 줄이기 위한 메시지와 함께 78점을 받았습니다 . 이것은 내 호스팅 계획과 많은 관련이 있습니다. 내 웹 사이트를 새 호스팅 계획으로 이동하여 이 문제를 해결하고 있습니다. 그것은 이 글의 범위를 벗어납니다.

이것에 대한 한 가지 멋진 점은 다음 문제의 주요 문제 중 일부를 해결했다는 것입니다. 스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 차단 JavaScript 및 CSS를 제거합니다. 이 문제는 이제 수정 고려로 이동되었습니다. 또한 브라우저 캐싱 활용을 완전히 수정했습니다. 사이트는 이제 4개의 규칙을 통과하고 있습니다. 이전에는 2개만 통과했습니다.

서버 응답 시간 단축

이것에 대한 이상한 점은 서버 응답 시간이 .96에서 1.4로 증가했다는 것입니다. 서버 응답 시간 줄이기가 이제 수정해야 함. 이것은 캐싱 플러그인을 요구했습니다.

W3 총 캐시

W3 Total Cache는 웹사이트의 서버 성능 속도를 높이는 데 가장 널리 사용되는 플러그인입니다. 거의 백만 개의 활성 설치가 있고 4.4/5의 등급이 있습니다. 캐싱을 통해 사이트를 최적화합니다. 다른 캐싱 옵션을 개별적으로 선택할 수 있습니다. 여기에는 페이지, 데이터베이스, 개체 및 브라우저가 포함됩니다. 향후 만료 헤더 및 엔터티 태그, 피드 및 검색 결과를 캐시합니다. 또한 JS, CSS 및 HTML을 축소하는 기능도 있습니다. 완전히 구성되면 Google PageSpeed ​​점수가 10배 이상 빨라집니다.

모든 캐싱 기능을 켜고 시도했습니다. 이것 으로 내 점수 는 86 점 까지 되었습니다 . 처음으로 내 사이트는 녹색 상태가 되었고 내가 가진 모든 문제는 수정 고려 아래에 있었습니다. 이제 "서버가 빠르게 응답했습니다"라는 서버 응답 시간을 포함하여 5가지 규칙을 통과합니다.

고정 고려

처음 테스트를 실행했을 때 이 섹션은 최종적으로 테스트했을 때보다 더 많은 문제가 있었습니다. 이 문제 중 많은 부분은 수정해야 함 영역에서 문제를 수정했을 때 해결되었습니다.

원래 포함된 문제:

• 브라우저 캐싱 활용
• 서버 응답 시간
• 자바스크립트 축소
• 이미지 최적화
• CSS 축소
• HTML 축소

다음은 현재 문제를 살펴보겠습니다.

스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 차단 자바스크립트 및 CSS 제거

스크롤 없이 볼 수 있는 JavaScript 및 CSS는 브라우저에 너무 많은 부하를 가하여 페이지 로드 속도를 늦출 수 있습니다. 스크롤 없이 볼 수 있는 다른 항목을 로드하려면 먼저 로드해야 합니다.

몇 가지 방법으로 해결할 수 있습니다.

• 로딩 연기
• 비동기식으로 로드
• HTML에 직접 인라인하십시오.

다음은 이 문제를 해결하는 데 사용한 플러그인입니다.

자동 최적화

이 플러그인은 JavaScript, CSS 및 HTML을 축소하고(불필요한 모든 서식을 제거하고 파일 크기를 줄이고 브라우저에 로드) 압축합니다. 만료 헤더를 추가하고 캐시합니다. 스타일을 페이지 헤드로 이동하고 스크립트를 바닥글로 이동합니다. 고급 설정을 사용하여 특정 요구 사항에 맞게 조정할 수 있습니다.

이것은 또한 목록에서 JS 및 CSS를 축소하는 것과 같은 몇 가지 문제를 해결합니다.

처음에는 HTML, JS, CSS에 대한 기본 설정을 켰습니다. 이것은 내 점수를 88점으로 끌어 올렸고 문제를 3개의 CSS 리소스로 줄였습니다. 하나는 플러그인 자체에서 만들고 다른 두 개는 Google 글꼴입니다. 이제 7가지 규칙을 통과합니다. CSS 축소 및 HTML 축소를 해결했습니다.

더 나은 WordPress 축소

이 플러그인의 주요 목적은 CSS 및 JS를 축소하는 것이지만 파일을 바닥글이나 다른 위치로 이동할 수 있는 멋진 기능도 있습니다(이것이 제가 선택한 이유입니다). 대기열 시스템을 사용하여 브라우저, 플러그인 및 테마와의 호환성을 개선합니다.

설치했을 때 테마에 대한 모든 레이아웃 설정이 제거되었고 모든 메뉴, 이미지, 링크 등이 화면 맨 왼쪽에 나타났습니다. 다행히 제거했을 때 형식이 반환되었습니다. 설정에 조정이 필요한 부분이 있었을 수 있습니다. 60,000개가 넘는 활성 설치와 4.4/5의 등급을 가지고 있기 때문에 이것이 좋은 플러그인이라고 확신합니다. 일부 설정 없이는 필요한 방식으로 작동하지 않을 수 있다는 경고로 이것을 포함시켰을 뿐입니다.

내 점수가 88점이었고 3가지 문제가 무엇인지 알고 있었기 때문에 다음 문제로 넘어가기로 했습니다.

이미지 최적화

이미지 크기는 페이지 로딩 속도에 큰 역할을 합니다. 때로는 웹에서 볼 때 큰 시각적 차이 없이 훨씬 더 작은 이미지 크기와 더 낮은 품질을 사용할 수 있습니다. 이것은 로딩 시간을 단축하고 더 적은 대역폭을 사용할 뿐만 아니라 백업 시간을 단축하고 서버의 저장 공간을 줄입니다.

EWWW 이미지 최적화

이 플러그인은 업로드할 때 이미지를 자동으로 최적화하고 이미지를 가장 작은 크기를 생성하는 형식으로 변환합니다. 또한 이미 업로드한 이미지를 최적화합니다. PNG 및 JPG 이미지에 손실 감소를 적용할 수도 있습니다.

내가 그것을 설치했을 때 내가 찾아서 설치하기를 원하는 여러 파일이 있었습니다. 이 플러그인은 설치된 모든 파일에서 잘 작동할 것이라고 생각하지만 기본적으로 작동하는 플러그인을 찾기로 결정했습니다.

WP 스무시

이 플러그인은 품질 저하 없이 이미지의 파일 크기를 줄입니다. 숨겨진 정보를 제거하여 이를 수행합니다. 그것은 당신의 파일을 분석하고 얼마나 많은 이미지를 부숴야 하는지 알려줄 것입니다. 대량으로 분쇄할 수 있습니다.

무료 버전은 1MB를 넘지 않으며 한 번에 50개만 스무싱합니다. 그 이상을 위해서는 WP Smush Pro가 필요합니다. 이 프로는 한 번에 얼마나 많은 이미지를 제한 없이 최대 32MB까지 스매싱합니다. 필요한 경우 원본을 백업합니다. 가격은 월 $19부터 시작합니다.

스매싱이 필요한 이미지가 114개 있었습니다. 이 이미지 중 8개가 1MB를 초과했습니다. 나는 그것들을 손으로 고치기로 결정했다. 98개의 이미지를 smush하고 파일 크기를 4.79MB(8.82%) 줄였습니다.

이것 으로 내 점수 는 90 점 까지 되었습니다 . Google Insights는 마음에 들지 않는 5개의 이미지를 식별했지만 1MB를 초과하는 이미지는 없었습니다. 범위는 0.7KB에서 17KB입니다.

손으로 이미지 최적화하기

크기를 조정하고 품질을 낮추고 형식을 변경하여 이미지를 수동으로 최적화할 수 있습니다. 내가 가장 좋아하고 가장 많이 사용하는 이미지 처리 도구 중 하나는 Paint.NET입니다. 파일 크기를 줄이는 많은 기능이 있는 Windows용 무료 이미지 및 사진 편집 앱입니다. 가장 좋아하는 것은 무엇입니까?

JavaScript, CSS 및 HTML 축소

이거 고친줄 알았는데...

다른 문제를 처리하면서 축소할 유일한 메시지는 JavaScript용이라는 것을 알았습니다. 이미지를 최적화하면 세 가지 문제가 모두 반환되었습니다. 나는 무슨 일이 일어났는지 알아내기 위해 발걸음을 재촉했다.

Better WordPress Minify를 시도했다가 다시 끄면 CSS와 HTML을 축소하라는 메시지가 돌아왔습니다. 내 점수는 88로 떨어졌고 이제 5개의 규칙을 통과한 상태로 돌아갔습니다. W3 Total Cache의 축소 기능을 켜고 이제 모든 축소 문제를 통과했습니다. 나는 이제 88점을 얻었고 8개의 규칙을 통과했습니다. 또한 스크롤 없이 볼 수 있는 부분에 6개의 파일이 있었습니다. 나는 이것들 중 몇 가지를 해결했다는 것을 알고 있었고, 그래서 나는 뭔가를 변경했음에 틀림없다.

몇 가지 문제 해결을 수행했으며 이전에 Better WordPress Minify에 문제가 있었을 때 자동 최적화를 해제했음을 발견했습니다. Autooptimize를 다시 켜고 W3 Total Cache에서 minify를 끄고 캐시를 지웠습니다(매우 중요한 단계!). 나는 이제 90점을 얻었고 사이트는 8개의 규칙을 통과했습니다. 스크롤 없이 볼 수 있는 세 개의 CSS 파일과 이미지를 최적화하라는 메시지로 돌아갔습니다.

과거 경험을 바탕으로 이 파일에 시간을 낭비하지 않기로 결정했습니다. Google은 모든 크기의 이미지를 싫어하고(아무리 작게 가져오더라도 여전히 크기를 줄이라는 메시지를 받습니다) PageScore 46에서 90으로 이동하는 것이 내 책에서 승리한 것입니다. 나는 당신이 앞서있는 동안 멈추는 어려운 방법을 배웠습니다.

최종 점수

내 최종 점수는 90/100이었습니다. 이 점수를 얻는 데 사용한 플러그인은 다음과 같습니다.

• 자동 최적화(모든 기능 켜짐)
• W3 Total Cache(페이지 캐싱 기능만 켜짐)
• WP 성능 점수 부스터(모든 기능 켜짐)
• WP Smush(무료 버전)

기록을 위해 모바일 점수는 36에서 78로 갔습니다. 이 문제를 해결하려면 모바일용으로 이미지와 파일을 최적화해야 했습니다.

마지막 생각들

방문자, Google 및 기타 검색 엔진은 느리게 로드되는 웹사이트를 싫어합니다. Google PageSpeed ​​Insights를 사용하면 문제가 무엇인지 정확히 알고 해결 방법에 대한 팁을 얻을 수 있습니다. 소수의 무료 플러그인만 있으면 Google이 싫어하는 느린 사이트에서 Google이 좋아하는 빠른 사이트로 이동할 수 있습니다. 실험에 신중을 기하세요. 일부 플러그인은 다른 플러그인과 잘 어울리지 않습니다.

당신의 의견을 듣고 싶습니다. Google PageSpeed ​​Insights를 사용하여 WordPress 웹사이트를 최적화했습니까? 당신의 경험이 나와 비슷했습니까? 문제를 해결하기 위해 다른 플러그인을 사용했습니까? 의견에서 귀하의 경험에 대해 듣고 싶습니다.