수집할 가치가 있는 9가지 프런트엔드 최적화 팁(웹 성능 향상)-프런트엔드 Q&A-php.cn

수집할 가치가 있는 9가지 프런트엔드 최적화 팁(웹 성능 향상)

오늘날의 디지털 세상에는 매일 다양한 이유로 방문을 처리해야 하는 수많은 웹사이트가 있습니다. 그러나 이러한 사이트 중 다수는 투박하고 사용하기 번거로운 것으로 보입니다. 제대로 최적화되지 않은 웹사이트는 로딩 시간, 모바일 장치 지원 부족, 브라우저 호환성 문제 등 다양한 문제로 어려움을 겪을 수 있습니다.

이 기사에서는 프런트 엔드를 개선하고 최적화하는 데 도움이 될 수 있는 기술에 대해 설명합니다. 이는 매우 유용합니다. 주요 내용으로는 코드 정리, 이미지 압축, 외부 리소스 압축, 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를 사용할 때 사람들은 일반적으로 비동기 스크립트 로딩을 선호합니다. 이렇게 하면

저자별 최신 기사