간단한 두 단계로 웹사이트 성능을 향상하세요

그래서 당신은 더 나은 성능의 웹사이트를 원합니다. 가장 기본적인 수준에서는 검색 엔진이 웹페이지의 본문 콘텐츠에 가능한 한 빨리 액세스할 수 있고 페이지가 빠르게 로드되는지 확인해야 합니다.

즉, 이러한 요구 사항을 모두 충족하는 데 도움이 될 수 있는 두 가지 간단한 SEO 모범 사례가 있으며, 이는 다음과 같습니다.

1. CSS 외부화(계단식 스타일 시트)
2. JavaScript 외부화

이 글에서는 그 이유를 설명하고 시작하기 위한 몇 가지 간단한 단계를 제시하겠습니다.

• CSS란 무엇입니까?
• 자바스크립트란 무엇입니까?
• Javascript와 CSS를 외부화하는 이유는 무엇입니까?
• JavaScript와 CSS가 이미 외부화되어 있나요?
• 자바스크립트를 외부화하는 방법
• CSS를 외부화하는 방법
• 작은 발걸음, 큰 영향력
• FAQ: CSS 및 JavaScript와 관련된 간단한 두 단계를 사용하여 웹사이트 성능을 어떻게 향상시킬 수 있습니까?

CSS란 무엇입니까?

CSS(Cascading Style Sheets)는 웹사이트의 모양과 느낌(예: 글꼴, 색상)을 만들기 위해 웹페이지에 HTML 코드를 표시하는 방법을 설명합니다.

자바스크립트란 무엇입니까?

JavaScript는 검색창, 오디오 및 비디오, 지도 등 웹페이지에서 상호작용을 가능하게 하는 프로그래밍 언어입니다.

JavaScript와 CSS를 외부화하는 이유는 무엇입니까?

귀하의 웹사이트 코드가 검색 엔진 친화적이기를 원합니다. 따라서 기본 코드를 사용하면 검색 엔진 스파이더가 웹페이지의 내용을 쉽게 크롤링하고 이해할 수 있는지 확인해야 합니다.

검색 엔진이 검색어의 관련성을 판단할 수 있도록 하려면 이러한 작업이 필요합니다. 검색 엔진이 가장 먼저 크롤링해야 하는 것 중 하나는 불필요한 코드 줄이 아니라 웹페이지의 본문 콘텐츠입니다.

당신은 또한 당신의 웹 사이트가 빠르기를 원합니다. Google과 같은 검색 엔진은 사용자 경험을 위한 웹페이지 성능에 너무 많은 관심을 기울이기 때문에 이에 대한 순위 신호를 포함하는 페이지 경험 알고리즘 업데이트를 출시했습니다.

CSS와 JavaScript 모두 웹페이지를 복잡하게 만들어 로드 속도를 느리게 만들고 검색 엔진이 크롤링하기 어렵게 만들 수 있습니다. 웹페이지의 실제 본문 콘텐츠에 코드의 처음 100줄만 액세스할 수 있기를 원합니다.

이러한 파일을 외부화하는 것은 방금 언급한 문제를 해결하는 쉬운 방법입니다. 이렇게 하면 페이지 로드 시간이 빨라지고 순위를 크게 높이며 크롤링 예산을 절약할 수 있습니다.

CSS 외부화의 이점

외부 CSS 파일을 만들면 한 곳에서 웹 사이트의 모양을 제어할 수 있으므로 변경하려는 경우 웹 사이트의 모든 단일 페이지를 편집하는 것보다 훨씬 더 효율적입니다.

CSS 파일이 있는 경우 외부 파일만 변경하면 해당 변경 사항이 전체 사이트에 적용됩니다.

외부 CSS 파일을 사용하면 다른 이점도 있습니다. 글꼴 태그와 같은 인라인 서식을 제거하고 적용할 스타일을 지시하는 CSS 태그로 바꿀 수 있습니다. 결과적으로 웹페이지를 복잡하게 만드는 코드가 줄어듭니다.

코드가 적다는 것은 파일 크기가 더 작다는 것을 의미합니다. 파일 크기가 작을수록 웹페이지 로드 속도가 빨라집니다.

JavaScript 외부화의 이점

