Divi 속도 최적화: 최고의 가이드

Divi는 단순한 페이지 빌더가 아닙니다. Divi는 웹사이트의 모든 부분을 시각적으로 디자인할 수 있는 완벽한 웹 디자인 시스템으로 디자인 프로세스를 완전히 새로운 수준으로 끌어 올립니다. 하지만 그렇다고 해서 Divi가 느려야 하는 것은 아닙니다. 그것과는 거리가 멀다.

Divi의 내장된 속도 및 성능 최적화 기능을 사용하면 사이트를 Google PageSpeed ​​점수 목록의 맨 위에 쉽게 올릴 수 있습니다. Dynamic Module Framework, Dynamic CSS, Dynamic JavaScript Libraries 등과 같은 기능을 갖춘 Divi는 이제 강력한 페이지 빌더이자 가벼운 테마입니다. 그러나 Divi만큼 빠르기 때문에 최적화가 필요한 다른 기본 요소가 있습니다. 그리고 해결되지 않으면 Divi 사이트의 속도가 불필요하게 저하됩니다.

이 게시물에서 우리는 Divi의 속도를 높이기 위해 이미 수행된 작업과 더 빠르게 만들기 위해 할 수 있는 작업을 탐색할 것입니다. 다룰 몇 가지 주요 주제는 다음과 같습니다.

• WordPress 성능 대 Divi 성능
• Divi의 내장 속도 및 성능 최적화 기능
• 동적 모듈 프레임워크
• 동적 자바스크립트 라이브러리
• jQuery 및 jQuery 마이그레이션 연기
• 동적 CSS
• 중요한 CSS
• 임계 임계값 높이
• 동적 인라인 스타일시트 로드
• Google 글꼴 로드 개선
• WordPress 이모티콘 비활성화
• 구텐베르크 차단 CSS 연기
• 동적 아이콘
• 반응형 이미지에 대한 기본 Srcset 지원
• Divi 웹사이트의 속도와 성능을 최적화하기 위해 할 수 있는 14가지
• #1 호스팅 업그레이드
• #2 TTFB 최적화
• #3 사이트 데이터베이스 최적화
• #4 DNS 최적화
• #5 콘텐츠 전송 네트워크(CDN) 사용
• #6 캐싱 추가
• #7 축소 및 집계 추가
• #8 Gzip 압축 활성화
• #9 이미지 최적화
• #10 비디오 최적화
• #11 속도를 위한 Divi 페이지 구축
• #12 플러그인을 신중하고 아껴서 사용하세요
• #13 속도 테스트 수행
• #14 Divi 고속 페이지 청사진 고려
• Divi 및 기타 타사 성능 플러그인 사용
• 기타 팁

WordPress 성능 대 Divi 성능

Divi는 종종 웹 사이트 성능의 주요 결정 요소가 아닙니다. 퍼즐 조각일 뿐입니다. 또한 일반적으로 WordPress 사이트에 대한 기본 최적화 요구 사항을 고려해야 합니다. Divi(Divi 테마 및/또는 Divi Builder)는 호스팅 인프라 위에 있는 서버 소프트웨어 스택 위에 있는 WordPress(CMS) 위에 있습니다. 이러한 모든 사항을 올바르게 조정해야 합니다. 우선 여기에는 좋은 호스팅, 캐싱 및 CDN과 같은 것들이 포함됩니다. 이러한 기본 최적화가 없으면 Divi를 얼마나 잘 최적화했는지에 관계없이 Divi 사이트가 느려집니다. 따라서 Divi 웹 사이트가 매우 느린 경우 이러한 다른 퍼즐 조각도 고려해야 합니다.

WordPress 웹 사이트에 대한 기본 최적화 요구 사항이 있는 경우 Divi의 성능 최적화를 해결해야 합니다. 이것은 Divi 테마 및/또는 Divi Builder의 성능을 향상시켜 WordPress를 기반으로 구축된 영역과 WordPress 내에서 작동하는 영역에서 최적의 성능을 발휘하도록 함으로써 수행됩니다. 이 모든 부분이 최적화되면 최적의 속도와 성능으로 Divi 웹 사이트를 성공적으로 구축할 수 있습니다.

아래 기사의 나머지 부분에서는 먼저 Divi의 기본 제공 성능 최적화(이미 수행한 작업)에 대해 설명합니다. 그런 다음 몇 가지 기본 최적화 요구 사항(귀하가 할 수 있는 추가 작업)을 해결하여 Divi 사이트를 추가로 최적화하는 방법을 다룰 것입니다.

Divi의 내장 속도 및 성능 최적화 기능

먼저 Divi에 이미 내장된 속도 및 성능 최적화 몇 가지를 살펴보겠습니다. 이러한 최적화 기능은 모든 각도에서 Divi의 속도를 높여 시장에서 가장 빠른 페이지 빌더가 될 것입니다. 하지만 그게 다가 아닙니다. Divi는 팽창을 제거하고 웹사이트에 팽창을 추가하지 않고도 Divi가 더 많은 모듈과 기능으로 성장할 수 있는 기반을 제공하는 동적 프레임워크로 구축되었습니다. 이것은 당신에게 두 세계의 장점을 제공합니다: 가벼운 테마의 민첩성과 함께 확장된 페이지 빌더의 힘.

성능 최적화 기능은 Divi > 테마 옵션으로 이동하여 관리할 수 있습니다. 일반 탭에서 성능 하위 탭을 선택합니다.

이제 초고속 Divi 웹사이트를 쉽게 구축할 수 있는 기능을 자세히 살펴보겠습니다.

동적 모듈 프레임워크

Dynamic Module Framework 기능은 요청에 따라 PHP 기능을 선택하고 실행하여 사이트 속도를 강력하게 향상시킵니다. Divi는 각 페이지에 사용된 모듈과 기능 만 즉석에서 렌더링하는 데 필요한 논리를 처리합니다. 다른 모든 것은 방정식에서 제외됩니다. 즉, "팽창"으로 간주될 수 있는 모든 항목이 백엔드에서 지워집니다.

주문형 모듈

예를 들어 한 페이지에 3개의 모듈이 있는 경우 Divi는 어떤 모듈이 사용되는지에 관계없이 모든 모듈의 모든 기능을 처리하는 대신 해당 3개의 모듈에 필요한 기능만 처리합니다. 이 3가지 기능은 처리 시간을 낭비하지 않고 해당 모듈의 단축 코드/HTML을 페이지에 렌더링합니다.

주문형 기능

Divi가 요청 시 모듈을 동적으로 처리하고 로드하는 것처럼 Divi는 페이지에서 사용되는 모든 기능에 대해 동일한 작업을 수행합니다. Divi 요소에서 사용할 수 있는 모든 가능한 기능(스크롤 효과, 애니메이션, 고정 옵션, 테두리 옵션 등)에 대한 기능을 처리하는 대신 Divi는 요소에서 실제로 사용되는 기능만 처리합니다. 이 기능은 모듈에만 적용되는 것이 아니라 섹션, 행 및 열을 포함한 모든 Divi 요소에 적용됩니다.

동적 자바스크립트 라이브러리

사이트 속도를 높이기 위해 Divi의 JavaScript를 보다 간결하고 모듈화하도록 최적화했습니다. 이를 통해 Divi는 요청 시 JavaScript를 동적으로 로드할 수 있습니다. Divi는 페이지의 모듈이나 기능에 필요한 경우에만 JavaScript 기능(예: 고정 옵션)과 외부 JavaScript 라이브러리(예: Magnific Popup)를 로드하고 처리합니다.

동적 JavaScript 라이브러리와 결합된 더 작은 기본 Javascript 파일 크기는 각 페이지 로드에 대해 처리할 코드가 적기 때문에 사이트 속도를 확실히 향상시킵니다. 사용하지 않는 스크립트는 제거됩니다. 그리고 이 팽창 방지 로직은 페이지별로 발생하기 때문에 한 페이지에 고정 행이 있는 경우 고정 JavaScript가 해당 행이 없는 페이지에 로드되는 것에 대해 걱정할 필요가 없습니다. 이것이 Divi의 동적 JavaScript의 장점입니다.

예: Lightbox를 사용하는 이미지 모듈용 동적 JavaScript 라이브러리

라이트박스가 활성화된 이미지 모듈이 있는 페이지가 있다고 가정해 보겠습니다. Divi는 라이트박스 팝업 기능을 적용하기 위해 해당 페이지에 대한 Magnific Popup JS 라이브러리를 동적으로 가리키고 실행합니다. 이미지에서 라이트박스를 비활성화하면 JS 라이브러리가 페이지에서 로드되거나 실행되지 않습니다.

jQuery 및 jQuery 마이그레이션 연기

가능한 경우 jQuery 및 jQuery Migrate는 본문으로 이동하여 렌더링 차단 요청을 제거하고 로드 시간을 단축합니다. 아래 그림과 같이 jQuery 스크립트가 헤더에서 일찍 로드되면 스크립트가 실행될 때까지 HTML 구문 분석이 일시 중지됩니다. 페이지 렌더링 속도가 느려집니다.

