웹사이트 로딩 속도 모범 사례 및 개선 팁

오늘날 온라인 사용자는 자신이 원하는 것과 지금 원하는 것을 원합니다. 우리는 모두 온라인 리소스의 웹사이트 로딩 속도가 너무 느리고 클릭을 하지 않은 상황에 처해 있습니다. 소셜 미디어, TV 및 기타 모든 현대 기술 덕분에 오늘날 인간은 인내심과 집중력으로 정확히 알려져 있지 않습니다.

속도는 웹사이트의 조용한 킬러입니다. 모든 웹사이트 사용자의 거의 절반이 웹사이트가 2초 이내에 로드되기를 기대합니다. 미친 소리처럼 들릴 수도 있지만 몇 초의 느린 로드 시간만으로도 사용자는 아무 생각 없이 겁을 줄 수 있습니다. 현실은 웹사이트를 적절하고 빠르게 로드해야 한다는 것입니다.

웹사이트 로딩 속도 모범 사례

직접 테스트하지 않는 한 웹사이트가 실제로 얼마나 느린지 깨닫지 못할 수도 있습니다. 다행히도 Google PageSpeed에서 무료로 이 작업을 수행할 수 있습니다. 로드 시간을 정확히 찾아내고 문제 영역을 찾기 위한 웹 기반 도구입니다. 웹사이트 로딩 시간은 어떻게 되나요? 작업이 필요하더라도 걱정하지 마십시오. 몇 번의 클릭만으로 웹사이트 로드 시간을 개선하는 것은 생각보다 쉽습니다. 다음은 시작하기 위한 몇 가지 추가 팁입니다.

웹사이트 로딩 속도 향상을 위해 Gzip 압축 사용

Gzip 압축은 응답 크기를 약 70% 줄이는 강력한 도구로 인상적입니다. Gzip은 호스트를 통해 수행되는 작업이므로 웹 호스트가 서버에서 이 압축을 사용하는지 문의해야 합니다. Gzip을 사용하면 비디오, 이미지 또는 기타 요소의 품질을 손상시키지 않으면서 응답 시간을 줄일 수 있습니다.

테스트를 실행하여 웹사이트가 GZIPPED인지 확인하고 Zip 압축 테스트를 실행할 수 있습니다. Gzipping이 작동하는 방식은 HTTP 응답의 크기를 줄이는 것입니다. 궁극적으로 페이지의 무게를 변경합니다.

파일 캐시

캐싱은 웹사이트의 버전이 사용자의 브라우저에 저장되는 것입니다. 이렇게 하면 사용자가 웹사이트를 다시 방문할 때 새 버전을 새로 고칠 수 있을 때까지 이전 버전이 로드됩니다. 캐싱을 사용하면 로드 시간을 2초 이상에서 1초 미만으로 줄일 수 있습니다. 그것은 큰 도약이며 당신이 신경써야 할 것입니다. 운 좋게도 웹 사이트에서 캐싱을 쉽게 설정할 수 있습니다. WordPress를 사용하는 경우 무료 W3 Total Cache 플러그인을 사용할 수 있습니다. 캐싱은 웹사이트 로드 성능에 추가 향상을 추가하기 위해 오늘날 필수입니다.

서버 측 캐싱 외에도 브라우저 캐싱도 활성화해야 합니다. 이것은 본질적으로 방문자가 웹사이트를 다시 방문할 때 이러한 파일이 다시 다운로드될 때까지 기다릴 필요가 없도록 이미지, CSS 및 JS 파일과 같은 정적 파일의 복사본을 브라우저에 저장하도록 브라우저에 지시하는 방법입니다. WordPress 활용 브라우저 캐싱에 대한 이 정보 모음에서 자세한 내용을 읽을 수 있습니다.

웹사이트 호스트 업그레이드

