WordPress에서 리소스를 그룹화하고 최소화하는 방법

웹사이트를 관리하고 WordPress에서 리소스를 그룹화하고 최소화하는 모든 사람의 꿈은 더 나은 성능을 얻는 것입니다. 이를 위해 할 수 있는 가장 좋은 방법 중 하나는 바로 리소스 그룹화입니다. 하지만 실제로는 매우 어려울 수 있습니다. 모든 리소스(주로 CSS와 JS 파일)를 그룹화하면 개발자가 아닌 경우 충돌이 발생하여 웹사이트가 노출될 수 있습니다.

WP Speed of Light 는 WordPress 사이트 운영에 최적의 솔루션입니다. 사이트 로딩 속도를 높이는 다양한 옵션과 매우 편리한 대시보드를 제공하며, 그중 하나는 리소스 그룹화 및 최소화 기능입니다. 그룹화 및 최소화 과정에서 단일 파일을 포함/제외하는 기능은 충돌 없이 사용자 정의 최적화를 위한 핵심 요소입니다.

이 블로그 게시물에서는 예제 WordPress 사이트를 사용하고 이를 수행하는 방법을 알아보므로 모든 것을 구성하는 과정이 더 쉬워질 것입니다.

WordPress JS 및 CSS 축소 방법

워드프레스 js와 CSS 최소화 방법을 알아보자. 하지만 먼저 최소화가 무엇을 의미하는지 알아야 한다. "최소화는 브라우저에서 리소스를 처리하는 방식에 영향을 주지 않고 불필요하거나 중복된 데이터를 제거하는 프로세스를 말한다. 예를 들어 코드 주석과 서식, 사용하지 않는 코드 제거, 더 짧은 변수와 함수 이름 사용 등이 있다."

이제 우리가 할 일은 페이지의 속도 테스트를 통해 변화를 확인하는 것입니다. 이 예시에서는 WooCommerce와 몇 가지 제품이 있는 사이트를 사용하고 있으므로 처음에는 로드 속도가 약간 느릴 것입니다.

네, 페이지 로드에 2.79초가 걸립니다. 나쁘지는 않지만 더 나아질 수 있을 것 같습니다. JS와 CSS를 최소화해서 차이를 확인해 보겠습니다. WP Speed of light > SpeedUp > Group & Minify 모든 최소화 옵션이 있는 메뉴를 볼 수 있습니다. 플러그인 무료 버전에는 그룹 및 최소화 옵션이 포함되어 있지만, 시각적 파일 제외 기능은 PRO 애드온 버전에서만 사용할 수 있습니다.

PRO 애드온 옵션은 다음과 같습니다. 인라인 스크립트 제외(최소화에서 인라인 스크립트 제외), 스크립트를 푸터로 이동(최소화된 모든 스크립트를 푸터로 이동하여 사이트 속도를 향상), 글꼴 및 Google 글꼴 그룹화(로컬 글꼴과 Google 글꼴을 하나의 파일로 그룹화하여 더 빠르게 제공), 그리고 고급 파일 제외.
 
보시다시피 JS, CSS, HTML을 최소화할 수 있는 옵션이 있습니다. 이 옵션을 활성화하고 "저장"을 클릭하면 모든 리소스가 즉시 최소화됩니다. 고급 설정이므로 문제가 발생할 수 있지만, 일부 코드와 파일을 제외하면(Pro 애드온 사용 시) 모든 문제를 해결할 수 있습니다.

이제 몇 시간이 걸릴 수 있는 모든 개발자 작업이 단 몇 초 만에 완료됩니다.

다음 단계, WordPress에서 CSS와 JS를 최적화합니다.

이 플러그인을 사용하면 대시보드에서 그룹 옵션을 활성화하는 것만으로 WordPress가 CSS와 JS를 최적화할 수 있습니다. WP Speed of Light > SpeedUp > Group & Minify CSS와 JS를 그룹화하는 옵션이 있는 대시보드를 볼 수 있습니다.

이러한 옵션을 사용하면 다음을 수행할 수 있습니다.

• 그룹 JS: 여러 Javascript 파일을 단일 파일로 그룹화하면 HTTP 요청 수가 최소화됩니다.
• CSS 그룹화: 여러 CSS 파일을 하나의 파일로 그룹화하면 HTTP 요청 수가 최소화됩니다.

