빠른 워드프레스 테마 만들기

§

저보다 워드프레스 입문은 많이 늦게 하셨지만, (제 눈높이로는) 엄청난 “괴발자” 이신 스xx 님께서 며칠전 저에게 이메일을 한통 주셨었습니다.

제가 작년에 제작해서 공유했던 코프레스 튜토리얼 테마보다도 더 빠른 테마를 만드셨던데, 저도 솔직히 깜놀 했습니다.

1초 이내에 뜨는 워드프레스 테마를 만들기도 힘든데 무려 평균 0.6초 대에 뜨는 테마!!!!

제가 작년에 공유했던 코프레스 튜토리얼 테마 속도도 물론 1초 이내에 뜨긴 하지만, 괴발자 스xx 님의 테마는 제 테마보다 평균 0.3초 정도나 더 빠르더군요. 엄지척!! 짝짝짝.

screen_shot
https://tools.pingdom.com/#!/cAWT1f/http://hackya.com/themekopress/
(멀티사이트 말고 저도 스xx 님 처럼 single installation 에 테마 적용하면 0.1-2초 정도는 더 빠를텐데… 암튼 제 테마보다 스xx 님 테마가 더 빠르다는건 인정, 인정!! ㅋㅋㅋ)

그래서 원래 이러면 안되는데, 할일도 많이 밀렸는데,… 저도 가만히 있을 수 가 없어서, 매일 밤마다 조금씩 테마를 하나 제작했습니다. 일단 저 말고 다른 분이 저보다 더 빠른 테마를 갖고 계시다는 건 제가 참을 수 가 없어서요. ㅋㅋㅋㅋ

스xx 님께 솔직히 말씀드리자면 예전에 (대략 2013년경) 반정도 만들어 놓았던 테마를 완성시킨 것 입니다. 제가 무슨 코딩 천재도 아니고 어떻게 4일만에 테마를 하나 뚝딱 만들어 내겠습니까?