웹사이트에 적합한 호스트가 있으면 페이지 성능에 영향을 줄 수 있습니다. 웹사이트를 원하는 만큼 변경할 수 있지만 개선이 크게 나타나지 않으면 호스트가 문제일 수 있습니다. 웹사이트를 처음 시작할 때 가장 저렴한 호스팅 옵션을 선택하고 싶은 마음이 들 것입니다. 잠시 동안은 괜찮을 수 있지만 많은 파일을 호스팅하거나 더 많은 트래픽을 경험하는 경우 이 값보다 커질 수 있습니다.

더 저렴한 요금제는 공유될 가능성이 높으며, 이는 이웃 웹사이트의 문제가 귀하의 웹사이트에도 영향을 미친다는 것을 의미합니다. 전용 서버를 사용하면 공유 서버에 있을 때 발생할 수 있는 문제를 피할 수 있습니다. 또한 응답 시간에 도움이 필요한 경우 더 많은 고객 서비스 옵션이 제공됩니다.

호스팅 구매

웹사이트 테마 확인

귀하의 웹사이트가 디자인된 방식은 방문자에게 귀하의 웹사이트가 얼마나 잘 그리고 빠르게 표시되는지에 영향을 미칩니다. 테마를 전환하는 것만으로도 웹사이트 로드 시간에서 몇 초의 소중한 시간을 확보할 수 있습니다.

전문 웹사이트 페이지 빌더 또는 테마를 사용하면 웹사이트가 불필요하고 지저분한 코드로 부풀려지지 않도록 할 수 있습니다. 그렇기 때문에 웹사이트 템플릿, 테마 또는 빌더의 미학 이상을 살펴보는 것이 중요합니다. 또한 웹 사이트 또는 웹 앱에 로그인하는 것을 고려하십시오. 웹사이트 로깅은 문제가 발생하기 전에 문제를 발견하는 데 도움이 되며 웹사이트에 문제가 발생하는 것을 방지할 수 있습니다. 또는 Papertrail 앱과 같은 도구를 사용하여 직접 로그 메시지를 보낼 수 있습니다.

Java 및 CSS 파일 줄이기

오늘날 대부분의 웹사이트는 많은 자바스크립트 및 CSS 파일을 사용하며 이러한 파일은 사용자의 브라우저에서 개별적으로 처리될 수 있습니다. 한 번에 너무 많은 요청을 하면 웹사이트 로딩 속도가 느려집니다. 이러한 파일을 모두 축소할 수 있다면 웹사이트 로드 시간에 많은 부담을 주지 않을 것입니다.

모든 페이지를 압축하는 대신 Java 및 CSS 파일을 외부에서 로드하는 것이 현명한 생각입니다. 그러면 사용자는 누군가가 웹사이트의 새 페이지를 방문할 때마다가 아니라 표시되는 대로 파일을 로드하기만 하면 됩니다. 너무 많은 파일로 사용자의 브라우저를 혼란스럽게 하지 마십시오.

네트워크를 통해 짐을 나르십시오

높은 트래픽을 경험하고 있다면 네트워크를 심각하게 다루어야 합니다. CDN(콘텐츠 전송 네트워크) 서비스는 다양한 지리적 영역에 있는 서버를 사용하여 사용자에게 직접 파일을 제공합니다. 즉, 사이트가 더 빨리 로드될 수 있도록 장소 사이에 시간이 더 적습니다. 가장 잘 알려진 CDN은 Amazon CloudFront이며 현재 웹 사이트와 쉽게 통합할 수 있습니다.

외부 호스팅 플랫폼 사용해보기

CDN과 유사하게 외부 호스팅 플랫폼에서 파일을 호스팅하여 로드 시간이 느려지는 것을 방지할 수 있습니다. 이것은 비디오 파일에 가장 일반적입니다. 비디오는 매우 방대하며 웹사이트에 직접 업로드하면 많은 공간을 차지합니다. 100MB를 초과할 수 있으므로 자체 서버에서 비디오 또는 기타 대용량 파일을 호스팅하는 것은 현명한 방법이 아닙니다.

