Google 웹마스터 도구 - 사이트 성능

사이트 성능 도구는 Googlebot이 Site를 Crawling하면서 제안사항을 표시해 주는 도구입니다. 제 Blog에 대한 제안 중에 눈에 띄는 것 하나가 바로 gzip 압축 사용이었습니다. Page를 Loading할 때 Download하는 크기가 좀 크다고 판단한 것 같네요.

그래서 WordPress에서 gzip Compression을 사용할 수 있는 방법이 혹시 있을까 해서 찾아보았더니 여러 Plugin이 있더군요. 그 중에서 Compression WP Plugin을 설치했는데 쉽고 간단하며 실제로 Test해보니 체감할 수 있을 정도로 Page Loading Speed가 빨라진 것을 느낄 수 있었습니다.

이번 Post에서는 Compression WP Plugin을 설치하는 방법과 실제로 얼마만큼 빨라졌는지 Benchmark한 결과에 대해 적어보도록 하겠습니다.

1. Compression WP Plugin 설치

Compression WP Plugin은 Server에 설치된 PHP의 gzip Compression 기능을 사용하여 Server에서 전달하는 Page의 내용을 gzip으로 압축하여 Client가 Download하는 Page의 크기를 줄여 Network 부하를 줄이고 Page Loading Speed를 높이는 기능을 합니다.

이 Plugin을 사용하기 위해서는 WordPress를 Hosting하고 있는 Server의 PHP가 zlib extension을 지원해야 합니다. 대부분의 경우 기본적으로 지원하지만, 확실치 않다면 Hosting 업체에 문의하기 바랍니다.

Compression WP Plugin의 설치는 간단합니다. 다음의 순서대로 따라 하시면 됩니다.

WordPress 3.0.4에서 Plugin을 설치하고 Test했습니다. 현재 가장 최신 Version에서 확인했기 때문에 이전 Version에서도 제대로 동작할 것입니다.

플러그인 설치 Page에서 검색

먼저, WordPress의 관리 Page에 Login한 다음, SIdebar에서 플러그인의 Add New를 Click하면 위와 같이 플러그인 설치 Page가 표시됩니다.

검색창에 gzip을 입력하고 Search Plugins를 누릅니다.

Compression WP 설치

검색된 결과 중에 Compression WP를 찾아 지금 설치하기를 누릅니다.

연결 정보 입력

Plugin을 설치하기 위해서 Hosting Server의 연결 정보를 입력합니다.

플러그인 설치중

자동으로 Plugin을 Server로 Download한 후 설치합니다. 설치가 완료되면 이 플러그인을 활성화를 눌러 Plugin을 활성화합니다.

Compression WP Options

마지막으로 Plugin 설정을 위해서 Sidebar의 설정에서 Compression WP를 Click하면 위와 같이 설정 Page가 표시됩니다.

첫 번째 Option은 Compression을 사용할 것인지 여부를 묻는 것이고, 두 번째는 Plugin Support를 할 것 인지를 묻는 것입니다.

Plugin 사용을 위해서 첫 번째 Option에 On을 선택하고, 두 번째 Option은 No를 선택합니다. 두 번째 Option을 Yes로 선택할 경우 Footer에 Text와 Link가 표시되는데 별로 예쁘지 않네요.

설치가 모두 완료되었습니다. 이제 Plugin을 통해서 얼마나 속도가 빨라졌는지 확인해 봅시다.

2. Benchmark

