워드프레스 최적화 체크리스트

WordPress 최적화는 웹사이트를 최대한 빠르게 실행하고, 사용자 경험을 개선하고, 서버 비용을 줄이고, SEO 이점을 제공하는 기술입니다.

많은 연구에 따르면 방문자는 웹사이트가 로드될 때까지 기다리지 않고 로드하는 데 너무 오래 걸리면 웹사이트를 떠나려는 경향이 있습니다.

웹샵이 있고 전환율을 높이려는 경우 빠른 로딩 웹사이트가 특히 중요합니다.

Amazon의 테스트에서도 유사한 결과가 나타났습니다. Amazon.com의 로드 시간이 100ms 증가할 때마다 매출이 1% 감소했습니다(Kohavi 및 Longbotham 2007).

출처: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

웹사이트의 로딩 속도는 Google에서의 순위에 매우 중요하므로 웹사이트 최적화를 SEO 전략의 일부로 만듭니다.

하지만 내 웹사이트는 정말 빨리 로드됩니다!

물론 그렇습니다. 적어도 당신을 위해. 하지만 오랜만에 웹사이트 방문을 시도해 보셨습니까?

웹사이트를 탐색할 때 대부분은 브라우저에 캐시됩니다. 처음 경험을 하고 싶다면 캐시를 지우거나 완전히 다른 브라우저를 사용하세요.

WordPress 웹 사이트의 속도를 향상시킬 수 있는 많은 작업이 있습니다. 시작하겠습니다.

스크립트 축소

WordPress 웹 사이트는 HTML, CSS, JavaScript 및 이미지의 조합입니다. HTML 코드가 먼저 로드된 다음 CSS 스타일 시트의 다른 파일, JavaScript 파일 및 이미지에 대한 정보가 있습니다.

각 파일이 차례로 로드됩니다. 브라우저는 일반적으로 2-4개의 "파이프"로 제한됩니다. 즉, 브라우저는 파일이 호스팅되는 서버에서 동시에 최대 2-4개의 파일만 로드합니다.

WordPress 웹사이트의 HTML 코드를 살펴보면 다양한 .css 및 .js 파일을 볼 수 있습니다. 이들 각각은 일반적으로 .js 또는 .css 파일을 믹스에 추가하는 서로 다른 플러그인에서 가져온 것입니다.

어떤 경우에는 플러그인이 JavaScript 또는 CSS 스타일을 HTML에 직접 삽입하기도 합니다. 대부분의 WordPress 플러그인 개발자 또는 테마 작성자는 그렇게 하지 않을 만큼 충분히 영리합니다.

이것은 일반 WordPress 웹사이트의 샘플일 뿐입니다. HTML 코드에는 여러 다른 파일에 대한 링크가 있습니다. 이 간단한 예제에서는 4개의 JavaScript 파일이 하나씩 로드됩니다.

<스크립트 유형=”텍스트/자바스크립트” src=”https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<스크립트 유형=”텍스트/자바스크립트” src=”https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<스크립트 유형=”텍스트/자바스크립트” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<스크립트 유형=”텍스트/자바스크립트” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

WordPress에는 플러그인 및 테마 작성자가 필요한 JavaScript 및 CSS 파일을 포함할 수 있는 내부 기능이 있습니다.

wp_enqueue_script() 및 wp_enqueue_style(). 함수의 이름은 그들이 하는 일에 대한 확실한 단서를 제공합니다. 이들 중 하나를 사용하여 필요한 파일을 포함함으로써 플러그인 및 테마 작성자는 다른 모든 플러그인 및 WordPress 자체와 함께 파일을 대기열에 넣습니다.

다른 라이브러리의 모든 종속성의 기능을 지시하는 것도 가능합니다. 일반적으로 JavaScript 포함 파일은 먼저 로드되는 jQuery에 의존합니다.

나는 보통 축소 플러그인을 찾아 설치하고 활성화한 다음 사이트에 문제가 있는지 확인합니다. 거기에서 정확히 무엇이 실패하고 있는지 정확히 파악하고 문제를 해결하기 위해 몇 가지 설정을 변경하기만 하면 됩니다.

축소 플러그인은 문서의 머리글이나 바닥글에서 다른 사람과 함께 로드될 때 제대로 재생되지 않거나 파일이 로드되는 위치를 변경하는 특정 파일에 대한 제외 설정을 갖는 경향이 있습니다.

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

참고: 코드 샘플에서 테마의 URL을 변수에 저장한 다음 wp_enqueue_script 함수로 구문 분석합니다. 이것은 필요한 PHP 및/또는 데이터베이스 호출의 수를 줄여 속도를 증가시킵니다.