이러한 파일을 외부에서 호스팅하는 것이 좋습니다. YouTube와 Vimeo는 동영상 파일을 위한 훌륭한 옵션입니다. 여기에서 웹사이트에 비디오를 삽입할 수 있습니다. 공간을 절약하고 로드 시간을 늦추지 않습니다. 또한 훨씬 쉽습니다!

특히 YouTube를 사용하면 콘텐츠가 완전히 새로운 잠재고객에게 공개됩니다. 실제로 YouTube는 가장 큰 검색 엔진 중 하나로 간주되며 10억 명이 넘는 월간 사용자를 끌어들입니다. 무료로 사용할 수 있으며 최대 15분(또는 요청을 제출하는 경우 그 이상)의 동영상을 업로드할 수 있습니다. 당신은 단순히 잘못 될 수 없습니다.

HTTP 요청 확인

야후는 웹사이트 로드 시간의 80%가 페이지의 다른 모든 부분을 다운로드하는 데 있다고 주장합니다. Java 및 CSS 파일에 관한 모범 사례에 대해 이미 논의했지만 다른 모든 것은 어떻습니까? 로드해야 하는 페이지 내 요소가 많을수록 페이지가 완전히 표시되는 데 더 오래 걸립니다.

브라우저로 이동하여 이러한 요청이 얼마나 많이 발생하는지 확인할 수 있습니다. Google 크롬에는 HTTP 요청에 중점을 둔 개발자 도구가 포함되어 있습니다. 이러한 도구에 액세스하려면 Chrome에서 페이지를 마우스 오른쪽 버튼으로 클릭하고 검사를 클릭한 다음 네트워크 탭으로 이동합니다.

이제 "시간" 섹션에서 모든 파일이 로드되는 데 걸리는 시간을 확인할 수 있습니다. 모서리에는 총 요청 수도 표시됩니다. 가장 시간이 많이 걸리는 요청을 줄이는 것은 웹사이트 로드 시간을 단축하는 쉬운 방법입니다. 다음 팁에서 ​​파일을 결합하는 가장 좋은 방법을 배우려면 계속 읽으십시오.

HTML 파일 결합 및 축소

파일을 축소하면 불필요한 공백이나 코드가 제거됩니다. 이 모든 작은 것들이 중요해 보이지 않을 수 있지만 이는 로드 시간을 추가합니다. 목표는 가능한 한 간결한 HTML 파일을 갖는 것입니다.

웹사이트를 검토하여 더 이상 사용하지 않는 불필요한 페이지가 있는지 확인하십시오. 공백이나 불필요한 코드를 제거할 수 있는 곳이 있습니까? 마지막으로 HTML 파일을 결합하여 웹사이트 로드 시간을 지연시키지 않도록 합니다.

외부 CSS 사용

CSS는 페이지의 스타일 및 디자인 요소를 포함하는 방법입니다. 웹사이트는 페이지보다 먼저 로드되는 외부 파일에 액세스하거나 인라인 스타일에 액세스할 수 있습니다. HTML 문서 자체에 CSS를 포함하면 많은 코드가 추가됩니다. 우리가 전에 말했듯이, 그것은 좋지 않습니다.

대신 HTML 헤드에 로드되는 외부 CSS를 사용해야 합니다. 피할 수 있으면 HTML에 CSS를 넣지 마십시오. 이것은 특히 div 또는 제목을 의미합니다. 외부 스타일시트를 사용하면 훨씬 깔끔하고 슬림해집니다. 또한 편집하기가 훨씬 쉽습니다.

CSS 상태가 확실하지 않은 경우 CSS 전달 도구를 사용하여 CSS 파일이 어떻게 쌓이는지 확인하세요. 이렇게 하면 외부 파일의 위치와 HTML에 인라인 요소가 있는지 알 수 있습니다. 가능하면 외부 CSS 파일을 하나만 사용하십시오. 파일이 두 개 이상 있는 경우 파일을 결합할 수 있습니다.

자바스크립트 로딩 연기

