수집할 가치가 있는 9가지 프런트엔드 최적화 팁(웹 성능 향상)
- 青灯夜游앞으로
- 2020-07-14 16:35:573410검색
오늘날의 디지털 세상에는 매일 다양한 이유로 방문을 처리해야 하는 수많은 웹사이트가 있습니다. 그러나 이러한 사이트 중 다수는 투박하고 사용하기 번거로운 것으로 보입니다. 제대로 최적화되지 않은 웹사이트는 로딩 시간, 모바일 장치 지원 부족, 브라우저 호환성 문제 등 다양한 문제로 어려움을 겪을 수 있습니다.
이 기사에서는 프런트 엔드를 개선하고 최적화하는 데 도움이 될 수 있는 기술에 대해 설명합니다. 이는 매우 유용합니다. 주요 내용으로는 코드 정리, 이미지 압축, 외부 리소스 압축, CDN 사용 등의 방법이 있습니다. 이러한 방법을 사용하면 웹 사이트의 속도가 크게 향상되고 전반적인 성능이 향상됩니다.
1. HTML 문서 정리
HTML(Hypertext Markup Language)은 거의 모든 웹사이트의 중추입니다. HTML은 제목, 부제, 목록 및 기타 문서 구조의 형식을 웹 페이지에 가져옵니다. 최근 HTML5 업데이트에서는 차트 작성도 가능해졌습니다.
HTML은 웹 크롤러에서 쉽게 인식되므로 검색 엔진은 웹 사이트의 콘텐츠를 어느 정도 기반으로 실시간 업데이트할 수 있습니다. HTML을 작성할 때 간결하면서도 효과적으로 작성하도록 노력해야 합니다. 또한 HTML 문서에서 외부 리소스를 참조할 때 따라야 할 몇 가지 모범 사례가 있습니다.
CSS를 적절하게 배치하세요
웹 디자이너는 웹 페이지의 기본 HTML 뼈대를 구축한 후 스타일 시트를 만드는 것을 좋아합니다. 결과적으로 웹 페이지의 스타일 시트는 HTML 뒤, 즉 문서 끝 부분에 배치되는 경우가 많습니다. 그러나 권장되는 접근 방식은 일반적인 렌더링을 보장하기 위해 문서 헤더 내 HTML 상단에 CSS를 배치하는 것입니다.
<head> </head>
이 전략은 사이트의 로딩 속도를 향상시키지는 않지만 방문자가 빈 화면이나 서식 없는 텍스트(FOUT)를 보면서 오랜 시간 기다리게 만들지는 않습니다. 웹 페이지의 눈에 보이는 요소 대부분이 이미 로드된 경우 방문자는 전체 페이지가 로드될 때까지 기다릴 가능성이 높으므로 프런트 엔드가 최적화됩니다. 이것이 지각적 성능이다.
프런트엔드를 배우고 싶다면 이 그룹에 오시면 됩니다. 첫 번째는 291, 중간은 851, 마지막은 189입니다. 그 안에서 배우고 소통할 수 있으며 학습도 많이 있습니다. 다운로드할 수 있는 자료입니다.
Javascript를 올바르게 배치하세요
반면에 JavaScript를 head 태그 내부나 HTML 문서 상단에 배치하면 HTML 및 CSS 요소의 로딩 프로세스가 차단됩니다. 이 오류로 인해 페이지 로딩 시간이 늘어나고, 사용자의 대기 시간이 늘어나며, 사람들이 쉽게 초조함을 느끼고 웹 사이트 방문을 포기하게 됩니다. 그러나 HTML 하단에 JavaScript 속성을 배치하면 이 문제를 피할 수 있습니다.
또한 JavaScript를 사용할 때 사람들은 일반적으로 비동기 스크립트 로딩을 선호합니다. 이렇게 하면 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 HTML(예: 문서 중간)에 렌더링되는 것을 방지할 수 있습니다.
HTML은 웹 디자이너가 사용할 수 있는 가장 중요한 도구 중 하나이지만 CSS 및 JavaScript와 함께 사용되는 경우가 많아 웹 탐색 속도가 느려질 수 있습니다. CSS와 JavaScript는 웹 페이지 최적화에 도움이 되지만, 사용할 때 주의해야 할 몇 가지 문제가 있습니다. CSS 및 JavaScript를 사용할 때는 삽입 코드를 피하세요. 코드를 삽입할 때 스타일 태그에 CSS를 배치하고 스크립트 태그에 JavaScript를 사용하면 페이지를 새로 고칠 때마다 로드해야 하는 HTML 코드의 양이 늘어나기 때문입니다.
파일을 바인딩하시나요? 걱정하지 마세요
과거에는 HTML 코드에서 외부 파일을 참조하기 위해 CSS 스크립트를 단일 파일에 자주 바인딩했을 수도 있습니다. 이는 HTTP1.1 프로토콜을 사용할 때 합리적인 관행이지만 이 프로토콜은 더 이상 필요하지 않습니다.
HTTP/2 덕분에 이제 멀티플렉싱 기술을 사용하여 단일 TCP 연결을 통해 HTTP 요청과 응답을 비동기적으로 보내고 받을 수 있습니다.
이미지 출처: http://qnimate.com
이는 더 이상 여러 스크립트를 단일 파일에 자주 바인딩할 필요가 없음을 의미합니다.
2. CSS 성능 최적화
CSS(Cascading Style Sheet)는 HTML에 설명된 콘텐츠에서 전문적이고 깔끔한 파일을 생성할 수 있습니다. 많은 CSS는 HTTP 요청을 통해 가져와야 하므로(인라인 CSS를 사용하지 않는 한) 중복된 CSS 파일을 제거하기 위해 열심히 노력해야 하지만 중요한 기능은 유지하도록 주의하세요.
배너, 플러그인 및 레이아웃 스타일이 CSS를 사용하여 다른 파일에 저장되면 방문자의 브라우저는 방문할 때마다 많은 파일을 로드합니다. 이제 HTTP/2의 존재로 인해 이 문제의 발생이 줄어들었지만 여전히 외부 리소스를 로드할 때 시간이 오래 걸립니다. HTTP 요청을 줄여 로드 시간을 대폭 개선하는 방법을 알아보려면 WordPress 성능을 읽어보세요.
또한 많은 웹마스터가 외부 스타일 시트를 도입하기 위해 웹 페이지에서 @import 지시문을 실수로 사용합니다. 이는 병렬 다운로드 탐색을 차단하는 오래된 방법입니다. 링크 태그는 최선의 선택이며 웹 사이트의 프런트 엔드 성능도 향상시킬 수 있습니다. 참고로 링크 태그 요청을 통해 로드된 외부 스타일시트는 병렬 다운로드를 방해하지 않습니다.
3. 외부 HTTP 요청 줄이기
많은 경우 웹사이트 로딩 시간의 대부분은 외부 HTTP 요청에서 발생합니다. 외부 리소스의 로딩 속도는 호스팅 제공업체의 서버 아키텍처, 위치 등에 따라 다릅니다. 외부 요청을 줄이는 첫 번째 단계는 웹사이트를 간략하게 검사하는 것입니다. 웹사이트의 모든 구성 요소를 연구하고 방문자의 경험을 방해하는 모든 요소를 제거하십시오. 이러한 구성 요소는 다음과 같습니다.
불필요한 이미지
쓸모 없는 JavaScript 코드
과도한 CSS
불필요한 플러그인
이러한 불필요한 구성 요소를 제거한 후 압축 도구, CDN 서비스 및 프리페치(프리페치)와 같은 나머지 콘텐츠를 구성합니다. ) 등은 HTTP 요청을 관리하기 위한 최선의 선택입니다. 또한 DNS 경로 조회 줄이기 튜토리얼에서는 외부 HTTP 요청을 줄이는 방법을 단계별로 알려줍니다.
4. CSS, JS 및 HTML 압축
압축 기술은 파일에서 불필요한 문자를 제거할 수 있습니다. 편집기에서 코드를 작성할 때 들여쓰기와 주석을 사용하면 의심할 여지 없이 코드가 간결해지고 읽기 쉬워지지만 문서에 추가 바이트도 추가됩니다.
예를 들어 압축 전의 코드 조각입니다. product_item p a {
color: #000;padding: 10px 0px 0px 0;margin-bottom: 5px;border-bottom: none;}이 코드를 압축하면 다음과 같습니다. .
.entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}
압축 도구를 사용하면 CSS, JS 및 HTML 파일에서 쓸모 없는 바이트를 매우 쉽게 잘라낼 수 있습니다. 압축에 대한 자세한 내용은 CSS, JS 및 HTML을 압축하는 방법을 참조하세요.
5. 프리페칭 사용
프리페치는 필요한 리소스와 관련 데이터가 실제로 필요하기 전에 확보하여 방문 사용자의 탐색 경험을 향상시킬 수 있습니다.
링크 프리페칭 획득.
DNS 프리페치
프리렌더 현재 웹페이지를 떠나기 전에 프리페치 방법을 사용하면 각 링크에 해당하는 URL 주소, CSS, 이미지 및 스크립트가 프리페치됩니다. 이를 통해 방문자는 링크를 사용하여 가능한 가장 짧은 시간에 화면 간을 전환할 수 있습니다. 다행히 프리페치는 쉽게 할 수 있습니다. 사용하려는 프리페치 형식에 따라 웹 사이트 HTML의 링크 속성에 rel=”prefetch”, rel=”dns-prefetch” 또는 rel=”prerender” 태그를 추가하기만 하면 됩니다.
프런트엔드를 배우고 싶다면 이 그룹에 오시면 됩니다. 첫 번째는 291, 중간은 851, 마지막은 189입니다. 그 안에서 배우고 소통할 수 있으며 학습도 많이 있습니다. 다운로드할 수 있는 자료입니다. 
CDN은 리소스 배포 시간을 크게 향상시키는 동시에 브라우저 캐시 활용과 같은 다른 캐싱 기술도 구현할 수 있습니다.
브라우저 캐시를 적절하게 설정하면 브라우저가 특정 파일을 자동으로 저장하여 전송 속도를 높일 수 있습니다. 이 방법의 구성은 원본 서버의 구성 파일에서 직접 수행할 수 있습니다.
캐시 정의에서 캐싱과 다양한 유형의 캐싱 방법에 대해 자세히 알아보세요. 7. 파일 압축
많은 CDN 서비스가 파일을 압축할 수 있지만 CDN을 사용하지 않는 경우 원본 서버에서 파일 압축 방법을 사용하여 프런트엔드 최적화를 개선하는 것도 고려할 수 있습니다. 파일 압축을 사용하면 웹 사이트 콘텐츠를 가볍고 관리하기 쉽게 만들 수 있습니다. 가장 일반적으로 사용되는 파일 압축 방법 중 하나는 Gzip입니다. 이는 문서, 오디오 파일, PNG 이미지 및 기타 대용량 파일을 축소하는 좋은 방법입니다.
Brotli는 점점 인기를 얻고 있는 비교적 새로운 파일 압축 알고리즘입니다. 이 오픈 소스 알고리즘은 Google 및 기타 조직의 소프트웨어 엔지니어에 의해 정기적으로 업데이트되며 기존의 다른 압축 방법보다 더 잘 작동하는 것으로 입증되었습니다. 이 알고리즘에 대한 지원은 현재 상대적으로 적지만 떠오르는 스타로서 곧 다가올 것입니다.
자세한 내용은 Brotli 압축에 대한 전체 기사를 읽어보세요.
프런트 엔드 최적화를 이해하지 못하는 사람들에게는 이미지가 "웹사이트 킬러"일 수 있습니다. 많은 수의 사진 앨범과 대용량 고화질 사진은 웹 페이지의 렌더링 속도를 방해합니다. 최적화되지 않은 HD 이미지의 크기는 수 메가바이트(MB)일 수 있습니다. 따라서 적절하게 최적화하면 웹 페이지의 프런트 엔드 성능을 향상시킬 수 있습니다.
모든 이미지 파일에는 순수한 사진이나 그림과 관련이 없는 일부 정보가 포함되어 있습니다. 예를 들어 JPEG 이미지에는 날짜, 위치, 카메라 모델 및 기타 관련 없는 정보가 포함되어 있습니다. Optimus와 같은 일부 최적화 도구를 사용하여 중복된 이미지 데이터를 제거하고 긴 이미지 로딩 프로세스를 간소화할 수 있습니다. Optimus는 무손실 이미지 압축 도구이므로 이미지 품질에는 영향을 주지 않고 이미지 볼륨만 압축합니다.
또한 사진을 더욱 최적화하려는 경우
손실 압축을 사용할 수 있습니다. 손실 압축을 사용하면 사진의 일부 데이터가 삭제되어 품질이 저하됩니다.
손실 압축과 무손실 압축의 차이점에 대해 자세히 알아보려면 전체 튜토리얼을 읽어보세요.
9. 경량 프레임워크 사용
기존 코딩 지식만 사용하여 웹사이트를 구축하는 것이 아니라면 좋은 프런트엔드 프레임워크를 사용하여 불필요한 프런트엔드 최적화 실수를 많이 피할 수 있습니다. 더 많은 기능과 옵션을 제공하는 더 크고 잘 알려진 프레임워크가 있지만 이러한 프레임워크가 웹 프로젝트에 반드시 적합하지는 않을 수 있습니다.
따라서 프로젝트에 필요한 기능을 결정하는 것뿐만 아니라 올바른 프레임워크를 선택하는 것도 중요합니다. 경량을 유지하면서 필요한 기능을 제공해야 합니다. 요즘 많은 프레임워크에서는 간결한 HTML, CSS 및 JavaScript 코드를 사용합니다.
다음은 읽기 속도를 높일 수 있는 몇 가지 경량 프레임워크입니다.
Pure
Skeleton
Milligram
Frameworks는 웹 디자인, 프로그래밍 및 유지 관리를 대체할 수 없습니다. 간단한 예로, 그 틀이 새 집이라고 가정해 봅시다. 집은 깨끗하고 정돈되어 있었지만 텅 비어 있었습니다. 가구, 가전제품, 장식품을 추가할 때 집이 어수선해지지 않도록 하는 것은 귀하의 책임입니다. 마찬가지로, 프레임워크를 사용할 때 중복된 코드, 큰 이미지, 너무 많은 HTTP 요청으로 인해 프레임워크가 손상되지 않도록 하는 것은 귀하의 책임입니다.
프런트 엔드 최적화 – 요약
프론트 엔드 최적화에는 많은 노력이 필요한 것 같습니다. 이 애플리케이션 가이드의 몇 가지 팁이 웹 사이트의 로딩 속도를 크게 향상시키는 데 도움이 될 수 있습니다. 웹사이트가 더 빨리 로드될수록 사용자 경험은 더 좋아질 것입니다. 따라서 프런트 엔드를 최적화하면 귀하와 사용자 모두에게 이익이 될 수 있습니다. 그 밖에도 좋은 최적화 방법이 있다면 댓글란에 소중한 제안을 남겨주세요.
이 기사는 https://blog.csdn.net/lin123_00/article/details/106652145
에서 복제되었습니다. 더 많은 관련 지식을 보려면 PHP 중국어 웹사이트를 방문하세요!
위 내용은 수집할 가치가 있는 9가지 프런트엔드 최적화 팁(웹 성능 향상)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!