워드프레스 페이지 로딩 속도 느려짐 개선 및 최적화

워드프레스 속도 느려짐 Gzip, Html, CSS 압축 CDN 활용

노랗 목차

워드프레스는 생각보다 조금은 무거운 플랫폼으로서 세팅여부에 따라 로딩 속도 매우 느려져 인터넷 검색최적화에 악영향을 끼칠수 있습니다. 하지만 사용자 나름으로 아주가볍게도 무겁게도 만들수 있는데요 기본적으로 유료테마중에서도 화려한것들은 피해야 합니다. 전문가들은 이러한 헤비급 테마도 가볍게 만들어 커스터마이즈 할수 있겠지만 그렇지 못한 일반 사용자라면 이러한 화려한 테마는 장기간 플랜으로 보았을때 사용하기가 힘든것이 사실입니다. 느려진 속도뿐만 아니라 무거운 홈페이지는 트래픽문제도 크게 발생합니다.

한마디로 이왕 돈주고 사는거 “멋진 템플릿으로 사자“로 구매했다가는 고생을 할 수 잇습니다. 기본적으로 인터넷 웹페이지의 속도가 느리다면 관리자나 방문자들이 불편한것도 있겟지만 인터넷검색 최적화에도 웹페이지의 느린속도는 매우 큰 패널티를 받기 때문에 내 글이 상위에 뜨게 하기 위해서는 웹페에지의 로딩 속도를 측정하고 개선방법을 찾아야 합니다.

1. 워드프레스 속도 문제

워드프레스 웹사이트의 속도 문제는 사용자 경험과 검색 엔진 최적화에 중요한 영향을 미칩니다. 웹사이트가 느리게 로딩되면 방문자들은 불편을 느끼며 이탈할 확률이 높아집니다. 또한, 검색 엔진은 느린 웹사이트를 더 낮은 순위로 평가하며 검색 결과에서 상위에 나타나기 어렵게 됩니다.

2. 최적화 방법

워드프레스 웹사이트의 속도를 개선하고 검색 엔진 최적화를 향상시키기 위한 몇 가지 중요한 방법은 다음과 같습니다.

2.1 Gzip 압축 활용

Gzip 압축은 웹페이지의 파일 크기를 줄여 로딩 속도를 높이는 데 도움이 됩니다. 웹 호스팅 서버에서 Gzip 압축을 활성화하거나 플러그인을 사용하여 압축을 적용하세요.

2.2 HTML 및 CSS 압축

웹페이지의 HTML 및 CSS 파일을 압축하여 불필요한 공백과 줄 바꿈을 제거하고 파일 크기를 최소화하세요. 이는 웹사이트의 로딩 속도를 향상시킵니다.

2.3 CDN (콘텐츠 전송 네트워크) 활용

CDN은 웹사이트 콘텐츠를 전 세계에 분산된 서버에서 제공하여 로딩 시간을 단축시킵니다. CDN 서비스를 활용하여 이미지, 스크립트 및 스타일 시트를 더 빠르게 전달할 수 있습니다.

2.4 가벼운 테마 선택

화려한 테마나 헤비급 테마는 웹사이트를 느리게 만들 수 있습니다. 가벼운 테마를 선택하고 필요한 경우 커스터마이즈하세요.

2.5 트래픽 관리

무거운 홈페이지는 트래픽 문제를 발생시킬 수 있습니다. 불필요한 플러그인을 비활성화하고, 이미지를 최적화하고, 캐싱을 사용하여 트래픽을 관리하세요.

2.6 속도 측정 및 개선

웹페이지의 로딩 속도를 측정하고, Google PageSpeed Insights와 같은 도구를 사용하여 개선 방법을 찾아내세요. 이미지 최적화, 렌더링 블로킹 리소스 최소화 등을 고려하세요.

워드프레스 웹사이트의 로딩 속도를 개선하는 것은 방문자 경험을 향상시키고 검색 엔진 최적화를 향상시키는 중요한 과제입니다. 위의 방법들을 적절히 활용하여 웹사이트를 최적화하고 빠른 속도를 유지하세요.

웹페이지 로딩 속도 측정 방법

“웹 페이지 속도‘를 측정해주는 사이트는 많이 있습니다.

로딩속도 측정 "페이지스피드 인사이트" — 워드프레스 웹사이트 로딩 속도 측정 “페이지스피드 인사이트”

그리고 이번 2018년 7월 9일부터 구글의 페이지 속도 측정할수 있는 PageSpeed Insights 사이트가 생겼습니다.

