가장 빠른 Divi 페이지를 구축하는 방법: 속도를 위한 Divi 콘텐츠 최적화

Divi의 새로운 성능 업데이트를 통해 페이지 속도 점수를 높일 수 있는 수많은 가능성이 제공됩니다. 오늘은 Divi 페이지를 처음부터 만들 때 염두에 두어야 할 몇 가지 실용적인 팁과 트릭을 공유합니다. 이것은 고정된 규칙이 아니라 권장 사항입니다. 항상 페이지의 주요 목표로 귀결됩니다. 때로는 디자인을 위해 속도를 희생하거나 그 반대의 경우도 있습니다. 우리는 이것이 둘 사이의 건강한 균형을 찾는 것이라고 생각하지만 아래 팁을 사용하면 Divi 페이지 속도를 확실히 향상시킬 수 있습니다.

그 속으로 빠져보자!

YouTube 채널 구독

1. 스크롤 없이 볼 수 있는 콘텐츠 최적화

Divi에 추가된 새로운 성능 기능 중 하나는 Critical CSS입니다. 간단히 말해 Divi의 Critical CSS는 스크롤 없이 볼 수 있는 CSS라고 하는 CSS를 즉시 로드해야 하는 항목을 자동으로 감지하고 페이지의 나머지 CSS 로드를 지연시킵니다. 이것은 그 자체로 이미 노력을 기울이지 않고도 페이지 속도를 자동으로 개선하는 데 도움이 됩니다. 하지만 더 많은 정보를 얻고 싶다면 스크롤 없이 볼 수 있는 콘텐츠도 최적화하도록 결정할 수 있습니다.

4-모듈 영웅 개념

첫눈에 방문자와 최대한 많은 정보를 공유하고 싶은 마음이 들 수 있지만 영웅이라면 피해야 하는 것입니다. 콘텐츠가 직접적일수록 스타일과 시각적 효과가 모두 좋습니다. 그렇기 때문에 스크롤 없이 볼 수 있는 부분에서 사용하는 모듈 수를 제한하면 Divi 페이지 속도를 높이는 데 도움이 됩니다. 바람직하게는 다음을 사용합니다.

• 제목
• 절
• 단추

그러나 많은 경우에 일종의 이미지도 포함하고 싶을 것입니다. 그렇다면 이미지를 배경으로 사용하지 말고 대신 모듈로 사용하십시오. 최대 너비의 특정 컨테이너 내에서 모듈로 사용하면 더 작은 이미지 크기를 사용하는 데 도움이 되어 사이트 속도를 높이는 데 도움이 됩니다. 이것은 우리를 4-모듈 영웅 개념으로 가져옵니다.

• 제목
• 절
• 단추
• 최적화된 이미지

정확한 자동 감지를 위해 전체 화면 영웅을 사용하거나 콘텐츠를 여러 섹션으로 분할

전체 화면 영웅 디자인이 인기 있는 데는 이유가 있습니다. 디자인을 더 통기성 있게 만들 뿐만 아니라 중요한 CSS에도 도움이 됩니다. 전체 화면 영웅을 선택하면 사용 중인 화면 크기에 관계없이 스크롤 없이 볼 수 있는 부분에 표시되는 유일한 것으로 결정하는 것입니다. Divi에서 전체 화면 영웅을 만들려면 섹션 설정에서 최소 높이를 "100vh"로 지정해야 합니다. 최소 높이를 지정하여; 섹션이 브라우저의 전체 높이를 포함하는지 확인하고 있습니다. 그 시점부터 영웅 디자인의 일부로 섹션 안에 무엇이든 배치할 수 있습니다. 또는 Divi의 내장 전체 화면 헤더를 사용할 수도 있습니다.

또는 전체 화면 영웅 경로를 따르고 싶지 않다면 스크롤 없이 볼 수 있는 부분을 여러 섹션으로 분할하도록 결정할 수 있습니다. Divi는 섹션 수준 에서 스크롤 없이 볼 수 있는 부분을 자동으로 감지 합니다. 즉, 스크롤 없이 볼 수 있는 부분 위에 부분적으로 표시되고 스크롤 없이 볼 수 있는 부분 아래에 표시되는 큰 섹션을 구축하는 경우 전체 섹션의 CSS와 해당 섹션의 요소 CSS가 로드됩니다. 섹션을 여러 섹션으로 나누면 너무 많은 요소가 스크롤 없이 볼 수 있는 부분에 있는 것처럼 처리되는 것을 방지하는 데 도움이 됩니다.

