WordPress 페이지 로드 시간을 줄이는 방법

이 글을 작성하기 전에 블로그의 페이지 로딩 시간을 다시 확인해야 했습니다. 글쎄, 나는 속도가 어느 정도 마음에 들고 내 페이지가 최적으로 수행되지 않으면 아마도 걱정스러운 사람으로 잠자리에들 것입니다. 그리고 저는 방금 Pingdom에서 73/100을 기록했기 때문에 걱정되는 사람입니다. 해야 할 일이 좀 있는 것 같지만 나에 대해서는 충분합니다. 웹 사이트가 느린 경우 다음과 같은 이유로 걱정해야 합니다.

Google은 웹사이트 순위를 매길 때 페이지 속도를 고려합니다.
느린 웹사이트는 수익원을 파괴합니다

느린 웹사이트를 좋아하는 사람은 아무도 없으며 이는 사실입니다. 나는 느린 웹사이트가 여러분이 가장 좋아하는 웹사이트 중 하나가 아닐 것이라고 확신합니다. 인내심을 갖고 계속해서 버틸 수 있다면 느린 웹사이트는 당신을 미치게 만들 수 있습니다. 즉, 웹 방문자에게 더 빠르고 풍부한 경험을 제공하기 위해 WordPress 웹사이트의 페이지 로드 시간을 어떻게 줄일 수 있습니까?

오늘 게시물에서는 WordPress 사이트를 더 빠르게 만드는 데 사용할 수 있는 10가지 이상의 요령을 공개합니다. 이 포인트 중 몇 가지를 가지고 실행하면 괜찮을 것입니다.

최고의 WordPress 호스팅을 선택하세요

최고의 WordPress 호스팅을 선택할 때 고려해야 할 몇 가지 요소가 있습니다. 실수로 표준 이하의 웹 호스트(또는 과중한 공유 호스팅 계획)를 선택한 경우 이는 한 가지만 의미합니다. 특정 웹 호스트를 사용하는 한 느린 사이트를 참아야 한다는 것입니다.

시작할 때(또는 테스트할 때) 저렴한 공유 호스팅 계획이 좋을 수 있지만 최고의 성능을 위해서는 WPEngine과 같은 관리형 WordPress 호스트가 필요합니다.

하지만 전용 서버나 VPS(Virtual Private Server) 호스팅 계획은 어떻습니까?

글쎄, 어떤 호스팅 계획도 관리되는 WordPress 호스팅과 경쟁할 수 없습니다. WPcurve.com은 WPEngine으로 전환한 날 속도가 54% 증가했다고 밝혔습니다. 우리 웹사이트가 얼마나 빨리 로드되는지 보셨나요? 그 이유는 우리도 WPEngine을 사용하기 때문입니다!

서버가 페이지 속도 문제의 중심에 있는지 어떻게 알 수 있습니까? Google PageSpeed Insights를 사용하여 도메인을 확인했는데 '서버 응답 시간'이 문제인 경우 웹 호스트 변경을 고려해야 합니다.

사용하지 않는 WordPress 플러그인 삭제

페이지 속도 향상과 관련하여 큰 이점을 경험하려면 플러그인을 설치할 때 주의해야 합니다. WordPress 플러그인과 관련하여 준수해야 할 두 가지 원칙이 있습니다.

필요하지 않은 플러그인은 활성화하지 마세요.
일부 플러그인은 너무 많은 문제를 일으키므로 설치 내용에 주의하세요.

WordPress 웹사이트의 모든 플러그인을 살펴보면 모든 플러그인이 필요하지 않을 수도 있다는 것을 알게 될 것입니다. 예를 들어 Yoast의 WordPress SEO가 있는 경우 XML 사이트맵 플러그인이 필요하지 않습니다. 또 다른 예: Akismet은 훌륭한 스팸 방지 플러그인이지만 Disqus와 같은 댓글 플러그인에 인상적인 스팸 필터링 시스템이 있는 경우에는 필요하지 않습니다. 당신은 따라하고 있습니까?

또한 WordPress 웹사이트에서 깨진 링크를 확인하는 데 플러그인이 필요하지 않으며 W3C 링크 검사기를 사용하여 온라인으로 쉽게 확인할 수 있습니다. WordPress 플러그인을 정리하고 거의 사용하지 않거나 전혀 사용하지 않는 플러그인을 제거하세요. WordPress Importer 또는 Ultimate Coming Soon과 같은 플러그인으로 인해 웹사이트 속도가 느려질 필요는 없습니다. 해당 플러그인이 목적을 달성한 후에는 제거하십시오.

