시놀로지 NAS로 워드프레스 운영 5개월… 그간의 최적화 팁

\r\n

\r\n

\r\n

\r\n

\r\n

 

\r\n

\r\n

 

\r\n

가  가  가  

\r\n

배운 게 도둑질이라는 속담처럼 글 쓰는 업(業)을 떠나고 나니 그렇게 싫던 글을 다시 쓰고 싶어졌다. 그래서 5개월 전 블로그를 만들었다. 국내 웹 생태계를 좌지우지하는 포털의 힘을 모르지 않으나, 포털이란 이름의 가두리 양식장에 갇히기 싫었다. 그래서 선택한 것이 설치형 오픈소스 CMS인 워드프레스다.

\r\n

 

\r\n

이왕 고난이 길을 걷기로 한 김에 웹 서비스를 할 서버도 가정 내에서 운영 중인 시놀로지 NAS로 운영키로 했다. 단돈 몇 천원이면 나름 괜찮은 호스팅 서비스가 수두룩하지만, 개인 블로그 정도라면 NAS로도 충분하지 않을까란 평소 의문을 이 기회에 풀고 싶었다.

\r\n

 

\r\n

그렇게 시작된 블로그 운영이 이제 5개월째에 접어들었다. 튜닝과 검색 최적화에 시간을 할애하는 틈틈이 글을 쓰고 있다. 그러다가 문득 워드프레스를 운영하며 적용해온 최적화 팁을 정리하면 어떨까 싶었다. 여기저기서 얻은 정보를 한 데 모아 정리하는 것에 불과하지만, 하나로 정리된 자료가 없어 고생할 다른 이를 생각하면 이 또한 의미 있는 일이지 않겠는가.

\r\n

 

\r\n

NAS SPEC

\r\n

시놀로지 DS716+ | 인텔 셀러론 N3150 | DDR3L 4GB | DSM 6.1 베타(16년 11월 4일 기준)

\r\n

 

\r\n

본론에 앞서

\r\n

여기서 소개할 최적화 팁 대부분은 터미널 접속과 기초적인 몇 가지 리눅스 명령어에 대한 사전 지식을 요구한다. 기초적인 것인 만큼 간단히 정리하고 본론으로 넘어가겠다.

\r\n

 

\r\n

● SSH 연결

\r\n

SSH 연결은 시놀로지 DSM의 제어판에서 ‘터미널 및 SNMP 탭’을 열고 SSH를 활성화하면 된다. SSH는 보안이 적용된 터미널 통신으로 원격지 대상에 커맨드 기반의 명령어를 전달할 수 있다. 많은 기능이 GUI로 구현돼 있지만, 그렇지 않은 것은 SSH로 설정할 수 있다.

\r\n

윈도우라면 putty를, 맥OS인 경우 응용 프로그램 내 유틸리티에 있는 터미널에서 ‘ssh root@NAS IP’를 입력하면 SSH로 NAS에 접속할 수 있다. 참고로 root 계정으로의 로그인은 시놀로지 DSM 6.0에서 ROOT로 로그인하려면을 참고하면 된다.

\r\n

 

\r\n

· 맥에서 SSH로 NAS에 접속하는 예

\r\n

ssh root@192.168.1.249

\r\n

 

\r\n

● 기초적인 리눅스 명령어 두 가지

\r\n

여기서 알아야 할 기초적인 리눅스 명령어는 디렉토리간 이동 명령어인 cd와 파일의 텍스트를 편집할 수 있는 vi 이 두 가지다.

\r\n

 

\r\n

· cd 명령어

\r\n

\r\n

cd 디렉토리 명 // 해당 하위 디렉토리로 이동

\r\n

cd .. // 상위 디렉토리로 이동

\r\n

cd /a/b // 루트 경로 내 a라는 디렉터리의 하위 디렉터리인 b로 이동

\r\n

1

\r\n

2

\r\n

3

\r\n

