이미지 무거운 웹 사이트의 속도를 높이는 쉬운 단계

사이트 소유자는 결국 다운로드 속도를 높이고 싶을 수 있습니다. 이렇게 하면 검색 결과의 순위가 높아집니다. 또한 사이트 방문자가 자신의 행동에 더 빨리 응답하여 작업하는 것이 더 즐겁습니다.

빠르고 간단한 솔루션을 찾기 위해 사이트 소유자는 방대한 수의 플러그인을 설치합니다. 이 플러그인은 차례로 리소스를 소비하고 작업 속도를 저하시킵니다. 우리는 최적화 플러그인에 대해 반대하는 바가 없지만 작업 원리에 대한 지식과 요점까지 사용해야 합니다.

게다가 관리 경험이 없는 사이트 소유자는 최적화에 대해 오해하는 경우가 많습니다. 그들의 이해에서 최적화는 어떤 대가를 치르더라도 스크립트를 가속화하는 것입니다. 최적화 작업은 최적의 리소스 가격으로 사이트의 최적 속도를 생성하는 것입니다. 따라서 모든 사이트에 대한 보편적인 지침이 있을 수는 없습니다.

웹사이트를 빠르게 만드는 것은 리소스 소유자나 웹마스터에게 시급한 작업입니다. 결국 페이지 로딩 속도는 고품질 콘텐츠, 아름다운 그래픽 디자인과 함께 웹 리소스의 성공을 위한 가장 중요한 요소 중 하나입니다.

느린 로딩은 때때로 사용자를 잃을 가능성을 높입니다. 특히 방문자가 모바일 장치에서 오는 경우. 경험이 없는 사용자도 실제로 구현할 수 있는 사이트 로딩 속도를 높이기 위한 간단한 권장 사항은 트래픽 손실 가능성을 최소화하는 데 도움이 됩니다.

1. HTML 코드 및 CSS, JS 파일 최적화

사이트에 들어갈 때 사용자의 브라우저로 전송되는 코드의 "깨끗함"에 대한 우려 없이 다운로드 최적화는 불가능합니다. 소스 코드의 많은 문자는 로딩 속도에 큰 영향을 미치므로 간결함이 중요한 성공 요인입니다.

사이트 로딩 속도를 높이기 위해 코드를 최소화하는 방법

불필요한 문자, 마크업 요소, 소스 코드 태그를 제거합니다. 프로세스를 자동화하면 사이트의 HTML 코드 시작과 끝에 작은 삽입을 추가하는 데 도움이 됩니다.

HTML 콘텐츠를 버퍼링하는 이 방법은 매우 유용하지만 랜덤 액세스 메모리에 추가 로드를 생성할 수 있습니다.

동일한 유형의 CSS 파일과 JS 파일을 그룹화합니다. 별도의 디렉토리에 복사되어 모든 사이트 파일을 통과하는 JCH Optimize, Cloudflare 또는 Minify와 같은 무료 PHP 애플리케이션은 요소를 결합하는 데 도움이 됩니다.

2. 추가 HTTP 요청 제거

페이지 요소(자바스크립트, 이미지, CSS 및 플래시 파일)를 업로드하면 사이트를 로드할 때 시스템 리소스의 가장 큰 부분을 차지합니다. 이러한 요소에 대한 HTTP 요청은 사이트 속도를 현저히 저하시킵니다.

"추가" 요청을 방지하려면 페이지의 구성 요소 수를 줄여야 합니다. 이렇게 하면 서버 호출이 비례적으로 감소하고 사이트 로드 속도가 빨라집니다.

이것은 여러 가지 방법으로 수행할 수 있습니다.

• 여러 이미지를 단일 그래픽 파일(CSS 스프라이트)로 결합합니다.
• 페이지 스타일 시트에서 인라인 이미지(인라인 그림)를 사용하십시오.
• 한 페이지에 있는 여러 CSS 파일 또는 스크립트가 하나의 파일로 병합됩니다.
• 시나리오 및 플러그인의 수를 최소화합니다.

3. JavaScript와 CSS를 올바른 순서로 정렬

CSS 파일은 페이지 코드 상단에, 자바스크립트는 하단에 배치하는 것이 좋습니다. 이 최적화 후에는 정적 콘텐츠가 먼저 로드된 다음 동적 그래픽만 로드됩니다.

다운로드하는 데 더 많은 리소스가 필요한 플래시 요소 또는 애니메이션은 앞으로 "당겨지지" 않고 처음 몇 초부터 사이트의 인상을 망치지 않습니다. 이렇게 하면 콘텐츠를 원활하게 다운로드하고 리소스의 미적 매력을 높일 수 있습니다.