극도의 로딩 속도를 추구하는 과정에서 절대 URL 경로를 하드 코딩하도록 선택할 수 있지만 이렇게 하면 테마가 단일 도메인으로만 제한되고 다른 사이트에서 코드를 재사용하기가 더 어려워집니다.

축소 플러그인을 설치한 후 JavaScript 및 CSS 스타일 시트는 이제 더 적은 수의 HTTP 호출로 결합됩니다.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

이것은 4개의 파일을 브라우저에 대한 단일 "파일"/요청으로 결합합니다.

22개의 .css 파일과 15개의 .js가 로드된 WordPress 기반 웹사이트를 발견했습니다. 전면에 모두. 외부 파일의 양을 줄일 수 있다면 속도의 변화는 놀랍습니다.

축소 스크립트는 속도가 크게 향상되는 경향이 있지만 설정에서 대부분의 문제를 일으키는 경향이 있는 제가 사용하는 기술 중 하나이기도 합니다.

header.php 최적화

테마의 header.php는 WordPress 웹사이트의 모든 페이지에서 호출됩니다. 이 파일에는 일반적으로 최적화할 수 있는 많은 요소가 있습니다.

전형적인 예는 외부 파일을 포함하기 위한 테마의 URL을 반환하기 위해 일반적으로 헤더에서 여러 번 호출되는 bloginfo('template_directory')입니다.

더 효율적인 방법은 URL에 대해 단일 요청을 수행한 다음 이를 변수로 저장하는 것입니다.

$template_directory = get_bloginfo('template_directory'); 

테마 디렉토리의 URL은 이제 $template_directory 변수에 저장됩니다.

header.php 효율성을 개선하는 방법에 대한 더 많은 예는 블로그 게시물 WordPress header.php 최적화 팁에서 읽을 수 있습니다.

플러그인 수 줄이기

WordPress 최적화의 또 다른 중요한 부분은 활성화된 플러그인의 수를 가능한 한 낮게 유지하는 것입니다. 많은 사용자가 다양한 플러그인을 테스트하고 실험하고 싶은 유혹을 느끼며 이는 실제로 WordPress의 장점 중 하나입니다.

그러나 활성화된 플러그인이 많으면 WordPress 웹사이트의 속도가 느려질 수 있습니다. 많은 플러그인에는 functions.php에 있는 코드 조각으로 쉽게 처리할 수 있는 단일 기능이 있습니다.

대부분의 경우 단일 기능만 필요할 수 있지만 사용하는 플러그인에는 사용하지 않는 몇 가지 다른 옵션이 있습니다.

사이트의 각 플러그인을 분석하고 필요한지 확인하십시오. 그것들이 필요하지 않거나 기능이 functions.php 코드로 대체될 수 있다면 플러그인을 비활성화하고 삭제하십시오.

이미지를 사용하지 마십시오 – CSS3를 사용하십시오

웹사이트 디자인은 사용자 인터페이스를 만드는 데 도움이 되는 이미지를 사용합니다.

CSS, 특히 CSS3가 도입된 후 웹 인터페이스에 사용되는 많은 효과는 CSS 및 HTML 코드를 사용하여 모방할 수 있습니다.

[상자]참고: 이러한 효과의 대부분은 모든 브라우저, 특히 이전 Internet Explorer에서 호환되지 않습니다(예, 모든 웹 개발자에게 항상 문제가 되는 자식). 웹사이트의 속도를 최적화하려면 CSS 효과를 사용하는 것이 빠르고 빠른 솔루션이 될 수 있지만 클라이언트의 주요 대상이 오래된 브라우저를 사용하는 경우에는 좋은 선택이 아닙니다.[/box]

B2C(기업 대 소비자)를 대상으로 하는 고객을 위해 일하는 경우 Google Analytics를 확인하거나 어떤 종류의 고객이 있는지(또는 대상으로 지정하려는) 고객에게 문의해야 합니다. 이는 고객 청중이 일반적으로 오래된 브라우저를 사용하는 경우 CSS3 효과를 사용할 수 있는지 여부에 영향을 줄 수 있습니다.

Elegantthemes.com이 새로운 버전의 단축 코드 플러그인을 출시했을 때 CSS3 효과와 여러 이미지를 단일 스프라이트에 넣는 것으로 인해 고객의 로딩 시간에 큰 영향을 미쳤습니다.

90개의 이미지를 포함했던 shortcodes/images 폴더에 이제 단일 PNG 스프라이트가 있어 전체 크기가 140kb에서 15kb로 줄었습니다!
(크기가 약 90% 감소한 것입니다.)

이미지를 스프라이트로

기존 테마의 스프라이트 최적화는 약간의 시간이 소요될 수 있지만 웹사이트의 속도를 크게 향상시킬 수도 있습니다.

