Autoptimize 플러그인은 워드프레스의 스크립트와 스타일을 축소하고 집계 및 캐시하여 사이트의 최적화를 도와주는 플러그인이다.
연휴 기간 내내 제미니와 함께 Autoptimize 플러그인을 만져서 마침내 성공적으로 내 블로그에 적용했다.
완료 후 페이지스피드를 돌려보니 모바일 기준 성능 점수가 기분이 매우 좋았다. 데스크톱에서는 100점이 자주 나왔지만 모바일에서는 100점이 처음 나왔기 때문이다.
Autoptimize(개발자 Optimizing Matters) 플러그인은 현재 900,000개 사이트에 활성 설치되어 있다. 설정은 비교적 간단한데, 잘못 설정하면 네이버 검색 로봇이 내 사이트의 글을 수집을 못하는 난감한 일이 발생한다.
Autoptimize 설정 방법
JavaScript 옵션
- 자바스크립트 코드 최적화: 체크
- 집계하지 않고 연기하시겠습니까? (Do not aggregate but defer): 체크
나머지 항목, JS 파일 집계와 인라인 JS 디퍼링은 체크하면 네이버 검색로봇이 내 사이트를 긁어가지 못한다.
인라인 JS는 보통 테마의 레이아웃을 잡거나 모바일 메뉴를 여닫는 등 ‘즉각적인 반응’이 필요한 코드들이다.
이걸 디퍼(뒤로 미룸)해버리면, 사용자가 사이트에 접속하자마자 메뉴를 눌러도 아무 반응이 없다가 1~2초 뒤에야 작동하는 어색한 현상이 생기거나 레이아웃이 꼬이기도 한다.
또, 네이버 수집 로봇은 HTML 안에 박힌 인라인 코드가 제 위치에서 제때 실행되는 데 익숙해서, 이걸 뒤로 다 밀어버리면 페이지 구조를 제대로 파악 못 하는 것 같았다.
꼬박 하루 동안 네이버 웹마스터도구에 웹페이지가 하나도 수집되어 있지 않았다. ㅋ
네이버 서치어드바이저에 대해서는 아래 글 참고
워드프레스 네이버 서치어드바이저 등록, RSS와 사이트맵 제출 방법
CSS 옵션
CSS 옵션도 딱 두 개 만 활성화 시키면 된다. CSS 파일 집계와 모든 CSS를 인라인 역시 활성화를 하면 네이버 검색 로봇이 제대로 읽지 못하는 것 같았다.
- CSS 코드 최적화: 체크
- 렌더링 차단 CSS 제거: 체크(만약 사이트 폰트나 레이아웃이 깨지면 그때 끄면 된다)
기타 옵션
HTML 코드를 최적화, 404 폴백을 사용 두 개만 체크하고 나머지는 그대로 둔다. 이미지 옵션은 이미 WebP 이미지로 압축해서 올리고 있으므로 따로 설정하지 않았다.
또 워드프레스 기본 테마 2025는 첫 이미지에 대해서는 지연 로드를 제외시키고 있기도 하다.
연휴 기간 동안, 워드프레스 최적화 플러그인으로 WP Super Cache도 다시 깔고 Asset CleanUp 플러그인은 처음으로 깔았다.
WP Fastest Cache와 Cache Enabler vs. WP Super Cache 경합을 벌이다가 WP Super Cache 플러그인으로 낙찰을 봤다.
Autoptimize가 JS/CSS/HTML 코드 자체를 압축 및 합치는 플러그인이라면, WP Super Cache는 페이지 전체를 정적 파일로 박제하는 기능을 하는 플러그인이다.
WP Super Cache와 Asset CleanUp 플러그인에 대해서는 다음 글에서 다룬다.
댓글