CMS 재해 방지: 웹사이트 성능을 개선하는 방법
게시 됨: 2022-04-15아무도… 좋아하는 사람은 없습니다… 기다려… 기다려 … 기다려 …
디지털 슈퍼 히어로처럼 작동하는 사이트를 갖는 것은 비즈니스 필수 사항입니다. 특히 조직을 조사하는 잠재 고객에게 첫인상을 줄 때 그렇습니다.
다음 웹 사이트 성능 통계는 브랜드 마케팅 팀은 물론이고 모든 사이트 개발자와 엔지니어의 마음에 두려움을 심어줄 것입니다.
- 사용자 2명 중 1명은 로드하는 데 4초 이상 걸리면 사이트를 포기합니다. 출처: BBC.
- 1초 지연은 사용자 만족도를 16% 떨어뜨립니다. 출처: 로드스톰.
- 페이지를 로드하는 데 3초 이상 걸리는 경우 모바일 사이트 방문의 53%가 중단됩니다. 출처: 구글.
Google의 핵심 핵심 성과 지표를 확인할 때 사이트 성능이 좋지 않은 것을 발견했지만 이를 해결하는 방법이 확실하지 않습니까?
비즈니스가 진행 중일 때 CMS(컨텐츠 관리 시스템)가 열악한 디지털 경험을 제공하도록 하여 새로운 비즈니스를 다른 곳으로 보내고 브랜드를 손상시킬 여유가 없습니다.
아래에서 5가지 일반적인 속도 저하 원인과 WordPress VIP와 같은 민첩한 CMS를 사용하여 웹 사이트 성능을 개선하는 방법을 진단합니다.
첫째, 웹 애플리케이션을 로드할 때 실제로 어떤 일이 발생합니까?
모든 브라우저에 대한 큰 요구 사항입니다. 즉시 최고 성능을 발휘해야 하며 밀리초 내에 전체 작업을 수행해야 합니다. 다음은 마른 예의 Mozilla입니다.
- 브라우저는 DNS 서버로 이동하여 웹사이트가 있는 서버의 실제 주소를 찾습니다.
- 브라우저는 HTTP 요청 메시지를 서버에 보내고 웹사이트 사본을 클라이언트에 보내달라고 요청합니다. 이 메시지와 클라이언트와 서버 간에 전송되는 다른 모든 데이터는 TCP/IP를 사용하여 인터넷 연결을 통해 전송됩니다.
- 서버가 클라이언트의 요청을 승인하면 서버는 클라이언트에게 "200 OK" 메시지를 보냅니다. 즉, "당연히 그 웹사이트를 볼 수 있습니다! 여기있어." 그런 다음 웹 사이트의 파일을 데이터 패킷이라고 하는 일련의 작은 청크로 브라우저에 보내기 시작합니다.
- 브라우저는 작은 청크를 완전한 웹 페이지로 조합하여 표시합니다.
참고: 물론 이 모든 것이 쉽지는 않습니다. 이들 각각 사이에는 여러 개의 작은 단계가 있습니다. 지금은 "느림"이 발생하는 5가지 주요 이유와 WordPress VIP CMS가 이를 완화하는 방법에 대해 알아보겠습니다.
그렇다면 느린 브라우징 경험의 원인은 무엇입니까?
원인 1. PoP 및 CDN 부족
귀하의 비즈니스는 글로벌할 가능성이 높습니다. 이는 다양한 장치에서 다양한 연결 유형을 사용하는 사용자를 위해 빠르고 일관되며 안정적인 연결을 보장해야 하는 물류 문제를 증가시킵니다.
이것이 귀하의 애플리케이션에 무엇을 의미합니까?
네트워크 요청이 위의 2단계에서 시작되면 요청은 여러 네트워크 홉을 거칩니다. 홉은 패킷이 소스에서 목적지까지 통과하는 라우터의 수를 나타내는 컴퓨터 네트워킹 용어입니다.
사용자의 지리적 위치에서 서버로의 이러한 홉의 결과로 로드하는 동안 사용자가 경험하는 시간이 추가될 수 있습니다. 콘텐츠 전송 네트워크(CDN) 및 접속 지점(PoP)을 통해 방문자에게 더 가까운 콘텐츠를 제공함으로써 이러한 문제를 완화할 수 있습니다.
워드프레스 VIP 답변 :
WordPress VIP의 CDN은 글로벌 고객에게 사이트를 최대한 빠르고 효율적이며 안정적으로 제공하는 에지 및 오리진 PoP의 글로벌 네트워크입니다. 이 현지화된 가용성은 당사의 엣지 서버가 귀하의 애플리케이션에서 새로운 콘텐츠를 통지받는 즉시 자동으로 발생합니다. 즉, 팀에서 처리해야 할 추가 구성이 없으므로 팀이 다른 작업에 집중할 수 있습니다.
범인 2. 최적화되지 않은 미디어
요즘 최신 모바일 기기로 모두가 촬영하는 고화질 이미지가 정말 아름답습니다! 즉, 홈페이지에서 미리보기 이미지로 사용될 때까지입니다.
4K 이미지를 추가하고 100×100 픽셀 컨테이너로 제한하면 사용자가 전체 4K 이미지를 로드해야 합니다. 단일 이미지는 크게 걱정할 일이 아니지만 대규모 콘텐츠를 게시하는 기업의 경우 인덱스 페이지를 채우는 기사가 많을수록 페이지 로드가 기하급수적으로 증가할 수 있습니다.
워드프레스 VIP 답변 :
WordPress VIP의 애플리케이션은 에지 캐시된 이미지의 모든 이점과 업로드된 이미지의 자동 이미지 크기 조정을 자동으로 받습니다. 또한 이미지는 즉석에서 크기를 조정할 수 있습니다.
범인 3. 최적화되지 않은 자바스크립트와 CSS
큰 파일을 로드할 때 모든 비트와 모든 요청이 중요합니다. 파일을 다운로드하는 데 걸리는 네트워크 홉 수를 이미 최적화한 경우 파일이 도착하는 데 걸리는 최대 시간은 요청을 열고 닫는 시간입니다.
이를 해결하기 위해 최신 Javascript 및 CSS 개발은 종종 축소 및 연결을 사용합니다.
축소는 파일에서 불필요한 모든 문자, 일반적으로 불필요한 공백을 모두 제거하는 것을 말합니다. 여기서 목표는 전송되는 총 비트 수를 줄이는 것입니다.
연결은 하나의 더 큰 파일을 생성하기 위해 여러 파일을 함께 붙이는 작업입니다. 여기서 목표는 네트워크 요청 수를 줄이는 것입니다.
워드프레스 VIP 답변 :
WordPress VIP는 JavaScript와 CSS 파일을 자동으로 연결하여 단일 페이지 로드에서 발생하는 요청 수를 줄입니다. CSS 파일은 축소되고 연결됩니다. 크레딧은 선택한 오픈 소스 플러그인으로 이동합니다.
축소 및 연결된 파일은 15일 동안 또는 변경 사항이 감지될 때까지 캐시됩니다.
원인 4. 캐시 활용도 불량
캐시는 속도를 높이기 위한 특별한 임시 저장소입니다. 속도 향상은 캐시 유형에 따라 다릅니다.
캐싱 형식을 사용하지 않는 경우 애플리케이션이 로드될 때 페이지 응답 속도에 심각한 영향을 미칠 수 있습니다.
워드프레스 VIP 답변 :
WordPress VIP는 다음과 같은 여러 유형의 캐싱을 사용합니다.
- 개체 캐시 - 응용 프로그램 수준 데이터를 저장하는 데 사용됩니다. 이렇게 하면 데이터베이스에 영향을 주지 않고 데이터를 빠르고 효율적으로 검색할 수 있습니다. 요컨대, 개체 캐시는 광범위한 계산 및/또는 쿼리가 귀중한 연결 시간을 차지하는 것을 방지합니다.
- 쿼리 캐시 — 데이터베이스 쿼리의 경량 메모리 캐싱입니다. WordPress에서 WP_Query API를 사용하는 모든 사후 쿼리는 이러한 형태의 캐싱을 통해 큰 이점을 얻습니다.
- 페이지 캐시 - 각 에지 PoP 위치에 저장되는 완전히 그려진 페이지에 대한 저장소입니다. 이것은 애플리케이션을 방문하는 대부분의 사용자가 접하는 첫 번째 수준의 캐시입니다. 페이지 캐시를 사용하면 애플리케이션에서 한 줄의 코드를 실행하지 않고도 CDN에서 현지화된 콘텐츠를 제공할 수 있습니다.
이 모든 것이 조화롭게 작동하여 요청 응답 시간을 줄입니다.
문제 5. 데이터베이스 연결 포화
애플리케이션의 콘텐츠와 사용자 기반이 증가하면 원래 잘 수행되던 이전 데이터베이스 쿼리가 이제 성능을 저하시킬 수 있습니다.
쿼리를 실행하는 데 시간이 걸리면 쿼리가 완료될 때까지 데이터베이스에서 자리를 차지합니다. 때때로 이러한 좌석은 매우 빨리 채워져 더 많은 쿼리가 실행되지 않습니다. 이는 일반적으로 데이터베이스가 500개의 응답을 제공할 때까지 애플리케이션 성능 저하로 나타납니다.
연결 포화는 빠르고 무작위로 발생할 수 있으므로 근본 원인을 진단하기 어렵습니다.
워드프레스 VIP 답변 :
WordPress VIP 서비스 패키지의 일부로 New Relic에 대한 액세스를 제공하여 위와 같은 잠재적 문제를 사전에 진단하고 모니터링하는 데 도움이 됩니다. 이렇게 하면 팀 시간, 비용, 그리고 몇 초가 중요할 때 추가 도구와 리소스를 보호하는 문제를 줄일 수 있습니다.
결론적으로
네트워크 홉 및 포인트 부족에서 데이터베이스 콘텐츠 포화에 이르기까지 웹 사이트 성능 저하의 근본 원인을 해결하는 것은 미래 지향적인 조직과 콘텐츠 관리 시스템의 P0 우선 순위가 되어야 합니다. 결국, 청중에게 좋은 첫인상을 주는 것이 디지털 시대의 모든 것입니다. 속도가 정말 죽이기 때문입니다.
여기에서 WordPress VIP에 대해 자세히 알아보세요.
작가
Michael Chan, 수석 소프트웨어 엔지니어, WordPress VIP