엘리멘터 3.24 업데이트의 특징
이번 엘리멘터 3.24 업데이트의 가장 두드러진 특징은 각 페이지에 로드된 사용되지 않는 CSS의 양을 최소화하고, First Contentful Paint (FCP)와 Largest Contentful Paint (LCP)를 개선한 Core Web Vital 지표의 향상, 그리고 여러 베타 스테이징 상태의 기능들이 안정화 빌드로 통합되었다는 점이다.
성능 개선
오랜 기간 엘리멘터의 CSS의 동적 로딩을 도맡아 하던 Improved CSS Loading 기능을 토대로 이번 업데이트에서 조건부 CSS 로딩의 로직을 크게 개선했다고 한다. 결과적으로 엘리멘터 3.24는 frontend-lite.min.css파일 크기를 206kb에서 61kb로 줄이고 frontend-lite.min.css로직을 frontend.min.css으로 옮겼다.
CSS 로딩 변경
그동안 엘리멘터의 위젯에서 생성되는 CSS의 용량이 8kb 이하면 <style> 태그를 사용해 Inline으로 삽입하고, 그 이상이면 <link>를 사용해 외부 리소스로 등록하는 전략을 취해왔다. 하지만 과도한 인라인 코드로 인한 페이지 용량 부하와 명시도 문제를 직시하고 3.24부터는 위젯에서 생성되는 모든 CSS 코드는 외부 리소스로 등록된다.
베타 릴리즈 기능이 정식 기능으로 동작
Taxonomy Filter, Floating Bars, Link In Bio, Search 기능이 기본 기능으로 이관되었고, Lazy Load Background Images는 Performance 탭으로 이동하였다. 하지만 배경 이미지 지연 로딩은 여전히 제대로 작동하지 않는 것으로 보인다. 자세한 내용은 여기를 참고.
Floating Bars는 페이지의 상, 하단에 공지사항과 같은 고정 요소를 생성하는 기능이다. 뉴스 티커처럼 흐르는 애니메이션도 가능하다. 다만 제목 필드와 쿠폰 코드 외에 다른 요소를 추가할 수 없고, 노출 조건도 오늘 하루 보지 않기와 같은 한국형 쿠키는 없으므로 실제 사용에는 다소 애매한 감이 있다.
편집기 상단바와 Display Condition은 안정화 빌드로 이관되었다. 편집기 상단바는 기존 콘트롤 패널 하단에 위치할 때 보다 History 패널에 접근하기가 더 불편하다. 비활성화 하는 편이 현재로서는 더 낫다.
Nested Elements, 위젯 내부에 또다른 위젯을 포함시킬 수 있는 중첩 기능이 기본 활성화 상태로 변경되었다. 하지만 여전히 메가메뉴와 같이 다른 베타 기능과 함께 사용하면 엄청나게 느린 반응속도를 보이므로 아직까지는 편집기 화면에서의 로딩 속도를 확인해가며 사용하는 것이 좋다.
가변 글꼴 사용
엘리멘터 프로 사용자는 Custom Fonts에 원하는 웹 폰트를 등록해 컨트롤 패널의 Typography 필드에서 선택하여 사용할 수 있었다. 하지만 글꼴 두께마다 모두 다른 글꼴 파일을 일일이 등록해야해서 접근성이 매우 떨어졌다.
3.24 업데이트에서는 단일 가변 글꼴에 대한 TTF 파일만 등록해도 여러 두께에 대한 세밀한 설정이 가능해졌다.
검색 위젯의 Ajax 결과 개선
이전의 검색 위젯은 검색 결과를 Archive 혹은 Search Results 페이지 이동으로 처리했지만 3.23 버전에서 Ajax를 통해 검색 필드 하단에 곧바로 출력할 수 있도록 개선되었다. 이번 3.24 업데이트에서는 검색 결과 페이지에 대한 URL이 간소화되고, Ajax 검색 결과의 너비 조정 및 디자인을 강화하는 사용자 정의 필드가 추가되었다.
하지만 여전히 검색 결과가 3개로 제한되는 단점이 있다. 이 문제는 다음 3.25 베타 업데이트때 페이지네이션 추가로 해결된다.
그 외에
엘리멘터에서 사용하는 waypoints.js, animations.min.css 같은 일부 써드파티 라이브러리를 교체하거나 삭제중이며 Swiper JS 라이브러리는 버전 8로의 마이그레이션이 연기되었다. 이 라이브러리는 원래 스와이프 기능을 사용하는 위젯이 페이지 내에 있는 경우에만 조건부로 로드되어야 하는데 오히려 3.24 버전에서 개발자 실수인지 모든 페이지에서 로드가 되었다.
사용 후 느낀 점
엘리멘터는 자바스크립트나 CSS 같은 정적 리소스 처리가 나쁘지 않은 편이었다. 이번 업데이트에서 Element Cache 같은 좀 더 복잡한 캐싱 기능에 대한 개선이나 발전이 있었으면 했지만 아쉽게도 그러한 부분은 없었다. 오히려 온라인 성능 테스트 도구의 점수 획득에 신경을 쓴 것이 아닌가라는 생각을 떨칠 수 없다.
업데이트 시 주의해야 할 점
오히려 3.24.5 업데이트 이후 우커머스 플러그인이 활성화 된 사이트의 경우 최소 500ms에 해당하는 지연시간이 생겼다. 이것은 매우 큰 문제인데, 현재 엘리멘터가 다음 빌드에서 우커머스 관련 최적화를 진행하고 있어 이 부분과 충돌이 있었을 수 있다. 우커머스 사용자는 가능하다면 3.24.4까지만 업데이트를 진행하길 바란다. 해당 문제는 3.24.7에서도 해결되지 않고 있다.