HTTP 요청: 이는 우리가 무언가를 선택하거나 같은 사이트에서 다른 페이지로 이동할 때마다 서버에 요청되는 요청입니다. 따라서 이러한 요청을 줄이면 로드 시간도 단축될 것입니다.

웹사이트에서 얼마나 많은 파일과 스크립트를 그룹화할 수 있는지 확인하려면 브라우저 콘솔을 열고(마우스 오른쪽 버튼 클릭 > 검사 또는 F12) 네트워크 패널을 .

그런 다음 로드된 모든 파일을 유형별로 나열할 수 있습니다. 이 예에서는 JS 파일 목록만 클릭했습니다.

이제 이 설정을 마쳤으니, 그룹 옵션(그룹 CSS 및 그룹 JS)을 활성화하고 저장을 클릭하세요. 이 옵션은 신중하게 사용해야 하며 충돌이 발생할 수 있으므로 페이지를 테스트해야 합니다.

진지하게 접근해서 글꼴 두께를 최적화해 보자

뭐요? 다른 최적화요? 네! 글꼴 굵기를 최적화할 수 있습니다. 설정에서 옵션을 활성화하기만 하면 됩니다. WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fonts 옵션으로 이동하세요.
Group fonts and Google Fonts 옵션을 사용하면 글꼴과 Google Fonts를 하나의 파일로 그룹화하여 더 빠르게 제공할 수 있습니다. 대부분의 WordPress 테마와 레이아웃은 기본적으로 두 가지 이상의 글꼴과 모든 글꼴 유형(일반, 굵게, 기울임꼴 등)을 제공하기 때문에 이 기능이 매우 유용합니다.

해당 옵션을 활성화하고 저장을 클릭하면 모든 글꼴이 그룹화됩니다.

이제 리소스를 최소화하고 그룹화하기 위한 모든 옵션을 활성화했으므로 사이트 로드 시간에 차이가 보일 것입니다. 속도를 확인해 보겠습니다.

정말 큰 차이네요! 2.8초에서 0.56초로 줄었어요! 이 글 서두에서 말씀드렸듯이, 로딩 시간을 더 단축할 수 있습니다 ;)

파일 축소 제외를 사용하는 방법

최소화는 사이트에 문제를 일으킬 수 있으며, 주로 구문 오류나 유사한 변수, 클래스 이름이 포함된 특정 파일을 그룹화할 때 발생합니다. 따라서 "파일 최소화 제외" 옵션을 사용하면 최소화 및 그룹화 과정에서 파일을 제외할 수 있습니다. WP Speed of Light > SpeedUp > 그룹화 및 최소화 고급 파일 제외 확인할 수 있습니다 .

고급 파일 제외 기능을 사용하려면 먼저 검사를 실행하고 옵션을 활성화한 다음 '검사 실행'을 클릭해야 합니다.

 웹사이트에 로드된 스크립트를 나열하려면 WP Speed of Light 폴더를 스캔하여 나열해야 합니다. 일반적으로 모든 플러그인과 테마는 /wp-content 폴더에 있으며, 이 폴더에는 모든 플러그인과 테마가 포함되어 있습니다. 해당 폴더를 하나 이상 선택하고 "지금 스캔"을

검사를 실행한 후, 검사가 완료되면 '결과 보기'를 클릭합니다.

파일 유형(전체, JS, CSS, 글꼴)별로 분류된 파일 목록이 아래에 표시됩니다. 문제를 일으키는 파일을 하나 발견한 경우, 파일 그룹 및 최소화 기능을 활성화할 때 간단한 ON/OFF 전환기를 .

이렇게 하면 파일을 제외하는 데 도움이 되며, 리소스를 최소화할 때 발생할 수 있는 문제를 쉽게 해결할 수 있습니다. 그룹화 및 최소화 프로세스는 특히 테스트 단계에서 어느 정도 작업이 필요하지만, 그만한 가치가 있으며, WP Speed of Light 에서 직접 속도 테스트를 실행 .
 
WP Speed of Light 사용해 보세요 : https://www.joomunited.com/wordpress-products/wp-speed-of-light