cd 디렉토리 명 // 해당 하위 디렉토리로 이동

\r\n

cd .. // 상위 디렉토리로 이동

\r\n

cd /a/b // 루트 경로 내 a라는 디렉터리의 하위 디렉터리인 b로 이동

\r\n

 

\r\n

· vi 에디터

\r\n

\r\n

vi 파일명 // 해당 파일 수정(에디터 모드 진입)

\r\n

입력 모드 // ‘a’ 키(키보드) 누르면 문서 수정 가능

\r\n

콜론 모드 // ESC 누르고 ‘:’ 입력하면 콜론 모드로 진입돼 문서의 저장, 종료 가능. 콜론 모드에서 w는 문서 저장, q는 문서 닫기 명령임. wq를 붙여 쓰는 것도 가능

\r\n

1

\r\n

2

\r\n

3

\r\n

vi 파일명 // 해당 파일 수정(에디터 모드 진입)

\r\n

입력 모드 // ‘a’ 키(키보드) 누르면 문서 수정 가능

\r\n

콜론 모드 // ESC 누르고 ‘:’ 입력하면 콜론 모드로 진입돼 문서의 저장, 종료 가능. 콜론 모드에서 w는 문서 저장, q는 문서 닫기 명령임. wq를 붙여 쓰는 것도 가능

\r\n

 

\r\n

보안과 검색순위 두 마리 토끼를 잡기 위한 ‘HTTPS 적용’

\r\n

시놀로지 NAS의 패키지로 워드프레스를 설치하고자 한다면 그 전에 SSL부터 적용하길 권한다. HTTPS은 웹 프로토콜이란 통로에서 오가는 텍스트를 암호화하는 보안상의 이점뿐 아니라 구글 검색 결과에서 상위에 노출되는 데에도 HTTPS이 도움이 되기 때문이다. 이와 관련해서는 별도의 포스트로 정리했으니 다음의 글을 참고하길 바란다.

\r\n

 

\r\n

● 무료일 뿐 아니라 5분이면 적용… 시놀로지 NAS와 HTTPS(SSL)

\r\n

 

\r\n

최근 가장 핫한 워드프레스 최적화 방법 ‘PHP 7’에 주목하라

\r\n

최근 워드프레스 최적화 방안 중 가장 주목받는 것은 다름아닌 PHP 7이다. 지금까지 대부분의 워드프레스 호스트는 PHP 5.6을 사용하는데, PHP 7은 5.6 버전 대비 메모리 사용량이 30% 줄었음에도 성능은 오히려 2~3배 향상됐기 때문이다. 최근 공개된 시놀로지 DSM 6.1 베타 버전부터 PHP 7을 패키지 형태로 제공하고 있다. 그 설치 방법과 설정은 다음 포스트를 참고하길 바란다.

\r\n

 

\r\n

● ‘느릿느릿’ 시놀로지 NAS의 워드프레스, PHP 7으로 ‘빠릿빠릿’

\r\n

 

\r\n

워드프레스 주소의 ‘/wordpress’ 제거하기

\r\n

시놀로지의 패키지를 통해 워드프레스를 설치하면 워드프레스의 기본 경로는 web/wordpress/가 된다. 도메인의 끝에 ‘/wordpress/’가 붙으며 주소가 길어지는 것이다. 검색 최적화 등에 주소가 중요한 만큼 ‘/wordpress/’란 디렉토리 명을 주소에서 제거하는 게 좋다. 이 팁은 워드프레스 주소를 바꾸는 것인 만큼 설치 초기에 적용해야 리다이렉트 등 불필요한 작업을 줄일 수 있다.

\r\n

 

\r\n

● 워드프레스 관리자 페이지의 설정에 있는 사이트 주소에서 ‘/wordpress’를 삭제한다.

\r\n

 

\r\n

● 설정의 고유주소로 이동하면, 사이트 주소 변경에 맞춰 고유주소도 바뀌어 있을 것이다. 별다른 변경 없이 하단의 저장을 클릭한다.

