wordpress 홈페이지 속도 측정 방법 – 속도 개선까지 (Super Page Cache for Cloudflare)

워드프레스를 이용해서 홈페이지를 운영하고 계신가요? 직접 서버를 구축하거나 호스팅 업체를 이용하는데 속도가 느린거 같아 고민이신분들은 오늘 이 글을 끝까지 읽어보시기 바랍니다. wordpress 홈페이지 속도 측정 방법에서부터 속도 개선까지 소개해 드리겠습니다.

관련글 목록

본 글은 오라클 클라우드를 이용하여 무료 서버를 구축하고자 하시는 분들을 위해서 연재되고 있습니다. 글의 순서는 다음과 같습니다.

오라클 클라우드 무료 사용법

오라클 클라우드 고정 IP 만들기

terminus를 이용해서 오라클 클라우드와 연결하기

오라클 클라우드 네트워크 방화벽 설정하기

무료서버에 워드프레스 설치 – nginx, MariaDB 설치

무료서버에 워드프레스 설치 – PHP설치

무료서버에 워드프레스 설치 – PHPMyAdmin 설치하는 2가지 방법

무료서버에 워드프레스 설치 – MySQL DB 설정 및 워드프레스 설치

wordpress에서 서브도메인 설정하기

certbot 인증 및 https설정하기

5분안에 워드프레스 블로그 애드센스 신청하는 방법

wordpress 홈페이지 속도 측정 방법

홈페이지 속도측정

저는 ‘잡학다식프로’라는 이름으로 블로그 글을 운영하고 있습니다. 기존에 티스토리를 이용하여 블로그를 시작했고 몇가지 한계점이 보여 내 홈페이지를 운영하자라는 생각에 도달했죠. 현재는 오라클 클라우드에 서버를 구축하고 워드프레스를 이용해서 블로그를 개설한 뒤 운영하고 있습니다. 그런데 제 글을 확인하러 접속을 하면 페이지가 너무 늦게 뜨고 로딩 속도도 너무 느린 상황이 발생하여 이에 대한 개선점을 찾아보았고 약간의 성과를 낸 부분을 공유드리고자 합니다.

로그인하고 글을 보면 속도가 느리다

들어가기에 앞서 전제로 말씀드리는 부분은 브라우저에서 워드프레스에 관리자로 로그인을 한 상태에서는 페이지 접속 속도가 느립니다. 그래서 일반적인 내 홈페이지의 속도를 확인하기 위해서는 로그아웃을 한 상태나 로그인이 되어있지 않은 다른 브라우저에서 확인하셔야 다른 사람들이 보는 진짜 내 홈페이지의 속도를 확인하실 수 있습니다.

홈페이지 속도 측정하기

자신의 홈페이지의 속도를 측정하는 방법은 PageSpeed Insights라는 곳에서 하실 수 있습니다. 사이트에 처음 접속하면 URL을 입력하는 란을 확인하실 수 있으며, 여기에 자신이 측정하고자 하는 페이지 주소를 입력합니다. 저는 현재 제가 운영하고 있는 https://jabhak-dasik.com/ 을 입력해 보겠습니다.

PageSpeed Insights에 내 도메인 추가

화면의 분석 버튼을 클릭하면 분석이 진행되고 보통 1분 미만에 속도 측정 결과가 표시됩니다. 분석을 수행할때마다 분석결과는 다르게 나옵니다. 그 당신의 인터넷 상태나 서버 상태에 따라 결과가 바뀔 수 있습니다.

도메인 속도 측정 결과 화면

제 측정결과를 살펴보면 blocking Time이나 speed index 부문에서 낮은 점수를 받고 있네요. speed index의 경우에는 서버의 성능에도 영향을 받는 부분이어서 이 부분의 점수를 높이기 위해서는 향후 더욱 높은 사양의 서버로의 이전도 고려해야 할 것입니다. 오늘은 wordpress의 플러그인을 이용해서 속도를 향상시킬 수 있는 방법에 대해서 알아보겠습니다.