4. 외부 스크립트 수 줄이기

외부 스크립트는 외부 링크를 통해 액세스되는 코드(텍스트) 조각입니다. 링크는 여러 다른 서버에 대한 추가 요청을 생성하여 궁극적으로 사이트 속도를 저하시킵니다. 이를 방지하기 위해 페이지의 소스 코드 구조에 내장된 로컬 스크립트를 주로 사용하는 것이 좋습니다.

물론 로컬 스크립트에 초점을 맞추면 사이트의 모양과 기능에 특정 제한이 생깁니다. 그러나 결과적인 다운로드 속도 이점은 이러한 "희생"의 가치가 있습니다.

5. 플러시 활성화

이 PHP 기능을 사용하면 사용자의 서버가 리소스에서 정보를 로드할 때까지 기다리지 않고 부분적으로 출력할 수 있습니다. 데이터가 브라우저로 전송되는 동안 열린 창은 비어 있지 않고 사이트의 로드 가능한 요소로 원활하게 채워집니다. 이러한 가속은 인터페이스가 복잡하고 트래픽이 많은 웹 리소스에 특히 필요합니다.

페이지 소스 코드의 시작 부분, 헤드 바로 뒤에 플러시 기능을 배치하는 것이 좋습니다. 헤더에서 HTML 콘텐츠가 더 빨리 열리며 CSS 및 JavaScript 요소의 병렬 로드를 활성화할 수도 있습니다.

6. 페이지 캐시

캐싱은 사이트 페이지(플래시, 그래픽, JavaScript 및 CSS)의 일부 정보를 사용자 브라우저에 저장합니다. 다음 실행 시 이러한 파일이 브라우저에서 즉시 다운로드되어 사이트 속도가 향상됩니다.

HTML 코드에 만료 헤더를 추가하여 캐싱을 활성화할 수 있습니다. WordPress 사이트는 W3 Total Cache, Cache Enabler 또는 Zen Cach와 같은 무료 또는 부분적으로 무료 기능이 있는 플러그인 설치를 사용하여 쉽게 캐시됩니다.

새 사이트의 경우 출시 준비가 완료된 후에만 캐싱을 사용하는 것이 좋습니다. 개발 중에 기능을 활성화하면 추가 변경 사항이 사이트에 올바르게 표시되지 않을 수 있습니다.

7. CDN 사용

콘텐츠 전송 네트워크 – 콘텐츠가 방문자에게 전송되는 속도를 높이기 위해 전 세계 데이터 센터에 흩어져 있는 서버 체인입니다. 방문자가 CDN 서버에서 지리적으로 가까울수록 사이트의 데이터 패킷이 더 빨리 전송됩니다.

CDN의 사용은 주요 대상이 물리적 서버에서 매우 멀리 떨어져 있는 콘텐츠 및 고부하 포털에 특히 중요합니다. 해외 사이트에서 다운로드 대기 시간을 최소화하여 로컬 검색 순위 상승에 기여하는 서비스입니다. 결국 콘텐츠는 해당 국가에서 사용자와 가장 가까운 서버 저장소에서 다운로드됩니다.

8. 그래픽 및 비디오 최적화

파일 형식은 방문자에게 정보가 표시되는 속도에 직접적인 영향을 미치므로 올바른 그래픽 및 비디오 형식을 선택해야 합니다.

다양한 웹 콘텐츠에 권장되는 형식:

• SVG – 벡터 로고 및 간단한 인터페이스 요소용
• PNG – 구성표 및 벡터가 아닌 로고용
• JPG – 사진 및 이미지용
• MPEG4 – 비디오 및 애니메이션용.

또한 비디오 및 애니메이션의 경우 비교적 새로운 WEBM 형식을 사용할 수 있습니다. 대부분의 경우 동일한 품질의 더 작은 비디오 크기를 제공합니다. 그러나 양식은 브라우저 지원이 제한되어 있습니다(예: macOS/iOS Safari 브라우저에서는 지원되지 않음). 따라서 WEBM 파일을 우선 비디오 소스로 사용하고 MPEG4를 대체 소스로 설치하는 것이 좋습니다. 공유가 허용되지 않거나 불편한 경우에만 MPEG4를 사용할 수도 있습니다.

이와 별도로 SVG(벡터 형식)를 사용하면 그래픽 품질의 손실 없이 크기를 조정할 수 있습니다.

이미지 최적화 단계

1단계 – 이미지 크기 줄이기.