\r\n

 

\r\n

● DSM의 파일 스테이션을 열고, web/wordpress 폴더 내에 있는 index.php와 .htaccess 두 파일을 web 루트 폴더에 복사한다.

\r\n

 

\r\n

● web 루트로 복사한 index.php 파일을 텍스트 편집기(패키지 설치로 이용 가능)로 열고, 맨 아래에 있는 require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ );를 require( dirname( __FILE__ ) . ‘/wordpress/wp-blog-header.php’ );처럼 ‘wordpress’를 추가하고 저장한다.

\r\n

 

\r\n

● 끝으로 한번 더 워드프레스 관리자 페이지의 설정 내 고유주소 메뉴를 클릭하고, 저장을 누른다.

\r\n

 

\r\n

이제 http://시놀로지 NAS 주소를 입력하면 워드프레스 페이지가 열릴 것이다. 이전처럼 /wordpress를 붙이지 않아도 되는 것이다. 이처럼 사이트 주소를 변경했더라도 관리자 페이지 접속 주소는 기존과 같다. 즉 http://시놀로지 NAS 주소/wordpress/wp-admin으로 워드프레스 관리자 페이지에 접속할 수 있다.

\r\n

 

\r\n

1~2GB 남짓의 NAS 메모리 용량에 맞춰 적용된 웹 서버의 캐시를 늘려라

\r\n

기기마다의 최적의 코덱으로 영상을 변환하는 트랜스코딩, 다수가 접속하는 서비스 등으로 인한 부하 상황에서도 NAS의 메모리 사용량은 30%를 넘지 않는 게 태반이다. CPU 의존적인 서비스 특성 때문이지만 1~2GB 남짓에 불과한 메모리 용량에 맞춰 설정된 것에서도 원인을 찾을 수 있다. 이러한 최소 용량으로 설정된 웹 서버 캐시를 늘리는 것만으로 워드프레스의 로딩 속도를 조금이나마 높여 체감 성능을 향상시킬 수 있다. 캐시는 버퍼 메모리라고도 하는데, 빈번히 쓰이는 데이터를 캐시 영역에 두고 빠르게 읽어 성능 향상을 꾀하는 기법이다. 캐시는 프로세서와 같은 하드웨어부터 소프트웨어 등에 광범위하게 쓰이고 있다. 여기서 소개하는 최적화 팁 대부분 또한 이 캐시와 관련이 있다.

\r\n

 

\r\n

출처 | Speeding Up WordPress on Synology

\r\n

 

\r\n

● PHP 환경 변경

\r\n

vi 편집기로 /etc/php/php.ini를 다음과 같이 수정한다.

\r\n

\r\n

memory_limit = 512M

\r\n

max_execution_time = 2000

\r\n

1

\r\n

2

\r\n

memory_limit = 512M

\r\n

max_execution_time = 2000

\r\n

 

\r\n

 

\r\n

● 마리아DB(MariaDB) 설정 변경

\r\n

volume1/@appstore/MariaDB/etc/mysql/my.cnf도 vi 편집기로 다음과 같이 수정한다.

\r\n

 

\r\n

\r\n

[myisamchk]

\r\n

key_buffer_size = 64M

\r\n

sort_buffer_size = 64M

\r\n

[mysqld]

\r\n

innodb_buffer_pool_size = 500M

\r\n

innodb_additional_mem_pool_size = 64M

\r\n

key_buffer = 256M query_cache_limit = 16M

\r\n

query_cache_size = 48M

\r\n

key_buffer_size = 256M

\r\n

max_allowed_packet = 2M

\r\n

table_open_cache = 128

\r\n

sort_buffer_size = 512K

\r\n

read_buffer_size = 512K

\r\n

read_rnd_buffer_size = 512K

\r\n

1

\r\n

2

\r\n

3

\r\n

4

\r\n

5

\r\n

6

\r\n

7

\r\n

8

\r\n

9