반면에 타사 플러그인이 jQuery를 종속성으로 등록하면 충돌을 피하기 위해 다시 헤드로 이동됩니다. 문제가 발생하면 이 옵션을 비활성화할 수 있습니다.

동적 CSS

동적 CSS는 동일한 팽창 방지 논리(동적 모듈 프레임워크에서 사용)를 Divi의 스타일시트에 적용합니다. 상상할 수 있듯이 Divi의 기본 스타일시트는 모든 기능을 고려할 때 꽤 큽니다. 그러나 모든 페이지에 큰 스타일시트를 로드하면 불필요한 팽창과 페이지 로드 시간이 느려집니다.

동적 CSS를 사용하면 Divi의 CSS가 수백 개의 작은 구성 요소로 나뉩니다. 각 페이지에서 이러한 CSS 구성 요소는 사용 중인 모듈, 모듈 기능 및 테마 레이아웃 옵션을 기반으로 특정 페이지의 스타일을 지정하는 데 필요한 부분만 포함하는 고유한 스타일시트를 형성하기 위해 결합됩니다.

이것은 CSS bloat 문제를 수정합니다. 지금은 존재하지 않기 때문입니다. 다른 CSS가 로드되지 않기 때문에 부풀림이 없습니다 . Dynamic CSS가 없으면 Divi의 스타일시트는 약 900kb 가 되며 내용에 관계없이 모든 페이지에 로드됩니다. 이제 페이지에 80kb의 CSS만 필요한 경우 동적 CSS는 페이지를 로드할 필요가 없는 800+kb를 제거합니다. 즉, 페이지 로드 속도가 훨씬 빨라집니다.

중요한 CSS

Divi의 Critical CSS 시스템은 스크롤 없이 볼 수 있는 콘텐츠의 스타일을 지정하는 데 필요한 CSS를 식별하고 나머지는 모두 연기하여 사이트 속도를 높입니다. 페이지가 처음 로드될 때 중요한 스타일만 필요하고 렌더링 차단 자산이 페이지 속도에서 중요한 역할을 하기 때문에 중요한 스타일과 중요하지 않은 스타일을 자동으로 구분하는 Divi의 기능은 다른 WordPress 테마 및 빌더에 비해 큰 이점을 제공합니다. . Divi가 CSS 처리를 마친 후에는 웹사이트 헤더에 아무것도 남지 않습니다. 즉, 콘텐츠가 바로 표시된다는 의미이며, 이것이 바로 Google이 Divi 웹사이트에 즉시 높은 점수를 부여하는 이유입니다.

예를 들어 스크롤 없이 볼 수 있는 콘텐츠가 제목, 단락, 버튼 및 이미지로 구성된 경우 방문자가 페이지를 로드하는 즉시 해당 요소와 관련된 CSS만 로드됩니다. 물론 CSS의 나머지 부분도 로드되지만 처음 상호작용에서는 로드되지 않습니다. 그것이 non-critical CSS라고 불리는 것입니다.

이 기능의 작동 방식과 사용 방법에 대한 자세한 설명은 Divi의 중요한 CSS 기능이 사이트 속도를 높이는 방법과 가장 빠른 Divi 페이지를 구축하는 방법에 대한 기사를 확인하세요.

임계 임계값 높이

Critical CSS와 관련된 Critical Threshold Height 옵션이 있습니다.

Critical CSS가 활성화되면 Divi는 "스크롤 없이 볼 수 있는 임계값"을 결정하고 스크롤 없이 볼 수 있는 요소에 대한 모든 스타일을 연기합니다. 그러나 이 임계값은 추정치일 뿐이며 장치에 따라 다를 수 있습니다. 임계값 높이를 높이면 더 적은 수의 스타일이 지연되어 로드 시간이 약간 느려지지만 CLS(누적 레이아웃 이동)가 발생할 가능성은 줄어듭니다. CLS 문제가 발생하는 경우 임계값 높이를 늘릴 수 있습니다.

동적 인라인 스타일시트 로드

동적 인라인 스타일시트 로드 옵션은 모든 렌더링 차단 CSS 요청을 제거하는 최종 CSS 최적화입니다.

Dynamic CSS 덕분에 기본 Divi 스타일시트는 이제 실제 페이지에서 인라인으로 로드할 수 있을 정도로 작아졌습니다! 이 CSS를 인라인으로 로드하면 렌더링 차단 요청이 제거되고 Google PageSpeed ​​점수가 향상됩니다. 중요 CSS, 동적 CSS 및 동적 인라인 스타일시트 로드 옵션이 활성화되면 모든 렌더링 차단 CSS 요청이 제거됩니다 .

Google 글꼴 로드 개선

Google 글꼴 로드 개선 옵션은 Google 글꼴을 캐싱하고 헤더에 인라인으로 로드합니다. 이렇게 하면 렌더링 차단 요청이 줄어들고 로드 시간이 빨라집니다.

또한 레거시 브라우저에 대한 Google 글꼴 지원 제한 옵션도 추가했습니다.

이것은 기본적으로 페이로드를 줄이기 위해 레거시 글꼴 파일을 제거합니다. 이 옵션을 활성화하면 Google 글꼴의 크기가 줄어들고 로드 시간이 향상되지만 일부 아주 오래된 브라우저에서는 Google 글꼴 지원이 제한됩니다. 약간의 성능 저하로 구형 브라우저에 대한 지원을 늘리려면 이 기능을 끌 수 있습니다.

WordPress 이모티콘 비활성화

WordPress에는 기본 이모티콘 시스템이 제공되지만 최신 브라우저에서 기본 이모티콘을 지원하기 때문에 더 이상 필요하지 않습니다. 사실, 기본 이모티콘은 워드프레스 버전보다 훨씬 좋아 보입니다. Divi는 불필요한 리소스를 제거하는 기본 WordPress 이모티콘을 비활성화하는 옵션을 제공합니다. 렌더링할 리소스가 적으면 페이지 로드 속도가 빨라집니다.

구텐베르크 차단 CSS 연기

페이지에서 Divi Builder를 사용할 때 기본 WordPress 블록 편집기(Gutenberg)도 사용하지 않도록 선택합니다. 그리고 페이지의 스타일을 지정하기 위해 블록을 사용하지 않을 것이기 때문에 Divi 페이지 로드를 차단하는 Gutenberg CSS가 필요하지 않습니다. Defer Gutenberg Block CSS 옵션이 활성화되면 Divi는 이제 (기본적으로) Divi Builder를 대신 사용하는 페이지에서 Gutenberg 블록 CSS를 지연 로드합니다. 만일의 경우를 대비하여(바닥글에서) 로드되지만 더 이상 렌더링 차단은 되지 않습니다.

동적 아이콘

Divi는 이제 사용 중인 모듈 및 기능을 기반으로 온디맨드로 로드되는 아이콘 글꼴 하위 집합과 함께 제공됩니다. 이것은 Divi의 기본 아이콘 글꼴 크기를 90kb에서 6kb로 줄입니다. 전체 아이콘 세트는 필요할 때만 로드됩니다. 하위 테마 또는 사용자 정의 Divi 모듈을 사용하는 경우 이 옵션은 기본적으로 비활성화되어 있습니다. 하위 테마 또는 세 번째 파트 Divi 모듈이 전체 Divi 아이콘 세트를 사용하는 경우 이 옵션은 비활성화된 상태로 유지되어야 합니다.

페이지에 필요한 사항에 따라 세 가지 아이콘 글꼴 하위 집합이 사용됩니다.

• 기본 – 이 하위 집합에는 Divi 테마 및 해당 모듈에서 기본적으로 사용되는 모든 아이콘이 포함됩니다.
• 소셜 – 이 하위 집합에는 모든 기본 아이콘과 모든 소셜 아이콘이 포함되며 소셜 미디어 팔로우 모듈이 사용될 때 로드됩니다.
• 모두 – Divi 모듈에서 아이콘 선택기를 사용하여 사용자 정의 아이콘을 선택할 때 사용되는 전체 아이콘 세트입니다.

다음은 페이지에 존재하는 소셜 미디어 팔로우 모듈로 인해 동적으로 로드되는 소셜 아이콘 글꼴 하위 집합의 예입니다.

모든 페이지에서 전체 아이콘 글꼴에 액세스해야 하는 경우(예: 자식 테마에서 아이콘 글꼴을 사용하는 경우) 이 옵션을 비활성화하고 모든 페이지에서 전체 아이콘 글꼴 라이브러리를 로드할 수 있습니다.

반응형 이미지에 대한 기본 Srcset 지원

Divi에는 모든 Divi 이미지에 대한 기본 SRCSET 지원이 포함되어 있습니다. 즉, Divi는 자동으로 이미지를 반응형으로 만들고 각 장치에 완벽한 크기의 이미지를 제공합니다. 더 작은 이미지는 더 작은 장치에 제공되기 때문에 로딩 속도를 크게 향상시킬 수 있으며 추가 작업이 필요하지 않습니다.

Divi 웹사이트의 속도와 성능을 최적화하기 위해 할 수 있는 14가지