JavaScript와 같은 파일을 연기하면 추가 Java 요소를 로드하기 전에 나머지 웹사이트가 제대로 로드되는지 확인합니다. 때때로 자바를 연기하는 것은 플러그인을 사용하는 것만큼 간단합니다. 다른 경우에는 웹 사이트에서 Java를 마지막으로 로드할 것임을 알리기 위해 HTML 스크립트를 수동으로 추가해야 합니다.

이 스크립트는 외부 JavaScript 파일을 호출합니다. 여기에 Java 연기에 대한 전체 자습서가 있습니다. 큰 차이는 아니지만 이렇게 하면 종이가 더 빨리 로드되는 것처럼 보일 수 있습니다.

첫 번째 바이트까지의 시간 검토

TTFB(Time to First byte)는 브라우저가 데이터의 첫 번째 바이트 로드를 시작하기 전에 기다리는 시간입니다. Google에 따르면 TTFB는 200ms 미만이어야 합니다. 그러나 이것은 서버 측 문제이므로 더 많은 웹 개발자가 간과하기 쉽습니다.

사용자가 웹사이트를 방문하면 자동으로 로드가 시작되지 않습니다. 순식간에 진행되는 것처럼 보이지만 먼저 3단계가 필요합니다. 브라우저는 웹사이트를 호스팅하는 서버에 초기 HTTP 요청을 보내고, 거기에서 DNS 조회, 서버 처리 및 응답 단계를 거칩니다.

다시 한 번, Chrome 개발자 도구는 이 프로세스가 웹페이지에서 얼마나 걸리는지 보여줍니다. 이것은 또한 인터넷 연결의 강도에 따라 크게 달라집니다. 느린 연결은 느린 TTFB를 갖습니다. TTFB를 확인하여 200ms 미만인지 확인하십시오. 그렇지 않은 경우 호스트와 올바른 솔루션에 대해 이야기할 때입니다. 공간이 충분하지 않거나 트래픽이 너무 많을 수 있습니다.

스크롤 없이 볼 수 있는 콘텐츠 우선

때로는 로드하는 데 시간이 걸리는 긴 페이지가 있습니다. 그게 현실이야. 그러나 스크롤 없이 볼 수 있는 정보를 먼저 로드하면 방문자를 줄일 수 있습니다. 페이지 콘텐츠의 모든 상단이 빠르게 표시되도록 하여 사용자 경험을 개선하십시오.

이것은 "지연 로딩(lazy loading)"이라고 하는 프로세스이며 이름이 의미가 있습니다. 페이지 아래로 천천히 로드되는 것과 같지만 사용자가 가장 집중하는 상단에서 시작됩니다. 지연 로딩을 사용하면 페이지의 나머지 부분이 로드될 때까지 기다릴 필요 없이 사용자가 상위 콘텐츠를 보고 웹사이트 로딩 속도를 높일 수 있습니다. 페이지 전체에 10장 이상의 사진이 있다고 상상해보십시오. 방문자가 읽기를 시작하기 위해 모든 이미지가 로드될 때까지 기다리기를 원하지 않을 것입니다.

지연 로드는 jQuery.sonar를 사용하여 보이는 이미지만 로드합니다. 페이지에 지연 로드를 쉽게 추가할 수 있는 플러그인이 많이 있지만 여기에 수동으로 수행하는 전체 자습서가 있습니다. 사용자는 스크롤 없이 볼 수 있는 콘텐츠를 더 이상 기다릴 필요가 없어 기쁠 것입니다.

이미지 크기 확인

파일 크기를 확인하지 않고도 이미지를 쉽게 업로드할 수 있습니다. 가끔은 괜찮을 수 있지만 조심하지 않으면 웹사이트 속도가 느려질 수 있습니다. 이미지를 저장할 때 "웹용으로 저장" 옵션을 사용하여 이미지를 저장하십시오. 이것은 Photoshop 또는 Fireworks와 같은 도구에서 사용할 수 있습니다. "웹용으로 저장"을 사용하면 이미지의 선명도를 잃지 않고 이미지 크기를 줄일 수 있습니다.