\r\n

10

\r\n

11

\r\n

12

\r\n

13

\r\n

14

\r\n

[myisamchk]

\r\n

key_buffer_size = 64M

\r\n

sort_buffer_size = 64M

\r\n

[mysqld]

\r\n

innodb_buffer_pool_size = 500M

\r\n

innodb_additional_mem_pool_size = 64M

\r\n

key_buffer = 256M query_cache_limit = 16M

\r\n

query_cache_size = 48M

\r\n

key_buffer_size = 256M

\r\n

max_allowed_packet = 2M

\r\n

table_open_cache = 128

\r\n

sort_buffer_size = 512K

\r\n

read_buffer_size = 512K

\r\n

read_rnd_buffer_size = 512K

\r\n

 

\r\n

PHP 성능 개선

\r\n

워드프레스는 대표적인 PHP 애플리케이션이다. PHP 캐시 활성화로 조금이나마 성능 향상을 꾀할 수 있다. APC(Alternative PHP Cache)와 같은 캐시 기술이 대표적인데, DSM의 웹 스테이션의 PHP 설정 탭에서 ‘PHP 캐시 활성화’를 체크하는 것만으로 캐시를 활성화시킬 수 있다.

\r\n

 

\r\n

.htaccess 설정

\r\n

htaccess는 하이퍼액세스(Hyper Access)의 줄임말로, 아파치 웹 서버의 디렉토리별 설정이 저장되는 파일이다. htaccess는 웹 서비스의 성능뿐 아니라 보안과도 밀접한 관련이 있는 중요 파일이다. 시놀로지 NAS 내 web 디렉토리의 루트(최상위 폴더)에 숨김 파일로서 존재하는데, 워드프레스의 고유주소나 Site URL을 변경하면 생성된다. htaccess는 텍스트 에디터나 vi 에디터 등으로 수정할 수 있는데, 다음의 코드를 추가하자.

\r\n

 

\r\n

● 텍스트, HTML, 자바스크립트, CSS, XML 등을 압축해 트래픽 절감하기

\r\n

\r\n

# compress text, html, javascript, css, xml:

\r\n

AddOutputFilterByType DEFLATE text/plain

\r\n

AddOutputFilterByType DEFLATE text/html

\r\n

AddOutputFilterByType DEFLATE text/xml

\r\n

AddOutputFilterByType DEFLATE text/css

\r\n

AddOutputFilterByType DEFLATE application/xml

\r\n

AddOutputFilterByType DEFLATE application/xhtml+xml

\r\n

AddOutputFilterByType DEFLATE application/rss+xml

\r\n

AddOutputFilterByType DEFLATE application/javascript

\r\n

AddOutputFilterByType DEFLATE application/x-javascript

\r\n

AddType x-font/otf .otf

\r\n

AddType x-font/ttf .ttf

\r\n

AddType x-font/eot .eot

\r\n

AddType x-font/woff .woff

\r\n

AddType image/x-icon .ico

\r\n

1

\r\n

2

\r\n

3

\r\n

4

\r\n

5

\r\n

6

\r\n

7

\r\n

8

\r\n

9

\r\n

10

\r\n

11

\r\n

12

\r\n

13

\r\n

14

\r\n

15

\r\n

# compress text, html, javascript, css, xml:

\r\n

AddOutputFilterByType DEFLATE text/plain

\r\n

AddOutputFilterByType DEFLATE text/html

\r\n

AddOutputFilterByType DEFLATE text/xml

\r\n

AddOutputFilterByType DEFLATE text/css

\r\n

AddOutputFilterByType DEFLATE application/xml

\r\n

AddOutputFilterByType DEFLATE application/xhtml+xml

\r\n

AddOutputFilterByType DEFLATE application/rss+xml

\r\n

AddOutputFilterByType DEFLATE application/javascript

\r\n

AddOutputFilterByType DEFLATE application/x-javascript

\r\n

AddType x-font/otf .otf

\r\n

