WordPress 웹 사이트에서 속도 등급을 얻는 방법?

게시 됨: 2014-12-25

웹사이트 로드 시간. 모든 웹사이트 소유자의 골칫거리. 워드프레스도 예외는 아닙니다. WordPress 웹 사이트에서 A 속도 등급을 받으려면 많은 작업이 필요합니다. 좋은 호스팅이 가장 중요합니다. 호스팅 속도 가 느리다 면 웹사이트 캐싱의 달인이라 하더라도 사이트 속도가 좋지 않을 수 있습니다. 호스팅을 확인하는 방법은 무엇입니까?

가장 쉬운 옵션은 WordPress의 관리자 패널로 이동하는 것입니다. 로드 속도가 매우 느리다면 호스팅 변경을 고려해야 합니다. 특히 공유 호스팅 계획을 사용하는 경우. 그럴 땐 기적을 바라지마

페이지 + 소셜 버튼 + 외부 스크립트 에 광고를 많이 사용하는 경우 A 등급을 잊어 버리십시오. 외부 스크립트를 캐시할 수 없습니다. 페이지 로드 시간을 줄이려면 좋은 CDN을 사용하는 것이 좋습니다.

그러나 WordPress 웹 사이트에서 A 속도 등급을 받지 못하더라도 화를 내지 마십시오. 가장 중요한 것은 사이트 속도입니다. WordPress 웹 사이트 속도를 향상시키기 위해 몇 가지 팁을 활용할 수 있습니다. 5초 미만 이어야 합니다. 사이트가 3초 안에 로드되면 – 양호, 1초 – 대단합니다. C 등급을 받았지만 사이트가 1초 미만으로 로드되더라도 스스로를 축하하고 하이파이브를 하십시오.

이제 " 그가 페이지 속도에 대한 조언을 하고 있습니까? 그의 사이트 속도조차 나쁩니다. "글쎄, 당신은 진실에서 멀지 않습니다. 예, 이 사이트 속도는 방문하는 국가에 따라 훌륭하지 않습니다. 하지만 나에게는 그럴만한 이유가 있다.

사이트를 최적화하기 위한 위의 조언은 내가 관리하고 있는 몇 가지 다른 사이트를 기반으로 합니다. 당신이 좋아한다면 그것을 시도하십시오. 그렇지 않은 경우 더 나은 조언을 제공하십시오.

웹사이트 속도 테스트를 위한 최고의 사이트는 다음 과 같습니다.

GTmetrix
핑돔
Google PageSpeed 통계

위의 사이트는 웹사이트 속도와 페이지 로드 속도를 테스트하기에 좋습니다. 세 가지 모두에서 웹 사이트 속도를 확인하면 다른 결과를 얻을 수 있습니다. 그러나 많은 차이가 없어야 합니다. 워드프레스 웹사이트 로드 시간을 테스트하는 데 사용되는 위치도 중요한 요소입니다.

WordPress 웹 사이트에서 속도 등급 받기

다음은 WordPress 웹 사이트 속도를 높이기 위해 활용할 수 있는 방법입니다.

1. 하이퍼 캐시 + 자동 최적화 + htaccess 트릭

이 속도 최적화 제안은 하이퍼 캐시가 다른 많은 플러그인과 충돌하지 않는 캐시 플러그인 중 하나이기 때문에 초보자에게 더 적합합니다. 그리고 그것은 매우 쉽습니다. 설정이 거의 없습니다.

참고 : WooCommerce를 사용하는 경우 장바구니 URL을 캐시되지 않은 페이지에 추가하십시오. 이를 위해 우커머스 장바구니 페이지 링크를 복사합니다. 하이퍼 캐시 설정의 우회 탭으로 이동합니다. 그리고 우회하기 위해 정확한 URI 에 해당 링크를 추가하십시오. Hyper Cache를 다운로드하고 설치하고 활성화합니다. 그것은 무료입니다.

하이퍼 캐시는 데이터베이스와 페이지 캐시를 생성합니다 . 다음으로 할 수 있는 일은 html, js, css 캐시를 만드는 것입니다. Autooptimize를 사용하여 이를 수행할 수 있습니다. 무료이므로 다운로드, 설치 및 활성화하기만 하면 됩니다. 활성화한 후에는 다른 옵션을 활성화해야 합니다. 다른 플러그인에 문제가 있는 경우 고급 옵션을 활성화해 보세요.

WordPress-Website-On-Yslow-And-PageSpeed 등급 획득

그런 다음 Force JavaScript in <head> 및 Look for styles only in <head> 를 확인하십시오 . 더 많은 점수를 얻기 위해 추가할 수 있는 다음 사항은 파일 만료 설정입니다. 이를 위해 .htaccess 파일에 코드를 추가해야 합니다. SEO by Yoast 플러그인을 사용하는 경우 SEO -> 파일 편집으로 이동하십시오.

.htaccess에 아래 코드 추가

# 헤더 만료(더 나은 캐시 제어를 위해)
# ————————————————————————
# 이것들은 꽤 먼 미래의 만료 헤더입니다.
# 파일 이름 기반 캐시 버스팅으로 버전 관리를 제어한다고 가정합니다.

# 버전에 파일 이름을 사용하지 않는 경우 CSS와 JS를 다음과 같이 낮춥니다.
# "액세스 플러스 1주일".
<IfModule mod_expires.c>
만료일에 활성