JavaScript용 외부 파일을 생성하면 비슷한 이점이 있습니다. JavaScript를 개별 웹페이지에서 외부 파일로 옮기면 웹페이지에는 정보를 얻기 위해 JavaScript 파일을 호출하는 코드 한 줄만 있으면 됩니다.

JavaScript는 길고 번거로운 경향이 있으므로 이 간단한 작업 하나만으로 웹페이지 크기를 절반으로 줄일 수 있습니다.

귀하의 JavaScript 및 CSS가 이미 외부화되어 있나요?

CSS와 JavaScript가 외부화되었는지 쉽게 확인할 수 있습니다. 귀하의 웹사이트 홈페이지로 이동하여 소스 코드를 살펴보세요. 소스를 보려면 페이지를 마우스 오른쪽 버튼으로 클릭하고 "페이지 소스 보기"를 선택하세요.

다음은 웹페이지에 있는 외부화되지 않은 JavaScript의 코드 샘플 예입니다.

<스크립트 언어=”자바스크립트”>

var _pn="귀하의+무과실+권리"; //페이지 이름

var _mlc=”아니요+결함+조언”; //다단계 콘텐츠 카테고리

var _cp=”널”; //운동

var _acct=”WE531126G4MC09EN3”; //계좌번호

var _pndef="제목"; //기본 페이지 이름

var _ctdef=”가득”; //기본 콘텐츠 카테고리

var _prc=""; //상거래 가격

var _oid=""; //상거래 주문

var _dlf=""; //필터 다운로드

var _elf=""; //링크 필터 종료

var _epg=""; //이벤트 페이지 식별자

</script>

이는 JavaScript가 페이지 코드에서 귀중한 공간을 어떻게 차지할 수 있는지 보여주는 샘플일 뿐입니다. 웹사이트에 외부화되어야 하는 JavaScript 줄이 많이(30개 이상) 있는 것은 정상입니다.

또는 외부 JavaScript 파일의 모습은 다음과 같습니다.

<스크립트 유형=”text/javascript” src=”/sample.js”></script>

다음은 외부화되지 않은 스타일 시트의 예입니다.

.content { 지우기: 왼쪽;

배경색: #ffffff;

배경 이미지: URL(“/images/movie_reel2.jpg”); /* 작은 릴 */

/* 배경 이미지: URL(“/images/movie_reel.JPG”); 대형 릴 */

배경 위치: 100% 100%; /* 오른쪽 하단 */

background-repeat: 반복하지 않음;

테두리: 2px 솔리드 #666666;

border-style: 솔리드 솔리드 없음 솔리드;

패딩: .5em 1em 1em 1em;

여백-하단: 0em;

여백 상단: 0em;

텍스트 정렬: 왼쪽;

}

h1 {

글꼴 모음: Georgia, Times New Roman, Times, sans-serif;

글꼴 크기: 18px;

글꼴 스타일: 기울임체;

글꼴 두께: 굵게;

색상: #003399;

텍스트 정렬: 중앙;

}

웹사이트에서는 CSS를 웹사이트 내의 여러 페이지에서 호출할 단일 파일에 포함하는 대신 웹페이지에 하드코딩하는 것이 일반적입니다.

외부 CSS 파일의 모습은 다음과 같습니다.

<link rel=”스타일시트” href=”styles.css”>

JavaScript를 외부화하는 방법

가장 먼저 언급해야 할 점은 정확한 추적이나 페이지 기능 등을 위해 웹페이지에 JavaScript 코드가 필요한 경우가 있다는 것입니다.

추적 및 기능 외에도 모든 JavaScript 코드가 페이지 속도에 해로운 것은 아니므로 외부화해야 합니다.

실제로 어떤 경우에는 인라인 JavaScript를 사용하면 페이지 로드 시간과 성능이 향상될 수 있습니다. 예를 들어 JavaScript가 페이지 렌더링을 차단하는 경우가 있습니다.

페이지 상단에서 인라인 JavaScript를 사용하면 대용량 JavaScript 파일이 로드될 때까지 기다리지 않고도 페이지 상단의 콘텐츠가 사용자에게 표시될 수 있습니다.

JavaScript를 외부화하는 방법은 다음과 같습니다.