속도 최적화는 웹사이트의 사용자 경험과 검색 엔진 최적화(SEO)에서 계속해서 중요한 역할을 합니다. 따라서 방문자와 Google에서 Divi 사이트의 성능을 높이려면 사이트 속도를 더욱 최적화하는 Divi 외부 영역을 처리해야 합니다.

Divi 웹사이트의 속도와 성능을 최적화하기 위해 할 수 있는 14가지 방법은 다음과 같습니다.

#1 호스팅 업그레이드

웹사이트의 속도(및 성능)에 대해 진지하게 생각한다면 좋은 호스팅 제공업체를 선택하는 것으로 시작합니다. 사실, 속도를 위해 웹 사이트를 최적화하기 위해 모든 것을 올바르게 할 수 있지만 호스트 때문에 여전히 느린 사이트가 있습니다. 그리고 정말 좋은 호스팅 제공업체가 속도 최적화를 많이 해주므로 걱정할 필요가 없습니다. 따라서 느린 Divi 사이트가 있는 경우 첫 번째 단계는 호스팅 업그레이드를 고려하는 것입니다.

Divi 최적화 호스팅 사용

빠른 Divi 웹사이트를 원한다면 워드프레스 뿐만 아니라 Divi에도 최적화된 호스팅 제공업체를 선택하는 것이 좋습니다. 따라서 Divi와 완벽하게 작동하고 자동 Divi 설치와 함께 제공되는 훌륭한 WordPress 호스팅을 찾고 있다면 Divi Hosting은 훌륭한 새로운 솔루션입니다. 우리는 우리가 가장 좋아하는 WordPress 호스트(Pressable, Flywheel 및 SiteGround)와 파트너 관계를 맺어 Divi 고객에게 Divi의 모든 요구 사항을 충족하는 현대적인 호스팅 인프라로 지원되며 최고의 WordPress 전문가가 지원하는 Divi 웹 사이트를 빠르게 만들 수 있는 간단한 방법을 제공합니다. .

왜 Divi 호스팅을 선택합니까?

궁극적으로 모든 Divi 사용자는 호스팅에 대한 선택을 해야 합니다. 잘못된 선택은 많은 슬픔으로 이어질 수 있습니다. 우리는 그 선택을 쉽게 하고 싶습니다. Divi Hosting을 독특하게 만드는 몇 가지 사항은 다음과 같습니다.

• 웹 사이트를 만들면 Divi가 자동으로 설치됩니다.
• 새 웹사이트는 자동으로 우아한 테마 계정에 연결되고 라이선스 키로 설정되므로 업데이트와 지원을 받을 수 있습니다.
• 귀하의 호스팅 환경은 기본적으로 Divi의 권장 PHP 설정을 모두 충족하도록 구성됩니다. 조정이 필요하지 않습니다.
• 귀하의 웹사이트는 빠르고 현대적인 호스팅 인프라로 구동됩니다. 즉, 자동 캐싱 및 CDN과 같은 최신 도구와 빠른 로드 시간을 의미합니다.
• WordPress를 안팎으로 알고 있는 회사에서 호스팅하게 됩니다.
• 귀하는 당사 파트너 중 한 명이 호스팅하게 되며, 이는 파트너가 시스템에서 훌륭한 Divi 경험을 보장하기 위해 최선을 다하고 있음을 의미합니다.

많은 호스팅 옵션이 있으며 모두 동일하게 생성되지는 않습니다. 우리는 고객이 매일 엄청나게 실망할 수 있는 호스팅 관련 호환성 문제를 처리할 수 있도록 돕습니다. 모든 사람이 Divi를 사용하려면 호스팅이 필요하며 호스팅 경험에 어려움을 겪을 필요가 없습니다. 자세한 내용은 Divi 호스팅이 Divi를 위한 최고의 호스팅 솔루션인 방법을 알아보세요.

귀하의 Divi 사이트에 적합한 호스팅 솔루션 찾기

당신은 N 디비가 빠른 디비 웹 사이트를 가지고 호스팅 사용하는 EED합니까? 절대적으로하지. 다른 훌륭한 호스팅 솔루션이 있으며 Divi는 항상 훌륭한 호스팅 환경에서 훌륭하게 작동합니다. 그러나 호스팅은 속도 및 성능 최적화에서 매우 중요한 역할을 하기 때문에 Divi 사이트에 적합한 호스팅 솔루션을 찾는 데 필요한 시간이 필요합니다.

훌륭한 호스팅 회사와 그렇지 않은 호스팅 회사가 많이 있습니다. 그리고 각각은 일반적으로 여러 호스팅 솔루션과 서비스를 제공합니다. 따라서 올바른 것을 찾는 것이 압도적일 수 있습니다. 다음은 Divi 사이트에 적합한 호스팅 솔루션을 찾을 때 고려해야 할 가장 일반적인 호스팅 유형에 대한 유용한 정보입니다.

기존(공유) 호스팅(권장하지 않음)

이것은 가장 저렴하기 때문에 WordPress 사용자에게 가장 인기 있는 호스팅 유형입니다. 그러나 불행히도 속도 최적화를 위한 최악의 옵션입니다. 기존 공유 호스팅을 사용하면 서버에서 사용 가능한 모든 리소스를 다른 사람과 공유할 수 있습니다. 공유하기 때문에 이러한 종류의 호스팅 비용이 저렴합니다. 그러나 단점은 다른 사이트가 공유 서버에서 받는 트래픽의 양을 제어할 수 없다는 것입니다. 따라서 매우 느린 로딩 시간과 사이트가 완전히 다운된 시간에 쉽게 빠질 수 있습니다. 따라서 공유 호스팅이 처리할 수 있는 트래픽의 양을 파악하는 것이 좋습니다.

전용 호스팅

전용 호스팅을 사용하면 나만을 위한 전용 서버가 있습니다. 다른 사람과 리소스를 공유할 필요가 없습니다. 즉, 웹 사이트에 대해 더 예측 가능하고 일관된 빠른 로딩 시간을 가질 수 있습니다. 이것은 일반적으로 높은 프리미엄 비용으로 대기업을 위한 최상위 옵션으로 제공됩니다.

VPS 호스팅

VPS(가상 사설 서버) 호스팅은 기본적으로 공유 호스팅과 전용 호스팅 사이의 중간 지점입니다. 귀하의 서버 공간은 "비공개"이며, 이는 다른 모든 사람과 완전히 분리되어 있음을 의미합니다(사이트 파일을 위한 게이트 커뮤니티와 같은 종류). 따라서 사이트 파일이 서버의 다른 사용자에게 노출되지 않습니다. 공유 호스팅과 달리 VPS에는 사이트가 항상 빠른 로드 시간을 일관되게 제공하는 데 필요한 것을 확보할 수 있도록 원하는 만큼의 전용 시스템 리소스(또는 전원)가 있습니다. 따라서 사이트 속도에 영향을 미치는 다른 웹사이트의 트래픽 급증에 대해 걱정할 필요가 없습니다.

그러나 관리되는 VPS가 없는 한 이러한 종류의 호스팅은 대부분 자체적으로 처리할 수 있을 만큼 기술에 정통한 DIY 유형을 위한 것입니다. 자세한 내용은 VPS 호스팅과 공유 호스팅 간의 성능 비교입니다.

클라우드 호스팅

클라우드 호스팅을 사용하면 단일 물리적 서버 대신 서버 네트워크(클라우드에 있음)에 액세스할 수 있습니다. 이를 통해 필요에 따라 이 서버 네트워크에서 필요한 모든 리소스를 가져올 수 있습니다. 본질적으로 전체 네트워크의 능력과 자원으로 뒷받침되는 서버 공간의 가상 파티션이 있습니다. 따라서 공유 호스팅에서와 같이 트래픽 급증에 대해 걱정할 필요가 없습니다. 클라우드 호스팅은 필요에 따라 매우 유연하고 확장 가능합니다.

클라우드 호스팅과 VPS 호스팅의 한 가지 주요 차이점은 VPS 호스팅에는 고갈되거나 고갈되지 않을 수 있는 전용(또는 제한된) 리소스 수가 있다는 것입니다. 반면에 Cloud Hosting은 항상 클라우드의 다른 서버에서 가져올 수 있기 때문에 리소스가 고갈되지 않고 사용 가능한 상태를 유지할 수 있습니다. 이론적으로 클라우드 호스팅은 더 일관되고 안정적인 고속을 제공합니다. 따라서 속도에 대해 진지한 경우 클라우드 호스팅이 훌륭한 옵션입니다(최고일 수도 있음).

관리형 워드프레스 호스팅