AddType x-font/ttf .ttf

\r\n

AddType x-font/eot .eot

\r\n

AddType x-font/woff .woff

\r\n

AddType image/x-icon .ico

\r\n

 

\r\n

● 이미지, 자바스크립트, CSS 등에 브라우저 캐시 적용하기

\r\n

\r\n

<ifModule mod_expires.c>

\r\n

ExpiresActive On

\r\n

ExpiresDefault "access 1 month"

\r\n

ExpiresByType image/x-icon "access 1 year"

\r\n

ExpiresByType image/svg "access 1 year"

\r\n

ExpiresByType image/jpeg "access 1 year"

\r\n

ExpiresByType image/png "access 1 year"

\r\n

ExpiresByType image/gif "access 1 year"

\r\n

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

\r\n

ExpiresByType text/css "access 1 month"

\r\n

ExpiresByType text/javascript "access 1 month"

\r\n

ExpiresByType application/javascript "access 1 month"

\r\n

ExpiresByType application/x-javascript "access 1 month"

\r\n

ExpiresByType text/html "access 1 month"

\r\n

ExpiresByType application/xhtml+xml "access 1 year"

\r\n

</ifModule>

\r\n

\r\n

# 1 Month for most static assets

\r\n

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">

\r\n

Header set Cache-Control "max-age=2592000, public"

\r\n

</filesMatch>

\r\n

1

\r\n

2

\r\n

3

\r\n

4

\r\n

5

\r\n

6

\r\n

7

\r\n

8

\r\n

9

\r\n

10

\r\n

11

\r\n

12

\r\n

13

\r\n

14

\r\n

15

\r\n

16

\r\n

17

\r\n

18

\r\n

19

\r\n

20

\r\n

21

\r\n

<ifModule mod_expires.c>

\r\n

ExpiresActive On

\r\n

ExpiresDefault "access 1 month"

\r\n

ExpiresByType image/x-icon "access 1 year"

\r\n

ExpiresByType image/svg "access 1 year"

\r\n

ExpiresByType image/jpeg "access 1 year"

\r\n

ExpiresByType image/png "access 1 year"

\r\n

ExpiresByType image/gif "access 1 year"

\r\n

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

\r\n

ExpiresByType text/css "access 1 month"

\r\n

ExpiresByType text/javascript "access 1 month"

\r\n

ExpiresByType application/javascript "access 1 month"

\r\n

ExpiresByType application/x-javascript "access 1 month"

\r\n

ExpiresByType text/html "access 1 month"

\r\n

ExpiresByType application/xhtml+xml "access 1 year"

\r\n

</ifModule>

\r\n

 

\r\n

# 1 Month for most static assets

\r\n

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">

\r\n

Header set Cache-Control "max-age=2592000, public"

\r\n

</filesMatch>

\r\n

 

\r\n

● 특정 폴더에 index.php가 없는 경우 전체 디렉토리를 목록화 하는 것을 방지하기

\r\n

\r\n

# directory browsing

\r\n

Options All -Indexes

\r\n

1

\r\n

2

\r\n

# directory browsing

\r\n

Options All -Indexes

\r\n

 

\r\n

● HTML, 자바스크립트 등을 GZIP으로 압축해 트래픽 줄이기

\r\n

\r\n

# BEGIN GZIP

\r\n

<ifmodule mod_deflate.c>

\r\n

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

\r\n

BrowserMatch ^Mozilla/4 gzip-only-text/html

\r\n

BrowserMatch ^Mozilla/4.0[678] no-gzip

\r\n

BrowserMatch bMSIE !no-gzip !gzip-only-text/html

\r\n

</ifmodule>

\r\n

# END GZIP

\r\n

1

\r\n

2

\r\n

3

\r\n

4

\r\n

5

\r\n

6

\r\n

7

\r\n

8

\r\n

# BEGIN GZIP

\r\n

<ifmodule mod_deflate.c>

\r\n

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

\r\n

