집 >웹 프론트엔드 >CSS 튜토리얼 >더 빠른 사이트의 CSS 및 JS를 최적화하는 방법

더 빠른 사이트의 CSS 및 JS를 최적화하는 방법

Joseph Gordon-Levitt원래의: 2025-02-16 08:28:10680검색

웹 사이트 로딩 속도는 사용자 경험에 중요하며, 이는 종종 웹 사이트 소유자가 간과합니다. 웹 사이트로드 속도를 8 초에서 2 초로 높이면 전환율이 74%증가 할 수 있습니다. 즉, 느린 웹 사이트는 잠재 고객의 거의 절반을 잃을 수 있습니다.

코드 압축, 즉 가독성을 향상시키는 데만 사용되는 문자를 제거하면 대역폭 사용량을 줄이고 페이지 로딩 속도를 높일 수 있습니다. CSS Miniifier 및 JSCompress와 같은 도구를 사용하면이 프로세스에 도움이 될 수 있습니다. 또한 JavaScript를 압축하기 전에 성능을 추가로 최적화하기 위해 비동기 코드로드를 구현하는 것이 좋습니다.

중복 또는 중복 코드는 웹 사이트의 속도를 늦출 수 있습니다. Chrome의 내장 개발자 도구를 사용하여 이러한 불필요한 코드 리소스를 식별하고 삭제하십시오. 최적의 웹 사이트 성능을 유지하려면 사용하지 않은 코드를 정기적으로 확인하고 제거하는 것이 중요합니다.

이 기사는 Aussie Hosting이 후원합니다. Sitepoint를 가능하게 한 파트너를 지원해 주셔서 감사합니다.

사용자 경험은 온라인 비즈니스의 성공에 가장 중요한 요소입니다.

틈새 블로그, SAAS 웹 사이트 또는 온라인 상점을 운영하든, 어떤 식 으로든 청중의 경험을 망친 경우 유료 고객으로 전환 할 것으로 기대하지 마십시오.

좋은 소식은 모든 브랜드가 특정 페이지 내에서 요소를 좁혀서 사용자 경험을 체계적으로 향상시킬 수 있다는 것입니다.

예를 들어, 로딩 속도 는 대부분의 웹 사이트 소유자가 간과하기 쉬운 문제입니다. 전환율 데이터에 따라 웹 사이트 속도를 8 초에서 2 초로 높이면 전환율이 74% 증가 할 수 있습니다.

이것은 느린 웹 사이트가 잠재 고객의 거의 절반에 달할 수 있음을 의미합니다.

Pagespeed Insights를 사용하여 상황에 대해 자세히 알아보십시오 웹 사이트의 로딩 속도에 영향을 미치는 문제를 결정하려면 Google Pagespeed Insights를 사용할 수 있습니다. 이것은 웹 사이트의 데스크탑 및 모바일 버전을 자동으로 스캔하는 무료 도구입니다.

감지 된 문제 외에도 PagesPeed Insight는 몇 가지 실행 가능한 제안을 표시합니다.

페이지 로딩 속도를 고려한 적이없는 웹 사이트 소유자의 경우 다음과 같은 문제가 발생할 수 있습니다. CSS 및 JavaScript 코드가 웹 사이트 속도를 늦추고 있음을 나타냅니다. 이것은 전체 웹 개발자의 작업처럼 들릴지 모르지만 도구의 도움으로 최적화하기가 상당히 쉽습니다.

더 이상 고민하지 않으면 CSS 및 JavaScript 리소스를 압축하기 위해 취해야 할 단계는 다음과 같습니다.

압축 코드를 결정하십시오 코드 압축은 가독성을 향상시키는 것보다 다른 기능이없는 문자를 제거하는 연습을 말합니다.

예를 들어, 인라인 주석 는 개발자가 특정 코드 세그먼트의 역할을 이해하는 데 도움이 될 수 있습니다. 이것은 검토 또는 디버깅에 유용하지만 코드의 크기를 증가시킬 수도 있습니다.

압축은 이러한 추가 문자를 제거하여 대역폭 사용을 줄이고 페이지 로딩 속도를 향상시킵니다.

PagesPeed Insights를 사용하면 압축 해야하는 코드를 쉽게 식별 할 수 있습니다. CMS (Content Management System) 또는 FTP (파일 전송 프로토콜) 클라이언트의 경로를 수정하고 따르는 방법을 표시하는 경우를 클릭하십시오.

예를 들어, 웹 사이트가 WordPress에서 실행되면 모든 코드가 "편집기"섹션에 통합되어야합니다. 메인 대시 보드의 모양 탭을 통해 찾을 수 있습니다.

코드를 압축하는 가장 쉬운 방법은 아마도 자동화 도구를 사용하는 것입니다. CSS 및 JavaScript의 경우 최고의 도구 중 일부는 CSS Miniifier 및 JSCompress입니다. How to Optimize CSS and JS for Faster Sites CSS 미니 페이어 사용 ~~CSS Miniifier는 CSS 리소스를 자동으로 압축하는 무료 및 간단한 도구입니다. 코드를 입력 필드에 붙여 넣고 압축 레벨을 설정 한 다음 압축을 클릭합니다.~~