관리형 워드프레스 호스팅은 일반적으로 워드프레스 전문가가 관리하는 공유 호스팅을 말합니다. 일반적으로 기존 공유 호스팅보다 비용이 조금 더 들지만 더 빠른 Divi 사이트를 원한다면 관리형 WordPress 호스팅이 가치가 있을 수 있습니다. VPS만큼 "비공개"이거나 전용 호스팅 환경만큼 강력하지 않습니다. 그러나 WordPress 전문가가 작업을 수행하도록 하여 공유 환경의 속도를 최대화하는 데 도움이 됩니다. 그들은 서비스를 맞춤화하고 WordPress 사이트에 대해 엄격하게 서버를 구성하기 때문에 이 작업을 잘 수행합니다. 그리고 그들 중 다수는 원클릭 스테이징 환경, 사이트 캐싱, 원클릭 CDN 배포, 자동 백업, SSL 등과 같은 많은 멋지고 편리한 내장 기능과 함께 제공됩니다. 기본 속도 최적화, 보안 및 관리를 위해 많은 플러그인에 의존(또는 관리)하고 싶지 않은 사람들에게 적합합니다.

사실 Divi Hosting은 Divi에 최적화된 Managed WordPress Hosting입니다. 이렇게 하면 Divi 사이트에 대한 호스팅 환경을 최적화하는 데 모든 골칫거리가 사라집니다.

#2 첫 번째 바이트까지 시간 최적화(TTFB)

TTFB는 무엇입니까?

TTFB(Time to First Byte)는 사용자가 호스트/서버에서 웹사이트 데이터의 첫 번째 바이트를 수신하는 데 걸리는 시간입니다. 따라서 사용자가 HTTP 요청(웹페이지 로드)을 하면 TTFB는 기본적으로 브라우저에서 데이터를 수신하기 전의 대기 기간이 됩니다. 이는 TTFB가 길수록 페이지를 로드하는 데 더 오래 걸리기 때문에 중요합니다.

패스트푸드를 먹는 것과 같다고 생각하세요. 레스토랑은 음식을 빨리 배달하도록 최적화되어 있을 수 있습니다. 사실, 그들은 이미 당신을 기다리고 있는 햄버거를 가지고 있을지도 모릅니다. 하지만 주문하려면 줄을 서서 기다려야 합니다. 그 대기 시간은 당신이 처음 물린 시간으로 생각할 수 있는 것입니다(내가 그곳에서 무엇을 했는지 참조).

TTFB는 약 200ms여야 합니다(Google에 따르면). 그러나 호스팅 상태가 좋지 않고 최적화되지 않은 사이트의 경우 TTFB는 쉽게 2초 이상이 될 수 있습니다.

느린 TTFB의 원인은 무엇입니까?

Divi 사이트의 TTFB 지연은 일반적으로 다음으로 인해 발생합니다.

• 수신해야 하는 동적 콘텐츠 의 양입니다. 이것은 캐싱, 데이터베이스 최적화 및 CDN으로 줄일 수 있습니다.
• 서버가 당시에 경험하고 있는 트래픽 의 양입니다 . 기존(또는 공유) 호스팅 제공업체는 동일한 서버에서 다른 사용자와 리소스를 공유하기 때문에 해당 TTFB를 중단하기 어렵게 만듭니다. 트래픽이 급증하면 서버의 처리 속도가 감소합니다.
• 웹 서버 구성 . 훌륭한 WordPress 호스팅 제공업체는 견고한 백엔드 인프라를 제공하고 웹 서버 구성을 최적화하여 사이트의 TTFB를 도울 수 있습니다.

Divi 사이트의 TTFB 속도를 높이는 방법

TTFB는 Google이 사이트의 순위를 결정하는 데 사용하는 Web Vital(FCP, LCP 및 CLS와 함께) 중 하나입니다. 따라서 최적화하는 것이 중요합니다. 좋은 소식은 TTFB가 최적화될 수 있다는 것입니다. 다음은 TTFB를 줄이는 데 사용할 수 있는 몇 가지 핵심 팁입니다.

• 호스팅을 업그레이드하십시오 . TTFB를 높이는 가장 효과적인 방법은 단순히 호스팅을 업그레이드하는 것입니다. WordPress 또는 Divi Hosting의 관리 호스팅에 대해 조금 더 지불하면 TTFB에 가장 큰 영향을 미칩니다.
• CDN을 사용하십시오 . 이렇게 하면 방문자가 가장 가까운 서버에서 사이트 데이터를 로드할 수 있으므로 대기 시간을 줄이고 TTFB를 줄일 수 있습니다.
• 불필요한 플러그인이나 테마를 제거하십시오 . 플러그인과 테마(특히 오래된 것들)는 사이트의 서버와 로딩 시간(TTFB 포함)을 방해할 수 있습니다. 따라서 필수 품질의 플러그인(또는 테마)만 사용하고 나머지는 제거하는 것이 가장 좋습니다.
• 캐싱을 구현 합니다. Divi에는 Divi JS 및 CSS를 제공하기 위한 캐싱이 내장되어 있습니다. 그러나 CDN을 사용하는 것 외에도 웹사이트를 전체적으로 캐싱하면 TTFB가 줄어듭니다.

Cloudflare를 사용하여 TTFB 향상

사이트의 TTFB를 빠르게 향상시키는 한 가지 방법은 Cloudflare를 사용하는 것입니다. 무료 계획에서 사용 가능한 캐싱 및 CDN은 확실히 TTFB를 향상시킬 것입니다. 또한 TTFB가 72% 감소하는 것으로 테스트된 Cloudflare의 자동 플랫폼 최적화를 활용할 수도 있습니다.

자세한 내용은 TTFB에 대한 전체 기사와 이에 맞게 웹사이트를 최적화하는 방법을 확인하십시오.

#3 사이트 데이터베이스 최적화

WordPress 사이트에 깨끗한 데이터베이스가 필요한 이유

정적 HTML 사이트와 달리 WordPress는 PHP를 사용하여 MySQL 데이터베이스에 저장된 데이터를 검색하여 해당 데이터를 웹페이지에 표시하는 동적 CMS입니다. 이렇게 하면 사이트를 쉽게 관리할 수 있지만 페이지를 로드하기 전에 데이터베이스에서 데이터를 찾아야 하기 때문에 페이지를 로드하는 데 시간이 더 오래 걸린다는 단점이 있습니다. 일반적으로 정적 HTML 웹 사이트는 이러한 이유로 WordPress 웹 사이트보다 빠릅니다.

Divi 사이트를 최대한 빠르게 유지하는 한 가지 방법은 깨끗한 데이터베이스를 유지하는 것입니다. WordPress 사이트 파일은 데이터베이스에서 테이블별로 구성되며 사이트에 새 데이터(예: 테마 및 플러그인)를 추가할 때마다 새 테이블과 더 많은 데이터가 생성됩니다. 예상대로 데이터베이스가 복잡할수록 데이터를 찾기가 더 어려워집니다. 이로 인해 웹 사이트가 느려집니다.

따라서 수년 동안 다른 테마와 수많은 플러그인을 시도한 후 웹 사이트에 Divi 테마를 추가했다면 더 이상 필요하지 않은 데이터가 저장되어 있을 가능성이 있습니다. 플러그인을 제거하더라도 데이터베이스의 모든 데이터가 사라진 것은 아닙니다. 플러그인은 플러그인을 다시 설치하는 경우에 대비하여 일부 데이터를 그대로 두는 것을 좋아합니다. 멋지지 않아, 나도 알아. 이 남은 데이터로 인해 불필요한 혼란이 발생하고 사이트 속도가 느려질 수 있습니다.

모든 인간이 더 효율적으로 작업하기 위해 조직이 필요하듯이 모든 WordPress 사이트(Divi이든 아니든)에는 페이지를 더 빨리 로드하기 위해 깨끗한 데이터베이스가 필요합니다. 따라서 웹 사이트를 한동안 사용했다면 정리하면 작업 속도가 크게 빨라질 수 있습니다.

Divi 사이트의 데이터베이스를 최적화하는 방법

이를 위해 플러그인을 사용하는 것이 좋습니다. WP Optimize는 신뢰할 수 있는 옵션인 것 같습니다. 그러나 고려해야 할 다른 WordPress 데이터베이스 플러그인이 있습니다.

또는 수행 중인 작업을 알고 있다면 MySQL에서 항상 수동으로 수행할 수 있습니다.

WordPress 데이터베이스를 정리하는 것 외에도 저장하는 데이터를 줄여 WordPress를 더 가볍게 만들고 싶을 수 있습니다. 예를 들어 WordPress는 삭제된 항목을 휴지통에 30일 동안 자동으로 보관합니다. 그 기간을 7로 줄일 수 있습니다.

#4 DNS 최적화

DNS가 사이트 속도에 미치는 영향

사용자가 웹 페이지 중 하나의 URL을 방문할 때 가장 먼저 해야 하는 일은 DNS 조회입니다. URL을 입력(또는 클릭)하면 방문자의 ISP가 DNS 쿼리를 네임서버로 보내 도메인과 연결된 IP 주소를 찾습니다(모든 도메인/웹사이트에는 특정 IP 주소가 있음). 본질적으로 DNS 조회는 전화번호부에서 해당 도메인의 IP 주소를 찾기 위해 도메인 이름을 찾는 것과 같습니다.