지연을 방지하기 위해 Hero에서 애니메이션을 피하십시오.

로딩 시간을 지연시킬 수 있는 스크롤 없이 볼 수 있는 것은 피하는 것이 좋습니다. 여기에는 애니메이션이 포함됩니다. 그러나 이것이 완전히 피해야 한다는 의미는 아닙니다. 페이지 아래로 애니메이션을 쉽게 사용하거나 영웅 내부에서 사용하는 애니메이션을 제한할 수 있습니다. 좋은 균형을 찾는 것이 중요합니다.

태블릿 및 모바일에서 스크롤 없이 볼 수 있는 콘텐츠 수정

Critical CSS와 관련하여 마지막으로 언급해야 할 중요한 사항은 더 작은 화면 크기에서 디자인을 수정하는 것입니다. 스크롤 없이 볼 수 있는 콘텐츠가 다양한 화면 크기에 최적화되어 있는지 확인하는 것이 중요합니다. 데스크탑과 모바일 모두에서 뛰어난 페이지 속도 점수에 도달할 수 있도록 디자인을 조정하는 문제입니다. 예를 들어, 모바일에서 전체 영웅 이미지를 숨겨 더 작은 화면 크기에서 페이지 속도를 높일 수 있습니다.

2. 스마트 스타일 사용하기

스마트 스타일 작동 방식

새로운 성능 업데이트로 Divi는 중복 스타일을 줄여 최적화되었습니다. 스마트 스타일을 활성화하려면 Divi Presets의 세계로 뛰어들어야 합니다. 사전 설정을 사용하면 기본적으로 동일한 방식으로 스타일이 지정된 각 요소에 고유한 스타일 블록을 할당하지 않고도 다른 요소와 스타일을 공유할 수 있습니다.

섹션 및 행에 1 또는 2개의 사전 설정 사용

섹션과 행은 사전 설정에 대해 이야기할 때 종종 잊혀지는 두 가지 요소 유형입니다. 모듈과 마찬가지로 섹션과 행에 사전 설정을 할당할 수 있습니다. 이는 생성되는 CSS를 제한하는 데 도움이 될 뿐만 아니라 페이지 수준에서 디자인 일관성을 유지하는 데도 도움이 됩니다. 예를 들어 수직 리듬을 생성하기 위해 각 섹션에 대해 100px 상단 및 하단 패딩을 일관되게 사용하고 싶다면 이 과정에서 Divi 사전 설정을 사용하지 말아야 할 이유가 없습니다. 이러한 패딩 값을 사용하는 섹션에 대한 새 사전 설정을 만들고 추가하는 각각의 새 섹션에 할당하거나 기본 섹션 사전 설정으로 만듭니다.

또한 원하는 너비와 최대 너비로 행 사전 설정을 설정할 수 있으며 이를 표준으로 설정할 수 있습니다. 이러한 사전 설정을 사용하여 디자인 프로세스를 더 쉽게 만들 뿐만 아니라 페이지 속도 점수를 향상시키는 데 도움이 되는 방법을 알아보세요.

모듈에 사전 설정 사용

물론 모듈에도 스마트 스타일을 사용하고 싶을 것입니다. 아래 예에서 각 모듈의 전체적인 모양과 느낌이 비슷함을 알 수 있습니다. Blurb 모듈에 대한 사전 설정을 생성하면 페이지의 CSS 파일을 작게 유지하는 데 도움이 됩니다.

사전 설정을 무시합니까?

그러나 모든 작은 변경에 대해 새 사전 설정을 만들면 안 됩니다. 예를 들어 위의 예에서 두 개의 마지막 Blurb 모듈의 텍스트 색상이 다른 것을 알 수 있습니다. 이전 것을 복제하여 이에 대한 새 사전 설정을 만들거나 사전 설정을 무시하도록 결정할 수 있습니다. 이 경우 새 사전 설정을 만들고 여러 줄의 CSS 코드를 추가하는 대신 텍스트 색상(CSS 코드의 한 줄 추가)을 재정의하는 것이 더 합리적입니다.

3. 속도에 맞는 디자인 선택

사용하려는 모듈 선택 제한(동적 모듈)

만들고 있는 페이지에 사용할 모듈을 선택할 때 이러한 모듈이 동적으로 로드된다는 점을 염두에 두는 것이 좋습니다. 즉, 특정 모듈을 사용하지 않으면 페이지 속도에 영향을 미치지 않습니다. 추가하는 각 모듈을 고려하고 "그만한 가치가 있는"지 확인하고 싶을 것입니다. 그러나 이상적인 시나리오에서는 나머지 Divi 콘텐츠가 모듈을 희생할 필요가 없도록 충분히 최적화되어 있는지 확인합니다.