1. 웹페이지의 HTML 소스 코드에서 열기 및 닫기 <script> 태그를 찾아 외부화하려는 JavaScript 코드를 식별합니다.
2. <script>와 </script> 사이에 있는 자바스크립트 코드를 잘라냅니다.
3. 메모장과 같은 텍스트 편집기를 사용하여 새 문서를 만들고 JS 코드를 새 빈 문서에 붙여넣습니다.
4. 파일 확장자 ".js"로 파일을 저장합니다.
5. 파일을 서버에 업로드하고 해당 경로를 기록해 두십시오.
6. 원본 HTML 파일로 돌아가서 다음을 삽입합니다. 여기서 "path/filesource.js"는 새로 생성된 .js 파일의 URL입니다.
   <스크립트 언어=”자바스크립트” src=”path/filesource.js”></script>
7. 이제 포함된 JavaScript 코드가 단 한 줄로 대체됩니다.

검색 엔진이 웹페이지를 크롤링할 때 페이지의 나머지 부분으로 이동하기 전에 읽을 수 있는 코드는 단 한 줄뿐입니다.

이후 이는 Google의 페이지 경험 알고리즘 업데이트, 특히 첫 번째 입력 지연에 도움이 될 수 있습니다. (FID는 2024년 3월 INP(Interaction to Next Paint)로 대체됩니다.)

CSS를 외부화하는 방법

스타일 시트를 외부화하려면 파일을 .css 파일 확장자로 저장하는 것을 제외하고 JavaScript 파일과 동일한 지침을 따르기만 하면 됩니다. 원본 웹페이지 코드에서 모든 CSS 코딩을 다음으로 대체합니다.

<link href=”cssfilename” rel=”stylesheet” type=”text/css”>

다시 한 번 원본 페이지에 한 줄의 코드만 남게 되어 스파이더에 대한 사이트 색인 생성이 더 간단해집니다.

작은 발걸음, 큰 영향력

JavaScript와 CSS를 외부화해도 웹 사이트 성능 문제가 해결되지는 않지만 좋은 시작입니다.

우리와 협력한 한 고객은 이 두 가지 모범 사례를 구현하여 20,000줄의 코드를 1,500줄로 줄였습니다. 이후 웹사이트의 순위가 크게 향상되었으며 많은 키워드에 대한 자연 검색 결과 상위권에 올랐습니다.

그렇습니다. 웹 페이지의 성능을 향상시킬 때 효과적이며 시작하기에 좋은 곳입니다.

웹사이트 속도와 검색 순위를 높이는 데 도움이 필요하십니까? 무료 상담을 원하시면 연락주세요.

FAQ: CSS 및 JavaScript와 관련된 간단한 두 단계를 사용하여 웹사이트 성능을 어떻게 향상시킬 수 있습니까?

웹 사이트 성능을 최적화하는 것은 웹 개발의 역동적인 환경에서 사용자 만족도와 검색 엔진 순위를 위해 매우 중요합니다. CSS와 JavaScript를 효과적으로 활용하면 사이트의 속도와 기능을 크게 향상시킬 수 있습니다. 웹사이트 성능을 향상시킬 수 있는 간단하면서도 강력한 두 가지 기술을 살펴보겠습니다.

CSS 및 JavaScript 파일 축소 및 연결

웹사이트 속도를 최적화하려면 파일 크기를 줄이는 것이 가장 중요합니다. 여러 CSS 또는 JavaScript 파일을 하나로 결합하면 HTTP 요청이 최소화되어 로드 시간이 향상됩니다. 축소는 코드 기능을 변경하지 않고 불필요한 문자(공백, 주석)를 제거합니다.

통찰력 있는 팁: 자동화된 축소 및 연결 프로세스를 위해 Grunt 또는 Gulp와 같은 빌드 도구를 사용하십시오. 더 빠른 파일 전송을 위해 CDN(콘텐츠 전송 네트워크) 사용을 고려해보세요.

중요하지 않은 리소스에 대한 지연 로딩 구현

지연 로딩은 필요할 때까지 필수적이지 않은 리소스의 로딩을 연기합니다. 예를 들어, 접힌 부분 아래의 이미지나 보조 JavaScript를 비동기식으로 로드하여 초기 페이지 로드 속도를 높일 수 있습니다.