스프라이트는 일반적으로 시각적 디자인/레이아웃의 여러 요소가 포함된 .PNG 형식의 단일 이미지입니다. 각 그래픽 요소를 개별적으로 로드하는 대신 모든 이미지가 하나 또는 가능한 한 적은 수의 스프라이트로 결합됩니다.

이 기술은 디자인 레이아웃에 사용되는 이미지에만 사용해야 하며 개별 게시물 추천 이미지, 썸네일 등에는 사용하지 않아야 합니다. 스프라이트에 넣어야 하는 유일한 이미지는 모든 페이지의 웹사이트 전체에서 사용되는 이미지입니다.

각각의 개별 이미지(다른 http 요청)를 로드하는 대신 모든 이미지가 하나의 파일로 그룹화되고 각 이미지를 표시하는 CSS가 수정되어 배경을 스프라이트에서 필요한 부분으로 간단히 이동합니다.

SpriteMe.org는 스프라이트를 만들기 위한 훌륭한 리소스입니다. 가장 좋은 방법은 미리 계획하고 먼저 스프라이트를 구축하는 것입니다. 그러나 기존 웹사이트를 수정해야 하는 경우 spriteme.org 사이트에 프로세스를 매우 쉽게 만드는 북마크가 있습니다.

스프라이트와 결합된 CSS 스타일의 예:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

각 CSS 스타일은 동일한 파일을 참조하지만 배경 위치가 다르므로 이미지의 다른 부분이 표시됩니다.

배포 – CDN 사용

WordPress의 테마 파일과 요소를 호스팅하기 위해 CDN(콘텐츠 배포 네트워크)을 사용하면 두 가지 주요 이점이 있습니다.

파일이 다른 도메인에 있으므로 더 빨리 로드됩니다. 2-4개의 동시 다운로드 파일의 브라우저 제한은 각 도메인 에 대한 것입니다.

따라서 파일이 다른 도메인에서 호스팅되는 경우 브라우저는 이러한 파일을 자체적으로 로드하므로 실제로 웹사이트가 더 빨리 로드되고 도메인과 호스트의 로드 스트레스가 줄어듭니다.

또 다른 이점은 주요 CDN을 사용하는 경우 전 세계에 서버가 분산되어 방문자가 어디에서 왔는지 감지한 다음 네트워크에서 가장 가까운 서버에서 파일을 제공한다는 것입니다.

웹사이트에 적합한 서버

웹사이트를 호스팅하는 서버는 대상 고객과 가까운 위치에 있어야 합니다. 따라서 웹 사이트가 독일 시장을 대상으로 하는 경우 독일 또는 적어도 중부 유럽에서 호스팅 회사의 서버를 찾는 것이 가장 좋습니다.

이것은 위치에 훨씬 더 가까운 서버에서 로드하는 방문자에게 큰 영향을 미치므로 웹사이트 탐색 속도가 훨씬 빨라집니다.

이것은 또한 사이트가 더 빨리 로드될 뿐만 아니라 독일 청중에게 웹사이트의 중요성을 더하고 따라서 더 높은 순위를 가져야 하기 때문에 SEO에 영향을 미칩니다.

SEO 측면에서 실제 효과는 논란의 여지가 있지만 웹사이트 성능을 개선하려는 경우 고려해 볼 가치가 있습니다.

이것은 SEO로 잘 알려져 있지만 일단 사이트가 설정되면 순전히 SEO상의 이유로 다른 서버로 이동하는 경우는 드뭅니다. 하지만 다음 프로젝트를 위해 염두에 둘 가치가 있습니다.

404 오류 수정

웹사이트를 정기적으로 점검하여 404 페이지가 없는지 확인해야 합니다. 어쨌든 페이지를 찾을 수 없습니다. 웹사이트에서 잘못된 링크를 줄이면 서버 부하를 줄이고 더 나은 사용자 경험을 제공할 수 있습니다. 링크와 페이지가 누락될 수 있을 뿐만 아니라 때때로 오타나 다른 종류의 실수로 인해 웹사이트에서 찾을 수 없는 콘텐츠가 발생할 수 있습니다.

팁: 찾을 수 없는 페이지를 자동으로 301 리디렉션하려면 이 코드를 확인하세요.

[상자]
이 페이지는 아직 끝나지 않았으며 WordPress 최적화에 대한 모든 세부 정보를 다루지 않습니다. 목표는 WordPress 사이트를 최대한 활용하기 위한 팁과 요령 리소스를 만드는 것입니다.

일부 또는 대부분의 트릭은 개발자가 아닌 이상 구현하기 어렵지만 모든 트릭을 사용하면 WordPress 사이트를 더 빠르게 실행할 수 있습니다.
[/상자]

체크리스트

이것은 체크리스트입니다. 각 웹사이트와 프로젝트가 다릅니다. 모든 단계를 모든 웹사이트에서 사용할 수 있는 것은 아닙니다.