WordPress 또는 Joomla와 같은 많은 인기 있는 CMS에는 원본 이미지를 최적화하는 플러그인이 내장되어 있습니다. 그러나 이 방법은 추가 로드를 생성하고 사이트 속도를 늦출 수 있습니다. 페이지가 로드될 때마다 브라우저는 먼저 소스 코드에 액세스한 다음 즉시 이미지 크기를 조정합니다.

이미지를 로드할 때 속도 저하를 방지하려면 Preview(Mac) 또는 Microsoft 그림판(Windows)과 같은 OS에 내장된 그래픽 편집기와 유사한 기능을 가진 온라인 서비스가 도움이 될 것입니다. 그들과 함께 작업하려면 그래픽 작업에 최소한의 기술이 필요합니다.

2단계 – 다운로드하기 전에 파일을 압축합니다.

이미지 크기를 최적화한 후에도 "가중치"는 일반적으로 여전히 최적이 아닙니다. ImageResize 또는 TinyPNG와 같은 편리한 무료 서비스는 이미지 품질의 손실 없이 크기를 줄이는 데 도움이 됩니다. 여기에서 대부분의 프로세스는 자동화됩니다. 사용자는 파일을 업로드하고 최적의 이미지 크기로 이미 압축된 파일을 다운로드하기만 하면 됩니다.

9. Gzip 파일 압축 적용

Gzip은 채널 리소스를 절약하고 로딩 속도를 높이기 위해 사이트 파일을 압축하는 간단한 방법입니다. Gzip을 사용하면 브라우저가 더 빠르게 다운로드할 수 있는 아카이브로 파일을 압축한 다음 압축을 풀고 콘텐츠를 표시할 수 있습니다.

Gzip 사용을 활성화하는 것은 매우 간단합니다. .htaccess 파일에 몇 줄의 코드를 추가하기만 하면 됩니다. 예를 들어 Apache 웹 서버를 사용할 때 웹마스터는 mod_gzip 모듈을 사용할 수 있습니다. Gzip을 활성화하려면 이러한 코드를 .htaccess에 추가해야 합니다.

Gzip 파일 압축은 브라우저에서 서버로 보내는 요청 수를 줄이기 위해 수행됩니다. 즉, 이 기술은 파일의 초기 무게를 70%로 줄여 다운로드 속도를 높입니다.

Gzip 압축을 포함하는 방법

".htaccess" 웹 서버 구성 파일에 다음 코드 조각을 추가합니다.

아파치 서버에서

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

Nginx 서버에서

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10. 호스팅 변경

다운로드 속도를 높이는 가장 기본적인 방법은 호스팅 제공업체를 변경하는 것입니다. 자원 할당을 절약하면 종종 서비스 품질이 크게 저하되어 포도 나무의 사이트 속도를 높이려는 모든 시도가 약화됩니다.

콘텐츠, 코드 및 플러그인을 사용한 조작이 결과를 가져오지 않으면 사이트에 더 적합한 "홈"을 선택하는 것에 대해 생각할 때입니다. 고가용성 및 사려 깊은 기술 지원을 제공하는 고품질 호스팅에서 인터넷 리소스는 작업 속도를 높일 수 있는 강력한 추진력을 받게 됩니다. 그리고 이것은 감사하는 청중들에게 높이 평가될 것입니다.

가장 중요한 것은…

2~3초 이내로 사이트 접속을 위해 노력해야 합니다. 사이트가 2초, 3초라도 열리면 상관없지만, 그 이상이라면 사이트 로드 가속을 생각해야 하는 이유다.

또한 페이지 로드 속도에는 두 가지 매개변수가 있음을 이해해야 합니다.

첫 번째는 콘텐츠가 표시되는 속도입니다(이 시점에서 페이지는 이미 열려 있고 사용자에게 표시되지만 투명 페이지 표시기는 모든 정적 파일과 비동기 스크립트가 연결될 때까지 계속 표시됨).

또한 두 번째는 연결해야 할 모든 것이 연결되었을 때 페이지가 실제로 형성되는 속도입니다. 첫 번째 매개변수에 초점을 맞춰야 합니다. 즉, 사이트 레이아웃이 표시되기 전에 3초 이상 경과하지 않아야 합니다.

결론

사이트 로딩 속도와 같은 수치는 무시할 수 없습니다. 처음 몇 초부터 방문자에게 편안한 환경을 조성한 사람은 바로 그 사람이었습니다. 사용자가 원하는 콘텐츠를 빨리 얻을수록 리소스에 대한 긍정적인 이미지가 형성되고 리소스에 대한 충성도가 높아질 가능성이 높아집니다.