귀하(또는 WordPress 개발자)가 특정 기능을 웹사이트에 직접 통합하여 웹사이트 속도를 저하시킬 수 있는 플러그인을 제거할 수 있는 것이 가장 좋습니다. 몰랐다면 플러그인은 페이지 상단에 모든 종류의 CSS 및 JavaScript 코드를 삽입하는 것으로 악명이 높습니다. 이는 페이지 로드 속도에 부정적인 영향을 미칠 수 있습니다.

중요: 사이트에 활성화된 플러그인이 많은 것은 아무런 문제가 없습니다. 문제는 잘못 코딩된 플러그인이 많거나 동일한 작업을 수행하는 여러 플러그인 또는 추가하는 플러그인이 많은 것입니다. 서버에 스트레스를 줍니다.

서버에 대한 HTTP 요청 줄이기

귀하의 웹 사이트에서 첫 번째 인스턴스를 표시하려면 수천 개의 파일이 필요합니까? 그렇다면 페이지 로드 시간에 소중한 시간을 많이 허비하게 됩니다. 귀하의 목적에 불필요한 것은 모두 제거하십시오. 그러나 그것이 어려운 것으로 판명되면 테마를 새로 코딩하는 것을 고려하십시오. 이번에만 사이트를 표시하는 데 필요한 파일 수에 제한을 두십시오.

웹사이트에서 사용하는 모든 파일(CSS, JavaScript, 이미지 등)은 페이지 로드 시간을 증가시킵니다. 페이지 속도를 높이려면 가능한 한 적은 수의 파일을 사용해야 한다는 것은 말할 필요도 없습니다. 웹사이트 전체에서 이를 해킹할 수 없다면 가장 인기 있는 페이지에서 몇 가지 파일을 사용하세요. 여기에는 홈페이지와 제품 페이지가 포함됩니다.

이미지 최적화

파일과 페이지 로드 시간에 영향을 미치는 방식에 있어서 이미지는 페이지 속도에 큰 영향을 미칠 수 있습니다. 이미지 성능을 최적화하기 위한 WordPress 플러그인에서 발견한 바와 같이, “...최적화되지 않은 이미지가 있는 웹사이트는 완전한 드래그이며 귀중한 대역폭을 소모하고 거의 모든 것을 느리게 하며 사용자 경험(UX)을 망치게 됩니다.”

업로드하기 전에 이미지를 WordPress용으로 최적화하거나 압축하거나 웹용 파일을 저장하세요. 웹용으로 파일을 저장하는 방법을 모르는 경우 "웹용으로 저장" 옵션은 Photoshop 및 Gimp와 같은 대부분의 이미지 편집 프로그램의 일반적인 기능입니다.

또 다른 중요한 것. 실제로 필요한 것보다 훨씬 큰 이미지는 사용하지 마세요. 150 x 150 미리보기 이미지가 필요한 경우 300 x 300 이미지를 업로드하거나 축소하지 마세요. 시중에는 (그리고 무료) 이미지 도구가 너무 많아서 이미지를 최적화하지 않을 이유가 전혀 없습니다. 어디를 봐야할지 모르시나요? 다음은 몇 가지 예입니다.

Pix Resizer(bluefive.pair.com에서 다운로드)
이미지 최적화
WordPress 이미지 최적화에 대해 자세히 알아보고 WordPress 웹사이트를 위한 10가지 무료 이미지 최적화 플러그인을 사용해 보세요.

귀하의 광고도 중요합니다

광고는 많은 웹사이트에서 큰 수익원이지만 페이지 로드 시간에 부정적인 영향을 미칠 수도 있습니다. 최적화된 이미지를 사용하여 홍보하는 제품이나 서비스에 직접 연결하는 것이 웹사이트에서 제안을 광고하는 가장 좋은 방법입니다. 또는 텍스트 링크를 사용하여 페이지 속도를 상당히 높일 수 있습니다. 텍스트 링크의 유일한 문제는 이미지가 텍스트보다 더 많은 관심을 끌기 때문에 광고 수익이 타격을 입을 수 있다는 것입니다.

외부 서버에서 실행되는 타사 광고 네트워크에 크게 의존하면 페이지 속도가 저하됩니다. 동시에 웹사이트에 지역 광고 추적 코드를 추가하면 성능이 저하될 수 있습니다. 무엇을 해야 할까요? 최적화된 로컬 호스팅(서버에서 호스팅됨) 이미지를 사용하여 제안을 홍보하세요. Pretty Link Pro와 같은 플러그인을 사용하여 언제든지 광고를 추적할 수 있습니다.

