워드프레스 사이트의 속도에 대한 오해

[ 이글은 2018년 06월 13일에 최종 수정되었습니다. ]
§

저도 그 존재를 모르고 있던 (햇수로 4년전 작성했던 글이라 기억이 날리가 없죠.) 글에 워드크랙커님께서 링크를 걸어주시는 바람에 저도 그 글의 존재를 오늘 알게 되었습니다. >.http://hackya.com/kr/웹사이트-페이지-속도-측정/

이글을 링크한 워드크랙커님의 글을 자연스럽게 링크를 타고 들어가 읽게 되었는데, 저의 매우 잘못된 내용 (사실 4년전에는 그렇게 잘못된 내용도 아니었지만, 지금 상황과 많이 다른 내용이 되어버린거죠.) 을 인용하고 계셔서 놀라서 부랴부랴 제글을 update 했었습니다.

update/수정 내용은 위 링크에서 확인하실 수 있으니 별도로 언급하지 않겠습니다.

글 수정 하면서 궁금해져서 제 사이트 Pingdom 테스트도 돌려보고,

pingdom_sc

http://tools.pingdom.com/fpt/#!/S6yyN/http://hackya.com/kr/

오잉? 지금은 1.19초 로딩속도가 나오네요. ㅎㅎㅎ 아무래도 지금 미국시간으로 밤늦은 시간이라 접속자가 많이 없어서 속도가 조금더 빨라진듯 합니다.

로딩속도 확인한 김에, P3 플러그인 프로파일러도 오래간만에 돌려봤습니다.

(내심 궁금하기도 했습니다. 지금 개발에 관련된 엄청난 숫자의 플러그인이 달린 상태라서.)

P3_sc1

얼마나 많은 숫자의 플러그인이 달렸냐구요? 무려 34개의 플러그인이 활성화 된 상태 입니다.

사실 이렇게 제 홈피의 프로파일러 스샷을 공유하는 이유는, 지금 어느 한분께서 제 사이트에 관해 엄청난 오해를 하고 계셔서 입니다.

34개의 플러그인이 로딩되는데 걸린 시간이 0.3초도 되지 않습니다. 거기다가 업데이트를 하지 않아서 맛탱이가 간 FeedWordPress (RSS 플러그인 입니다.) 플러그인이 모든 플러그인이 로딩되는 시간의 반이나 차지하고 있는 상태 입니다.

조금더 구체적으로 확인해 보겠습니다. 아래 스샷을 보시죠.

P3_sc2

이 많은 숫자의 플러그인들이 없다면, 제 사이트의 core 파일과, 테마파일이 로딩되는데 걸리는 시간은 합쳐서 0.7초 밖에 되지 않습니다.

어떻게 이렇게 빠른 속도가 가능하냐구요?

이 부분을 명확하게 이해하셨으면 좋겠습니다. 워드프레스 테마 와 플러그인들에 손을 대서 이런 속도가 나오도록 하는건 불가능 합니다.

다시말해 front-end 기술 때문에 이런 속도가 나오는 것 이 아닙니다. 그러니까 제가 잘나서, 제 기술이 좋아서가 아닌겁니다.

“덕중의 덕은 양덕이니라” – 이런 얘기를 아마 들어보셨을텐데요, hackya.com 은 양덕의 기술로 구축되어 있습니다. 그래서 속도가 빠른 것 입니다.

어렸을때 사진밖에 없네요. ㅋㅋㅋ (본인이 이 사진 진짜 싫어하는데..)

anthony

워드프레스는 느리지 않습니다. 이렇게 몹시 빠르게 구동될 수 있습니다. 단지 back-end 기술이 요구될 뿐 입니다.

그리고, 예전부터 플러그인을 엄청나게 끌어다 쓰면서 사이트 속도를 높히려는 시도를 하는 분들을 많이 보아왔는데, 정말로 부질없는 짓 이라고 해야 하나, 시간낭비 입니다.

