티스토리 속도 최적화 CSS minify

Freelance Platforms Toptal

빠르고 간단한 API 액세스를 제공하는 온라인 CSS 미니어처 도구 및 압축기

 

티스토리 속도 최적화

티스토리 블로그 역시도 CSS를 제어할 수 있으므로 minify 처리를 해주면 페이지 로딩 속도를 상당 부분 줄일 수 있다. 개인적인 생각으로는 구글 콘솔 서치의 페이지 경험과 코어 웹 바이탈 점수를 높게 받기 위해서는 필수적이라 생각하며 API를 활용한다면 보다 쉽게 구현할 수 있을 것이다.

티스토리의 경우에는 Style에서 쉽게 CSS를 제어할 수 있으므로 온라인 도구에서 직접 minify 처리를 할 수 있다.

CSS Minifier & Compressor | Toptal®

 

 

CSS Minifier 온라인 도구 적용 및 사용방법

사용방법은 비교적 간단하다. 티스토리 스킨 편집에서 CSS를 그대로 전부 복사한 다음 위의 Input CSS에 붙여 넣는다. 그다음 minify를 하면 아래와 같이 minify 처리가 된 CSS를 얻을 수 있다.

 

 

그 다음 Copy to Clipboard를 클릭해서 복사한 뒤 다시 자신의 티스토리 블로그 스킨 편집에 붙여 넣기 하면 된다. 이렇게 되면 한 줄 코드로 CSS가 재배치되고 불필요한 리소스를 줄이게 되므로 속도가 상당히 빨라진다.

※ 단 HTML 또는 CSS 편집이 어렵거나 이해가 잘 안 될 경우 권장하는 방식은 아니다.

 

CSS Minifier Tool Documentation(API로 사용하는 방법)

API https://www.toptal.com/developers/cssminifier/api/raw

with the input parameter set to the CSS you want to minify. See the documentation

To minify/compress your CSS, perform a POST request to:

https://www.toptal.com/developers/cssminifier/api/raw

With the input parameter set to the CSS you want to minify.
Check the examples to see how to use our API in different languages.

 

Success Example

POST /developers/cssminifier/api/raw HTTP/1.1 
Content-Type: application/x-www-form-urlencoded 

input=p { color : red; }

Response:

HTTP/2 200 
content-type: application/json; charset=utf-8

p{color:red}

 

Error Example

POST /developers/cssminifier/api/raw HTTP/1.1 
Content-Type: application/x-www-form-urlencoded 

input=p { color: ; }

Response:

HTTP/2 500 
content-type: application/json; charset=utf-8

{
  "errors": [
    {
      "status": 422,
      "title": "Malformed input",
      "detail": "error: /* Empty property 'color' at 1:4. Ignoring. */"
    }
  ]
}

 

Error Status Codes

If something doesn’t go as expected, these are the status code being used by the API:

• 400 Missing input
• 405 HTTP Method not allowed - only POST is accepted
• 406 Content Type is not acceptable - only application/x-www-form-urlencoded is accepted.
• 413 Too large payload - max-size is 5MB.
• 422 Malformed input - for invalid css.
• 429 Too many requests - currently there is a limit of 30 requests per minute.

 

관련 콘텐츠 같이 보기

티스토리 블로그 속도 최적화를 위한 12가지 방법