주요 사항: 서버 집약적인 광고 수를 줄이거나 서버 리소스에 부담을 주지 않는 광고만 선택하세요.

Gzip 압축 켜기

종이 한 장을 방 전체에 최대한 멀리 던지라는 지시를 받았다면, 종이를 가볍게 구기시겠습니까, 아니면 온 힘을 다해 쥐어 보시겠습니까? 맞습니다. 헐크 스매시(Hulk Smash)를 시작하게 될 것입니다.

이전 인용문은 Willie Jackson이 인용한 것이며 이 동일한 원칙이 Gzip 압축에도 적용됩니다. 이 기능은 웹 방문자에게 웹 사이트(모든 파일)를 보내기 전에 웹 사이트(모든 파일)를 압축하도록 서버에 지시합니다. 그러면 웹사이트가 브라우저 수준에서 압축이 풀립니다.

Gzip 압축은 WordPress 사이트 속도를 높이는 멋지고 쉬운 방법입니다. http://yourdomain.com/wp-admin/options.php에서 WordPress 옵션 화면으로 이동하여 gzip압축 값을 변경하세요. >필드는 0부터 1까지입니다. http://yourdomain.com을 자신의 도메인으로 바꾸세요. 분명히 이 기능이 작동하려면 먼저 사이트에 로그인해야 합니다 ?

캐싱 및 콘텐츠 전달 네트워크(CDN) 활용

WordPress 캐싱에는 지정된 기간 동안 사용자 장치에 일부 정적 파일(예: 이미지, 스크립트 등)을 저장하는 작업이 포함됩니다. 사용자가 나중에 웹사이트를 방문하면(캐시된 파일이 만료되지 않은 경우) 사용자가 서버에서 파일을 다운로드할 필요가 없으므로 웹사이트가 더 빠르게 로드됩니다.

WordPress 웹사이트에서 캐시를 활성화하는 것은 매우 쉽습니다. 자세한 내용을 알고 싶다면 .htaccess 파일에 아래 코드를 삽입하여 브라우저 캐싱을 활성화할 수 있습니다.

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType text/css "access 1 month"

ExpiresByType text/html "access 1 month"

ExpiresByType application/pdf "access 1 month"

ExpiresByType text/x-javascript "access 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 1 month"

</IfModule>

## EXPIRES CACHING ##

코드 제공: Kevin Muldoon. 위의 코드는 각 파일 형식이 캐시되는 기간을 지정합니다. 또는 다음과 같은 WordPress 캐싱 플러그인을 사용하여 몇 분 안에 캐싱을 활성화할 수 있습니다.

W3 총 캐시
WP 슈퍼 캐시
WP 가장 빠른 캐시

그런데 캐싱 플러그인은 파일의 정적 HTML 버전을 게시하므로 서버 호출이 필요하지 않습니다. 캐싱을 사용하면 속도가 즉시 향상되므로 WordPress 캐싱 플러그인을 미리 설치하세요. 많은 웹사이트 소유자와 WordPress 개발자가 WP Total Cache를 선택합니다. 캐싱은 제쳐두고 CDN(Content Delivery Network)을 간단히 살펴보겠습니다.

콘텐츠 전달 네트워크

귀하의 WordPress 웹사이트는 귀하의 웹 호스트 위치에 따라 전 세계 어디에서나 데이터 센터(서버)에서 호스팅될 수 있습니다. 서버가 아무리 강력하더라도 사용자가 서버(따라서 웹 사이트)에서 멀리 떨어져 있을수록 페이지 로드 시간이 길어집니다. 예를 들어 서버가 샌프란시스코에 있는 경우 런던에 있는 고객은 워싱턴에 있는 고객에 비해 로드 시간이 더 길어집니다.

CloudFlare 및 BootstrapCDN과 같은 콘텐츠 전달 네트워크는 이 문제를 완화합니다. 콘텐츠 전달 네트워크는 전 세계에 걸쳐 상호 연결된 일련의 데이터 센터입니다. CDN 계정에 가입하면 웹사이트 버전이 여러 데이터 센터에 저장됩니다. 사용자가 귀하의 웹사이트를 방문하면 CDN은 사용자에게 가장 가까운 데이터 센터에서 자동으로 귀하의 웹사이트를 제공합니다.

관리형 WordPress 호스팅 전문가인 WPEngine은 WordPress 웹사이트를 강화하는 데 도움이 되는 최고 수준의 CDN 및 캐싱 기능을 제공합니다.

