Divi 5(공개 알파)에서 가장 빠른 웹사이트를 만들기 위한 5가지 팁

Divi 5는 최고의 WordPress 경험을 만들기 위한 수년간의 노력의 결과입니다. Visual Builder와 프런트 엔드의 모든 상호 작용과 측면을 최적화하는 것이 이 작업의 주요 부분이었습니다. 궁극적으로 이러한 개선 사항은 여러분이 즐길 수 있지만 Divi 5를 기반으로 구축하여 최상의 결과를 얻을 수 있는 방법이 있습니다.

이 기사에서는 Divi 5에 내장된 성능 이점과 이러한 최적화를 최대한 활용하여 가능한 가장 빠른 웹 사이트를 구축할 수 있는 방법을 살펴보겠습니다.

Divi 5 Public Alpha와 다운로드 방법에 대해 자세히 알아보세요.

Divi 5 Alpha 다운로드 Divi 5 데모 사용해보기 Divi 5 버그 테스터 되기

Divi 5는 빠른 속도로 만들어졌습니다.

Divi 5는 성능을 최우선으로 하여 완전히 재작성되었습니다. 단축 코드로 제작된 Divi 4와 달리 Divi 5는 보다 현대적인 블록 기반 구조를 사용합니다. 이러한 변화만으로도 콘텐츠를 처리하고 페이지를 로드하는 데 소요되는 시간이 크게 단축되었습니다. 또한 이 새로운 프레임워크를 통해 로드되는 HTML의 양을 크게 줄일 수 있었습니다. 이는 특히 길고 복잡한 레이아웃에서 페이지가 더 빠르게 로드된다는 것을 의미합니다.

또한 Divi 5에는 훨씬 더 작고 효율적인 JavaScript 파일 구조가 포함되어 있습니다. 모든 스크립트는 추상화되어 필요할 때만 대기열에 추가되므로 불필요한 코드로 인해 웹 사이트 성능이 저하되지 않습니다. Divi 5의 성능 향상에 대해 자세히 알아보세요.

이러한 모든 개선 사항으로 인해 Divi 5는 기본적으로 더 빨라지지만 사이트를 더욱 빠르게 만들기 위해 취할 수 있는 몇 가지 단계가 있습니다.

가장 빠른 Divi 5 웹사이트를 만들기 위한 5가지 팁

Divi로 믿을 수 없을 만큼 빠른 웹사이트를 만드는 것이 이제 더욱 쉬워졌습니다. 이는 모두 Divi 5의 극적인 성능 향상과 성능이 뛰어난 웹 사이트를 보다 쉽게 ​​구축할 수 있는 기능이 내장되어 있기 때문입니다. 우리는 Divi의 장점을 최대한 활용하고 기반을 되찾고 있다고 확신합니다.

1. 페이지의 모듈 유형 수 줄이기

Divi 5 재구축의 가장 큰 장점 중 하나는 필요하지 않은 자산을 불필요하게 로드하지 않는다는 것입니다. 이는 특히 Divi 모듈에서 두드러지며, 각 모듈은 고유한 스타일과 스크립트를 페이지에 추가합니다. 모듈 유형을 다양하게 사용할수록 페이지를 렌더링하는 데 더 많은 리소스가 필요합니다. 이것은 큰 문제는 아니지만 성능에 민감한 경우 기억해야 할 중요한 사항입니다(이는 모든 웹사이트나 페이지 빌더에 적용됩니다).

Divi's 5의 삽입 모듈 보기

리소스를 합리화하고 사이트 속도를 높이려면 특정 페이지에서 제한된 수의 핵심 모듈 유형을 사용하는 데 집중하세요. 이 전략을 구현하는 가장 좋은 방법은 Divi Library 및 Divi Cloud를 사용하는 것입니다. 개별 모듈, 섹션, 레이아웃을 저장하여 미리 디자인된 요소를 쉽게 재사용할 수 있습니다. 이렇게 하면 동일한 스타일과 모듈이 일관되게 적용되어 불필요한 변형으로 인해 페이지가 부풀어오르는 가능성이 줄어듭니다.

행/섹션/모듈을 저장하면 페이지나 웹사이트의 다른 곳에서 해당 요소(동일한 스타일 설정으로)를 쉽게 재사용할 수 있습니다.

페이지에서 이미 사용한 모듈을 기억하는 것은 제한될 수 있는 것처럼 보이지만 페이지를 디자인하는 방법은 여러 가지가 있습니다. 아래 예는 서로 다른 모듈 배열로 동일한 것을 생성하는 두 가지 방법을 보여줍니다. Blurb 모듈이 페이지에서 이미 사용되었는지 여부에 따라 페이지의 이 부분을 해당 모듈로 디자인하거나 분할하여 디자인하도록 선택할 수 있습니다.