2018 년 7 월 9 일 업데이트 : 이제 속도 업데이트가 모든 사용자에게 출시됩니다. 사람들은 최대한 빠른 웹페이지 속도로 궁금한 정보를 빨리 보고 해결하기를 원합니다. 그러기 때문에 사람들은 홈페이지의 속도에 많은신경을 쓴다는 연구 결과 가 있었으며 속도측정을 위한 신호 는 데스크톱 검색에 집중되며 2018 년 7 월부터 페이지 속도가 모바일 검색의 주요 요인이 될 것이라고 발표햇습니다. “속도 업데이트”는 사용자에게 가장 느린 경험을 제공하는 페이지에만 영향을 미치며 적은 비율의 쿼리에만 영향을 미칩니다. 페이지를 작성하는 데 사용 된 기술과 상관없이 모든 페이지에 동일한 표준을 적용합니다. 검색 쿼리의 의도는 여전히 매우 강한 신호이므로 관련성이 높은 훌륭한 콘텐츠가있는 경우 느린 페이지도 여전히 높은 순위를 매길 수 있습니다. 개발자는 실적 이 페이지의 사용자 경험에 미치는 영향을 광범위하게 생각하고 다양한 사용자 경험 통계 를 고려할 것을 권장 합니다. 페이지가이 새로운 순위 요소의 영향을 받는지 여부를 직접 나타내는 도구는 없지만 페이지 성능을 평가하는 데 사용할 수있는 리소스는 다음과 같습니다. 실제 상황에서 Chrome 사용자가 경험할 수있는 웹의 인기있는 대상에 대한 주요 사용자 환경 측정 항목에 대한 공용 데이터 Chrome 사용자 환경 보고서 웹 페이지의 품질 (성능, 액세스 가능성 등)을 감사하는 자동화 도구 및 Chrome Developer Tools의 일부 Lighthouse PageSpeed Insights 는 Chrome UX 보고서에서 페이지의 실적을 나타내고 성능 최적화를 제안하는 도구

위 설명에서 보는것과 같이 모든 기기에서 웹페이지 로딩 속도를 개선한다고 합니다.

자신의 워드프레스 주소를 입력후 측정을 할 수 있으며 모바일로 접속시와 데스크톱으로 접속시 페이지 속도를 각각 표시해줍니다.

모바일 및 데스크탑 페이지 속도측정

워드프레스 웹사이트 속도측정 도구

속도측정 사이트	특징	장점	단점
PageSpeed Insights	구글에서 제공하는 도구로 웹페이지 성능 분석	데스크톱 및 모바일 성능을 각각 측정하여 제공 구체적인 개선 방안과 리소스 최적화 제시 Google의 지원으로 신뢰도 높음	분석 내용이 기술적이어서 초보자에게는 이해하기 어려울 수 있음 몇몇 개선 제안이 구현하기 복잡할 수 있음
Pingdom	페이지 요청 수, 로딩 시간, 페이지 크기 측정	사용자 경험을 나타내는 Grade 제공 다양한 지역에서 테스트 가능 요약 정보와 상세 정보 모두 제공	모바일 테스트가 무료 버전에서 지원되지 않음 페이지 내용을 기반으로 한 구체적인 개선 제안이 상대적으로 부족할 수 있음
GTmetrix	Google Lighthouse 기반 웹페이지 평가	성능 및 구조를 ganz내어 종합적으로 평가하는 Grade 제공 다양한 성능 관련 정보와 세부 정보 제공 다양한 지역에서 테스트 가능	웹페이지 성능 관련 정보에 초점을 맞추어 상세한 기술적 정보가 부족할 수 있음
WebPageTest	다양한 기능과 정보를 제공하는 오픈소스 도구	다양한 설정과 옵션으로 세밀한 테스트 가능 다양한 성능 지표 제공 다양한 지역에서 테스트 가능	사용법이 다소 복잡하여 초보자에게는 사용하기 어려울 수 있음 디자인이 다소 오래된 느낌일 수 있음

웹사이트 속도측정 사이트

워드프레스등 속도 측정 도구가 있습니다. 몇 가지 대표적인 도구를 살펴보겠으며 워드프레스 외에도 티스토리나 네이버블로그등에는 딱히 테스트를 할 필요가 없고 별도의 호스팅 서버를 사용하는 경우에만 사용하느것이 좋습니다.

워드프레스 모바일 속도 개선 — 모바일 및 데스크탑 접속시 로딩 속도 점수

저같은 경우는 데스크탑으로 접속시는 속도가 꽤 괜찮지만 모바일로 접속시 100점 만점중에서 66점으로 주위를 기울여야 하는 상황입니다.

그렇다면 이러한 문제를 해결방안은 없을까요?

기본적으로 모바일 점수를 높이는 방법은 AMP 플러그인을 통한 모바일접속 환경을 최적화 시켜주는것으로 문제를 해결합니다.

데스크톱 접속 시 속도를 빠르게 접속을 해주기 위해서는 필요없는 쿼리는 삭제하고 여러개의 파일은 하나로 합쳐 갯수를 줄이고 용량을 압축해주느것이 좋습니다.

그 외에도 트래픽을 절약하느것이 접속속도를 빠르게 하기 때문에 이미지 또한 고화질 보다는 최적화된 이미지 압축 포맷을 활용하며 테마는 빠르고 가벼운것을 사용하느것을 추천합니다.

