생활정보

티스토리 HTML 사이즈 줄여서 페이지 로딩 속도 올리는 방법

GarciaHD2 2020. 8. 11.

728x90

1. 이미지 크기를 조정하고 압축합니다.

페이지 가중치에 관한 한 이미지는 가장 큰 기여자 중 하나입니다. 크기를 줄이려면 불필요하게 큰 이미지의 크기를 조정하는 것부터 시작해야 합니다.

사진을 업로드할 때 이미지 치수가 용기 크기보다 커서는 안 됩니다. 컨테이너의 최대 너비가 500픽셀인 경우 일반적으로 1,000픽셀의 너비 이미지를 업로드할 이유가 없습니다.

하지만 사람들이 공유하고 다운로드할 수 있는 고해상도 이미지를 제공하고자 한다면 어떻게 해야 할까요? 페이지 무게를 줄이기 위해 컨테이너의 너비에 맞는 사진을 업로드하고 고해상도 버전으로 하이퍼링크를 사용하는 것이 좋습니다.

이미지 치수는 별도로 압축하여 이미지 크기를 추가로 축소할 수 있습니다. 이미지를 압축하면 파일 크기를 줄일 수 있으며, 결과적으로 페이지 로드 시간을 줄일 수 있습니다.

압축 도구를 찾고 계신다면 다음과 같이 즐겨찾기를 할 수 있습니다.

HubSpot 사용자인 경우 다음 작업을 수행할 수 있습니다. HubSpot COS에는 자동 이미지 크기 조정 및 이미지 압축 기능이 있습니다.

"사용자가 5,000 x 5,000의 치수를 가지고 있지만 웹 사이트에만 500 x 500으로 표시되는 이미지를 업로드하는 경우, 자동 이미지 크기 조정을 사용하면 브라우저 로딩 시간을 줄이는 데 도움이 됩니다. 반면에 이미지 압축은 업로드된 이미지의 품질을 유지하면서 파일 크기를 줄여줍니다." HubSpot의 Maggie Himba는 설명합니다.

물론 페이지의 무게를 줄이는 가장 쉬운 방법은 불필요한 이미지를 최대한 없애는 것입니다. 하지만 머물러야 하는 사람들에게는 위에서 언급된 팁이 요령 있게 작용해야 합니다.

2. CSS 스프라이트를 사용합니다.

이제 우리는 주어진 페이지에 많은 이미지, 특히 큰 이미지를 가지고 있으면 페이지 무게가 늘어나고 로드 시간이 느려진다는 것을 알 수 있습니다. 그렇죠?

이는 모든 이미지가 서버 요청을 생성하여 전체 프로세스를 느리게 만들기 때문입니다.

CSS 스프라이트를 입력합니다.

CSS 스프라이트는 W3School에 따라 하나의 이미지 파일을 만들기 위해 결합된 이미지 모음을 말합니다. 그런 다음 CSS를 사용하여 표시할 결합된 이미지의 일부만 표시합니다.이렇게 하면 페이지를 로드하는 데 필요한 서버 요청 수를 줄일 수 있습니다.

명확히 하기 위해, 아래는 좀 더 시각적인 설명입니다. 예 A에는 각 브라우저 아이콘에 대한 개별 이미지 파일이 포함되어 있으며 총 70.7KB가 포함됩니다. 예제 B는 CSS 스프라이트(CSS를 사용하여 해당 이미지의 일부를 표시하는 이미지)를 사용하여 동일한 정확한 정보를 표시합니다. 이러한 이미지의 총 크기가 예제 A의 절반보다 작습니다.

3. 불필요한 사용자 정의 글꼴을 제거합니다.

사용자 지정 글꼴은 재미있습니다.

또한 페이지에 개인 정보를 추가하고 다른 모든 사용자와 비즈니스를 차별화하는 데 도움이 됩니다. 그러나 사용자 정의 글꼴의 문제는 글꼴이 무게를 지탱할 수 있다는 점입니다.

다행히 웹 사이트를 설계하는 데 사용자 정의 글꼴이 필요하다고 생각되는 경우 WOFF2 파일을 만드는 방법이 있습니다.

Holgrain Digital의 Lead Developer인 Joshua Stopper는 다음과 같이 쓰고 있습니다: "논의할 수 있는 가장 쉬운 변화는 단점이 없지만 브라우저에서 사용할 수 있는 가장 현대적이고 효율적인 포맷인 WOFF2로 변환하는 것입니다. TTF에 WOFF2 파일을 로딩하기만 하면 60%의 절감 효과를 얻었습니다."

그러나 페이지에서 무게를 일부 줄일 수 있는 쉬운 방법을 찾고 있는 경우 사용 중인 사용자 정의 글꼴 수를 재평가할 수 있습니다. 커플은 아프지 않지만, 과도하게 사용하면 페이지 속도가 저하될 수 있습니다.

4. 리소스를 최소화합니다.

최소화를 통해 리소스 중 하나를 줄일 수 있습니까?

"소수화란 브라우저에서 자원이 처리되는 방식에 영향을 미치지 않고 불필요하거나 중복된 데이터를 제거하는 과정(예: 코드 설명 및 포맷, 사용되지 않는 코드 제거, 더 짧은 변수 및 함수 이름 사용 등)을 말합니다.

Google에 따르면, 리소스를 축소하는 방법을 다음과 같이 설명합니다.

HTML입니다.
PageSpeed Insightstool을 사용하여 HTML 코드의 최적화된 버전을 생성합니다. 이 분석을 사용하여 HTML 페이지를 실행하고 'HTML 최소화' 규칙을 찾아볼 수 있습니다. 마지막으로 '최적화된 콘텐츠 보기'를 클릭하여 축소된 HTML 코드에 액세스합니다.

CSS

다음 도구를 확인합니다.

JavaScript

다음 도구를 확인합니다.

5. CDN(Content Delivery Network)을 사용합니다.

TechTarget에 따르면 컨텐츠 제공 네트워크는 "지리적 근접성을 웹 컨텐츠 제공 기준으로 사용하는 캐시 서버의 상호 연결된 시스템"을 말합니다.

그게 무슨 뜻이죠? 그리고 왜 당신이 신경써야 합니까?

웹 사이트의 모든 요소가 매사추세츠 주 보스턴에 저장되어 있다고 가정해 보겠습니다. 이 소식은 귀하의 사이트 페이지에 액세스하려는 보스턴 사람들 또는 미국의 모든 사람들에게 좋은 소식입니다.