Elementor로 웹사이트 레이아웃을 최적화하는 방법

웹사이트 성능 최적화는 사용자 경험의 가장 중요한 측면 중 하나입니다. 로딩 속도가 느린 웹사이트는 모든 사용자를 좌절시킬 수 있으며, 종종 높은 이탈률로 인해 비즈니스 성공에 피해를 줄 수 있습니다.

웹사이트 성능은 큰 이미지 크기, 서버 구성, 너무 많은 플러그인, 부풀려진 테마 등과 같은 여러 요인의 영향을 받을 수 있습니다.

웹사이트 성능은 웹 제작자로서 우리의 가장 강력한 가치 중 하나입니다. 이것이 우리가 5부로 구성된 과정인 Elementor의 성능 최적화를 만든 이유입니다.

이제 최적의 기술을 사용하여 페이지 및 게시물 레이아웃을 만드는 방법을 배울 수 있습니다. 이 지식은 웹 사이트에 단순히 필요하지 않은 중복 섹션, 열 또는 위젯이 포함되지 않도록 합니다. 또한 로딩 시간을 개선하기 위해 몇 가지 내장 위젯 기능을 살펴보겠습니다.

이 튜토리얼이 끝나면 구축하는 모든 Elementor 웹사이트의 성능을 최적화하고 즉시 보상을 받을 수 있도록 완전히 준비될 것입니다.

전체 5파트 코스는 5개의 비디오 강의로 구성됩니다.

• 1단원: 레이아웃 최적화 모범 사례
• 레슨 2: 이미지 최적화
• 레슨 3: 추가 성능 향상
• 4단원: 적합한 웹 호스트 선택
• 5단원: 타사 도구를 사용한 최적화

첫 번째 강의에서는 Elementor Editor에서 페이지와 게시물을 만드는 가장 효율적인 방법을 다룰 것입니다. 훨씬 적은 수의 요소를 사용하여 동일한 레이아웃을 달성할 수 있었을 때 너무 많은 섹션, 열, 내부 섹션 및 위젯을 사용하는 경우를 종종 봅니다.

과도한 양의 요소를 사용하면 웹사이트의 성능이 느려지므로 Elementor를 사용하여 가장 효율적인 방법으로 웹사이트를 구축하는 방법에 대해 알아보겠습니다.

다음 주제를 다룰 것입니다.

• 올바른 페이지 구조 자세히 살펴보기
• 웹사이트 성능 보기 및 테스트
• 머리글, 바닥글 및 페이지 콘텐츠 최적화
• 좋은 습관과 나쁜 습관 웹사이트 레이아웃의 예
• 위젯, 위치 지정 및 전역 스타일의 올바른 사용
• 로드 이동을 방지하고 SEO를 개선하며 로드 시간을 늘리는 팁
• 접근성 최적화
• DOM 요소의 양 최소화
• 그리고 훨씬 더!

Elementor의 최적 레이아웃을 더 잘 이해하기 위해 몇 가지 일반적인 섹션, 열 및 위젯 오용을 나타내는 Elementor 템플릿을 살펴보겠습니다. 이 수업이 끝나면 열과 위젯의 수를 줄여 이 전체 페이지를 완전히 다시 빌드할 것입니다. 초기 페이지는 9개의 섹션, 31개의 열, 5개의 내부 섹션 및 44개의 위젯으로 구성됩니다.

튜토리얼이 끝나면 최적화된 페이지가 6개의 섹션, 7개의 열 및 16개의 위젯으로 최소화됩니다.

무료 경량 Hello 테마를 사용하고 템플릿의 각 섹션을 다시 만들고 모범 사례 기술을 사용하여 전반적인 웹 사이트 성능을 개선합니다.

웹사이트 레이아웃 최적화에 대해 알아보기 전에 누군가가 우리 웹사이트를 방문할 때 무슨 일이 일어나는지 완전히 이해하기 위해 페이지에서 테스트를 실행할 것입니다. 모든 최적화가 완료되면 테스트를 반복하고 결과를 비교합니다.

• "시크릿 모드"에서 새 창을 열고 테스트 중인 웹페이지의 URL을 입력합니다.

페이지 링크가 무엇인지 확실하지 않은 경우 WP 대시보드로 이동하여 쉽게 찾을 수 있습니다.

• "페이지"를 클릭하면 웹사이트의 모든 페이지를 볼 수 있습니다.
• 페이지 위에 커서를 놓고 "보기" 옵션을 클릭합니다. 그러면 귀하의 페이지로 바로 이동합니다.
• 이 URL을 복사하여 시크릿 창에 붙여넣고 사이트가 로드되면 테스트할 준비가 된 것입니다!

과거에 Chrome 개발자 도구를 사용해 본 적이 있을 수 있습니다.

그렇지 않은 경우 페이지의 HTML 및 CSS 콘텐츠를 검사하고 보려면 다음 단계를 따르세요.

• 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택합니다.

  HTML 및 CSS를 읽고, 오류를 찾고, SEO 결과를 얻고, 다양한 테스트를 수행할 수 있는 여러 탭이 표시됩니다.

• 네트워크 탭을 선택하고 cmd 또는 ctrl + R 버튼을 눌러 결과를 로드합니다.

보시다시피 현재 페이지 레이아웃은 로드하는 데 2.88초가 걸리고 81개의 요청을 실행하고 있습니다.

• Lighthouse 탭으로 전환하면 페이지에서 감사 보고서를 실행할 수 있습니다.

이렇게 하면 페이지의 현재 성능에 대한 더 많은 통찰력을 얻을 수 있습니다.

• '보고서 생성'을 선택합니다. 잠시 후 보고서가 표시됩니다.

우리는 현재 73/100의 성능 점수를 받고 있으며 확실히 작업할 수 있습니다.

이상적으로는 이 모든 숫자가 녹색이 되기를 바랍니다. 이제 페이지를 최적화하고 통계를 개선하는 작업을 시작하겠습니다.

우리가 수행하는 모든 최적화 단계 후에는 변경 사항에서 특정 모범 사례를 도출할 수 있으며 향후 구축할 웹 사이트를 위해 이를 염두에 둘 수 있습니다.