일반적으로 더 큰 파일 크기는 피하십시오. PNG 사진을 저장할 때. 이미지 속성을 확인하여 더 큰 크기에 가까워지고 있는지 확인할 수 있습니다. 마지막으로, 웹사이트에 이미 큰 이미지가 있는 경우 플러그인을 사용하거나 해당 파일을 수동으로 압축하여 웹사이트 로딩 속도를 개선하십시오.

더 나은 웹 사이트 로딩 속도를 위해 불필요한 추가 삭제

때때로 우리는 웹사이트에 새로운 것을 추가하고 잊어버립니다. 우리는 다른 것으로 이동하거나 더 이상 과거 솔루션이 필요하지 않습니다. 이유가 무엇이든 웹사이트를 자주 확인하여 사용하지 않는 항목에 공간을 낭비하고 있지 않은지 확인하십시오. 이는 다음 모두에 적용됩니다.

• 이미지;
• 플러그인;
• 탐색 요소;
• 디자인 요소;
• 페이지;
• 보관된 블로그 게시물.

아무리 작더라도 웹 사이트 로딩 속도에 부정적인 영향을 미칩니다. 또한, 특히 플러그인을 사용하여 웹사이트 보안에 취약한 영역을 만들 수 있습니다. 이들은 쉽게 손상되며 보안이 저하될 수 있습니다. 웹사이트에서 오래된 추가 정보를 정기적으로 검토하는 습관을 들이십시오.

소셜 공유 버튼 제한

소셜 공유 버튼은 소셜 미디어 참여를 유도하는 좋은 방법입니다. 그러나 한계가 있어야 합니다. 이 버튼은 때때로 매우 효과적입니다. 그러나 그들은 또한 흉상 일 수 있습니다. 우리가 동의할 수 있는 것은 이러한 소셜 공유 버튼이 여러 외부 JavaScript를 사용하므로 웹사이트 속도가 느려진다는 것입니다.

특히 페이스북은 이에 대한 주범이다. Facebook 스크립트는 공유 버튼으로 웹사이트 성능을 저하시킬 수 있습니다. 이러한 공유 버튼이 정말로 번거로운 가치가 있는지 고려하십시오. 계속 유지할 수 있지만 최고 실적이 입증된 항목만 유지합니다.

비동기식 전달

타사 코드에 대해 말하면 잘못될 수 있는 부분이 많이 있습니다. 제3자가 서비스 중단을 경험하거나 갑자기 속도가 느려지면 소셜 공유 버튼이든 네트워크 분석 스크립트이든 해당 리소스를 로드하려고 하면 페이지가 쉽게 멈출 수 있습니다.

비동기식 전달은 이러한 속도 저하에 대한 솔루션입니다. 이 기능을 활성화하면 타사 네트워크가 중단되더라도 웹사이트가 영향을 받지 않습니다. 여러 가지 방법으로 비동기 전달을 활성화할 수 있으며 모든 방법이 여기에 설명되어 있습니다.

Google PageSpeed ​​설치

Google PageSpeed는 웹사이트 로딩 속도를 최적화하는 오픈 소스 서버 모듈입니다. 웹사이트를 더 빠르게 만들고 사용하기 쉽도록 Google에서 설계했습니다. 기본적으로 서버와 웹사이트 파일을 다르게 수정합니다. 수동으로 아무것도 할 필요가 없으며 웹 사이트의 성능이 향상됩니다.

웹 사이트 성능과 관련하여 찾을 수 있는 만능 솔루션에 가깝습니다. Google PageSpeed를 파일 관리자에 직접 설치하거나 호스트 또는 개발자에게 설치 지원을 요청할 수 있습니다. 당신은 그것을 설정하고 그것을 잊을 수 있습니다.

배경 이미지 결합

많은 테마는 여러 배경 이미지를 사용하여 하나의 완전한 이미지를 만듭니다. 이것은 훌륭하고 동시에 보일 수 있지만 웹 사이트 성능이 느려질 수 있습니다. 사용자의 브라우저는 배경 사진을 로드하기 위해 여러 가지 다른 요청을 해야 하므로 로드 프로세스에 시간이 걸립니다.