설계의 LCP 찾기 및 최적화

페이지 속도를 향상시키는 데 도움이 될 수 있는 또 다른 방법은 가장 큰 콘텐츠가 포함된 페인트를 찾아 최적화하는 것입니다. 요컨대, LCP는 페이지 속도 점수를 결정하는 데 도움이 되는 페이지에서 가장 큰 요소입니다. 이에 대한 자세한 내용은 여기에서 확인할 수 있습니다. 디자인의 LCP가 최적화되었는지 확인하면 페이지의 로딩 시간을 크게 줄일 수 있습니다.

애니메이션 스타일 선택(동적 기능)

동적 모듈이 있는 것처럼 동적 기능도 있습니다. 즉, 페이지에서 특정 기능을 전혀 사용하지 않으면 로드되지 않아 페이지 속도가 빨라집니다. 이러한 특별한 이유로 애니메이션 스타일을 선택하고 고수하는 것이 중요합니다. 예를 들어 모션 효과를 사용하도록 선택하고 해당 기능을 중심으로 페이지의 모든 애니메이션을 집중할 수 있습니다. 또는 일반 애니메이션 설정으로 이동하여 해당 경로를 따를 수 있습니다. 이렇게 하면 가벼운 페이지를 만들 수 있을 뿐만 아니라 예측 가능성도 높아집니다. 이는 사용자 경험 측면에서 일반적으로 좋은 점입니다.

글꼴 페어링: 1개 또는 2개의 글꼴 모음에 충실

또한 디자인하는 페이지에 대해 최대 2개의 글꼴 모음을 사용하는 것이 좋습니다. 이렇게 하면 페이지에 들어가기 전에 로드해야 하는 글꼴의 수를 제한하게 됩니다.

4. 수동 최적화

반응형 콘텐츠: 모바일에서 이미지 크기 축소

모바일 페이지 속도 점수를 높이는 데 도움이 되는 또 다른 사항은 Divi에서 반응형 콘텐츠를 사용하는 것입니다. 이것은 아마도 더 작은 화면 크기에서 점수를 가장 잘 향상시키는 데 도움이 될 수 있는 기능 중 하나일 것입니다. 이것은 훨씬 더 많은 노력을 필요로 하지만 확실히 가치가 있습니다. 이미지 편집 소프트웨어를 통해 이미지의 크기/크기를 축소하고 데스크톱에 표시되는 이미지와 달리 모바일에서 더 작은 이미지를 사용합니다. 이렇게 하면 이미지 파일의 크기가 크게 줄어들고 모바일에서 페이지 속도가 빨라집니다.

파일 형식 및 압축

JPEG는 파일 크기가 더 작은 경향이 있으므로 가능한 한 많이 JPEG를 사용하십시오. PNG는 일반적으로 디자인을 향상시키기 위해 이미지의 투명도가 필요한 경우에만 의미가 있지만, 그런 경우에도 디자인이 작동하도록 하는 대안을 찾을 수 있습니다. GIF와 같은 더 무거운 파일 형식도 피하십시오. 비디오의 경우, 특히 백그라운드에서 재생하려는 경우 일반적으로 사용하지 않습니다. 물론 WordPress 미디어 라이브러리에 업로드하기 전에도 사용하는 파일을 압축해야 합니다.

무대 뒤에서

위의 모든 팁은 페이지 속도를 개선하는 데 도움이 될 수 있지만 Divi 외부에서 웹사이트 최적화 모범 사례를 처리해야 한다는 점을 언급하는 것이 중요합니다. 이 궁극적인 가이드로 이동하여 더 많은 기술적 통찰력을 찾을 수 있습니다.

Divi로 빠른 페이지 구축 - 그 어느 때보다 쉬워짐

Divi의 성능 기능과 웹사이트 구축 방법 사이에 큰 겹침이 있다는 결론에 쉽게 도달할 수 있습니다. Divi는 부분적인 측면을 처리하므로 모든 것을 아름답고 빠른 웹 사이트로 통합하는 데 필요한 프론트엔드 모범 사례에 집중할 수 있습니다. 귀하에게 효과가 있었던 모범 사례가 있다면 아래 댓글 섹션에 자유롭게 공유하여 대화를 계속 이어가세요!