그러나 사용자가 사이트의 페이지를 방문할 때 페이지를 풀업하기 위해 액세스해야 하는 여러 도메인이 페이지에 있을 수 있습니다. 따라서 단일 페이지 로드(더 많을 수도 있음)에서 3개 또는 4개의 도메인 조회를 수행할 수 있습니다.

일반적으로 Godaddy 및 Namecheap과 같은 대부분의 무료 DNS 공급자는 일반적으로 원하는 것보다 느립니다.

DNS 최적화를 위해 Cloudflare 사용(원하는 경우 추가)

DNS 조회 속도를 높일 수 있는 최고의 무료 옵션은 아마도 Cloudflare일 것입니다. 그들은 DNSPerf.com에 기록된 가장 빠른 DNS 성능을 가지고 있습니다. 이것은 GoDaddy 및 Namecheap보다 훨씬 빠릅니다. 또한 원하는 경우 다른 서비스(예: CDN 또는 WAF) 없이 DNS에 사용하도록 Cloudflare를 최적화할 수도 있습니다.

예를 들어 DNS 및 보안(DDOS 감지)에는 Cloudflare를 사용하고 CDN에는 KeyCDN(또는 MaxCDN)을 사용할 수 있습니다. 훌륭한 조합이 될 것 같습니다.

Cloudflare 설정

Cloudflare는 설정이 정말 쉽습니다. 사전에 호스팅 또는 기타 항목을 전환하는 것에 대해 걱정할 필요가 없습니다. 도메인 입력으로 시작하는 5분 설정을 진행하기만 하면 됩니다.

현재 DNS 레코드를 자동으로 검색합니다.

설정을 완료하기 위해 수행해야 하는 주요 작업은 현재 DNS 공급자(예: GoDaddy)의 기본 네임서버를 Cloudflare의 네임서버로 변경하는 것입니다.

그런 다음 대시보드에서 DNS를 쉽게 관리할 수 있습니다.

마찬가지로 DNS 조회 속도가 향상되고 보안이 강화되며 웹사이트에 대한 CDN이 추가로 제공됩니다.

CDN에 대해 말하면 반드시 그 중 하나를 사용해야 합니다.

#5 콘텐츠 전송 네트워크(CDN) 사용

StackPath CDN PoP

CDN(콘텐츠 전송 네트워크)은 사이트 속도를 다른 수준으로 끌어 올립니다. 이름에서 알 수 있듯이 CDN은 콘텐츠를 전달하기 위한 네트워크입니다. 네트워크는 웹사이트 콘텐츠의 캐시된 정적 파일(이미지, 비디오, 스크립트 등)을 저장하는 전 세계의 서버로 구성됩니다. 그런 다음 사람이 해당 콘텐츠에 대한 요청을 보내면(귀하의 웹사이트를 방문하여) 그 사람과 가장 가까운 서버(또는 PoP)가 콘텐츠를 전달합니다. CDN이 없으면 웹 사이트 파일은 하나의 서버 위치(호스트가 해당 파일을 저장하는 위치)에서 액세스할 수 있으므로 해당 서버에서 멀어질수록 해당 웹 사이트 콘텐츠를 브라우저로 전달하는 속도가 느려집니다.

생각해 보세요. 피자를 집으로 배달하고 싶을 때 30마일 떨어진 곳에서 피자 가게를 선택하지 않습니다. 당신은 가능한 한 빨리 배달되기를 원하기 때문에 5마일 떨어진 곳을 선택합니다(당신이 나만큼 피자를 사랑하는 평범한 인간이라면). CDN도 비슷한 방식으로 작동합니다. 가능한 한 빨리 웹사이트가 브라우저에 표시되기를 원하기 때문에 CDN은 귀하의 위치에서 가장 가까운 서버에서 사이트 파일을 전달할 준비가 되어 있습니다. 따라서 사이트 파일이 샌프란시스코에 있는 서버에 저장되어 있고 런던에 있는 누군가가 귀하의 사이트를 가져오는 경우 수천 마일 떨어진 서버에서 해당 데이터를 수신하는 데 1~2초가 걸릴 수 있습니다. 그러나 CDN을 사용하면 런던에 있는 서버에서 동일한 데이터를 절반의 시간에 전달할 수 있습니다. 그것은 큰 차이입니다!

따라서 집에서 결과의 전체 범위를 볼 수 없더라도 웹 사이트를 전 세계로 빠르게 전달하고 있습니다.

사이트에 대한 CDN을 얻는 방법에는 여러 가지가 있습니다. 많은 호스팅 회사는 서비스와 함께 CDN을 배포하는 옵션을 포함합니다. 그리고 다른 성능 및 보안 기능과 함께 CDN 기능을 제공하는 Cloudflare 및 StackPath(이전의 MaxCDN)와 같은 네트워크 플랫폼이 있습니다.

다음은 고려해야 할 몇 가지 신뢰할 수 있는 CDN 플랫폼입니다.

• Cloudflare CDN: 위에서 언급한 DNS 최적화 외에도 Cloudflare는 정적 콘텐츠를 캐시하고 사용자에게 빠르게 제공하는 빠르고 안전한 글로벌 CDN을 제공합니다. 이것은 대부분의 사이트에서 멋진 무료 계획에 포함되어 있습니다.
• KeyCDN(CDN Enabler WordPress 플러그인과 함께 사용하여 KeyCDN을 통합할 수도 있습니다. 이 설정은 Cache Enabler와도 잘 작동합니다.)
• StackPath(이전의 MaxCDN)
• 아마존 클라우드프론트
• 수쿠리

여러 CDN 공급자를 자동으로 통합하는 옵션이 포함된 WP Total Cache 또는 CDN Enabler와 같은 일부 캐싱 플러그인이 있어 매우 편리합니다.

다음은 CDN을 지원하는 플러그인입니다.

• WP 가장 빠른 캐시
• WP 로켓
• 자동 최적화
• W3 총 캐시
• WP 슈퍼 캐시
• CDN 인에이블러

#6 캐싱 추가

사이트 속도를 높이기 위해 구현할 수 있는 캐싱에는 네 가지 주요 유형이 있습니다.

• 페이지 캐싱 – 이 프로세스는 빠른 전달을 위해 페이지의 캐시된 정적 HTML 버전을 저장합니다.
• 브라우저 캐싱 – 이를 통해 브라우저에서 캐시 할 수 있는 콘텐츠와 기간을 더 잘 제어할 수 있습니다. 일부 플러그인만 이 작업을 수행할 수 있으므로 더 많은 제어를 위해 수동으로 수행하는 것이 가장 좋습니다. 이렇게 하면 속도 테스트를 수행할 때 "브라우저 캐싱 활용" 메트릭을 처리하는 데 도움이 됩니다.
• CDN 캐싱 – 사용자와 가장 가까운 CDN에서 캐시된 웹사이트 페이지/파일을 제공합니다.
• 개체 캐싱 – 개체 캐싱은 PHP가 데이터베이스에서 데이터를 검색하고 사용자에게 제공하기 위해 시작하는 반복 쿼리 결과를 캐시합니다. 이것은 웹사이트를 표시하는 데 사용되는 컴파일된 PHP 코드의 캐시된 버전을 저장하는 바이트코드 캐싱과 다릅니다.

Divi는 장면 뒤에서 Divi의 JS 및 CSS 파일을 제공할 때 캐싱을 수행합니다. 그러나 이것은 더 나은 Divi Builder 기능을 위한 Divi 테마 파일을 위한 것입니다.

웹 사이트 전체에 캐싱을 사용할 필요가 여전히 있습니다. 대부분의 사이트에는 결합, 축소 및 캐시가 필요할 수 있는 자체 CSS 파일과 함께 제공되는 여러 플러그인이 있습니다. 따라서 모든 페이지의 캐시된 정적 HTML 버전을 제공하는 타사 솔루션을 확실히 활용할 수 있습니다.

Cloudflare의 CDN은 Divi 사이트에 캐싱을 추가하는 좋은 방법입니다. 페이지 로드 및 대기 시간을 줄이기 위해 방문자에게 지리적으로 더 가까운 웹 사이트 콘텐츠(정적 리소스)의 복사본을 저장합니다. WordPress용 Cloudflare의 APO는 WordPress 플러그인을 사용하여 WordPress/Divi 사이트의 웹 페이지 및 타사 글꼴을 캐싱하기 위한 훨씬 더 표적화된 솔루션인 것 같습니다.

인기 있는 캐싱 플러그인은 다음과 같습니다.

• WP 로켓
• 캐시 인에이블러(리뷰 읽기)
• W3 총 캐시(리뷰 읽기)
• W3 슈퍼 캐시(리뷰 읽기)
• 혜성 캐시(리뷰 읽기)
• WP 가장 빠른 캐시

팁: 플러그인을 사용하여 사이트에서 페이지 캐싱을 활성화할 때마다 웹사이트를 변경할 때마다 캐시를 ​​확인하고 삭제(또는 지우기)하여 귀하와 방문자에게 최신 버전의 대지.

#7 웹사이트 축소 및 집계 추가