BrowserMatch ^Mozilla/4 gzip-only-text/html

\r\n

BrowserMatch ^Mozilla/4.0[678] no-gzip

\r\n

BrowserMatch bMSIE !no-gzip !gzip-only-text/html

\r\n

</ifmodule>

\r\n

# END GZIP

\r\n

 

\r\n

● 워드프레스의 주요 파일의 수정 금지하기

\r\n

\r\n

# WPhtC: Protect WP-config.php

\r\n

<files wp-config.php>

\r\n

order allow,deny

\r\n

deny from all

\r\n

</files>

\r\n

\r\n

# WPhtC: Protect .htaccess file

\r\n

<files ~ "^.*\.([Hh][Tt][Aa])">

\r\n

order allow,deny

\r\n

deny from all

\r\n

</files>

\r\n

1

\r\n

2

\r\n

3

\r\n

4

\r\n

5

\r\n

6

\r\n

7

\r\n

8

\r\n

9

\r\n

10

\r\n

11

\r\n

# WPhtC: Protect WP-config.php

\r\n

<files wp-config.php>

\r\n

order allow,deny

\r\n

deny from all

\r\n

</files>

\r\n

 

\r\n

# WPhtC: Protect .htaccess file

\r\n

<files ~ "^.*\.([Hh][Tt][Aa])">

\r\n

order allow,deny

\r\n

deny from all

\r\n

</files>

\r\n

 

\r\n

CSS와 자바스크립트를 압축해 트래픽을 줄여라

\r\n

워드프레스뿐 아니라 테마, 플러그인 등에는 많은 CSS와 자바스크립트 파일이 여기저기에 흩어져 있다. 수많은 응답과 요청이 수차례 있는 뒤에야 이러한 파일 하나를 다운로드하게 된다. 이처럼 흩어진 CSS와 자바스크립트를 각각 하나의 파일로 묶으면 웹사이트 반응성을 높이는 동시에 트래픽도 절감할 수 있다. 워드프레스라는 Better WordPress Minify라는 플러그인을 설치하는 것만으로 이러한 작업을 손쉽게 적용할 수 있다. 뿐만 아니라 파일 내 공백, 주석 등을 제거하는 식으로 파일 용량도 줄일 수 있다.

\r\n

 

\r\n

이미지 용량을 줄이고 CDN을 활용하라

\r\n

글 못지않게 중요한 게 시각적인 요소다. 그에 따라 점차 더 많은 이미지가 쓰이는 추세다. 이미지는 텍스트 대비 수십 배의 용량을 차지한다. 적절한 최적화가 없다면 트래픽뿐 아니라 웹사이트 로딩 속도에 지대한 영향을 끼칠 수 있다. 사진이라면 jpg를, 그래픽 이미지라면 gif가 용량 절감 측면에서 유리하다. 아울러 이미지의 크기, 품질도 최적화해야 한다. EWWW Image Optimizer는 이러한 이미지 품질 최적화를 해주는 대표적 플러그인이다. 설치하면 워드프레스의 미디어 메뉴에 최적화 메뉴가 활성화된다.

\r\n

 

\r\n

만약 이미지 최적화만으로 부족하다면 CDN(Contents Delivery Network) 서비스를 고려할 수 있다. CDN은 영상, 이미지, 음악 등의 콘텐츠를 효과적으로 전송하기 위해 분산된 서버에 저장해 전송하는 네트워크다. 전 세계 어디서 접속하든 지리, 속도 등에서 최적의 서버가 콘텐츠 전송을 맡게 된다. 글로벌 서비스를 위해 고안됐으나 최근에는 블로그나 웹사이트의 트래픽 절감이나 지연 최소화를 목적으로 활용되기도 한다.

\r\n

 

\r\n