Web Page Loading Speed Benchmark에 대해서 Google에 검색해 보니 Benchmark Site가 있더군요. WebWait (http://webwait.com) 이라는 Site인데 원하는 Page를 여러 번 Loading하여 걸리는 시간을 평균, 중간값, 표준편차로 표시해 줍니다.

Benchmark를 위해서 이 WebWait을 사용하여 Compression WP를 설치하기 전과 후를 비교해 보았습니다.

Compression WP를 설치하기 전 Page Loading Speed Benchmark - Index

Compression WP를 설치한 후 Page Loading Speed Benchmark - Index

Blog의 Index Page를 Loading하는데 걸리는 시간을 WebWait으로 Benchmark한 결과입니다. 평균값으로 비교해 봤을 때 약 0.4초 정도 빨라졌군요.

Compression WP를 설치하기 전 Page Loading Speed Benchmark - Blog Post

Compression WP를 설치한 후 Page Loading Speed Benchmark - Blog Post

이번에는 Blog Post를 가지고 Test한 결과입니다. Post의 경우 Server 외부에서 가져오는 정보 (Adsense, Widget)가 Index Page보다 많아서 격차가 그리 크지 않네요.

평균값 기준으로 약 0.2초 정도 빨라진 것을 확인할 수 있습니다.

3. 마치면서..

체감 속도와 Benchmark 결과를 통해서 Compression WP Plugin을 사용했을 때 확실히 속도가 빨라졌다는 것을 확인할 수 있었습니다. 아마도 외부 Server에서 가져오는 정보들이 적고 Page에 Data가 많다면 더 좋은 성능을 얻을 수 있을 것입니다.

Compression WP Plugin을 통해 WordPress를 사용하면서 느끼는 Page Loading의 답답함을 줄여보시기 바랍니다.

Googling을 통해서 검색한 몇 가지 Plugin을 Test한 후, 그 중에 고른 것이 이번에 소개할 YOURLS WordPress To Twitter Plugin입니다.

YOURLS는 Your Own URL Shortener의 약자로 자신만의 URL Shortener Server를 구축할 수 있게 해주는 Open-source Web Script입니다.

그리고 YOURLS를 지원하기 위한 WordPress Plugin 중 하나로 YOURLS WordPress To Twitter Plugin을 제공하고 있는데, 이 Plugin은 새로 작성한 Post가 Publishing 될 때 YOURLS로 현재 Post의 URL을 Shortening한 다음 Twitter로 Post에 대한 Tweet을 보내는 기능을 합니다.

이 Plugin을 이용하면 굳이 YOURLS를 자신의 Server 또는 Hosting Service에 설치하지 않아도 기존의 다른 URL Shortening Service (ex. Bit.ly, Tiniurl..)로 URL을 Shortening해서 보낼 수 있습니다.

이번 Post에서는 YOURLS WordPress To Twitter Plugin을 사용해서 새로 작성한 Post를 Twitter로 자동으로 알리고, 동시에 Tweet에 들어갈 Post의 URL을 기존의 URL Shortening Service를 사용하여 처리하는 방법을 알아보겠습니다.

1. Plugin 설치 (WordPress 3.0.1 기준)

먼저 WordPress에 Login한 후, 관리 페이지로 들어갑니다. 그 다음 왼쪽 Side Menu 중에서 플러그인의 플러그인 추가하기를 Click합니다.

플러그인 설치 Page에서 검색

플러그인 추가하기 Page에서 위의 그림과 같이 YOURLS로 검색어를 입력하고 플러그인 검색을 누릅니다.

플러그인 검색 결과에서 설치

검색 결과 중에서 YOURLS : WordPress To Twitter 항목 밑에 지금 설치하기를 Click합니다.

설치를 위한 연결정보 입력

Web Server 또는 Hosting Server에서 자동으로 Plugin을 Download받아 설치하도록 하기 위해서 연결 정보를 입력합니다.

Plugin 설치 여부 확인

설치여부를 묻는 Dialog가 표시됩니다. 확인을 누릅니다.

Plugin 설치 중

자동으로 Plugin을 Download한 후 설치하는 과정이 진행됩니다. 성공적으로 설치되었다는 Message가 나오기 전까지는 다른 동작을 실행하지 않기 바랍니다. 설치 완료되면 플러그인을 활성화를 Click하여 Plugin을 동작시킵니다.

2. Plugin Setting

Plugin 활성화 후 Setting 필요

Plugin을 활성화시키게 되면 위의 그림과 같이 Plugin의 Setting이 필요하다고 경고 Message가 표시됩니다. Settings를 Click하여 Plugin Setting Page로 가 봅시다.

YOURLS WP to Twitter 설정 Page

Plugin Settins Page에서는 3개의 큰 항목이 있습니다. URL Shortening Settings는 URL Shotening을 할 때 어떤 Service를 사용할 것인지에 대한 설정을, Twitter Settings는 Twitter로 Tweet을 보내기 위한 설정을, 그리고 WordPress Settings는 WordPress의 어떤 내용을 Tweet할 것인지에 대한 설정을 할 수 있습니다.

Twitter Settings

먼저, Twitter Settings 부터 해 봅시다. Twitter와 연동하기 위해서 Twitter가 사용하는 OAuth 인증을 위해 Twitter에 Application을 등록해야 합니다. 위의 그림에서 Register an Application 위에 Mouse 오른쪽 Button을 눌러 Popup을 띄운 다음 새 탭으로 열기를 클릭합니다.

Login Twitter Developer Site

Twitter의 Devloper Site가 표시되고 Login을 위한 Form이 표시됩니다. Username과 Password를 입력하여 Login합니다.

Register an Application

Application을 등록하기 위한 Form이 표시되는데, 여기서 아래의 항목을 필수로 입력합니다.

• Application Name : 등록할 Application의 이름을 입력합니다. 여기서는 Blog의 이름을 입력합니다.
• Description : 등록할 Application의 간단한 설명을 적습니다.
• Application Website : Blog의 URL을 적습니다.
• Application Type : Browser를 선택합니다.
• Callback URL : Blog의 URL을 적습니다.
• Default Access Type : Read & Write를 선택합니다.

Terms of Service

맨 아래의 Register Application을 Click하면, 사용약관이 표시됩니다. I Accept를 Click합니다.

Application Details Page

Register가 완료되면 위의 그림과 같이 Application Details Page가 표시됩니다. 여기서 Consumer Key와 Consumer Secret을 Copy한 후, Plugin Setting Page에 Consumer Key와 Consumer Secret에 Paste합니다.

그 다음 Application Details Page의 오른쪽 상단에 있는 My Access Token을 Click합니다.

Access Token Requisition

Application Details Page에서는 Access Token과 Access Token Secret을 각각 Copy하여 Plugin Setting Page의 각 항목에 Paste합니다.

Twitter Settings 완료된 모습

이제 Plugin Setting Page로 돌아가서 Twitter Settings에 값이 다 입력된 것을 확인한 후, 맨 아래에 있는 변경사항 저장을 Click합니다. 입력한 값이 제대로 되었다면 위와 같이 Twitter와 연동이 완료되었다는 내용이 표시될 것입니다.

URL Shortener Settings

그 다음, Plugin Setting Page에서 URL Shortening Setting을 해 봅시다. URL Shortening Service의 You are using에서 another public service such as TinyURL or bit.ly를 선택합니다.

그리고 Public Service에서 원하는 Service를 선택합니다. 저는 Bit.ly를 주로 사용하기 때문에 여기서는 Bit.ly로 선택한 경우를 설명하겠습니다.

Bit.ly를 선택하면 API Login과 API Key를 입력해야 합니다. Bit.ly 계정이 없다면 여기에서 계정을 만드세요.

API Login에는 만든 계정의 Username을 대소문자에 유의하여 입력합니다.

bit.ly Settings Page

그 다음에 API Key를 얻기 위해서 Browser의 새 Tab을 열어서 Bit.ly에 접속하여 Login한 다음, 오른쪽 Menubar 상단에 있는 Settings를 Click하면 위와 같은 그림이 나옵니다.

여기에서 위의 그림에 표시한 것과 같이 API Key가 표시되어 있는데 이것을 Copy한 다음, Plugin Setting Page에 API Key 항목에 붙여넣고 맨 아래의 변경사항 저장을 Click합니다.

URL Shortener Settings 완료

URL Shortener Settings가 정상적으로 완료되면 위의 그림과 같이 완료되었다는 표시가 나타날 것입니다.

Wordpress Settings

마지막으로 WordPress Settings를 봅시다. 새로운 Post가 Publishing될 때 Tweet을 보내고 싶다면 위와 같이 New Post Published의 Generate Short URL을 Check하고 그 다음에 표시되는 Send a tweet with the short URL을 Check합니다.

그 다음, Tweet Message Option으로 Tweet을 보낼 때 표시되는 내용을 설정할 수 있습니다. 여기서 변수를 몇가지 쓸 수 있는데 위의 그림에서 쓰인 %T는 Post의 Title을, %U는 Post의 URL을 나타냅니다. 그 외에 다른 변수에 대해서는 Advanced Template를 Click하면 자세한 설명을 볼 수 있습니다.

이제 설정이 끝났다면 변경사항 저장을 Click하여 모든 설정을 완료합니다.

3. Plugin Test

Plugin Test Post 작성

Plugin이 제대로 동작하는지 확인하기 위해서 새 글 쓰기를 Click하여 글 편집 Page로 가봅시다. Plugin이 활성화되면서 Post Title을 적는 부분의 오른쪽 끝에 숫자가 표시되는 것을 볼 수 있습니다. 이것은 Blog Post의 Title을 Tweet으로 보낼 때 Tweet의 최대 문자수를 넘지 않도록 남은 글자의 수를 표시해 주는 것입니다.

또한 오른쪽 아래에 보면 YOURLS Widget이 보입니다. 아직 Publishing한 상태가 아니기 때문에 설정할 것이 보이지는 않습니다.

간단하게 Test를 위한 Post를 작성하고 공개하기를 Click하여 Publishing해 봅시다.

TweetDeck으로 확인한 Tweet

Publishing이 완료된 후, Twitter에 제대로 Post에 대한 Tweet이 올라갔는지 확인해 봅니다. 저의 경우 TweetDeck으로 확인해 봤는데 위의 그림처럼 제대로 표시가 되더군요.

YOURS Widget

Publishing한 다음에 Post를 다시 편집하면 위의 그림과 같이 아까는 설정할 수 없었던 YOURLS Widget에 설정할 수 있는 Option이 표시되는 것을 볼 수 있습니다.

Short URL에는 아까 설정한 URL Shortening Service로 이 Post의 URL을 Shortening한 URL이 표시됩니다. 그리고 아래에 Tweet This를 Click하면 이전에 Tweet했던 내용을 편집하여 다시 Twitter로 전송할 수 있습니다.

4. 마치면서..

저는 WordPress를 2.x version 부터 써왔는데 예전에 비해서 정말 설치와 설정이 간편해졌다는 것을 느낍니다. 이전에는 일일이 Plugin을 Google로 검색해서 Server에 upload하고 설치를 위해 File을 편집하는 등의 번거로운 작업이 많았는데 이제는 간단하게 플러그인 설치 Page에서 검색해서 Click만으로 설치할 수 있으니 정말 편해진 것이지요. 이 Post를 읽는 WordPress User분들에게 이 글이 도움이 되었으면 합니다.

– God Bless…