축소는 사이트 파일을 더 작게 만듭니다. 사이트 파일(CSS, JavaScript, HTML)을 축소하면 불필요한 문자(공백 및 페이지 나누기와 같은)가 모두 제거되어 파일 크기가 줄어듭니다. 이렇게 하면 브라우저가 페이지 콘텐츠를 로드하는 데 걸리는 시간이 줄어듭니다.

집계에는 사이트 파일을 결합하여 페이지의 총 요청을 줄이고 방문자의 로드 시간을 단축하는 작업이 포함됩니다.

앞서 언급했듯이 Divi는 기본적으로 Javascript와 CSS를 동적으로 축소하고 결합합니다. 따라서 기술적으로 Divi의 Javascript와 CSS를 추가로 축소하고 결합하기 위해 타사 플러그인을 사용하는 것에 대해 걱정할 필요가 없습니다. 그러나 Divi는 HTML 출력을 축소하지 않습니다. 따라서 페이지의 전체 HTML을 축소(및 캐시)하는 타사 플러그인의 이점을 누릴 수 있습니다.

또한 거의 모든 Divi 사이트는 CSS 및 JS 파일을 축소하고 결합하는 데 도움이 되는 Divi 테마 외부의 파일(예: 플러그인 또는 하위 테마에 추가된 기타 파일)에 의존합니다.

전체 사이트의 HTML, JS 및 CSS에 축소를 추가하는 가장 좋은 방법 중 하나는 Cloudflare를 사용하는 것입니다. Cloudflare는 자동 축소를 사용하여 웹사이트에 있는 모든 소스 코드의 파일 크기를 줄입니다. 또한 무료 버전과 함께 기본으로 제공됩니다.

사이트 파일을 축소하는 몇 가지 신뢰할 수 있는 플러그인은 다음과 같습니다.

• 자동 최적화
• W3 총 캐시(리뷰 읽기)
• W3 슈퍼 캐시(리뷰 읽기)
• WP 로켓(유료)

이 플러그인은 Divi에서 작동해야 합니다. 그러나 웹 사이트의 모든 뉘앙스를 측정하여 모든 사람에게 가장 적합하다고 말할 수 있는 방법은 없습니다. 때때로 타사 플러그인이 JavaScript 파일을 자동으로 축소하여 오류/문제를 일으킬 수 있으므로 웹사이트를 철저히 테스트하시기 바랍니다. 일반적으로 CSS 파일을 축소하는 것은 항상 안전합니다. 그러나 이러한 JavaScript 파일에 주의하십시오.

충돌이 있는 경우 Divi의 내장 옵션을 비활성화하고 타사 플러그인이 작업을 처리하도록 해야 할 수 있습니다.

이를 위해 타사에 의존하고 싶지 않다면 항상 수동으로 수행할 수 있습니다. 이 작업을 수행하는 방법에 대한 자세한 내용은 웹사이트의 CSS, HTML 및 JavaScript를 축소하는 방법에 대한 전체 게시물을 확인하세요.

#8 GZIP 압축 활성화

Gzip 압축이 Divi 사이트 속도를 높이는 방법

Divi 사이트에서 Gzip 압축을 활성화하면 속도가 크게 향상됩니다(경우에 따라 최대 70%). 컴퓨터에서 압축(또는 압축) 파일을 만드는 데 익숙하다면 Gzip 압축이 작동하는 방식에 대한 기본적인 이해가 이미 있는 것입니다. 파일(또는 폴더)의 내용을 더 작게 만들기 위해 zip 파일(또는 폴더)을 만듭니다. 왜요? 따라서 훨씬 빠르게 파일을 업로드하고 다운로드할 수 있습니다! Gzip 압축은 웹사이트에 대해 동일한 작업을 수행합니다. 클라이언트에게 훨씬 더 빨리 제공될 수 있도록 서버에 가능한 모든 파일을 더 작은 버전으로 압축하도록 지시합니다. 이것은 실제로 페이지 로드 속도를 높일 수 있습니다.

이것은 새로 설치하더라도 Divi의 속도를 향상시킬 수 있는 영역 중 하나입니다. Divi는 이미 핵심 테마 파일을 축소하기 때문에 Gzip 또는 Brotli 압축은 해당 파일을 축소할 수 있는 것보다 훨씬 작게 만듭니다.

Gzip 압축은 가장 널리 사용되는 압축 알고리즘이지만 Brotli 압축은 더 빠른 데이터 전송을 위해 파일 크기를 더욱 작게 만드는 차세대 알고리즘인 것 같습니다. SiteGround 및 Cloudflare와 같은 호스팅 회사에서 사용하고 있습니다.

Divi 사이트에서 Gzip 압축을 활성화하는 방법

일부 호스팅 제공업체는 gzip 압축이 사이트 성능에 있어 간단하기 때문에 자동으로 gzip 압축을 활성화합니다. 사이트에서 Gzip 압축이 활성화되어 있는지 자유롭게 확인하십시오.

이미 언급했듯이 Cloudflare는 무료 계획의 모든 도메인에 대해 Brotli 압축을 제공합니다.

W3 Total Cache 및 WP Super Cache와 같은 많은 WordPress 성능 플러그인에는 옵션으로 Gzip 압축이 포함됩니다. 그러나 이 하나의 최적화를 위해 성능 플러그인을 추가할 필요가 없어 보입니다.

Apache 서버에서 Gzip 압축을 활성화하는 일반적인 방법 중 하나는 mod_deflate를 사용하여 수동으로 수행하는 것입니다. 그리고 FTP를 통해 웹사이트(루트)에 액세스하기만 하면 됩니다(숨김 파일을 표시해야 함). 그런 다음 .htaccess 파일 맨 아래에 코드 블록을 복사하여 붙여넣습니다.

#9 이미지 최적화

이미지 최적화는 느린 로딩 페이지 속도의 가장 큰 원인 중 하나입니다. 이는 아마도 무시하기 쉽기 때문일 것입니다. 결국, 하나의 배경 이미지가 웹 페이지에 얼마나 많은 피해를 줄 수 있습니까? 글쎄, 당신은 놀랄 수 있습니다. 웹에 최적화되지 않은 몇 개의 큰 이미지만으로도 페이지 로드 속도에 치명적인 영향을 미칠 수 있습니다. 그리고 그것을 직시합시다. 귀하의 사이트에는 아마도 많은 이미지가 있을 것입니다.

이미지 최적화에 대한 필수적인 요구 사항은 실제로 충분하지 않습니다. 모든 웹사이트가 이 작업을 수행해야 합니다. 이미지 압축만으로도 사이트가 눈에 띄게 빨라지고 이미지 크기가 작아지면 저장 공간과 대역폭이 절약됩니다(윈윈!). 그러나 고려해야 할 다른 중요한 이미지 최적화가 있습니다.

간단히 말해서 웹용 이미지를 최적화할 때 다음을 수행하고 싶을 것입니다.

올바른 파일 형식 사용

웹상의 이미지와 관련하여 다음 이미지 파일 유형을 고수해야 합니다.

• JPG – PNG 또는 GIF보다 작은 파일 크기로 멋진 이미지를 얻을 수 있으므로 사이트에서 사용하는 대부분의 이미지/사진에 대해 이 파일 형식을 사용해야 합니다. 투명한 배경이 필요하지 않는 한 배경 이미지나 사진과 같은 것에 PNG 형식을 사용하지 마십시오.
• PNG – 투명한 배경이 필요한 이미지에는 PNG를 사용합니다. JPG는 투명도를 지원하지 않습니다.
• SVG – HTML 코드를 사용하여 매우 선명한 디테일을 제공하는 벡터 형식입니다. SVG는 로고, 아이콘 및 기타 벡터 애니메이션에 적합합니다.

이미지 크기 조정 및 자르기

이미지가 필요 이상으로 커지기를 원하지 않습니다. 예를 들어, Divi의 테마 옵션에 로고를 추가하는 경우 대부분의 경우 너비가 100px이면 됩니다. 따라서 너비가 5000px인 로고를 업로드하지 말고 Divi가 해당 이미지의 크기를 조정하도록 강제하지 마십시오. 결과는 프런트 엔드에서 비슷하게 보일 수 있지만 크기가 크면 페이지 로드 시간이 단축됩니다.

Divi를 사용하여 페이지에 이미지를 업로드할 때 해당 이미지가 Divi의 열 구조 내에서 얼마나 커야 하는지 아는 것이 도움이 됩니다. 이 궁극적인 가이드는 올바른 방향으로 안내하는 데 도움이 될 수 있습니다. (그러나 해당 게시물 이후에 새로운 열 구조가 추가되었으므로 곧 업데이트하도록 노력하겠습니다.)

압축 파일 크기

품질이 떨어지기 전에 이미지 파일 크기를 낮추고 싶을 것입니다. 이것은 이미지 압축을 통해 수행됩니다. tinypng.com과 같은 대부분의 사진 편집기, 플러그인 및 사이트는 무손실 압축(이미지 품질을 잃지 않고 이미지 파일을 축소)과 스마트 손실 압축(메타데이터 및 이미지 품질을 줄여서 이미지 파일의 크기를 줄임)을 사용하여 이미지를 압축합니다. 사용자가 실제로 눈에 띄지 않는 방식).