front-end 에서, 워드프레스 내에서 사이트 속도를 높히는 방법은 문서 경량화와 cache 사용 뿐 입니다.

많은 시간이 요구되고, 꽤 많은 front-end 에 관련된 내용과 이해도, 그리고 기술력이 필요합니다. (작년 여름에 코프레스 테마를 공유하면서 그 방법들을 보여드리기도 했었죠.)

그렇지만 그런 노력을 해봐야, 서버쪽에서 손을 보는 것과 비교하면 정말 아무것도 아닌게 되어버립니다.

결국, 불변하는 진리는, “서버가 깡패다.” 입니다.

그렇기 때문에 웹호스팅 쓰시면서 사이트 속도를 올리려는 노력을 하는 건 매우 비효율적 입니다.

물론 웹호스팅이라도, cache 적용과 어느정도 front-end 최적화는 해야겠죠.

하지만 사이트 구축을 시판용/배포용 테마를 가져다 구축하면서 사이트가 쾌적하게 돌아가길 바라는 것 부터가 잘못된 발상입니다.

시판용/배포용 테마는 구조자체가 코딩한줄도 모르는 사용자들이 이용해서 사이트 구축이 가능하도록 만들어진 제품이기 때문에, 속도와는 거리가 멉니다.

버스를 사다가 스포츠카 속도를 내보려고 하는셈 입니다.

아주 간단한 형태라도, 직접 테마를 작성해서 사이트에 적용해 보세요. 미친듯한 광속으로 사이트가 돌아가는 걸 보고 몹시 놀래실 것 입니다.

결론을 내자면

1. 사이트 로딩속도는 서버가 깡패다.
2. 워드프레스는 느리지 않다. 단지 시판용/배포용 테마가 느릴 수 밖에 없는 태생적 한계를 갖고 있다.
3. 덕중의 덕은 양덕이라서 절대 양덕을 이길 수 는 없다.

*제 사이트가 빠른건 저와 아무런 상관도 없는 일입니다. 부러워도 하실 필요 없고, 저에게 도움을 기대하셔봐야 제가 도움드릴 수 있는 건 교과서적인 내용밖에 없습니다.

