워드프레스에서 리소스를 그룹화하고 최소화하는 방법

가능한 한 최고의 성능을 내는 것은 웹사이트를 관리하는 모든 사람의 꿈입니다. WordPress에서 리소스를 그룹화하고 축소하는 것은 이를 위해 할 수 있는 최선의 방법 중 하나이지만 실제로 매우 어려울 수 있습니다. 모든 리소스(css 및 js 파일 주로)를 그룹화하면 개발자가 아닌 경우 웹사이트에 충돌이 발생할 수 있습니다.

WP Speed of Light 는 정말 친숙한 대시보드와 더불어 사이트 로딩 속도를 빠르게 해주는 다양한 옵션을 제공하기 때문에 워드프레스 사이트의 성능을 끌어올리는 최고의 솔루션이며, 이 옵션 중 하나는 리소스를 그룹화하고 압축하는 것입니다. 그룹화 및 압축 과정에 개별 파일 포함/제외 기능은 충돌없이 사용자가 원하는 최적화를 수행할 수 있는 열쇠입니다.

이 블로그 포스트에서는 예제용 워드프레스 사이트를 사용할 것이며 모든 설정을 구성하는 과정을 보다 쉽게 배우게 될 것입니다.

워드프레스 JS 및 CSS 압축하는 방법

워드프레스의 JS 및 CSS 압축을 수행하는 방법을 배우려면 먼저 압축 해제 수단이 무엇인지 알아야 합니다. “압축 해제 란 브라우저에서 리소스를 처리하는 방법에 영향을 주지 않고 불필요하거나 중복 된 데이터를 제거하는 프로세스를 의미합니다. 예를 들어 코드 주석 및 형식 지정, 사용되지 않는 코드 제거, 더 짧은 변수 및 함수 이름 사용 등이 있습니다.”.

이제 수행 할 작업은 변경 사항을 확인하기 위해 페이지에서 속도 테스트를 수행하는 것입니다. 이 예제에서는 woocommerce 및 일부 제품이있는 사이트를 사용하므로 처음에는 약간 느리게로드됩니다.

네, 페이지 로딩 시간이 2.79초로 나쁘지는 않지만 더 개선될 수 있습니다. 자바스크립트와 CSS를 최소화(minify)해서 차이를 확인해 보겠습니다. WP Speed of light > SpeedUp > Group & Minify최소화 옵션이 있는 메뉴를 보실 수 있습니다. 플러그인 무료 버전에도 그룹화 및 최소화 옵션이 포함되어 있지만, 시각적인 파일 제외 기능은 PRO 애드온 버전에서만 사용 가능합니다.

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

이제 개발 작업에 몇 시간 걸리던 것이 단 몇 초 만에 완료됩니다.

다음 단계, WordPress CSS 및 JS 최적화

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

이 옵션들을 사용하면 다음과 같은 작업을 할 수 있습니다:

• JS 그룹화: 여러 JavaScript 파일을 단일 파일로 그룹화하여 HTTP 요청 수를 최소화합니다
• CSS 그룹화: 여러 CSS 파일을 단일 파일로 그룹화하여 HTTP 요청 수를 최소화합니다.

HTTP 요청: 사용자가 사이트에서 무언가를 선택하거나 다른 페이지로 이동할 때마다 서버에 전송되는 요청이므로 이러한 요청을 줄이면 로드 시간이 줄어듭니다.

웹사이트에서 그룹화할 수 있는 파일 및 스크립트의 최대 개수를 확인하려면 브라우저 콘솔(마우스 오른쪽 클릭 > 검사 또는 F12)을 열고 네트워크 패널을.

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

이제 이 설정에 있으므로 그룹 옵션 (그룹 CSS 및 그룹 JS)을 활성화하고 저장을 클릭하십시오. 이러한 옵션은주의해서 사용해야하며 충돌이 발생할 수 있으므로 페이지를 테스트해야합니다.

심각하게 받아들이고 글꼴 두께를 최적화합시다

뭐라고요? 다른 최적화 기능이요? 네! 글꼴 두께를 최적화할 수 있습니다. 설정에서 해당 옵션을 활성화하는 것만큼 간단합니다. WP Speed of Light > SpeedUp > Group & Minify > Group fonts 및 Google Fonts 옵션으로 이동하세요.
Group fonts 및 Google fonts 옵션을 사용하면 여러 글꼴을 하나의 파일로 묶어 더 빠르게 로드할 수 있습니다. 대부분의 WordPress 테마와 레이아웃에는 기본적으로 2개 이상의 글꼴과 모든 변형(일반, 굵게, 기울임꼴 등)이 포함되어 있기 때문에 이 기능은 매우 유용합니다. 

Just enable that option, click on save and all the fonts will be grouped.

이제 리소스를 최소화하고 그룹화하는 모든 옵션을 활성화했으므로 사이트 로드 시간에 차이가 있어야 합니다. 속도를 확인해 보겠습니다.

정말 대단하군요! 2.8초에서 0.56초로 감소했습니다! 이 게시물의 처음에 말씀드린 것처럼 로드 시간을 더 개선할 수 있습니다 ;)

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

파일 축소(minification) 과정에서 문제가 발생할 수 있는데, 특히 구문 오류나 유사한 변수, 클래스 이름 등의 오류가 있는 파일을 그룹화할 때 이러한 문제가 두드러집니다. 따라서 "파일 축소 제외" 옵션을 사용하면 축소 및 그룹화 과정에서 특정 파일을 제외할 수 있습니다. WP Speed of Light > SpeedUp > Group & Minify확인할 수 있습니다 고급 파일 제외 .

고급 파일 제외를 사용하려면 먼저 옵션을 활성화하고 스캔 실행을 클릭하여 스캔을 실행해야 합니다.

 
웹사이트에 로드된 스크립트 목록을 표시하기 위해 WP Speed of Light 클릭하세요. "지금 스캔"을

스캔이 완료되면 스캔을 실행하고 최종적으로 결과 보기를 클릭합니다.

파일 유형별(전체, JS, CSS, 글꼴)로 분류된 파일 목록이 아래에 표시되어야 합니다. 파일 그룹화 및 축소 기능을 활성화할 때 문제가 발생하는 파일을 하나 발견한 경우, 간단한 켜기/끄기 스위치를.

이 기능을 사용하면 파일을 제외할 수 있으므로 리소스 축소 시 발생할 수 있는 문제를 쉽게 해결할 수 있습니다. 그룹화 및 축소 프로세스는 특히 테스트 단계에서 약간의 작업이 필요하지만, 그만한 가치가 있으며 에서 직접 속도 테스트를 실행 WP Speed of Light.
 
지금 바로 WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light