상단의 스타일시트와 하단의 스크립트

사이트 아키텍처는 생각보다 다양한 방식으로 사이트 성능에 영향을 미칩니다. 즉, WordPress 사이트(또는 해당 문제에 대한 다른 사이트)에서 다양한 요소를 주문하는 방식은 콘텐츠 로드 속도에 상당한 영향을 미칩니다.

하지만 상단에 스타일시트를 배치하고 하단에 스크립트를 배치하면 내 웹 사이트의 페이지 로드 시간이 어떻게 줄어들까요? 첫째, 방문자가 스타일이 지정되지 않은 콘텐츠를 보는 것을 결코 원하지 않으십니까? 스타일시트를 맨 위(<head> 요소)에 배치하면 해당 스타일시트가 먼저 로드됩니다. 따라서 HTML이 로드될 때 스타일이 페이지에 적용됩니다.

하단에 스크립트를 넣으면 상호 작용 개체가 시작되기 전에 콘텐츠가 로드됩니다. 위젯, 스크립트 광고, 외부 API 호출 및 스크립트 양식은 콘텐츠 다음에 로드되어야 합니다. 결국 사용자는 콘텐츠를 본 후에만 이러한 개체와 상호 작용하게 됩니다. 방문자가 스타일이 지정되지 않은 콘텐츠를 보는 것을 원하지 않으며, 콘텐츠가 나타나기 오래 전에 다른 위젯 중에서 관련 게시물 위젯을 보는 것도 절대 원하지 않습니다.

알고 계셨나요? 스크립트를 맨 위(또는 <head> 요소)에 배치하면 스크립트 중 하나가 로드되지 않는 경우 콘텐츠가 로드되지 않을 수 있습니까?

외부 스크립트를 제한하세요

여전히 이 스크립트 사업에서 귀하의 웹사이트가 너무 많은 외부 스크립트에 의존한다면 속도가 느려질 것입니다. 광고가 웹사이트 속도를 어떻게 저하시킬 수 있는지를 다루었을 때 이에 대해 언급한 것 같습니다. 외부 스크립트의 일반적인 예는 다음과 같습니다.

