페이지 로딩 개선을 위해 군더더기 css 삭제하기

웹사이트에 사용되는 스타일쉬트에 전혀 사용되지 않고 있는 군더더기 css가 남겨져 있을 수 있습니다. 특히 bootstrap과 같은 프론트엔드 프레임워크를 사용하는 경우에는 더 그렇죠. bootstrap은 다양한 css를 제공하지만 그 모든 css를 다 사용하지 않는 경우가 많기 때문입니다. 새롭게 테마를 개발하시는 분들에게도 유용한 기능이죠. 이번 포스트에서는 군더더기 css를 검토하고 이를 삭제하는 방법에 대해 소개하겠습니다.

군더더기 css 확인

사용하지 않고 있는 css를 확인해보는 몇가지 방법을 나열해보았습니다. 아래에서 한가지 방법을 선택해 웹사이트 페이지의 군더더기 css를 확인해보세요.

  • 구글 크롬 DevTool에서 웹사이트 페이지 audit하기
  • 온라인에서 군더더기 css 검사하기
  • 파이어폭스 Dust-me selector add-on 이용하기

군더더기 css 제거하기

워드프레스에서 css를 제거하려면 각 페이지에 사용되는 css를 확인해볼 필요가 있습니다. 단일 페이지 웹사이트라면 큰 문제가 없지만 워드프레스는 다양한 페이지로(홈, 아카이브, 태그, 검색, 저자 등) 나눠져 있기 때문에 이런 경우에는 현재 웹사이트에서 보여지는 모든 페이지를 확인해볼 필요가 있겠죠.

실제 작업을 진행하기 전에 라이브 사이트에서 사용하는 테마를 오프라인 테스트 사이트에 설치하고 오프라인 테스트 사이트에서 생성된 결과물을 심도있게 테스트 한 후 라이브 사이트에 적용하시기 바랍니다.

1. 워드프레스 모든 페이지의 주소를 쉽게 가져오기 위해 플러그인을 설치합니다.

*플러그인 다운받기: JSON Sitemap Generator for Grunt UnCSS with WordPress

플러그인을 활성화 한 후에 http://my-site.com?show_sitemap에서 아래와 같이 사이트 주소 array가 생성되는 지 확인해보세요.
json-sitemap

2. 테마의 폴더에서 Gruntfile.js를 생성

github에서 sboodhood의 gruntfile을 참고하여 원하는 파일을 만들어 보세요. Grunt를 처음 접하시는 분은 grunt 사이트를 참고하세요. grunt에 대한 소개 및 설치 방법에 대해 자세히 나와있습니다.

아래 코드는 sboodhood의 코드에서 몇가지 수정한 것입니다. my-site.com은 여러분의 테스트 사이트 주소를 넣으시고 stylesheets의 경로는 여러분이 원하시는 css파일이 있다면 그 경로를 지정하세요. ignore는 무시하고자 하는 css selector에 대해 적어둡니다. 더 자세한 설정은 uncss 페이지를 참고해보세요.

3. grunt 실행

위의 과정까지 마쳤다면 터미날에서 grunt deploy를 실행시킵니다. deploy의 과정을 간략히 요약하면 다음과 같습니다. 테스트 사이트에서 받은 사이트 주소 array를 sitemap.json으로 저장하고 그 저장된 array를 uncss의 urls으로 설정합니다. 그 후에 uncss가 실행되면서 css 폴더안에 style.clean.css 파일이 생성됩니다. 아래는 bootstrap으로 만들어진 워드프레스 무료 테마의 스타일쉬트 파일에서 필요없는 것들을 제거하고 hwangc.style.clean.css 파일이 생성되는 화면입니다. 128kb에서 27kb로 줄어졌네요.

grunt-deploy-uncss

4. 테스트

테마 파일에서 이전 css파일의 등록을 주석처리하고 위에서 생성된 css파일을 wp_enqueue_style로 등록합니다. 심도있는 테스트를 하면서 실제 필요한 selector가 빠지지 않았는 지 확인을 합니다. selector가 누락되었다면 위의 uncss ignore 옵션에 해당 selector를 입력한 후 다시 grunt deploy를 진행합니다. 문제가 없다면 라이브 사이트에 동일하게 적용하면 되겠죠.

마치며

w3 total cache와 같은 플러그인으로 스타일쉬트 파일을 concatenate&minify를 해서 캐슁을 하는 방법도 페이지 로딩에 도움이 되지만 원본 스타일쉬트 파일이 크다면 여전히 파일 사이즈가 클 수 있습니다. 테마에서 제공하는 기능이 많은데 그 기능을 다 사용하지 않고 있다면 이렇게 군더더기 css가 남아있을 수 있으니 여러분도 확인해보시기 바랍니다. 그럼 오늘도 즐거운 블로깅 하세요!

참고:

글쓴이

HwangC

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