대신 이미지를 하나로 결합하여 웹사이트 로딩 속도를 높이십시오. 이러한 방식으로 사용자는 여러 요청이 아닌 단일 요청만 하면 됩니다. 백그라운드가 제대로 로드되기 위해 더 이상 여러 번의 왕복 요청이 없기 때문에 웹사이트가 더 빨라집니다.

이미지 핫링크 중지

핫링크는 다른 웹사이트의 사진을 서버에 업로드하지 않고 자신의 웹사이트에 삽입하는 방식입니다. 이것은 약간의 코드로 간단하지만 무엇보다도 웹사이트 속도를 저하시킬 수 있는 나쁜 습관입니다.

핫링크는 웹사이트에 해를 끼칠 뿐만 아니라 허가 없이 그렇게 하는 경우 기술적으로 도용입니다. 웹사이트 소유자는 이러한 파일을 호스팅할 공간에 대한 비용을 지불하고, 포함 코드를 통해 동일한 파일을 자신의 웹사이트에 배치하면 허가 없이 리소스를 가져오는 것입니다.

이미지를 공유할 목적으로 직접 이미지를 업로드할 수 있는 웹사이트가 있지만 이는 여전히 좋은 생각이 아닙니다. 이러한 웹 사이트가 느리거나 트래픽이 많을 때 포함하면 웹 사이트 로딩 속도가 느려질 수 있습니다. 또한 공간 비용을 지불하지 않는 한 이러한 파일은 경고 없이 언제든지 삭제할 수 있습니다.

예, 핫링크를 사용하면 대역폭을 어느 정도 절약할 수 있지만 장기적으로 웹사이트 속도가 느려질 가능성이 더 큽니다. 핫링크 대신 항상 자체 서버에서 이미지를 호스팅하십시오. 확실하지 않은 경우 업로드할 여유가 있도록 자체 서버에서 더 많은 공간을 구입하는 것이 좋습니다. 어쨌든 작은 이미지 파일을 사용해야 하므로 문제가 되지 않습니다.

지금 웹사이트 로딩 속도를 높이십시오

웹사이트를 새로운 차원으로 끌어 올릴 준비가 되셨습니까? 웹사이트 로딩 속도를 높일 때입니다. 웹 사이트 로딩 속도가 느리면 의도하지 않게 방문자를 잃기 쉽습니다. 웹 사이트를 로드하는 데 너무 오랜 시간이 걸리면 웹 사이트가 얼마나 실망스러웠는지 생각해 보십시오. 웹사이트 로드 시간이 1초 지연되면 전환이 7% 감소하고 페이지 조회가 11% 감소합니다. 위의 팁을 심각하게 받아들여서 사용자에게 그렇게 하지 마십시오.

웹사이트 속도를 높이는 것은 복잡하거나 비용이 많이 들거나 혼란스러운 일이 아닙니다. SEO를 개선하고 사용자에게 긍정적인 영향을 미치는 가장 간단하고 빠른 방법 중 하나입니다. 웹사이트를 더 잘 운영하고 사용자에게 깊은 인상을 남기고 싶다면 위의 팁에 투자할 가치가 있습니다.

핫링크 및 끊어진 링크 방지에서 웹 호스팅 업그레이드에 이르기까지 위의 작은 단계라도 큰 영향을 미칩니다. 압도되면 웹 사이트 로딩 속도를 테스트하여 시작하십시오. 거기에서 웹 사이트가 최대 성능 수준에서 실행되고 있는지 확인하기 위해 얼마나 개선해야 하는지 잘 알 수 있습니다. 귀하의 웹사이트는 Google 표준에 맞추기 위해 몇 가지만 수정하면 됩니다. 사용자는 기다리는 데 지쳤으므로 이제 작업을 시작해야 합니다.

ibrandify가 만든 웹사이트 로딩 속도 벡터