이미지 최적화 도구 활용

가능하다면 이미지를 Divi 사이트에 업로드하기 전에 인터넷에 최적화하는 것이 좋습니다. 이것은 "웹용으로 저장" 옵션이 포함된 Photoshop과 같은 사진 편집기를 통해 수행할 수 있습니다. 또한 TinyPNG.com 또는 Compressor.io와 같은 무료 타사 사이트를 사용하여 사이트에 업로드하기 전에 이미지를 압축할 수 있습니다.

이미지 압축을 수행하는 몇 가지 훌륭한 플러그인이 있습니다. 일부 플러그인(예: Imagify)은 사이트에서 이미 사용 중인 이미지를 압축하고 WordPress 미디어 라이브러리에 업로드할 때 이미지를 자동으로 압축합니다. 이를 위해 플러그인을 사용하면 해당 이미지를 압축하는 동안 사이트에 부담이 될 수 있으므로 가능한 경우 사전에 이미지 최적화를 수행하는 것이 가장 좋습니다.

다음은 사용할 수 있는 몇 가지 훌륭한 이미지 최적화 도구 및 플러그인입니다.

• 웹사이트:
  • 압축기.io
  • Tinypng.com
• 플러그인:
  • 상상하다
  • Smush 이미지 압축 및 최적화
  • WP 로켓

자세한 내용은 6가지 품질 이미지 최적화 플러그인에 대한 비교를 확인하세요.

Divi의 내장 SRCSET 지원

네이티브 SRCSET을 지원하는 반응형 이미지도 Divi에 내장되어 있습니다. 이렇게 하면 다양한 반응형 디스플레이(예: 태블릿 및 휴대폰)에 적합한 크기로 조정된 이미지를 제공함으로써 Divi에서 사용되는 이미지의 최적화가 더욱 향상됩니다.

#10 비디오 최적화

비디오 최적화는 이미지 최적화보다 약간 어렵지만 덜 중요한 것은 아닙니다. 비디오 파일은 크기가 클 수 있으므로 페이지 로드 속도에 매우 부담이 됩니다. 그리고 서버에서 많은 비디오를 호스팅하는 경우(예: WordPress 미디어 갤러리에서) 디스크 공간에 대한 추가 문제가 발생합니다. 그렇기 때문에 YouTube 또는 Vimeo와 같은 타사 서비스를 사용하여 동영상을 호스팅하는 것이 좋습니다. 또는 Amazon S3와 같은 스토리지 플랫폼에서 비디오 미디어 콘텐츠 오프로드를 고려할 수 있습니다. 이렇게 하면 서버 속도를 늦추지 않고도 Divi의 비디오 모듈 내에서 해당 비디오에 연결할 수 있습니다.

비디오를 자체 호스팅하려는 경우 더 빠른 로드를 위해 비디오 크기를 줄여야 합니다. Handbrake(사용하기 쉬운)와 같은 무료 도구를 사용하여 비디오 파일을 쉽게 줄일 수 있습니다.

Divi에서 비디오를 사용하는 방법(예: 비디오 모듈에 타사 호스팅 비디오 URL 추가)에 대한 자세한 내용은 이 궁극적인 가이드를 확인하세요.

#11 속도를 위한 Divi 페이지 구축

그렇지 않은 경우 웹 사이트의 속도는 페이지의 콘텐츠를 로드하는 속도에 따라 결정됩니다. 따라서 성능 최적화를 염두에 두고 Divi 웹사이트의 각 페이지를 구축하는 것이 좋습니다. 중요한 것은 구축하는 각 페이지의 주요 목표를 식별하는 것입니다. 그 후에는 속도와 디자인의 건강한 균형을 찾아 프런트 엔드에서 멋지게 보이는 페이지를 구축하면서 백엔드에 기대지 않을 수 있습니다. 속도를 위해 Divi 페이지 콘텐츠를 최적화하는 방법에 대한 실용적인 예는 가장 빠른 Divi 페이지를 구축하는 방법에 대한 기사를 확인하세요.

다음은 페이지를 구축할 때 염두에 두어야 할 몇 가지 핵심 팁입니다.

• Divi의 기본 제공 Critical CSS와 함께 작동하도록 스크롤 없이 볼 수 있는 콘텐츠 를 최적화하십시오 .
• Divi 사전 설정을 사용하여 Divi의 내장 스마트 스타일 기능을 활용하십시오 . 이렇게 하면 요소가 클래스를 기반으로 CSS 코드 스니펫을 공유할 수 있고 각각에 대해 고유한 CSS 블록을 로드할 필요가 없습니다.
• 가능하면 페이지를 작성하는 데 사용하는 모듈 유형을 제한하십시오 . Divi의 동적 프레임워크로 인해 Divi는 사용하지 않는 모듈(및 고유 CSS)을 처리하거나 로드하지 않습니다. 예를 들어 동일한 결과에 대해 두 개의 텍스트 모듈(텍스트 모듈과 광고문안 모듈 대신)을 사용할 수 있는 경우 페이지에서 설명문 모듈을 불필요하게 처리하고 로드하는 것을 사용하지 않는 것이 가장 좋습니다.
• 페이지에 애니메이션을 사용할 때는 현명해야 합니다 . Divi의 동적 기능 때문에 Divi는 모션 효과와 같은 기능에 필요한 JS 또는 CSS를 사용하지 않는 경우 처리하거나 로드하지 않습니다. 예를 들어 페이지 전체에서 일반 애니메이션 설정을 사용하는 경우 한 요소에만 모션 효과를 사용하지 않는 것이 좋습니다. 대신 애니메이션 스타일을 일관되게 유지하고 더 빠른 페이지 로드를 즐기십시오.

#12 플러그인을 신중하고 아껴서 사용하세요

품질 플러그인 사용

품질은 플러그인과 관련하여 핵심 요소입니다. 사실, 하나의 나쁜 플러그인만큼 사이트 속도를 늦추지 않는 10개의 고품질 플러그인을 가질 수 있습니다. 일반적으로 오랜 시간 동안 테스트를 거쳤고 좋은 리뷰를 받은 플러그인을 선택해야 합니다. 그리고 항상 속도 테스트 전후로 플러그인이 웹사이트 성능에 어떤 영향을 미치는지 테스트하십시오.

사용하지 않거나 오래된 플러그인 제거

고품질 플러그인을 사용하는 것 외에도 사이트에서 사용하지 않거나 오래된 플러그인을 제거하는 것도 중요합니다. 웹 사이트 성능과 심각한 보안 위험에 해로울 수 있습니다. 또한 각 플러그인(고급 플러그인 포함)은 각 페이지 로드에 시간을 추가하는 추가 리소스를 추가합니다. 빠른 Divi 사이트를 원한다면 가능한 한 적은 수의 플러그인을 사용하고 싶을 것입니다.

렌더링 차단 오류에 주의하십시오.

Divi에는 렌더링 차단 자산이 없으므로 렌더링 차단 스타일과 스크립트가 플러그인에서 제공됩니다. 속도를 저하시키는 큰 렌더링 차단 스크립트가 있는 경우 해당 플러그인에서 멀어지는 것을 고려할 수 있습니다.

#13 속도 테스트 수행

웹사이트에서 속도 테스트를 한 번 이상 수행하지 않았다면 이 기사를 읽지 않았을 것입니다. 따라서 방문자에게 페이지가 얼마나 빨리 로드되는지 아는 것이 중요합니다. 속도 테스트를 수행하는 것은 가장 쉬운 일 중 하나입니다. 무료로 이 작업을 수행할 수 있는 수많은 웹사이트가 있습니다. 그리고 그들이 제공하는 메트릭은 더 나은 성능을 위해 사이트를 추가로 최적화할 수 있는 방법을 식별하는 데 매우 중요합니다.

다음은 시작할 수 있는 몇 가지 좋은 장소입니다.

• GTMetrics
• 구글 페이지 인사이트
• 크롬 개발자 도구
• Lighthouse(Chrome 개발자 도구에서 사용 가능)

이 테스트의 결과는 우리 중 많은 사람들이 더 빠른 로드 시간을 위해 Divi 사이트를 최적화하기 시작하게 만드는 이유입니다. 웹 페이지가 다양한 영역에서 어떻게 수행되는지에 대한 유용한 분석을 제공합니다. 그런 다음 사이트를 최적화할 때 권장 사항을 체크리스트로 사용할 수 있습니다.

Divi WordPress 사이트에 이러한 온라인 속도 테스트 도구를 사용하는 가장 좋은 방법은 최적화를 수행하기 전에 먼저 페이지에서 테스트를 실행하는 것입니다. 그런 다음 이를 기준으로 사용하여 변경 시 향후 테스트를 비교할 수 있습니다. 최적화할 때마다 점수가 향상되는지 확인할 수 있습니다.

예를 들어, 하나의 캐싱 플러그인을 사용하는 것이 다른 것보다 더 잘 작동한다는 것을 알 수 있습니다. 최상의 성능을 위해 여러 플러그인을 테스트하는 것을 두려워하지 마십시오.

