[번역] HTML에 대한 10가지 모범사례
성능 및 SEO 개선을 위해
HTML에 대한 10 가지 모범 사례
성능 및 SEO 개선을 위해
원본 URL : https://medium.com/swlh/10-best-practices-for-html-542fb923b93
오늘날 Unsplash JavaScript 프레임 워크가 매주 나타나고 그 밖의 모든 것이 수시로 바뀌는 오늘날의 세상에서 사이트가 최적의 상태로 작동하는지 궁금해하기 쉽습니다. 어떤 관행을 지키고 무엇을 놓아야하는지 나는 사용하는 것이 implementation x 성능을 향상시키는 데 도움이 될 수 있다고 읽었지만 다른 스레드는 모든 비용을 피하는 것을 언급했다.
결국 콘텐츠를 구성하는 html을 사용하면 JavaScript 측면만큼 자주 변경되지는 않지만 작업이 훨씬 쉬워 지지만 여기에 언급 된 일부 (또는 대부분의 경우)가 간과되어 사이트를 심하게 손상시킬 수 있습니다. 그리고 하루가 끝나면 최종 사용자를 멀리합니다.그것에 들어가기 전에 https://developers.google.com/web/tools/lighthouse 와 다른 곳이든 상관없이 사이트를보고 하고 여기에 언급 된 모든 것을 적용 한 후 실제로 차이를 만드는 것을 잘 비교하십시오.
다음에 HTML을 작성할 때 명심해야 할 10 가지 모범 사례는 다음과 같습니다.
# 1 : 유효하고 읽을 수있는 DOM 작성
첫 번째는 다소 분명하게 들릴지 모르지만 여기에 언급 할 몇 가지 하위 항목이 있습니다. 여전히 여전히 이와 같은 문제가 발생합니다.
먼저 모두 소문자로 쓰십시오. 종종 기본 구조 는 전체 HTML 자체 와 같이 또는 더 나쁘게 대문자로 작성된 것을 봅니다 . 모든 태그는 소문자 여야하므로 HTML 태그에는 대문자를 사용하지 마십시오.
들여 쓰기는 가독성의 핵심입니다. 그걸 써. 그렇지 않으면 문서가 평평하게 보이고 문서의 모든 것이 복잡해 보일 것입니다. 가독성을 높이면 개발 시간이 단축됩니다.
자동 닫기 태그 닫기 는 한 번 필수 였지만 HTML5에서는 선택 사항이며 순전히 개발자에게 달려 있습니다. 모든 태그에 사용하거나 전혀 사용하지 마십시오. 여기서 핵심은 일관성입니다. 물론 일반 태그를 닫는 것을 잊지 마십시오.
주석을 과도하게 사용하지 마십시오. 빌드 시스템을 사용하지 않거나 템플릿 엔진을 사용하지 않는 한, html 파일의 무게를 실제로 증가시키고 증가시켜 초기 페이지로드 속도를 느리게하고 사용자를 기다리게하고 결국에는 떠나게 할 수 있습니다.
DOM 구성 : 추가 div 또는 추가 요소가 필요한 경우 항상 필요한 요소 만 만들고 페이지의 큰 부분 만 div가 아닌 의미있는 html 요소로 나누십시오. 다른 곳에서도 마찬가지입니다. 가능하면 html5 시맨틱 요소를 사용하면 검색 엔진이 페이지에서 어떤 부분이 중요하고 어떤 부분이 중요하지 않은지 알 수 있습니다. 여분의 div가 정말로 필요한지 항상 묻고 초과분을 제거하십시오.
# 2 : 인라인 스타일과 스크립트를 사용하지 마십시오
그렇지 않으면 문서가 빠르게 복잡해져 읽을 수 없게됩니다. 항상 외부 스타일 시트를 사용하십시오. 또한
import 추가 서버 요청을 생성하므로 CSS 파일에서 명령문을 사용하지 마십시오.
또한 요청 수를 줄이거 나 번들 크기가 큰 경우 도메인 샤딩을 활용하여 2 ~ 4 개의 작은 청크로 분할 할 수 있습니다.
인라인 CSS와 마찬가지로 인라인 JavaScript도 마찬가지입니다. 가독성 문제 외에도 문서를 더 무겁고 유지하기가 어렵습니다.
# 3 : 인라인 크리티컬 CSS
방금 CSS를 인라인해서는 안되는 이유에 대해 논의했습니다. 이제 왜해야하는지에 대해 논의하겠습니다. 중요한 CSS를 맨 위에 배치하십시오. 이렇게하면 사용자가 페이지의 첫 부분이 더 빨리 렌더링되는 것을 볼 수 있습니다. 인라인 중요한 CSS 만 있으면 됩니다.
중요 CSS는 사용자가 사이트를 방문 할 때 처음 보게되는 페이지 상단을 렌더링하는 데 필요한 최소 CSS 집합을 나타냅니다.
Critical CSS is also reffered to as “above the fold” CSS중요 CSS는 또한 "접은 곳의 위쪽"CSS라고합니다.또한 링크 태그의 순서에 따라 규칙을 다시 작성할 수 있으므로주의해서 배치하십시오. 재설정 또는 타사 라이브러리에 대한 별도의 파일이있는 경우 먼저 파일을 배치 한 다음 나머지를 배치하십시오.
# 4 : 스크립트 태그를 맨 아래에 배치
문서 하단에 스크립트 태그를 배치하십시오. 공식적으로 스크립트 태그는 헤드 내부에 존재하지만 본문의 닫기 태그 전에 문서의 맨 아래에 배치하면 다운로드가 지연되고 문서가 먼저 DOM에로드되어 사용자에게 표시되도록 할 수 있습니다 그런 다음 스크립트를 요청하십시오.
브라우저는 문서를 위에서 아래로 한 줄씩 해석하기 때문에 이와 같이 작동합니다. 가에 도달 할 때 head 와 스크립트 태그를 통해 제공, 파일을 얻을 수있는 서버에 요청을 시작합니다.
큰 페이지 인 경우 계속로드되며 헤드를 계속로드하므로 빈 페이지 만 표시되므로 맨 아래로 이동하십시오.
이런 식으로 스크립트 태그의 내용을로드하기 전에 본문의 모든 내용이로드되므로 사용자가 페이지가 빠르게로드되고 있다고 믿도록 속일 수 있습니다.
html이 먼저 로드되도록 스크립트 태그에 defer 추가 할 수도 있습니다
defer 속성의 기능을 이해하려면 다음 비교를 살펴보십시오.
# 5 : 접근성 관리
WHO에 따르면 전 세계 인구의 15 % 가 어떤 종류의 장애를 겪고 있다는 것을 알고 있습니까? 그 10 억 이상 가능성이 귀하의 사이트를 사용하여 문제가있을 수있는 사람 입니다. 요즘 우리는 사이트에서 많은 상호 작용이 진행되어 접근성이 손쉬워졌습니다. 복잡한 aria기술에 대한 지원을 되찾고 더 많은 청중에게 다가 갈 수 있도록 몇 가지 속성으로 복잡한 UI 요소를 장식하는 데 시간을 투자하십시오 . 접근성에 대한 자세한 내용은 https://medium.com/swlh/why-accessibility-matters-aec371eb5e4a 여기를 참조하십시오 .
# 6 : 이미지에 alt 태그 사용
alt 태그는 이미지의 대체 텍스트를 지정하므로 어떤 이유로 든 표시 할 수없는 경우이 텍스트가 대신 표시됩니다. 검색 엔진은 이미지에 대한 대체 태그가 누락되어 마음에 들지 않으며 결과적으로 페이지 순위를 낮출 수 있습니다.
# 7 : 페이지 당 하나의 h1
블로그 게시물이나 기사 제목과 같이 페이지의 내용을 설명하는 가장 중요한 텍스트를 페이지 당 h1 하나만 사용하십시오
페이지 당 여러 개의 h1 태그를 사용하는 것이 좋은 생각은 아니며 검색 엔진 결과를 손상시킬 수 있으므로 권장하지 않습니다.
이를 통해 검색 엔진이 사이트를 올바르게 색인 할 수 있습니다.
또한 W3C 사양에 정의되어 있으며 페이지 내용은 단일 태그로 설명해야합니다.
따라서 페이지 당 h1 하나씩 유지 하십시오.
# 8 : 제목 및 메타 태그 사용
페이지 제목과 적절한 설명 메타 태그를 사용하십시오. 이들은 지역 검색 엔진 담당자가 선택하여 사이트 색인을 생성하는 데 사용되므로 유용한 정보를 제공하여 도와주십시오. 기기의 화면 크기에 따라 사이트가 표시되도록 항상 메타 뷰포트 태그를 사용하십시오. 또한 https://ogp.me/ 오픈 그래프 태그를 사용하여 소셜 미디어 플랫폼에서 웹 사이트 링크를 리치 컨텐츠로 전환하십시오.
# 9 : 압축
모든 작업을 마치고 사이트를 라이브로 만들 준비가되면 압축하십시오. https://www.npmjs.com/package/html-minifier 타사 라이브러리 , 특수 프로그램 또는 https://webpack.js.org/ 빌드 도구 또는 https://www.willpeavy.com/tools/minifier/ 온라인 응용 프로그램 이라고 하는 도구를 사용할 수 있습니다 . 문서가 작게 만들어 페이지로드 속도가 빨라집니다. 이 단계를 더 진행하려면 서버 측에서 brotli 또는 gzip 압축을 활성화하십시오. 페이지 속도에 큰 영향을 줄 수 있습니다.
# 10 : HTML 확인
마지막으로 항상 HTML의 유효성을 검사하십시오. 검증자는 결함이나 잘못된 코드를 찾아내어이를 제거 할 수 있습니다. 예를 들어 https://validator.w3.org/ w3c 유효성 검사기 를 사용할 수 있습니다. 사이트를 게시하기 전에 URL로 사이트를 확인하거나 업로드하여 직접 입력하거나 직접 입력하여 확인할 수도 있습니다.
이보다 더 좋은 방법은 코드를 커밋하기 전에 자동으로 그러한 문제를 확인하는 린터를 배치 할 수 있다는 것입니다.
이 10 가지 간단한 단계를 따르면 HTML 게임을 강화하고 사이트 순위를 높이고 더 많은 트래픽을 발생시키는 동시에 최적화 단계에서 더 빠르게 만들어 사용자 상호 작용을 유도 할 수 있습니다. 결국, 그것은 당신에게 더 많은 방문자를 부여 할뿐만 아니라 더 많은 행복한 방문자를 부여 할 것이며 가장 중요합니다.
(아래 URL 은 광고 입니다 도움이 되셨다고 생각하시면 클릭해주세요)
손세정제 추천 https://coupa.ng/bwI56b