빠른 워드프레스 테마로는 OceanWP 주로 추천하며 저 같은 경우도 오랫동안 사용한 가벼운 워드프레스 테마로 추천합니다.

현재 구글에서 추천하는 개선사항은 3가지입니다.

서버 응답 시간을 단축
표시되는 콘텐츠의 우선 순위 지정
브라우저 캐싱활용

워드프레스 수동 Gzip 압축방법

워드프레스의 텍스트 Gzip 수동으로 압축하거나 압축유무를 확인하기 위해 websiteplanet 사이트로 접속합니다.

그럼 현재 내 웹사이트의 Gzip 압축유무 및 용량을 확인할 수 있습니다.

현재 압축되지 않은 상태로서 파일질라등을 통해 FTP 접속 후 .htaccess 파일을 수정합니다.

compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

.htaccess 파일 하단에 위 코드를 추가하면 Gzip 압축이 수동으로 됩니다.

만약 .htaccess 파일을 수정할 수 없다면 PHP를 사용해 압축된 콘텐츠를 전송할 수 있습니다. HTML 파일을 .php 확장자로 지정하고 PHP 파일에 아래와 코드를 추가합니다.

<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>

“Accept-encoding” 헤더를 확인할 수 있고 gzip으로 압축된 파일 버전(그렇지 않으면 정규 버전)을 반환할 수 있습니다.

CDN 사용 트래픽 및 속도개선

CDN(Content Delivery Network)은 웹 콘텐츠를 전 세계적으로 분산된 서버 네트워크를 통해 전달하는 서비스입니다. 이를 통해 웹 사이트의 성능과 가용성을 향상시키고, 트래픽을 효과적으로 관리할 수 있습니다.

CDN을 사용하면 일반적으로 다음과 같은 이점이 있습니다:

속도 향상: CDN은 사용자와 가까운 지역에 위치한 서버를 사용하여 콘텐츠를 전송합니다. 이로 인해 사용자는 빠른 응답 시간과 빠른 다운로드 속도를 경험할 수 있습니다.
대역폭 절약: CDN은 콘텐츠를 원본 서버에서 가져와 사용자에게 전달하는 동안 캐싱을 수행합니다. 이는 원본 서버로의 요청 횟수를 줄여 대역폭 사용을 절약할 수 있습니다.

아래는 일반적인 예시를 통해 CDN 사용 시 속도 향상과 대역폭 절약의 정도를 보여주는 표입니다. 이는 일반적인 시나리오를 기반으로 하며, 실제 결과는 여러 요소에 따라 다를 수 있습니다.

	CDN을 사용하지 않을 때	CDN을 사용할 때	성능 향상 (%)	트래픽 감소 (%)
페이지 로드 시간	4초	2초	50%	N/A
대역폭	100GB	50GB	N/A	50%

위의 표에서 “페이지 로드 시간”은 일반적인 웹 페이지의 로딩 시간을 나타냅니다. “대역폭“은 일정 기간 동안의 트래픽 양을 의미합니다.

CDN을 사용하면 페이지 로드 시간이 약 50% 감소할 수 있으며, 대역폭은 약 50% 감소할 수 있습니다. 하지만 이는 일반적인 예시이며, 사이트의 특성, 콘텐츠의 크기, 사용자의 지리적 위치 등에 따라 실제 결과는 다를 수 있습니다.

CDN은 블루호스트 자체에서 지원하는 기능을 사용해도 되지만 저 같은 경우 WP-Rocket에서 지원하는 CDN 사용하고 있습니다.

참고 : WP Rocket 플러그인 워드프레스 최적화 후기

웹사이트 속도도개선 브라우저 캐싱활용

해당 3가지 방법으로 개선을 하라고 합니다.

워드프레스 페이지 서버 응답시간 단축 및 표시되는 콘텐츠의 우선순위 지정 그리고 브라우저 캐싱을 활용입니다.
서버응답시간의 경우 현제 0.81초 후에 응답하기 때문에 이러한 응답시간을 개선하라고하느데 개선방법도 클릭을 하면 해결방안이 나옵니다.
서버 응답시간의 경우 200ms로 줄여야 하는데 이러한 서버 응답 속도는 어플리케이션의 로직이나 느린 테이터베이스등 수많은 문제를 발생시킵니다.
그 외에도 브라우저 캐싱을 이용한 플러그인들이 많이 존재하는데 이러한 플러그인을 이용해서 Gzip 압축하는 작업이 필요합니다.
자세한 방법은 구글에서 제안하는 방법을 이용해 보시길 바라며 플러그인을 이용한 웹페이지 개선방법은 아래 포스팅을 참고하시길 바랍니다.

참고 : 워드프레스 클라우드플레어 CSS, HTML, Gzip 캐시삭제 속도개선
워드프레스 페이지 로딩 속도 개선 및 측정 방법