다음은 도움이 될 GTMetrix의 유용한 WordPress 최적화 가이드입니다.

사이트에 속도 최적화를 구현하면 다음 영역에서 개선 사항을 확인할 수 있습니다.

• 첫 번째 바이트까지의 시간(TTFB)
• 첫 번째 콘텐츠가 포함된 페인트(FCP)
• TTI(Time to Interactive) – 페이지가 사용자 상호작용을 위한 준비가 된 시점을 측정합니다.
• 속도 지수(SI) – 페이지가 스크롤 없이 볼 수 있는 부분에서 시각적으로 완성되는 속도를 측정합니다.
• 총 차단 시간(TBT) – 사용자가 사이트와 처음 상호작용할 때와 브라우저가 해당 작업에 응답할 때 사이의 시간인 Google의 웹 필수 FID(First Input Delay)와 유사합니다.
• 가장 큰 콘텐츠가 포함된 페인트 - 가장 큰 콘텐츠 요소(예: 이미지)가 사용자에게 표시되는 데 걸리는 시간을 측정합니다.
• 누적 레이아웃 이동 – 사용자가 페이지를 로드할 때 레이아웃의 예기치 않은 이동(또는 이동)을 측정합니다.

자세한 내용은 Google 페이지 속도 점수를 개선하는 방법에 대한 게시물을 확인하세요.

목표는 완벽이 아니라 속도입니다

웹 사이트를 테스트하고 완벽하게 최적화하는 데 어려움을 겪기 쉽습니다. 하지만 완벽한 웹사이트는 없을 것입니다. 특정 속도 테스트 성능 등급을 개선하면 실제로 페이지 로드 시간이 느려질 수 있습니다. 그 속도 테스트도 완벽하지 않기 때문입니다. 이 기사와 마찬가지로 웹 사이트 성능과 속도를 개선하는 데 도움이 되는 가이드일 뿐입니다.

#14 Divi 고속 페이지 청사진 고려

우리가 구축한 이 테스트 웹사이트에서는 Google PageSpeed ​​Desktop에서 100 점, Google PageSpeed ​​Mobile에서 99점 , GTmetrix에서 100% 를 받은 Divi 웹사이트를 쉽게 구축할 수 있었습니다. 이 웹사이트 청사진을 통해 개발자는 실제 사이트에서 Divi의 내장 속도 최적화를 직접 경험할 수 있습니다. 또한 속도를 위해 Divi 페이지 콘텐츠를 최적화하는 방법의 좋은 예가 될 수 있습니다.

이 테스트 사이트는 다음과 같이 최적화되었습니다.

• SiteGround에서 호스팅
• 캐싱, CDN, Brotli 압축에 CloudFlare 사용
• 추가 플러그인이 사용되지 않았습니다.
• 중고 Divi의 내장 성능 기능
• 최적화된 페이지 콘텐츠
  • 스마트 스타일 (Divi Presets)을 사용하여 각 페이지에 대해 생성되는 동적 CSS를 줄였습니다.
  • Critical CSS 가 간결한지 확인하기 위해 스크롤 없이 볼 수 있는 부분에 최적화되었습니다.
  • 타사 서버에서 글꼴을 다운로드할 필요가 없도록 웹 안전 글꼴(Arial)을 사용했습니다.
  • 사용된 압축 이미지
  • 애니메이션이나 모션 효과를 사용하지 않음
  • 필요한 소셜 아이콘이 포함된 더 작은 아이콘 글꼴 하위 집합을 로드하기 위해 아이콘 사용을 제한했습니다.

결과:

• CSS 크기가 94% 감소했습니다.
• 모든 렌더링 차단 자산이 완전히 제거되었고 Divi의 JavaScript 크기가 절반으로 줄었습니다.
• 불필요한 리소스 요청이 없습니다.
• 스크롤 없이 볼 수 있는 콘텐츠가 바로 표시됩니다.
• 구글 페이지 속도 모바일에 구글 페이지 속도 바탕 화면에 100 %, 99 %를 득점
• GTmetrix에서 100% 를 기록했습니다.

테스트 사이트에서 무엇을 배울 수 있습니까?

궁극적으로 Divi는 사용 방법과 웹 사이트 속도를 선택할 수 있는 권한을 제공합니다. 테스트 사이트는 거의 완벽한 페이지 속도 점수를 즉시 얻을 수 있음을 보여줍니다. 그러나 Divi를 훌륭하게 만드는 강력한 디자인 도구를 모두 사용하지 않았다고 해서 사용을 두려워할 필요는 없습니다. 페이지에서 모듈이나 기능을 사용하지 않는 경우 Divi는 요소 또는 해당 CSS를 불필요하게 처리 및/또는 로드하지 않습니다. 그러나 모듈이나 기능을 포함하기로 결정한 경우 Divi는 필요한 요소와 CSS만 처리 및/또는 로드하고 그 이상은 처리하지 않습니다. 이것은 사이트를 구축하기 위해 Divi의 힘을 발휘하기로 결정할 때 웹 팽창에 대해 걱정할 필요 없이 구축할 수 있는 가벼운 프레임워크를 제공합니다.

기타 팁

우리는 더 빠른 Divi/WordPress 웹사이트에 기여하는 모든 주요 요소를 거의 다뤘습니다. 그러나 속도를 훨씬 더 향상시킬 수 있는 고려해야 할 사항이 훨씬 더 많습니다.

• 올바른 Divi 하위 테마 설정
• 봇이 서버에 과부하를 주지 않도록 WordPress 로그인 URL을 변경합니다. Divi로 커스텀 로그인 페이지를 만들 수 있는 좋은 기회가 될 것입니다.
• 외부 서비스에 대한 불필요한 호출 방지. 일부 플러그인 및 포함을 사용하려면 해당 서버에서 호스팅되는 파일을 사용해야 합니다. 이러한 추가 호출은 페이지 로드를 느리게 합니다.
• 더 나은 페이지 로드 속도를 위해 이미지 및 비디오에 지연 로드를 통합합니다.

Divi 및 기타 타사 성능 플러그인 사용

Divi의 내장된 성능 최적화는 성능 플러그인으로 제거할 수 없는 팽창을 제거하기 때문에 모든 Divi 사이트의 속도를 높입니다. 즉, 추가 타사 성능 플러그인을 사용하여 Divi의 기본 제공 최적화 외에도 사이트 속도를 높일 수 있습니다. Divi 성능 개선 사항은 타사 플러그인이 아닌 Divi에만 적용되므로 성능 플러그인은 Divi 이외의 다른 영역에서 도움이 될 수 있습니다. 예를 들어, 웹 사이트를 캐싱하고 CDN을 사용하면 여전히 이점을 얻을 수 있습니다.

충돌하는 성능 플러그인 다루기

Divi는 이미 최적화되어 있으므로 타사 성능 플러그인을 사용하면 충돌이 발생할 수 있습니다. 따라서 Divi 테마를 최신 상태로 유지하고 모든 타사 플러그인을 사전에 철저히 테스트하는 것이 중요합니다. 우리는 다른 인기 있는 최적화 플러그인으로 Divi의 내장 최적화를 테스트하기 위해 최선을 다합니다. 그러나 웹 사이트의 모든 뉘앙스를 측정하여 모든 사람에게 가장 잘 작동하거나 충돌이 발생하지 않을 것이라고 말할 수 있는 방법은 없습니다.

예를 들어 타사 플러그인은 오류/문제를 일으킬 수 있는 방식으로 JavaScript 파일을 자동으로 축소하거나 이동할 수 있으므로 웹사이트를 철저히 테스트하십시오.

충돌이 있는 경우 Divi의 내장 옵션을 비활성화하고 타사 플러그인이 작업을 처리하도록 해야 할 수 있습니다. 발생할 수 있는 문제에 대한 도움이 필요하면 언제든지 지원팀에 문의하세요. 문제를 해결하는 데 도움을 드리겠습니다.

마지막 생각들

Divi는 그 어느 때보다 빠릅니다. 기본 제공 성능 업그레이드를 통해 표준 Divi 설치는 프런트 엔드에서 더 빠른 페이지 로드, 백엔드에서 더 빠른 WordPress 관리자, 더 빠른 Divi Builder로 사이트 편집 및 디자인을 할 수 있습니다. 이것은 좋은 시작이지만 Divi 사이트가 가능한 한 빨리 실행되도록 하기 위해 해야 할 일이 훨씬 더 많습니다. 이 기사에 포함된 속도 및 성능 최적화는 사이트 속도를 확실히 높일 것입니다. 대부분의 경우 이러한 최적화는 Divi뿐만 아니라 모든 WordPress 사이트/테마에 적용됩니다. 그리고 당신이 무료로 할 수 있는 간단한 일들이 얼마나 많은지 놀랍습니다!

언급되지 않은 제안과 리소스가 많이 있을 거라고 확신합니다. 따라서 의견을 통해 자유롭게 공유해 주세요.

여러분의 의견을 기다리겠습니다.

건배!

Sammby/Shutterstock.com을 통한 주요 이미지