워드프레스 최적화에 캐시 플러그인으로 Autoptimize를 사용하는 이유

동영상

W3 total cache 플러그인이나 Super Cache 플러그인처럼 워드프레스의 캐시 플러그인에는 Minify라고 하는 CSS, 자바스크립트의 최소화 기능이 존재합니다. Minify 기능을 사용하면 CSS나 자바스크립트를 압축시킬 수 있고 요청하는 파일의 개수를 최소화하여 HTTP의 요청 수를 줄일 수도 있죠.

문제라면 대부분의 캐시 플러그인은 CSS나 자바스크립트를 단일 파일로 불러들이지 않는다는 것입니다. 단일 파일로 불러들인다는 것은 그만큼 HTTP 요청 수를 줄일 수 있다는 이야기가 되고 워드프레스와 같은 소규모 블로그에서는 매우 적합한 Minify 방식이 될 수 있습니다.

Autoptimize 플러그인은 CSS와 자바스크립트 파일을 단 1개의 파일로 압축시킵니다. 요청 수를 줄이고 W3 total cache 플러그인, WP Fastest Cache 플러그인, WP Super Cache 등과 함께 사용하면 더욱 강력한 속도 향상을 기대할 수 있습니다.

 

사용 방법

사용 방법은 매우 단순합니다. 캐시 플러그인을 따로 사용하는 경우 해당 캐시 플러그인에서 Minify 기능은 꺼주시고요. 설정 – Autoptimize로 접속한 후 Optimize 기능에 체크해주시면 됩니다.

 

 

만약 추가적인 옵션이 필요한 경우 우측 상단의 Show advanced settings를 클릭하면 추가 옵션이 활성화됩니다. 이 과정에서 CSS, JS 파일을 제외하거나 HTML에서 CSS 등을 직접적으로 불러올 수 있는 인라인 기능을 사용할 수도 있습니다.

잘 모르는 항목일 경우 기본값으로 두시는 것을 권장합니다.

CDN은 Autoptimize이 생성한 파일에 대해서만 지정할 경우 설정해주시고요. 사이트 전체에 CDN을 설정하고자 한다면 이 부분은 사용하지 말고 W3 Total Cache와 같은 캐시 플러그인에서 설정하시는 것을 권장합니다.

 

 

Extra 탭에서는 자바스크립트 비동기 로드, 워드프레스 이모지 삭제, 얼마 전에 설명했던 쿼리 문자열 제거, 서드파티 도메인 등을 지정할 수 있습니다. 자바스크립트 비동기 로드의 경우 Jquery 파일 등 비동기를 실행해도 영향이 없는 파일에 대해서만 선언하시기 바랍니다. 비동기 설정은 Async Javascript-files 항목에서 아래와 같이 선언해주시면 됩니다.

jquery.js, 비동기할JS파일.js

브라우저에서 F12로 개발자 모드를 켠 후 비동기 로드를 설정한 자바스크립트를 호출하는 script 태그에 async라는 문구가 포함되어있다면 완료된 것입니다.

 

 

맨 마지막의 Misc Options는 각각 변동되지 않는 정적 파일 옵션과 로그인 유저에 대한 최적화 옵션입니다. 특별한 경우가 아니라면 체크해두시는 편이 좋지만 캐시 만료 관련 문제가 발생하는 경우 정적 파일 옵션을 해제해보시는 것을 권장합니다.

 

화면이 깨지거나 사이트가 제대로 작동하지 않을 때

Autopimize 플러그인을 사용할 경우 화면이 깨지거나 자바스크립트가 제대로 작동하지 않는 현상이 빈번하게 일어날 수 있습니다. 원인을 파악해보면 대부분 플러그인이 원인입니다. 이번에는 대처 방법에 대해 알아보도록 하겠습니다.

우선 화면이 깨질 경우 스타일 시트의 문제로써 플러그인 CSS 파일에 @charset “utf-8” 등과 같은 문자열이 포함되어 있는 경우가 대표적일 수 있습니다. @charset “utf-8″과 같은 문자셋은 CSS 상단에 선언되어야 하지만 Autopimize 등의 Minify 플러그인을 사용할 경우 이러한 문자열이 강제적으로 중간에 삽입되는 경우가 있습니다. 일반적으로 폰트와 관련된 스타일 시트 파일이 문제가 되더군요.

이럴 때는 직접 스타일 시트를 수정하여 문제 되는 문자열을 제거하거나 해당 문자열이 포함된 CSS 파일을 Autopimize의 Exclude CSS from Autoptimize 항목에 파일명을 입력하여 예외 시키면 해결됩니다. 형식은 다음과 같습니다.

admin-bar.min.css, dashicons.min.css, 문제가되는CSS파일.css

 

 

마찬가지로 사용 중인 플러그인의 자바스크립트 파일도 문제가 될 수 있습니다. 자바스크립트는 직접 수정하는 것을 추천하지 않고 브라우저 개발자 콘솔에서 문제가 되는 JS 파일을 확인한 후 Autopimize 플러그인의 Exclude scripts from Autoptimize 항목에 해당 파일 명을 입력하여 예외 시키는 것을 추천드립니다. 형식은 다음과 같습니다.

 

jquery.js, jquery.masonry.js, ko.js, 문제가되는js파일.js

 

자바스크립트 문제라면 ‘Force JavaScript in <head>?’나 ‘Add try-catch wrapping?’ 항목에 체크해여 해결되는 경우도 있더군요. 다만 html의 head에서 실행되기 때문에 사이트 속도가 미세하게 떨어질 수 있으며 Autoptimize가 파일을 다량으로 생성합니다.

이처럼 문제가 되는 경우 기존 플러그인의 CSS 파일과 JS 파일을 검토해보면 해결이 쉽습니다. 일일이 체크하여 해결해드리기는 어렵지만 정 해결이 되지 않는 경우 자유게시판에 사이트 주소와 증상을 말씀해주시면 최대한 도와드리도록 하겠습니다.

이 게시글은 0개 답변과 1명 참여가 있으며 마지막으로  아이콘 포스트에 의해 1 년 전에 업데이트 됐습니다.

1 글 보임 - 1 에서 1 까지 (총 1 중에서)
1 글 보임 - 1 에서 1 까지 (총 1 중에서)

답변은 후 가능합니다. 회원가입을 진행해보세요!

error: 작업 속도가 너무 빠릅니다.