워드프레스의 경우 다양한 CDN 서비스와 손쉽게 연동할 수 있다. Cloudinary가 대표적이다. Cloudinary는 플러그인 형태로 손쉽게 설치할 수 있고, 2GB 저장공간, 한달에 5GB 대역폭을 무료로 제공한다. Cloudinary 가입 후 플러그인을 설치하고 간단한 인증을 거치면 워드프레스와 연동된다. 워드프레스 미디어에서 이미지를 선택적으로 CDN으로 옮길 수 있는데, 옮겨진 이미지의 주소는 자동으로 CDN상의 주소로 변경된다. 최근에는 Cloudinary과 같은 CDN 외에도 드롭박스나 구글 드라이브, 구글 포토 등의 퍼블릭 클라우드도 워드프레스 CDN으로 활용하는 추세다.

\r\n

 

\r\n

데이터베이스를 다이어트하라

\r\n

워드프레스에 글하나 올릴 때면 십여 개의 리비전 파일이 생성된다. 이러한 임시 파일은 데이터베이스에 지속적으로 쌓여 전반적인 성능 하락을 유발한다. 이러한 리미전 파일뿐 아니라 임시 저장, 스펨 댓글 등 각종 임시파일을 정리해 최적의 성능을 유지시켜주는 것이 WP Cleanup Optimizer Lite Edition 플러그인이다. phpMyAdmin과 달리 데이터베이스에 대한 지식이 없어도 정리 버튼 한 번으로 데이터베이스 최적화를 수행할 수 있다.

\r\n

 

\r\n

HTML에도 캐시를 적용하라

\r\n

앞서 밝혔듯 워드프레스 최적화의 대부분은 캐시와 관련이 있다. 워드프레스 최적화의 첫 걸음 또한 캐시 플러그인 설치인데, 그 중 하나가 WP Super Cache다. 워드프레스로부터 정적인 html 파일을 압축해 생성하고 웹서버 대신 전달하는 캐시 역할을 한다. WP Super Cache는 댓글이나 포스트 내용 등이 변경될 때마다 새로운 정적 html 파일을 생성하는 기능도 제공한다. 이와 관련된 설정 방법은 워드프레스 정보꾸러미의 한 포스트를 참고하기 바란다.

\r\n

 

\r\n

자바스크립트와 CSS는 비동기로 처리하라

\r\n

워드프레스에서 자바스크립트와 CSS는 동기적으로 처리된다. 즉 a, b, c라는 처리해야 할 일이 지정돼 있을 때 그 순서대로만 처리된다. b 처리가 아무리 오래 걸려도 b가 끝난 뒤에만 비로소 c라는 일을 처리한다. 비동기란 a, b, c란 일을 동시에 처리함을 의미한다. 자바스크립트와 CSS를 비동기로 처리하면 웹 로동 속도를 좀 더 높일 수 있다.

\r\n

 

\r\n

개발자가 아니라도 걱정이 없다. Async JavaScript와 WP Async CSS 두 플러그인을 설치하고 한 두 개의 옵션 선택만으로 적용할 수 있기 때문이다. 두 플러그인 모두 설정에서 활성화시키는 것만으로 적용되는데, CSS 플러그인 경우 비동기로 처리할 CSS를 직접 선택해야 한다. 비동기 처리 시 웹 렌더링에 일부 문제가 있을 수 있다. 이 경우 문제가 되는 부분은 예외 처리하는 등이 처리가 필요하다.

\r\n

 

\r\n

공통 라이브러리는 외부 서버를 활용하자

\r\n

워드프레스뿐 아니라 많은 웹사이트에는 공통적으로 쓰이는 라이브러리가 있다. 제이쿼리, 제이쿼리 UI와 같은 라이브러리가 그것이다. 이러한 공통 라이브러리들은 구글의 CDN 분산 서버에서 다운로드하도록 바꿀 수 있다. 이를 통해 호스팅 서비스의 트래픽도 줄이고 웹 로딩 속도도 높일 수 있다. 적용 방법은 무척 간단하다. 그저 Use Google Libraries 플러그인을 설치하고 활성화하기만 하면 된다.