소셜 미디어 공유 버튼(예: 유명한 Facebook 좋아요 및 Twitter 팔로우 버튼.
YouTube 및 기타 비디오 삽입 스크립트(그런데 WordPress 사이트에 YouTube 비디오를 추가하는 것은 정말 간단합니다)
IntenseDebate, Google+ Comments, Disqus 등과 같은 외부 댓글 플러그인
라이브 채팅
외부 옵트인 양식 및 팝업
외부 글꼴 스크립트
기타 등등

외부 스크립트 수를 줄이면 페이지 로드 시간을 크게 줄일 수 있습니다. 유일한 단점은 특정 기능 없이 웹사이트를 운영할 위험이 있다는 것입니다. 대부분의 기능을 테마에 직접 코딩하여 보완할 수 있습니다.

모든 외부 스크립트를 비활성화할 필요는 없습니다. Pingdom Site Speed 도구 또는 GTmetrix를 사용하여 투어 리소스에 부담을 주는 스크립트를 찾아낼 수 있습니다. 놀라운 페이지 속도나 더 많은 기능(사이트를 로드하는 데 수십 년이 걸리기 때문에 사용자가 결코 사용하지 못할 수도 있음)을 원하십니까? 더 나은 이익, 더 나은 페이지 속도를 위해 타협하는 것이 전부입니다.

작게 하다

우리는 무엇을 축소하고 있습니까? HTML, CSS 및 JavaScript 코드. HTML, CSS 또는 JavaScript를 어떻게 축소합니까? 코드에서 공백을 모두 제거합니다.

그러면 코드를 읽을 수 없게 되지 않을까요? 코드가 눈을 아프게 하지 않을까요? 예, 코드를 읽기 어렵게 만들 수 있지만 페이지 속도를 높이고 싶다면 그런 것에 대해 걱정하지 않아도 됩니다. 결국, 도움이 된다면 언제든지 코드를 주석 처리할 수 있습니다. 사람이 읽을 수 있도록 코드에 질서 있는 구조와 공백이 사용됩니다. 브라우저와 서버는 코드가 유효한 한 미적 측면에 전혀 신경 쓰지 않습니다.

프런트엔드를 향상하려면 공백을 많이 사용하되 코드에서 공백과 탭을 모두 제거하세요. 손을 대고 싶지 않다면 Autoptimize와 같은 플러그인을 사용하여 전체 프로세스를 자동화할 수 있습니다.

잘 코딩되고 관리되는 WordPress 테마 사용

개발자의 사랑을 받지 못한 WordPress 테마에는 일반적으로 서버 리소스를 소모하여 웹사이트 속도를 저하시키는 제대로 수행되지 않은 코드가 포함되어 있습니다. 또한 제대로 개발되지 않은 WordPress 테마는 이미지를 과도하게 사용하여 사이트에 무게를 더할 수 있습니다.

평판이 좋은 소스에서 전문적으로 개발된 WordPress 테마를 선택하세요. 무엇보다도 선택한 테마는 반응성이 뛰어나고 최상의 성능을 위해 최적화되어야 합니다. 어디서부터 시작해야 할지 모르시나요? 언제나 인상적인 Total Drag & Drop WordPress 테마 또는 무료 WordPress 테마를 확인해 보세요.

하지만 테마 개발자를 신뢰한다고 해서 테마가 완벽하게 코딩되었다는 의미는 아닙니다. 누구나 실수를 하고 모든 테마에는 어딘가 버그나 결함이 있기 때문에 정기적으로 관리되고 업데이트되는 테마를 사용하는 것도 중요합니다. 단지 모양이 마음에 든다고 테마에 안주하지 마세요. 모든 테마는 하위 테마를 통해 다시 디자인될 수 있습니다.

쓰레기를 꺼내

WordPress 2.9부터는 사이트에서 콘텐츠를 삭제할 때마다 데스크톱의 휴지통과 같은 휴지통으로 보내집니다. 따라서 원하는 대로 파일을 복원하거나 영구적으로 삭제할 수 있습니다. 유일한 문제는 이 정크가 데이터베이스에서 많은 공간을 차지할 수 있다는 것입니다. 쓰레기가 쌓이면 DB가 질식해 웹 사이트 속도가 느려질 수 있습니다.

WordPress는 30일마다 휴지통을 비우지만, wp-config.php 파일을 편집하여 이를 변경할 수 있습니다.

define( 'EMPTY_TRASH_DAYS', 7 );

위 코드는 WordPress에 7일마다 휴지통을 비우도록 지시하는 반면, 다음 코드는 휴지통 기능을 영구적으로 비활성화합니다.

define( 'EMPTY_TRASH_DAYS',  0 );

사용하지 않는 Jetpack 기능 비활성화

절대 사용하지 않는 일부 Jetpack 기능을 비활성화하면 웹사이트 속도를 엄청나게 높일 수 있습니다. 댓글, 공유, WP.me 단축링크, 위젯 표시를 제외한 모든 기능을 비활성화하고 페이지 로드 시간을 3초 단축했습니다!

Jetpack 기능은 서버에 추가 요청을 보내는 것 외에 로드하는 데 시간이 걸리는 스크립트를 활용합니다. 모든 Jetpack 기능을 켜면 페이지를 로드하는 데 시간이 더 오래 걸립니다. 사용하고 싶은 기능만 활성화하고 나머지는 잊어버리세요.

빠른 요약

우수한 사용자 경험을 제공하고 검색 엔진에서 순위를 높이는 것은 이제 일반적으로 페이지 속도 및 사이트 성능과 관련이 있습니다. 바로 이러한 이유로 최고의 성능을 위해 웹사이트를 최적화하는 것의 중요성을 결코 과소평가할 수 없습니다. 목록에서:

최고의 WordPress 호스팅을 선택하세요(저희는 WPEngine을 사용하고 사랑합니다)
사용하지 않는 오래된 플러그인 삭제
서버에 대한 HTTP 요청 줄이기
이미지 최적화
현명하게 광고를 선택하세요
Gzip 압축 켜기
캐싱 및 콘텐츠 전송 네트워크(CDN) 활용
상단에는 스타일시트, 하단에는 스크립트
외부 스크립트를 제한하세요
좀 더 축소하고, 축소하고, 축소하세요
프리미엄 WordPress 테마 사용(Total Drag & Drop 다목적 WordPress 테마를 권장합니다)
쓰레기를 버리세요
사용하지 않는 Jetpack 기능 비활성화

공은 이제 당신의 코트에 있습니다…

웹 사이트를 개발할 때의 일반적인 경험 법칙은 프로젝트의 거의 모든 측면에 대해 최소한의 접근 방식을 채택하는 것입니다. 필요하지 않은 것을 제거하고, 최적화하고, 웹 호스팅이 포함된 올바른 도구로 시작하세요. 나중에 봐요 ?