엘리멘터 3.25 베타 업데이트의 특징
엘리멘터(Elementor) 3.25 베타 업데이트가 2024년 10월 릴리즈 되었다. 이번 업데이트에서는 엘리멘터가 생성하는 DOM과 스타일의 양을 줄이고 마크업 방식이 일부 변경되었다. 우커머스 플러그인에 종속성을 가진 엘리멘터 요소들에 대한 최적화 작업이 이루어졌다고 하는데, 3.24.5 버전에서 우커머스 실행시간이 500ms 이상 증가된 이상현상이 개선 될 여지가 생겼다.
성능 개선
엘리멘터 페이지의 전반적인 프론트엔드 스타일을 명시한 frontend.min.css와 전역 설정 스타일을 명시한 global.css가 이번 업데이트에서 완전히 제거된다. 이들은 페이지의 설정에 따라 분할된 청크를 로드하는 조건부 형태로 변경되었다.
global.css는 엘리멘터에서 60kb를 넘는 가장 큰 자원 중 하나였다. 전역 변수를 사용하는 모든 엘리멘터 위젯의 스타일이 이 파일에 담겨있었는데, 이번 릴리즈에서는 이 파일이 완전히 제거되고, 각 페이지가 가지는 고유한 스타일만 명시하는 post-{id}.css 파일에 조건부로 로딩된다.
우커머스 모듈에 대한 스타일 최적화
엘리멘터 프로(Elementor Pro) 버전은 WooCommerce 플러그인을 지원하는 각종 위젯과 기능을 모듈 형태 제공하는데, 이 모듈이 가진 30개가 넘는 위젯들의 스타일 파일의 크기만 179kb에 육박하는 거대 자원이었다. 어떤 위젯을 쓰든 항상 이 거대한 파일이 로드되던 것이 3.25 릴리즈에서는 사용한 위젯에 대한 스타일만 조건부로 로딩하도록 변경되었다.
DOM 요소에 대한 마크업 최적화
그동안 엘리멘터를 오래 사용해 왔던 사용자라면 Improved CSS Loading 기능을 기억한다. CSS 조건부 로딩을 위한 실험 기능인데, 이 기능은 그 임무를 완수하고 3.24 버전에서 비활성 상태로 전환되었다. 3.25 업데이트에서는 이와 비슷하게 래퍼용 DOM 요소에 최적화를 위한 Optimized Markup 기능이 실험 도입된다.
이 기능은 엘리멘터 위젯이나 템플릿에서 생성되는 모든 DOM 요소의 래핑 태그를 축소해 더 빠른 파싱과 렌더링을 제공한다.
첫 단계에서는 3개의 버튼 위젯(Button, Paypal Button, Stripe Button)부터 시작하는데, 각 버튼의 최상위 래핑 태그인 .elementor-button-wrapper 래퍼 요소를 제거한다. 따라서 해당 클래스를 스타일했거나 자바스크립트에서 선택했다면 이 실험 기능을 활성화 하기 전에 미리 살펴보아야 한다.
감소된 모션과 Anchor JS의 CSS 네이티브화
이번 업데이트에서는 앵커를 클릭하면 부드럽게 스크롤되면서 해당 앵커의 상단으로 이동하는 부분에 대한 개선이 이루어졌다. 모션에 사용되던 자바스크립트 라이브러리를 scroll-behavior: smooth CSS 선언으로 변경하여 불필요한 자원 로딩이 줄었고, 앵커로 이동할 때 곧바로 반응하도록 모션 감소에 대한 접근성 기능이 추가되었다. 따라서 이동 시 모션을 사용할지 말지 선택할 수 있을 것으로 보인다.
그리고 위젯의 Advanced 탭 → Motion Effects에서 설정할 수 있는 고정 헤더에 Anchor Offset 필드가 추가되어 부유 상태인 고정 헤더 아래의 컨텐츠가 앵커 스크롤에 의해 가려지는 현상을 피할 수 있게 되었다.
검색 위젯의 결과에 Pagination 추가
검색 위젯은 3.23 버전에서 Ajax를 통한 결과를 검색 필드 하단에 즉시 노출할 수 있도록 개선되었다. 여기에 추가로 검색 결과를 3개에 제한하지 않고 내부 페이징으로 분할해 더 많은 결과를 노출할 수 있도록 개선되었다.
우커머스 데이터베이스 쿼리 최적화
우커머스가 엘리멘터가 활성화 된 웹 사이트의 속도를 저하시키는 가장 큰 원인 중 하나인 것은 부정할 수 없다. 우커머스 플러그인이 매번 업데이트 될 때마다 짧게는 0.1초에서 길게는 몇 초까지 페이지 로딩을 지연시키는 불안정한 로딩 속도를 보인다.
3.25 업데이트에서는 몇 가지 퍼포먼스 개선 사항이 이루어졌는데, 제품을 나열하는 Product 위젯은 Loop Grid 위젯보다 쿼리 수나 로딩속도 측면에서 훨씬 빠르고 효율적이었다고 공식 사이트에서 밝히고 있다. 하지만 사용자는 Product 위젯의 제한적인 필드보다 폭넓은 사용자화가 가능한 Loop Grid 위젯을 선호한다.
이번 업데이트로 Loop Grid의 중복 쿼리를 줄이는 개선이 이루어져 Product 위젯과의 간격을 좁힌 것으로 보인다.
그 외에
엘리멘터가 사용자의 로컬 저장소를 필요할 때만 사용하도록 하는 개인정보 관련 개선, Flexbox Container와 Grid Container 위젯이 Container 위젯 하나로 병합, 구버전 엘리멘터에서 지금까지 삭제나 마이그레이션을 미뤄온 몇 가지 자잘한 개발자 관련 사항들이 포함되어 있다.