“페이지 로딩 개선을 위해 군더더기 css 삭제하기”에 대한 14개의 생각

  1. 구글 developer 사이트 측정 사이트에서 css 를 줄이라는 말이 있던데 저렇게 하면 되는거였군요. 좀 더 내공을 쌓은 후에 도전을 한번 해봐야겠습니다. 좋은 정보 감사합니다.

  2. 안녕하세요. 워드프레스를 공부하면서 아주 자주 오고 있습니다.
    실례를 무릅쓰고 질문 한가지만 드리겠습니다.

    페이지 편집페이지에 비주얼/텍스트 두 가지 탭이 있습니다.
    텍스트 탭에서 개별 스타일시트를 삽입하게 되면 처음에는 잘 적용이 되는데 다음번에 수정할 떄 비주얼 탭을 한번만 클릭해돋 기존 텍스트 탭의 삽입한 스타일 들은 완전히 리셋이 됩니다.

    이러한 문제 아무리 찾아봐도 나오지 않는데 혹시 원인을 알고계신지요?

    새해복많이 받으세요^^

    1. 비주얼과 텍스트 탭 중에서 한가지를 정해서 사용하시는 것을 추천드립니다. 비주얼은 자동으로 계산을 하기 때문에 텍스트 탭에서 코딩한 내용이 사라지거나 변경될 수 있습니다. 그런데 스타일은 따로 style.css나 테마에서 지정한 것이 있다면 custom css를 사용하시는 것이 좋습니다.

  3. 안녕하세요?
    늘 좋은 정보를 제공해 주셔서 워드프레스 초보인 저에게 큰 도움이 되고 있습니다. 감사합니다.
    한 가지 제 웹사이트에서 이러한 문제가 뜨고 있는데… 잘 알수 없어서 문의를 드립니다.

    Warning: Division by zero in /homepages/32/d473847123/htdocs/wp-content/themes/vina_news/widgets/vina_news_tab/default.php on line 47

    혹, 방법을 찾을 수 있는 건지요?
    알려주시면 대단히 감사하겠습니다.

  4. 안녕하세요 좋은 정보 알려주셔서 감사합니다.
    매번 여러 워드프레스 정보를 얻고있어, 주변의 지인에게도 추천하고 있습니다.
    한 가지 요청드릴 게 있어서요. 실례를 무릎쓰고…

    보안강화 플러그인 중에 iThemes Security 플러그인이 있던데
    사용법을 잘 모르겠습니다. 온통 영어이고, 섣불리 설정을 건드리거나 했다가
    오류가 발생하거나 그럴거같아서 초보인 저는 활성화만 시켜놓은 상태입니다.

    이 플러그인을 추천하는 분들은 많으신데
    정작 사용법은 잘 안나와있어서 어떻게 해야할지 고민입니다.

    혹시 여유가 되신다면 iThemes Security 플러그인 사용법을 포스팅해주실 수 있을까요?
    기본적인 부분이라도 정말 감사히 공부하겠습니다.ㅠ

    단지 바람과 부탁이오니 단호하게 거절하셔도 뒤끝없이 잊겠습니다.
    앞뒤사정 모른채 무리한 부탁일 수 있다고 생각합니다.
    저에겐 작은 희망일지 모른다는 생각에 정말 실례되는 부탁을 드렸습니다..
    그럼 좋은 저녁 보내시길 바랍니다.

    1. Better WP Security는 이전에 사용했던 플러그인인데 이름이 변경되었네요. 이제는 iTheme에서 관리하나보네요. 다음에 기회가 되면 리뷰를 해보겠습니다. 🙂

  5. 본문과는 상관없는 질문이지만, ‘교육신청’ 항목과 같이 작성하면 이메일로 오도록,
    방명록을 만들고 싶은데 (플러그인은 다 따라해봤는데 마음에 들질 않아서…) 방법이 있을까요?

    1. 감사합니다. 네 위의 포스트는 개발하시는 분들에게 조금 더 적합할 것같네요. 그래도 이런 내용이 있구나 알아두시면 나중에 도움이 될 수도 있을 거에요. 🙂

  6. 먼저 좋은 글 감사합니다.

    그런데 궁금한 점이 하나 있습니다.
    저런 식으로 사이트의 모든 페이지를 검사하면서 css에서 사용되지 않는 요소를 찾아낸다면,
    아직까지는 사이트에 사용되지 않았지만 이후에는 사용할만한 요소들은 어떻게 되는거죠?

    예를들어 pre 태그를 지금까지 사용하지 않아서 css에서 삭제했다가,
    나중에 pre 태그를 사용하게 되면 css에 없으니 이상하게 표시될 수도 있지 않을까요?

    웬지 초보자들이 적용하기에는 좀 어려운 팁인 것 같습니다.
    하긴 grunt를 사용한다는 것부터 초보자들이 사용할만한 팁이 아닌 것 같기도 하네요. ^^;

    1. 네 정말 중요한 부분을 말씀해주셨네요. 감사합니다. 😀 말씀하신 것처럼 지금 사용하지 않지만 나중에 사용할 수 있는 css도 있겠죠. 테마들 중에서 css 파일을 하나로 만드는 것도 있지만 프리미엄 테마들은 default.css, core.css 등 기본적인 css와 그 이외의 css 파일(예: plugins.css, icons.css )로 나누어 보관합니다. 기본 css파일은 uncss에서 ignoreSheets 옵션에 두어 열외시키는 방법을 사용하는 것도 하나의 방법이겠죠. 어찌되었건 심도있는 테스트가 끝나고 라이브에 올리는 것을 잊지말아야겠죠.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.