3개의 개별 모듈(왼쪽) 또는 Blurb 모듈(오른쪽) 사용. 어떤 모듈을 선택할지는 이미 사용한 모듈에 따라 달라질 수 있습니다.

이제 이것에 대해 너무 걱정하지 마십시오. 페이지에서 특정 요소를 요구하는 경우 해당 요소를 구축해야 합니다. 그러나 무언가를 구축하는 여러 가지 방법이 있는 경우 추가 리소스를 로드하지 않도록 페이지에서 이미 사용된 모듈을 쉽게 사용할 수 있습니다.

2. CSS를 줄이기 위해 전역 사전 설정 활용

Divi 5에서 웹사이트 성능을 향상시키는 가장 효과적인 방법 중 하나는 사전 설정을 사용하는 것입니다. 요소에 사전 설정을 적용하면 Divi 5는 여러 요소에서 스타일을 공유하는 클래스 기반 시스템을 사용하기 때문에 CSS를 덜 생성합니다. 여러 요소가 동일한 스타일을 사용하면 페이지는 동일한 디자인 수준에 대해 더 적은 CSS를 출력합니다.

버튼, 헤더, 섹션 등 자주 사용되는 모듈에 대한 전역 사전 설정을 만들면 새 인스턴스마다 스타일을 수동으로 조정할 필요가 없습니다. 이렇게 하면 웹 사이트 스타일을 지정하는 데 걸리는 시간은 말할 것도 없고 생성된 사용자 정의 CSS의 총량도 크게 줄어듭니다.

디자인 흐름에서 사전 설정을 사용하는 방법에 대한 몇 가지 아이디어는 다음과 같습니다.

• 행 사전 설정 : 열 구조, 여백 너비, 패딩, 배경 스타일과 같은 설정을 행 사전 설정에 추가할 수 있습니다. 이는 사이트 전체에서 행의 일관된 간격과 시각적 스타일을 유지하는 데 도움이 됩니다.
• 섹션 사전 설정 : 섹션 사전 설정을 사용하면 배경색, 그라데이션 또는 이미지, 패딩 및 간격, 특정 장치에 대한 표시 조건 또는 사용자 정의 CSS와 같은 가시성 설정을 정의할 수 있습니다.
• 모듈 사전 설정(예: 버튼 모듈) : 모듈 사전 설정을 사용하면 버튼 텍스트 스타일, 색상, 호버 효과, 테두리 반경, 그림자 및 정렬과 같은 설정을 추가할 수 있습니다. 이렇게 하면 웹사이트 전체의 버튼이 일관되게 보이고 디자인 테마와 일치하게 됩니다. 여러 변형을 만들 수 있지만 단일 페이지에서 동일한 사전 설정을 사용하면 스타일이 더욱 절약됩니다.

3. 성능 향상을 위해 Divi 4 콘텐츠를 피하세요

Divi 5에서 최상의 성능을 얻으려면 각 페이지를 완전히 마이그레이션해야 합니다. Divi 5를 공개 알파로 출시한 이후 머지않아 사용할 수 있게 될 몇 가지 기능이 누락되었습니다(물론 여러분이 기대하는 대부분의 기능은 이미 제공되어 있습니다). 페이지에서 Divi 5가 아직 지원하지 않는 요소를 사용하는 경우 해당 페이지를 D5로 완전히 마이그레이션할 수 없습니다. 이러한 이벤트에서는 해당 페이지에 대해 Divi 4 프레임워크가 로드됩니다(이전 버전과의 호환성을 위해). 이는 페이지가 여전히 작동하지만 Divi 5의 페이지 속도 이점을 누리지 못하고 있음을 의미합니다.

지원되지 않는 D4 콘텐츠를 발견한 Divi 5 Migrator의 예

Divi 5의 최적화 기능을 최대한 활용하려면 내장된 마이그레이션 도구를 사용하여 웹사이트에서 Divi 4 콘텐츠를 검색하세요. 마이그레이션 프로그램은 Divi 5에서 아직 지원되지 않는 모듈, 템플릿 또는 플러그인을 강조 표시합니다.

지금 당장 Divi 5를 완전히 활용하려면 이러한 요소를 Divi 5 호환 요소로 변환하거나 교체해야 합니다. 서두르지 않는다면, 현재 지원되지 않는 것으로 표시된 항목에 대해 더 많은 호환성을 제공할 수 있는 연속적인 Divi 5 Public Alpha 업데이트를 기다릴 수 있습니다. Divi 5 마이그레이션에 대해 자세히 알아보세요.

4. 특히 스크롤 없이 볼 수 있는 부분에서는 애니메이션과 효과를 제한하세요.