코드의 크기에 따라 코드를 압축하는 데 몇 초에서 1 분이 걸릴 수 있습니다. 그런 다음 새 코드를 CMS 또는 FTP 클라이언트 인터페이스로 다시 복사 할 수 있습니다. 중요한 팁 :

예방 조치로서 웹 사이트 코드를 변경하기 전에 백업을 작성하는 것을 잊지 마십시오. 오프라인 또는 클라우드 기반 복제본을 만드는 것은 쉬운 방법입니다.

압축이 유효한지 테스트하려면 PagesPeed Insights에 대한 다른 분석을 실행하십시오. 최근 압축 된 CSS 파일은 더 이상 "압축 된 CSS"세부 사항에 표시되지 않아야합니다.

JavaScript에서 비동기로드를 사용하여 JavaScript의 올바른 압축은 CSS에 비해 약간 까다 롭습니다. JSCompress로 코드를 실행하기 전에 비동기 코드 로딩 구현을 고려하십시오.

는"지연로드 "라고도 불리지만 JavaScript의 맥락에서 동적 하중 기능에 의한 비동기로드는 작동합니다.

비동기로드를 사용하려면 .js 파일을 호출 할 때 "Async"태그를 추가하십시오. 웹 사이트의 HTML 소스 코드에서 수행 할 수 있습니다.

다음은 이것을 수행하는 방법의 예입니다.

작동 방식 및 사용 방법에 대한 자세한 내용은이 기사를 참조하십시오. HTML에 완전히 익숙하지 않은 경우 기본 사항에 만족할 때 까지이 초보자 안내서를 읽으십시오.

JavaScript 파일 결합 JavaScript를 최적화 할 때 언급 할 가치가있는 또 다른 포인트는 파일을 단일 페이지로 결합하는 것입니다. 그렇게하면 브라우저가 작성한 HTTP 요청 수가 줄어들어 로딩 시간이 필연적으로 속도가 빨라집니다.

예를 들어 는 소스 코드에서 여러 .js 파일을 호출하지 마십시오 :

편집기를 사용하여 단일 JavaScript 파일에 결합 한 다음 다음에 전화 할 수 있습니다.

스크립트의 처리 시간을 더욱 향상시키기 위해 "http"및 "type"태그를 생략하는 연습을 할 수도 있습니다. 예를 들어, 사용하지 마십시오 :

당신은 간단히 사용할 수 있습니다 :

<code> src=”yourscript.js” async> >
</code>

마지막으로 JSCompress를 사용하는 것은 CSS 미니 페이어를 사용하는 것만 큼 간단합니다. 코드를 입력 필드에 붙여 넣고 "JavaScript 압축"버튼을 클릭하십시오.

다음, 다음, 출력 탭으로 이동하여 압축 된 JavaScript를 볼 수 있습니다 :

<code> src=”http://www.yoursite.com/menu.js”> >
 src=”http://www.yoursite.com/tools.js”> >
 src=”http://www.yoursite.com/footer.js”> > 
</code>

중복 코드 삭제 웹 사이트가 가질 수있는 또 다른 성능 문제는 중복 또는 중복 코드가 존재하는 것입니다. 일반적으로 삭제 된 페이지 요소로 인해 발생하므로 코드가 사용되지 않도록합니다.

<code> src=”http://www.yoursite.com/all.js”> >
</code>

중복 코드를 찾는 좋은 방법은 Chrome의 내장 개발자 도구를 사용하는 것입니다. 메인 메뉴를 열고 "더 많은 도구"를 선택하고 "개발자 도구"를 클릭하면이를 활성화 할 수 있습니다.

이 작업을 수행 할 때 최적화하려는 페이지에 있는지 확인하십시오.

개발자 도구가 활성화되면 설정 메뉴의 "더 많은 도구"하위 섹션에서 "적용 범위"를 찾으십시오.

<code> src=" http: //www.yoursite.com/all.js" type="text/javascript" > ></code>

이것은 개발자 콘솔에서 "커버리지"탭을 열게됩니다. 여기서 탐지 범위 버튼을 클릭하여 테스트를 시작하십시오.

테스트가 완료되면 코드 리소스 목록과 사용하지 않은 바이트가 표시됩니다. 이것은 오른쪽의 빨간색과 녹색 막대로 표시됩니다.

중복 코드를 처음 확인한 경우 목록에 CSS와 JavaScript 리소스가 혼합되어 있음을 알 수 있습니다. 사용하지 않는 것이 무엇인지 알아 보려면 이것들을 다시 확인하십시오. How to Optimize CSS and JS for Faster Sites 모든 불필요한 코드 리소스를 하나씩 삭제하는 것은 번거 롭을 수 있습니다. 그러나 완벽한 사용자 경험을 제공하려면 이것이 필요합니다.