통찰력 있는 팁: 이미지의 `loading="lazy"` 속성을 활용하여 브라우저가 뷰포트에 들어올 때만 이미지를 로드하도록 지시하여 사용자 경험과 로드 시간을 최적화합니다.

구매자 의도 검색어 및 역할

구매자 의도 검색어를 이해하는 것은 효과적인 최적화를 위해 매우 중요합니다. "웹사이트 속도 향상 기술", "CSS 및 JavaScript 최적화" 또는 "지연 로딩 구현"과 같은 용어는 웹사이트 성능을 향상시키려는 사용자의 의도를 보여줍니다. 이러한 용어를 콘텐츠에 통합하면 사용자 쿼리에 맞춰 가시성이 향상됩니다.

사용자 경험과 SEO에 대한 성능의 영향

최적화된 웹사이트 성능은 사용자 경험에 직접적인 영향을 미쳐 참여도를 높이고 이탈률을 줄입니다. 또한 검색 엔진은 로딩 속도가 빠른 사이트에 우선순위를 두어 SEO 순위에 긍정적인 영향을 미칩니다.

미학과 성능의 균형

성능을 최적화하는 것도 중요하지만 시각적으로 매력적인 웹사이트를 유지하는 것도 마찬가지로 중요합니다. 미학과 기능성 사이의 균형을 찾는 것은 속도 저하 없이 매력적인 사용자 경험을 보장합니다.

지속적인 모니터링 및 테스트의 역할

웹사이트 성능 지표를 정기적으로 모니터링하고 테스트를 수행하는 것은 최적의 기능을 유지하는 데 중요합니다. Google PageSpeed ​​Insights 및 Lighthouse와 같은 도구는 성능 병목 현상을 식별하여 적시에 조정할 수 있도록 지원합니다.

미래 동향: 최적의 성능을 위한 진화 전략

기술이 발전함에 따라 HTTP/3 및 향상된 JavaScript 프레임워크와 같은 새로운 트렌드는 성능 최적화 전략을 지속적으로 재구성하고 있습니다. 이러한 추세에 대한 최신 정보를 유지하면 귀하의 웹사이트가 경쟁력을 유지하고 최적화된 상태를 유지할 수 있습니다.

CSS 및 JavaScript 최적화를 통해 웹사이트 성능을 향상시키는 것은 성공적인 웹 개발의 초석입니다. 파일 축소, 지연 로딩과 같은 기술을 사용하고 진화하는 추세에 부응함으로써 사용자 경험을 풍부하게 하고 디지털 영역에서 사이트의 가시성을 강화할 수 있습니다.

단계별 절차: 웹사이트 성능 향상

1. 현재 성능 지표 평가 : Google PageSpeed ​​Insights와 같은 도구를 사용하여 개선이 필요한 영역을 식별합니다.
2. CSS 및 JavaScript 축소 구현 : 빌드 도구 또는 온라인 서비스를 활용하여 파일을 압축하고 결합합니다.
3. CDN(콘텐츠 전송 네트워크) 고려 : 더 빠른 파일 전송을 위해 CDN을 선택하세요.
4. 지연 로딩 기회 평가 : 지연 로딩에 적합한 중요하지 않은 리소스를 식별합니다.
5. 지연 로딩 구현 : 이미지에 대한 `loading="lazy"` 속성 또는 보조 스크립트의 비동기 로딩을 통합합니다.
6. 구매자 의도 검색어 조사 : 웹사이트 성능과 관련된 사용자 쿼리를 이해합니다.
7. 구매자 의도 키워드 통합 : 가시성을 높이기 위해 콘텐츠에 관련 용어를 통합합니다.
8. 성과 지표 모니터링 : 지표를 정기적으로 분석하고 그에 따라 전략을 조정합니다.
9. 미학과 기능성의 균형 : 속도 저하 없이 시각적 매력을 보장합니다.
10. 새로운 트렌드에 대한 최신 정보 유지 : 미래 보장 전략을 위해 웹 최적화 개발을 따르십시오.

이 포괄적인 단계별 가이드는 CSS 및 JavaScript 최적화 기술을 사용하여 웹사이트 성능을 효과적으로 향상시키기 위한 자세한 로드맵을 제공합니다. 이러한 단계를 따르면 사용자 기대와 검색 엔진 알고리즘에 부합하는 간소화된 고성능 웹사이트가 보장됩니다.