문서 경량화 + cache. front-end 쪽에서는 이게 전부 입니다. (자스 하고 css 묶기도 해야하고, conditional loading 기법을 사용할 방법이 없다면 (i.e., click event 에 js 로딩하기 등) asynchronous 로딩을 하시면 됩니다. (비동기 로딩?)

그리고 이게 전부 입니다. 아, DNS prefetching 도 해야하는 구나… 암튼 이런 자질구레한 기법들을 다 동원할 수 있지만, 그 효과는 미비한… 그냥 깔끔하게 서버쪽 에서 손보는게 로딩속도를 올리기에 가장 효과적 입니다.

아, 정말 마지막으로, 지금 사이트/블로그를 시작하시려는 분들은 php7에서 시작하세요. (간단한 개인홈피인 경우에 국한해서 말씀드리는 것 입니다. 우커머스 사이트 같은 경우 php7 으로 올렸다가 그냥 망하는 수가 있습니다/사이트 문닫는 수가 있습니다.)

일단 시작부터 기존 php 에 비해 2배 가속으로 시작하실 수 있습니다. (정말입니다. 약파는거 아니에요.) php 만 7로 돌려도, front-end 에서 하는 잡스러운 사이트 최적화 작업은 전혀 할 필요가 없어집니다.


개발자 분들과 공유하고 싶은 내용하나

3rd party API 를 어떻게 로딩하느냐에 따라 사이트 로딩속도에 많은 영향을 줄수 있습니다. 일반분들은 구글, 페이스북, Disqus 등에서 제공하는 API 들을 어짜피 플러그인을 통해서 사용할 수 밖에 없으니 별수 없지만, 직접 API 를 불러오는 작업을 하실때, async 로딩과 click event 시 js 를 로딩하는 선별적인 로딩기법 등으로 문서를 매우 가볍게 만들어 주는게 좋습니다.

쇼핑몰 같은 로딩속도가 매우 중요한 사이트는 이런 부분에 신경을 써줘도 사이트 로딩속도가 많이 향상 됩니다.

사실 K보드 같은, 무거운 플러그인 쓰지 않아도 간략한 게시판 형태 페이지를 얼마든지 구축할 수 있거든요. 상품관련 Q&A 게시판 같은 경우 Disqus thread 를 달아주면 그게 게시판 역활을 해주니까.

btw, 1초이하의 로딩속도는 멀고도 험한 것 같습니다. ㅋㅋㅋ 켁. 자체 워드프레스 댓글 기능을 빼버리고 Disqus API 로 대체하면 1초 이하 로딩속도가 나올 것 같았는데… 0.02초 차이로 sub 1 second 로딩속도를 못끊네요. 아쉽…

disqus_vs_wordpress_comment_speed

hackya 는

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

Tags: , ,

카테고리: ,

Ω

16 Comments

  • 7사단 says:

    우왕… ㄷㄷㄷㄷ 어떻게 1초 속도가 나오죠? 대박!!!!

    요즘 핵캬님 블로그 글 보면서 워드프레스 최적화에 관해 열공중입니다.

    많이 바쁘신것같던데 건강챙기시면서 하십쇼!!

  • WordCracker says:

    사이트 속도가 안 나와서 이 글을 참고로 여러 가지 방법을 시도해보았습니다. 그런데 XXX라는 플러그인을 비활성화하니까 사이트 로드 속도가 1.5초(어떤 경우에는 1초 미만)로 확 줄어들었네요… 다른 XXXX 플러그인으로 바꾸어야 할까봅니다.

    • Matthew says:

      사이트 상태가 점점더 나빠지고 계시네요. ㅠㅠㅠㅠ 불과 일주일? 며칠전만 해도 속도 나쁘지 않으셨는데….. 테마 바꾸시고 나셔서 문제가 생긴듯 합니다.

      무작정 감으로 이 플러그인이 문제다, 이걸 바꿔야 겠다, 저걸 없에야 겠다 이런 것 보다 자세하게 어디서 문제가 발생하고 있는지 세밀하게 확인해 보세요. (그리고 플러그인 제작자 입장에서 사용자가, “아, 이 플러그인 때문에 내 사이트가 느려졌네.” 라고 말하는걸 듣게 되면 몹시 기분이 나빠집니다. 실제 그렇더라도 그런 발언은 좀… ㅎㅎㅎ)

      http://tools.pingdom.com/fpt/#!/cPgJnD/http://www.thewordcracker.com/

      http://tools.pingdom.com/fpt/#!/b4EYjg/http://www.thewordcracker.com/

      현재 각 페이지가 로딩되는데 4-5 초 정도 시간이 걸리는데, 상당히 답답하게 느껴지고, 답답한거 떠나서 3초가 넘어가면 구글에서 SEO penalty 를 많이 먹입니다.

      그래서 계속 방치하시면 검색으로 들어오는 방문자가 많이 줄어들게 되실겁니다.

      https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.thewordcracker.com%2F&tab=desktop

      위에가서 보시면 보시면 쉽게 고치실 수 있는 내용들이 많이 나오고 있습니다.

      구글이 시정하라는 것들만 어느정도 대충 시정하셔도 속도개선이 많이 되실거에요. WordCracker 님 서버상태는 나쁘지 않거든요.

      좋은 내용을 공유하고 있는데도 불구하고 사이트 활성화가 안되는 사이트들을 보면, 항상 로딩속도가 느림을 확인할 수 있습니다.

      코프레스에서 정말 수준높은 답변 달아주시고 나름 전문가 분이라서 제가 이래라 저래라 말할 수도 없지만, 그분 사이트 보고 있기 안타깝더라구요. 본인 사이트가 얼마나 느린지 본인만 모르시는 것 같아서.. >.<

      사이트가 쾌적하지 않으면, 일단 저부터만 봐도 방문을 기피하게 됩니다.

      어떤 경우에도 3초 미만의 로딩속도는 나와야 한다고 저는 생각하고, 그런 로딩속도를 유지하는 일은, 절대 어려운, 큰 기술이 요구되는 일이 아닙니다. (시간을 많이 잡아먹긴 하죠. 하지만 한번 손보면 다시 손대야 하는 부분도 아니라서요..)

      • WordCracker says:

        테마를 바꾸면서 뭔가 꼬이고 있다는 생각이 드네요. 당분간 바빠서 테마에 손을 못 댈 것 같지만, 추후에 가벼운 테마로 시작해보려고 고려 중입니다. 속도는 제가 측정하면 조금 빨리 나오기도 하고… 어떤 때는 많이 느려지기도 하네요.

        특정 플러그인을 언급한 것은 제가 경솔했습니다. (가능하시면 그 부분만 블라인드 처리 부탁드립니다.)

        추가:
        테마를 무료 테마로 바꾸었습니다. 몇 시간 동안 레이아웃만 대충 수정했네요(일 때문에 바쁜데 제 자신도 왜 이것을 하고 있는지 모르겠네요)… 구글 PageSpeed Insights 점수는 올랐는데 pingdom 측정값은 측정할 때마다 들쑥날쑥하네요…
        http://tools.pingdom.com/fpt/#!/b3u447/http://www.thewordcracker.com
        http://tools.pingdom.com/fpt/#!/cuXFvZ/http://www.thewordcracker.com

        • Matthew says:

          플러그인 이름 삭제했습니다.

          네. 테마 바꾸시기전에는 로딩속도가 살짝 2초가 넘는 정도의 양호한 상태였던걸로 기억합니다. (저로서는 전혀 불만이 없었던)

          로딩속도가 들쑥 날쑥 하는 이유는 front-end asset 들이 (css 와 js) 가 하나로 묶인 상태가 아니고 또 async 로딩이 되지 않고 있기 때문입니다. 그리고 분명히 새로 적용하신 테마가 어디서 꼬이고 있습니다.

          css, 그리고 js 를 각자 하나로 묶는거는, 직접 수작업 하시기 힘드시면 플러그인도 존재합니다. 이름이 뭐였는지… 기억이 안나네요. 이런거는 플러그인 성애자이신 랭커님이 더 잘아시는데… ㅋㅋㅋㅋ

          또 최적화 된 파일들을 구글 pagespeed 에서 다운로드 받으셔서 그대로 사용하시면 되기도 합니다.

          구글이 이런면에서는 정말 친절하죠. 뭐가 잘못되었다는걸 알려줄뿐만 아니라, 최적화 된 파일을 다운로드 받아서 사이트에서 쓸수 있게 구글이 직접 작업까지 해서 건내주니까요. ㅎㅎㅎ

  • codei says:

    php7은 이제 사용 안 하는 사람이 바보 됩니다.
    워낙 물건이라서 말이죠.
    더불어서 php7으로 직접 올렸는데 별반 차이… 오히려 느려진것 같다.
    라고 하시는 분들은 php7 오픈 캐시가 적용 되었는지 확인 및 설치해 주세요
    php7 수동 설치 하면 디폴트가 오픈 캐시 미적용 상태입니다.
    [패키지로 묶여서 설치되는 인스톨러를 사용하면 보통은 적용되어 있습니다]

    무엇보다 지긋지긋한 메모리사용율을 훅~ 줄여주기 때문에 워프 사이트는 체감이 될 만큼 효과를 봅니다.

  • Happist says:

    아래 php7이야기가 나와서 문의해 봅니다.

    루아틱에서 php 5.5를 적용하다 최근에 아이비로 옮겨 Full SSD에 php7.0을 적용하고 있습니다.
    그래서 상당하 기대를 했는데
    테스트를 해보면 더 좋아진게 없고 점수들은 나빠졌던데..
    주관적으로도 빨라졌다느는낌이 없습니다. 같은 테마를 적요하고 구성도 비슷합니다.

    혹 뭘 점검해야하는지 알 수 있을 까요?
    오픈 캐시라고 했는데 이를 확인할 방법이 있나요?

    • Matthew says:

      https://tools.pingdom.com/#!/cn7kUW/http://happist.com/

      제가 기억했던걸로는 예전 호스팅 속도가 더 빠르셨었습니다.

      이런 오류가 보이네요.

      Mixed Content: The page at ‘https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-28667790458308…pjl=f&pfx=0&fu=16&bc=1&ifi=1&xpc=tUWMGoNcxS&p=http%3A//happist.com&dtd=121’ was loaded over HTTPS, but requested an insecure script ‘http://pagead2.googlesyndication.com/pagead/js/r20160802/r20110914/abg.js’. This request has been blocked; the content must be served over HTTPS.

      그리고 pingdom 에서는 This page makes 70 parallelizable requests to happist.com. Increase download parallelization by distributing these requests across multiple hostnames:

      이런 오류가 표시되고 있구요.

      이 이미지 하나 뜨는데 1.76초가 걸리고 있습니다.

      http://happist.com/wp-content/uploads/2016/08/갤럭시노트7-스크린샷-800×445.png

      사이트 로딩이 당연히 늦어질 수 밖에 없을듯 합니다.

      에드센스 광고 관련 asset 로딩 되는데도 1.5초 가까이 걸리고..

      둘다 정상적인 로딩이 되고 있지 않습니다.

      호스팅사에 문의해 보셔야 할듯 합니다.

      오픈캐시는 server 쪽에세 세팅하셔야 하는데, 웹호스팅사가 해줘야 하는 부분 입니다.

    • codei says:

      php7 은 측정 방법에 따라서는 더 느릴 수도 있습니다.
      [캐시 적용 하는 단계가 있어서]

      이는 작업 단위가 낮으면 그리 큰 차이가 안 납니다. 반면 작업량이 많을 수록 점점 효율이 좋아집니다.

      시간당 1억 뷰를 하는 서버를 기준으로 php 5.6 과 php7 서버 각각 두고 비교한 결과php7이 30% 가까이 더 효율적인 자원 관리를 한다는 결과를 보여주었습니다.
      서버 4대에서 5대로 늘릴까 고민하다 php7 도입하고 서버 도입 안해도 되겠다는 결론이 나왔다고 하니, 이는 어마어마한 차이 입니다.
      [고가의 서버 1대를 더 구매 안해도 되었잖습니까? 업데이트 한번 한거 뿐인데 ㄷㄷ]

      오픈캐시 확인 방법은
      콘솔에서 php -v
      하시면 대략 이런 내용이 나옵니다.

      PHP 7.0.2 (cli) (built: Jan 6 2016 14:50:05) ( NTS )
      Copyright (c) 1997-2015 The PHP Group
      Zend Engine v3.0.0, Copyright (c) 1998-2015 Zend Technologies
      with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2015, by Zend Technologies

      with OPcache 라고 보이시죠? 이렇게 나와야 합니다.

      설치 안되어 있다면

      sudo yum install php70w-opcache

      혹은

      /etc/opt/remi/php70/php.d/10-opcache.ini에 아래 내용을 확인하고 주석제거 후 아파치 재시작

      zend_extension=opcache.so
      opcache.enable=1
      opcache.enable_cli=1

      웰컴 투 PHP 7 .

      • Happist says:

        네 고맙습니다.
        그런데 알려주신 방법은 서버관리가 관점에서 적은 것 같은데 맞나요?
        호스팅 이용하고 있는 입장에서 할 수 있는 것 같지 않아서요.

  • SOO says:

    맞습니다. 3년간 쇼핑몰 구축해서 운영하다가 도저히 안될 것 같아서 이것저것 알아보니까 결국 하드웨어와 세팅 방법으로 가게 되더라구요.

Leave a Reply

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