애니메이션과 효과는 웹사이트의 디자인을 향상시킬 수 있지만 특히 스크롤 없이 볼 수 있는 콘텐츠의 경우 로드 시간이 추가로 추가됩니다. 이 영역은 사용자가 가장 먼저 보게 되는 부분이므로 인지된 성능에 매우 중요합니다. 여기서 로드 시간이 느리면 사용자 경험과 웹 사이트의 핵심 웹 바이탈, 특히 LCP(Largest Contentful Paint) 및 CLS(Cumulative Layout Shift)와 같은 지표에 부정적인 영향을 미칠 수 있습니다.

사이트 성능을 향상하려면 히어로 섹션과 기타 스크롤 없이 볼 수 있는 콘텐츠의 애니메이션과 효과를 제한하거나 제거하세요. 대신 빠르게 로드되는 정적이고 가벼운 페이지 요소를 제공하는 데 집중하세요.

애니메이션을 사용해야 하는 경우 애니메이션이 최소화되고 초기 페이지 로드를 방해하지 않는지 확인하세요. 모듈 사전 설정을 사용하는 것은 모듈 전체에서 일관된 애니메이션 사용을 보장하는 좋은 방법입니다(따라서 불필요하게 추가 애니메이션 스타일을 로드하지 않음).

5. 삽입된 비디오에 클릭 가능한 썸네일을 사용하세요

YouTube와 같은 플랫폼에서 직접 비디오를 삽입하면 삽입에 필요한 추가 스크립트와 리소스로 인해 페이지 로드 시간이 느려질 수 있습니다. 비디오를 완전히 삽입하는 대신 라이트박스나 새 탭에서 비디오를 여는 클릭 가능한 썸네일을 사용하세요. 이렇게 하면 사용자가 상호작용할 때까지 비디오 및 관련 리소스가 로드되지 않으므로 페이지의 초기 로드 시간이 단축됩니다.

Divi의 비디오 모듈을 사용하면 이 작업이 정말 쉬워집니다. '콘텐츠' 탭 아래에 ' 오버레이 '라는 옵션 영역이 표시됩니다. 그런 다음 최적화된 이미지를 오버레이로 추가하거나 YouTube 비디오 자체에서 자동으로 생성할 수 있습니다.

이 기술은 페이지가 처음 로드될 때 불필요한 요청이 발생하는 것을 방지하여 웹사이트의 성능을 더욱 빠르게 해줍니다. 이는 비디오 콘텐츠를 계속 제공하면서 페이지 성능을 향상시킬 수 있는 간단한 방법입니다.

요약: 더 빠른 Divi 5 웹사이트를 위한 5가지 팁

• 모듈 유형 수 줄이기: 페이지의 다양한 모듈 수를 최소화하여 리소스 로딩을 간소화합니다.
• 전역 사전 설정 활용: 사전 설정을 적용하여 사용자 정의 CSS를 줄이고 일관된 디자인을 만듭니다.
• Divi 5로 완전히 마이그레이션: Divi 5 Migrator를 사용하여 지원되지 않는 Divi 4 콘텐츠를 스캔하고 교체하세요.
• 애니메이션 제한: 초기 로딩 속도를 높이기 위해 특히 영웅 섹션에서 애니메이션과 효과를 줄입니다.
• 비디오에 클릭 가능한 썸네일 사용: 불필요한 스크립트 로드를 방지하려면 삽입된 비디오를 클릭 가능한 썸네일로 교체하세요.

결론

Divi 5에는 다양한 성능 개선 사항이 내장되어 있어 기본적으로 이전 버전의 Divi보다 더 빠릅니다. 단축 코드 제거, 더 나은(최신) 기술 기반 구축, 성능 중심 기능 모두가 더 원활하고 빠른 사용자 경험에 기여합니다. 또한 이미지 최적화, 빠르고 안정적인 호스트 사용, CDN 또는 에지 캐싱 활용, 사용하지 않는 파일/코드 제거와 같은 표준 모범 사례를 사용해야 합니다.

우리가 다룬 내용을 요약하면, 각 페이지의 모듈 유형 수를 줄이고, 전역 사전 설정을 활용하고, 콘텐츠가 Divi 4에서 완전히 마이그레이션되도록 하고, 애니메이션을 최소화하고, 비디오의 이미지 썸네일을 사용하여 웹 사이트의 성능을 크게 향상시킬 수 있습니다. 이러한 작은 조정을 통해 Divi 5의 최적화된 아키텍처를 최대한 활용하여 웹 사이트가 멋지게 보이고 매우 빠른 속도로 로드되도록 할 수 있습니다.

Divi 5는 속도를 염두에 두고 설계되었지만 페이지를 구축하고 구성하는 방법은 여전히 ​​성능을 극대화하는 데 중요한 역할을 합니다.

Divi 5 Alpha 다운로드 Divi 5 데모 사용해 보기

버그 테스트 과정에 참여하여 Divi 5를 더욱 개선할 수 있도록 도와주세요! 귀하의 피드백은 Divi 5를 개선하고 개발 프로세스 초기에 문제를 해결하는 데 도움이 됩니다.

Divi 5 버그 테스터가 되어보세요