멋진 CSS 재설정 스타일 만 있으면 Bootstrap-Reboot.min.css를 사용하십시오. 유연하고 사용하기 쉬운 그리드 시스템 만 있으면 bootstrap-grid.min.css를 사용하십시오. 전체 프레임 워크를 다운로드 할 필요가 없습니다. 반면에, 당신이 도서관의 모든 것을 사용하고 싶다는 것을 알고 있다면 적어도 얇은 버전을 포함하십시오.
JavaScript 코드에 대해서도 마찬가지입니다. 프로젝트에서 드롭 다운 메뉴, 팝업 및 툴팁이 필요하지 않으면 bootstrap.bundle.min.js 대신 bootstrap.min.js를 사용하여 Popper.js를 포함 할 필요가 없습니다. .
사전 컴파일 된 다운로드 패키지 대신 소스 코드를 선택하십시오 최신 버전의 Bootstrap을 사용하면 프로젝트에 포함 할 부품을 선택할 수 있지만 프리 컴파일 파일에는 실제로 필요하지 않은 내용이 포함될 수 있습니다.
브라우저는 여전히 미사용 코드를 다운로드하여 처리해야하며, 특히 네트워크 연결이 느려질 때 웹 사이트 성능에 영향을 줄 수 있습니다.
더 좋은 방법은 다음과 같은 이유 때문에 부트 스트랩 소스 코드를 다운로드하는 것입니다.
프로젝트에 필요한 구성 요소를 정확하게 포함시킬 수 있습니다
사용자 정의 라이브러리의 모든 부분은 스타일을 반복적으로 덮어 쓰지 않고 더 간단하고 효율적입니다.
생산이 끝나는 스타일 시트는 일반적으로 더 능률적입니다.
입증 된 클라이언트 최적화 기술 사용 >
위의 지점과는 별도로 성능을위한 부트 스트랩 기반 웹 사이트 최적화에는 여전히 다른 웹 사이트와 마찬가지로 프론트 엔드 성능 기술이 포함되어야합니다. -
다음은 효과적인 프론트 엔드 웹 사이트 최적화를위한 주요 요소입니다.
쓰기 간소화 된 CSS 및 JavaScript 코드
코드의 각 문자는 웹 페이지의 최종 크기를 증가시킵니다. 간결하고 명확한 CSS 및 JavaScript 코드를 읽을 수있는 상태에서 작성하는 것은 쉽지 않습니다. 그러나 이것은 모든 프로젝트가 노력해야하는 목표가되어야합니다.
좋은 CSS 관행에는 사용되지 않은 선택기 제거, 중복 코드 및 오버 넥 규칙이 포함됩니다. 프로젝트 시작시 코드를 구성하는 것이 가장 좋습니다. 예를 들어 스타일 가이드를 사용하면 개발 프로세스와 코드 품질에 실제로 도움이 될 수 있습니다. -
또한 코드를 정리하는 데 도움이되는 몇 가지 훌륭한 도구가 있습니다. CSS Lint 및 JSLINT와 같은 코드 검사관은 문서에 구문 오류, 비효율적 인 인코딩 패턴, 사용되지 않은 코드 등을 확인할 수 있습니다.
CSS 및 JavaScript 코드를 압축하고 병합하십시오
중요한 최적화 단계는 컨텐츠를 제시하기 위해 웹 사이트가 수행 해야하는 HTTP 요청 수를 제한하는 것입니다. 리소스를 얻으려면 서버로 이동할 때마다 시간이 걸리므로 사용자 경험에 부정적인 영향을 미칩니다. -
압축 (즉, 문서에서 댓글 및 공간 제거) 및 CSS 및 JavaScript 파일 병합은 이제 파일 크기를 작게 유지하고 HTTP 요청 수를 줄이기위한 견고한 연습이되었습니다.
더 깊은 외관을 원한다면 Gary Stevens의 CSS 및 JS를 최적화하여 웹 사이트 속도를 높이는 방법은 훌륭한 기사입니다.
이미지 파일 크기에 주목하십시오
웹 페이지의 가장 무거운 부분은 일반적으로 이미지 파일로 표시되지만 오디오 및 비디오 파일도 역할을합니다. 따라서 시각 자산을 최적화하는 것은 웹 사이트 성능에 중요합니다.
이 작업을 수행하려면 두 가지 측면이 포함됩니다
생산에 업로드하기 전에 자원에서 과도한 바이트를 압축하십시오. 당신을 도울 수있는 훌륭한 도구가 있습니다. TinypNG (래스터 이미지 (PNG, JPG 등) 및 Jake Archibald의 SSVGOMG (SVG 최적화)와 같은 온라인 도구를 확인하십시오. 또한 좋아하는 작업 러너 (Grunt, Gulp 등)와 같이 로컬로 설치할 수있는 도구를 고려하십시오.
결론
웹 사이트의 빠른 렌더링은 웹 사이트의 사용자 경험을 결정하는 데 중요한 요소입니다. 모바일 장치에서 웹 사용자 경험을 평가할 때 더욱 중요해집니다.
이 기사에서는 프론트 엔드 개발 관점에서 부트 스트랩 웹 사이트의 성능을 최적화하는 데 중요한 역할을하는 많은 기술을 나열합니다.
빠른로드 부트 스트랩 웹 사이트를 위해 어떤 프론트 엔드 최적화 기술이 있습니까? 의견에 알려주세요!
부트 스트랩의 기본 사항이 이미 있지만 부트 스트랩 기술을 다음 단계로 끌어 올리는 방법을 알고 싶다면 부트 스트랩의 힘에 대해 빠르고 쉽게 배우기 위해 Bootstrap 4 코스를 사용하여 첫 번째 웹 사이트 빌드를 확인하십시오.
부트 스트랩 웹 사이트 속도를 높이는 FAQ
내 부트 스트랩 웹 사이트가 느려질 수있는 이유는 무엇입니까?
부트 스트랩 웹 사이트가 느린 이유는 여러 가지가있을 수 있습니다. 가장 일반적인 이유 중 하나는 불필요한 구성 요소와 플러그인을 사용하기 때문입니다. 부트 스트랩에는 많은 구성 요소와 플러그인이 제공되며 사용하지 않으면 제거하는 것이 좋습니다. 또 다른 이유는 큰 이미지가 사용되기 때문일 수 있습니다. 큰 이미지는 웹 사이트의 속도를 크게 줄일 수 있습니다. 웹 사이트에 업로드하기 전에 이미지를 최적화하는 것이 좋습니다. 마지막으로 CSS 및 JavaScript 파일을 압축하지 않으면 웹 사이트 속도가 느려질 수 있습니다. 이러한 파일을 압축하면 웹 사이트의 속도가 크게 향상 될 수 있습니다.
더 나은 성능을 위해 부트 스트랩 웹 사이트를 최적화하는 방법은 무엇입니까?
더 나은 성능을 위해 부트 스트랩 웹 사이트를 최적화하는 여러 가지 방법이 있습니다. 먼저 불필요한 구성 요소와 플러그인을 제거해야합니다. 부트 스트랩에는 많은 구성 요소와 플러그인이 제공되며 사용하지 않으면 제거하는 것이 좋습니다. 둘째, 이미지를 웹 사이트에 업로드하기 전에 이미지를 최적화해야합니다. 큰 이미지는 웹 사이트의 속도를 크게 줄일 수 있습니다. 셋째, CSS 및 JavaScript 파일을 압축해야합니다. 이러한 파일을 압축하면 웹 사이트의 속도가 크게 향상 될 수 있습니다.
압축이란 무엇이며 웹 사이트 속도를 어떻게 증가 시키는가?
압축은 기능을 변경하지 않고 소스 코드에서 불필요한 문자 (예 : 공백 및 주석)를 제거하는 프로세스입니다. 이렇게하면 코드의 크기가 줄어들고 결과적으로 사용자에게 전송 해야하는 데이터의 양이 줄어서로드 시간을 가속화합니다.
내 CSS 및 JavaScript 파일을 압축하는 방법은 무엇입니까?
CSS 및 JavaScript 파일을 압축하는 데 사용할 수있는 몇 가지 온라인 도구가 있습니다. 이 도구는 코드에서 불필요한 문자를 제거하여 크기를 줄이고로드 시간을 증가시킵니다. 일부 인기있는 압축 도구에는 uglifyjs 용 javaScript 및 CSSNANO가 포함됩니다.
부트 스트랩 웹 사이트의 이미지를 최적화하는 방법은 무엇입니까?
부트 스트랩 웹 사이트의 이미지를 최적화하는 몇 가지 방법이 있습니다. 가장 효과적인 방법 중 하나는 이미지를 웹 사이트에 업로드하기 전에 이미지를 압축하는 것입니다. 품질을 크게 저하시키지 않고 이미지를 압축 할 수있는 몇 가지 온라인 도구가 있습니다. 이미지를 최적화하는 또 다른 방법은 올바른 이미지 형식을 사용하는 것입니다. 예를 들어, JPEG는 일반적으로 사진에 더 적합하지만 PNG는 투명한 배경을 가진 이미지에 더 적합합니다.
내 웹 사이트 속도를 늦출 수있는 특정 부트 스트랩 구성 요소는 무엇입니까?
예, 일부 부트 스트랩 구성 요소는 부적절하게 사용되면 웹 사이트 속도를 늦출 수 있습니다. 예를 들어, 큰 이미지를 사용하면 회전식 구성 요소가 웹 사이트 속도를 늦출 수 있습니다. 회전 목마에 사용하기 전에 이미지를 최적화하는 것이 좋습니다. 또한 모달 구성 요소가 각 페이지에로드되면 웹 사이트 속도가 느려질 수 있습니다. 필요한 페이지에서만 모달 구성 요소를로드하는 것이 좋습니다.
불필요한 부트 스트랩 구성 요소 및 플러그인을 제거하는 방법은 무엇입니까?
부트 스트랩 버전을 사용자 정의하여 불필요한 부트 스트랩 구성 요소와 플러그인을 제거 할 수 있습니다. 여기에는 소스 파일 다운로드, 원치 않는 구성 요소 및 플러그인 삭제, 나머지 파일을 사용자 정의 버전으로 컴파일하는 것이 포함됩니다.
CDN을 사용할 수 있습니까? 부트 스트랩 웹 사이트의 속도를 높일 수 있습니까?
내 부트 스트랩 웹 사이트에서 cdn을 사용하는 방법은 무엇입니까?
HTML 파일의 CDN의 부트 스트랩 파일에 링크하여 cdn과 bootstrap 웹 사이트를 사용할 수 있습니다. 여기에는 HTML 파일의 로컬 파일 경로를 CDN의 파일의 URL과 교체하는 것이 포함됩니다.
부트 스트랩 웹 사이트 속도를 높이기위한 다른 팁이 있습니까?
예, 부트 스트랩 웹 사이트 속도를 높이기위한 다른 팁이 있습니다. 예를 들어, 항상 JavaScript 파일을 HTML 파일 끝에 배치해야합니다. 이를 통해 페이지의 나머지 부분을 JavaScript 파일 전에로드 할 수 있으므로 인식 된로드 시간의 속도를 높입니다. 또한 JavaScript 파일에는 비동기로드를 사용해야합니다. 이를 통해 나머지 페이지를 차단하지 않고 파일이 백그라운드에서로드 할 수 있습니다.
키 포인트