Super Page Cache for Cloudflare 설치

워드프레스 플러그인 설치하기

워드프레스 플러그인 - 새로 추가 메뉴 이동

먼저 플러그인->새로추가 메뉴로 이동합니다.

Super Page Cache for Cloudflare 검색 후 설치 및 활성화

Super Page Cache for Cloudflare를 검색한 뒤 화면의 로켓모양의 로고가 있는 플러그인을 설치 및 활성화까지 시켜줍니다.

Super Page Cache for Cloudflare 설정화면 이동

설치한 플러그인 메뉴로 이동해서 Super Page Cache for Cloudflare를 찾은 뒤 ‘settings’ 버튼을 클릭합니다.

cloudflare 세팅페이지

Cloudflare General Setting을 수행하겠습니다. Authentication mode는 API Token으로 설정합니다. 이메일이나 도메인주소는 각자의 것을 입력하시면 되겠습니다. 다만 API Token을 받기 위해서는 Cloudflare 홈페이지로 가셔서 추가적인 설정을 해줘야 합니다.

Cloudflare 홈페이지에서 세팅하기

Cloudflare 홈페이지로 이동하도록 하겠습니다.

Cloudflare 홈페이지 이동하기(클릭)

cloudflare 홈페이지 이동 및 언어설정 변경 후 회원가입하기

설정의 편의성을 위해서 페이지 상단의 지구본 모양을 클릭한 뒤 언어를 영어로 변경합니다. 그리고 가입버튼을 눌러서 가입절차를 진행합니다. 가입은 별 어려움없이 수행하실 수 있습니다. 가입 후 로그인을 진행합니다.

cloudflare에 내 도메인 등록하기

로그인을 하신 후 화면의 메뉴 중 Website에 들어가면 자신의 도메인을 검색하여 등록할 수 있습니다. 자신의 도메인 검색 후 추가하도록 합니다.

API Token 생성

My Profile 메뉴로 이동

도메인 등록을 완료하였다면 화면 오른쪽에 사람모양의 아이콘을 클릭한 뒤 ‘My Profile’을 클릭합니다.

API Token 메뉴에서 Create Token 클릭하기

화면의 왼쪽에 ‘API Tokens’ 버튼을 클릭하면 API Tokens를 생성할 수 있는 페이지로 이동합니다. Create Token 버튼을 클릭합니다.

Custom token의 Get started 버튼 클릭하기

화면의 제일 아래쪽에 Custom token 메뉴에서 ‘Get started’를 클릭합니다.

API Token 설정 예시

다음의 화면과 같이 Permissions 정보 및 이하 정보를 입력합니다. 화면 중간에 ‘Add more’ 버튼을 눌러서 Permission 항목을 추가할 수 있습니다. Token name은 자신이 식별할 수 있는 임의의 값을 입력하면 됩니다.

모두 입력하신 뒤 ‘Continue to summary’를 클릭하면 token 생성이 완료됩니다. 요약정보를 확인한 뒤 최종적으로 Token 생성을 마무리합니다.

API Token 확인 및 복사하기

Super Page Cache for Cloudflare 세팅 완료하기

Token 생성이 완료되었고 생성한 Token값을 확인할 수 있습니다. ‘Copy’버튼을 클릭하여 값을 복사합니다. 이후 다시 아까 열어두었던 워드프레스 플러그인 페이지로 이동하겠습니다.

Super Page Cache for Cloudflare 세팅 완료하기

화면 중간에 Cloudflare API Token값을 입력한 뒤 세팅완료 버튼을 클릭합니다. 저는 이미 설정을 해 놓은 상태여서 Update setting으로 표시되지만 처음 생성하시는 여러분은 Create Setting 등의 값으로 다르게 표시될 것입니다.

이로써 기본적인 설정은 끝났습니다. 이후에 내 도메인 서비스로 이동하여 DNS 서버 설정을 일부 수정해주어야 합니다. 이에 대한 부분은 다음 글에서 다루도록 하겠습니다.

Leave a Comment