# 만료 규칙을 화이트리스트에 추가하는 것이 더 나을까요? 혹시.
ExpiresDefault "액세스 플러스 1개월"

# cache.appcache는 FF 3.6에서 재요청이 필요합니다(Remy에게 감사 ~HTML5 소개)
ExpiresByType 텍스트/캐시 매니페스트 "액세스 플러스 0초"

# 데이터
ExpiresByType text/xml "액세스 플러스 0초"
ExpiresByType application/xml "액세스 플러스 0초"
ExpiresByType application/json "액세스 플러스 0초"

# 먹이다
ExpiresByType application/rss+xml "액세스 플러스 1시간"
ExpiresByType application/atom+xml "액세스 플러스 1시간"

# 파비콘(이름 변경 불가)
<FilesMatch \.(ico)$>
ExpiresDefault "액세스 플러스 1주일"
파일 일치>
ExpiresByType 이미지/x-아이콘 "액세스 플러스 1주"

# 미디어: 이미지, 비디오, 오디오
<FilesMatch \.(gif|png|jpg|jpeg|ogg|mp4|mkv|flv|swf|wmv|asf|asx|wma|wax|wmx|wm)$>
ExpiresDefault "액세스 플러스 1년"
파일 일치>
ExpiresByType image/gif "액세스 플러스 1개월"
ExpiresByType 이미지/png "액세스 플러스 1개월"
ExpiresByType 이미지/jpeg "액세스 플러스 1개월"
ExpiresByType 비디오/ogg "액세스 플러스 1개월"
ExpiresByType 오디오/ogg "액세스 플러스 1개월"
ExpiresByType 비디오/mp4 "액세스 플러스 1개월"
ExpiresByType video/webm "액세스 플러스 1개월"

# HTC 파일(css3pie)
ExpiresByType 텍스트/x-구성 요소 "액세스 플러스 1개월"

# 웹폰트
ttf|otf|svg|woff)$>
ExpiresDefault "액세스 플러스 1년"
</FilesMatch>
ExpiresByType application/x-font-ttf "액세스 플러스 1개월"
ExpiresByType 글꼴/개방형 "액세스 플러스 1개월"
ExpiresByType application/x-font-woff "액세스 플러스 1개월"
ExpiresByType image/svg+xml "액세스 플러스 1개월"
ExpiresByType application/vnd.ms-fontobject "액세스 플러스 1개월"

# CSS와 자바스크립트
CSS|js)$>
ExpiresDefault "액세스 플러스 1년"
</FilesMatch>
ExpiresByType 텍스트/css "액세스 플러스 1년"
ExpiresByType 애플리케이션/자바스크립트 "액세스 플러스 1년"

# 정적 자산
pdf|doc|rtf|xls|ppt)$>
ExpiresDefault "액세스 플러스 1년"
</FilesMatch>
ExpiresByType 애플리케이션/x-shockwave-flash "액세스 플러스 1년"
ExpiresByType application/pdf “액세스 플러스 1년”
ExpiresByType 애플리케이션/msword "액세스 플러스 1년"
ExpiresByType application/rtf "액세스 플러스 1년"
ExpiresByType application/vnd.ms-excel "액세스 플러스 1년"
ExpiresByType application/vnd.ms-powerpoint "액세스 플러스 1년"
IfModule>
<IfModule mod_deflate.c>
# 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
</If 모듈>

2. W3 총 캐시

캐시 플러그인 사용에 익숙하다면 W3 Total 캐시 사용을 고려해야 합니다. 이 플러그인은 올인원과 같은 도구입니다. 페이지, 개체, 브라우저, 파일, CDN 등을 설정할 수 있습니다.

이것은 다양한 설정을 가진 매우 강력한 플러그인입니다. 플러그인의 주요 문제는 종종 다른 플러그인과 충돌한다는 것입니다. 플러그인을 너무 많이 사용하지 않는다면 이 플러그인을 추천할 수 있습니다.

테마 및 이 플러그인에 문제가 있는 경우 99%의 경우 W3 Total Cache가 사이트의 플러그인 중 하나와 충돌하기 때문입니다. 90%의 경우 이것은 js 및 css minify 때문입니다. 따라서 프론트엔드에 이러한 문제가 있는 경우(예: 모든 탭, 슬라이더, 그리드가 손상됨) css 및 js 축소를 비활성화하면 됩니다.

캐싱에 대한 경고

캐싱은 WordPress 속도를 높이는 매우 효과적인 방법이지만 몇 가지 단점도 있습니다. 캐싱이 얼마나 적극적인지에 따라 캐시를 플러시하지 않는 한 변경 사항이 오랫동안 적용되지 않을 수 있습니다. 특정 플러그인과의 호환성 문제도 예상됩니다.

페이지 속도를 테스트하려면 GTmetrix 및 Google PageSpeed를 권장합니다. 이 작은 튜토리얼이 도움이 되었기를 바라며 WordPress 웹사이트에서 A 속도 등급을 받았습니다. 그렇지 않은 경우 페이지 로드 시간을 약 5초로 만듭니다.

캐싱 플러그인의 경우 WP Rocket을 사용하는 것이 좋습니다. 위에서 언급한 것도 훌륭하지만 유료 옵션으로 WP Rocket이 탁월한 선택입니다. 자세한 내용은 WP Rocket vs WP Super Cache vs W3 Total Cache vs Hyper Cache 비교를 참조하십시오.