암튼 완성된 테마 입니다. (http://hackya.com/us/ 에 적용했습니다.) 절대 보여주기 용이 아니고 실제 사용가능하게 만들었습니다. 기능도 약간 더 추가하고 계속 쓸겁니다.

screen_shot_simply_white

테마 디자인은 속도때문에 간결하게 한게 아니라 사실은 이런 모습의 테마를 갖고 싶었었습니다. (구글 같은데서 일하는 고수분들 사이트 보면 하나같이 이렇게 간단한 테마의 블로그를 갖고 계시더라구요. 저도 왠지 고수처럼 보이고 싶어서../있어보이고 싶어서.. ㅋㅋㅋ)

그런데 이게 중요한게 아니죠. 어느정도 로딩속도가 나오는지가 관건이죠.

simply_white_speed_test

https://tools.pingdom.com/#!/JUKok/http://hackya.com/us

https://tools.pingdom.com/#!/FuBrs/http://hackya.com/us

https://tools.pingdom.com/#!/defRLw/http://hackya.com/us

평균적으로 0.3초대 후반의 로딩속도가 나오는 것 같습니다.

지금 hackya.com 같은 경우, 메모리도 간당간당하고, 다른 분들 사이트들 운영이 우선이라 hackya 에 많은 서버 resource 를 할당할 수 없어서 서버상태가 상당히 좋지 않습니다. (스xx 님 서버가 훨씬 더 원활하게 돌아가고 있습니다.)

암튼, 일단 가장 빠른 테마는 다시 제가 갖고 있는걸로 저혼자 결론 내렸습니다. 아무런 답변 없으시면 이의 없으신걸로… ㅋㅋㅋ

이글 보시고 보나마나 이메일 주실 것 같아서, 다른 분들도 궁금해 하시는 분들이 많이 계실 것 같아서, 저만의 가벼운 워드프레스 테마 만들기 노하우를 살짝 공유해 보겠습니다.

1. 경량화 vs 구조조정

“경량화” 를 하셨다고 말씀하셨는데, 스크립트를 경량화 하는 것 도 중요하지만, 테마의 구조 자체를 단순화 하는 것도 (이게 구조조정이죠?) 매우 중요하다고 저는 생각합니다.

header.php
index.php
single.php
functions.php
footer.php

아주 간단한 테마를 만드는 경우에도 이 다섯개의 php 파일은 기본적으로 필요하다고 가르치는 온라인 튜토리얼들이 많이 존재합니다.

사실이 아닙니다. 대략 2010년, 2011년경 만들어졌던 그 당시 테마들을 보면, 물론 많은 숫자는 아니지만, 이 다섯개의 파일도 없는 테마들도 존재했었습니다.

제가 오늘 완성한 테마는 index.php, functions.php 이렇게 딱 두개의 php 파일만 존재합니다. 물론 제가 항상 사용하는 inc 파일들 중 3개가 포함되었습니다. (저는 functions.php 는 비워두고 항상 function 들을 include 해서 사용합니다. 이렇게 하면 유지보수가 편해서: 코프레스 튜토리얼 테마 살펴 보신 분들은 무슨 얘긴지 아실거고..)

어떻게? 그누보드 개발을 오래하셨었으니까, 그누보드로 예를 들자면, 그누보드에서는 index.php 에서 header.php 하고 footer.php (그누보드는 tail.php 죠), 이 두개의 파일을 include_once 해서 불러오는데, 워드프레스도 동일합니다.

단지 워드프레스 고유의 함수를 쓰는 것 뿐이지, 워드프레스도 index.php 에서 결국 header 와 footer 를 include 해서 불러오는 것 뿐 입니다.

include_once 한번 하는게 무슨 큰 차이가 나느냐고 생각하실 수 있는데, 직접 스크립팅 해서 속도차이 확인해 보시구요. (제 생각에는 이게 순수 php 가 아닌, 워드프레스 함수를 작동시키는 거라, 미세하지만 추가시간이 소요되는게 아닌가 생각합니다.)

single.php, 혹은 page.php, 잘생각해보시면 전혀 필요 없는 파일들 입니다. single.php 와 page.php 에 사용되는 loop 을 index.php 에 옮겨서 적용해보세요. 아무런 문제 없이 잘 작동합니다.

2. 워드프레스 고유함수 최대한 배제하기

워드프레스 고유함수 중에도 특히 테마나 플러그인에서 사용하기 위해 제공되는 함수들이 로딩속도 저하를 가져오는 것 같습니다. 제 나름대로 생각해 보면, 이 테마/플러그인 함수들은 다시 core 파일의 함수를 작동시키는 거라서 php 가 중복 가동되면서 프로세싱 속도가 느려지는게 아닌가 추측합니다.

한 예로 IE 에서의 한글 url 표시 때문에, 제가 며칠전 hackya.com/kr 에 사용하는 테마에 get_permalink() 워드프레스 함수를 썼더니/교체 했더니, 대략 0.1-2 초 더 로딩 속도가 추가되더라구요.

그래서 허거걱 했습니다. 스xx 님이야, php 는 현업이시고 워낙 고수시니까 워드프레스 함수를 많이 배제하시고도 테마를 구축하실 수 있지 않을까 생각됩니다.

3. js 는 defer, css 는 async 하기

이건 그냥 무진장 삽질해서 터득한 내용입니다.

스xx 님 같은 경우, js 하고 css 둘다 async 로딩하고 계신데, 저는 js 는 defer 로딩하고 css 는 async 로딩 합니다. 제 경우, 분명 속도차이가 났습니다.

한번 테스트 해보세요.

마지막으로 테마공유 안합니다. ㅋㅋㅋ

저도 스xx 님보다 잘하는게 하나쯤은 있어야 하지 않겠습니까? ㅋㅋㅋ

저보다 뽀샵도 더 잘하시고, 일루도 선수시고, 거기에 php 하고 자스도 저하고 비교도 안되게 잘하시고, 다 저보다 잘하시는데, 저한테 마지막 남은 노하우 까지 털어가시면 제가 너무 비참해 지는 관계로… 테마파일 공유 불가 합니다. ^^;;;

암튼, 며칠동안, 저도 스xx 님 덕분에 제가 좋아하는 일을 할 수 있었어서 기분이 좋았고, 그래서 감사드립니다.

요즘 한국날씨가 많이 무덥다고 하던데, 무더위에 건강조심하세요.

p.s. 더이상의 속도경쟁은 무의미 합니다. 아무리 빠르게 만드셔봐야 0.3초대 초반이 최대치 일겁니다. 물론 저도 지금 테마를 조금이나마 더 빠르게 할 수 있구요. 그런데 그럼 어떻게 우열을 가리죠? 어느쪽이 0.01초 라도 더 빠른지 측정을 한다? 아무런 의미가 없다고 생각합니다. (하지 마시라구요. ㅋㅋㅋㅋ)

p.p.s. 모바일에서 제대로 구현되지 않는데 반칙아니냐구요? 시간이 없어서 아직 작업 못했습니다. 모바일 view 구축해도 사이트 로딩속도 0.001초도 더 늘어나지 않도록 스크립팅해서 보여드리겠습니다. (아무 이번 주말에 작업해야 할듯 합니다.)

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , ,

카테고리: ,

Ω

9 Comments

  • 7사단 says:

    ㅠㅠㅠㅠ

  • WordCracker says:

    좋은 정보 감사합니다.

    저는 심플한 테마를 설치하여 테스트를 해보면 로딩 속도가 0.8초~1.5초(테스트 지역에 따라 약간씩 차이)가 나오지만 실제 체감 속도는 그 보다 조금 느리게 나오더군요. 아마 한국에서 접속해서 딜레이가 있는가보다 생각했습니다. 하지만 http://hackya.com/us/ 사이트는 한국에서도 딜레이가 전혀 없이 거의 곧바로 로딩이 되네요. (http://hackya.com/kr/ 사이트의 경우 제 컴에서 열어보면 처음에 약간 (1초 정도) 딜레이가 느껴집니다. 이와는 달리 http://hackya.com/us/ 는 전혀 딜레이가 없다는게 신기하네요.)

    • Matthew says:

      지금 hackya.com 의 서버가 맛탱이가 간 상태라서요… (맛탱이가 갔다기 보다는 resource 부족인 상태)

      거기다 얼마전 get_the_permalink 함수로 바꿨는데, 이것도 사이트를 약간 더 느리게 하고 있고…

      저도 지금 hackya.com/kr 접속하면 1초정도 delay 가 생기고 있는 상태 입니다. (한국이나 미국이나 동일한 상태인거죠.)

      그래도 쇼핑몰 처럼 로딩속도가 중요한 사이트가 아니라서… 일단 그냥 놔두고 있습니다.

      불편하면 말씀해 주세요. 속도 올릴께요. ㅎㅎㅎ

  • Estoque says:

    0.3초라니… 번개내요 번개 ㅋㅋㅋㅋ 링크 눌러놓고 로딩 되었는지 다시 확인 해야하는 속도 아닌가요? ㅋㅋㅋ

    저도 css쪼개서 랜더링 속도 높이고 async로 js땡겨오고 이런것들 적용해야 하는데… 무한한 귀차니즘으로 치일피일 미루고 있습니다. ㅠㅠ

    • Matthew says:

      the integration time of photoreceptor cells in the eyes is on the order of 0.1-0.2 seconds 라고 하네요. (망막에서 받은 자극을 뇌로 전달하여 시각 정보를 전달하는데 소요되는 시간이 0.1초에서 0.2초란 뜻이겠죠.)

      그래서 0.3초면 유심히 처다보고 있으면/화면이 언제 바뀌는지 그것만 신경쓰고 쳐다보고 있으면 화면이 바뀌는 순간을 알아차릴 수 있습니다.

      그런데 약간 다른데 신경쓰고 있거나, 집중해서 화면바뀌는 찰나만 포착하려고 하지 않는다면, “링크 눌러놓고 로딩 되었는지 다시 확인 해야되는 경우”가 발생하더라구요.

      테마 작성하면서, “이거 지금 페이지 바뀐건가?” 이러면서 몇번씩 다시 링크 누르고 그랬습니다. (말씀하신데로 바뀌는 순간을 포착 못해서..) ㅋㅋㅋㅋㅋ

  • codei says:

    속도에 대한 이슈는 언제나 즐겁군요 ㅎ
    전 코딩도 잘 못하고 테마에 대한 기본 골격도 그렇게 뼈있게 하진 않았지만,
    한번 참전은 해보고 싶네요.
    최적화는 심도 있는 이해를 바탕으로 하는 거다 보니 말이죠.

    ps. 설마 저 기본으로 박힌 5개를 굳이 따로 안 넣어도 될줄은 몰랐습니다 ㅋㅋ

  • 워드프레스 테마를 이용해 속도 줄이는 방법이 있는지 처음 알았네요~
    전 속도 전쟁에 참여하지 않기로…ㅎㅎ
    글 잘 읽고 갑니다.

Leave a Reply

Your email address will not be published. Required fields are marked *