페이지 속도를 향상하려면 다양한 도구의 지원이 필요한 경우가 많습니다. 이러한 도구 중 일부는 페이지 속도를 측정하는 데 사용되는 반면 다른 도구는 페이지 자산의 크기를 줄이는 데 사용됩니다. 이 기사에서는 편리한 참조로 사용할 수 있는 라이브러리를 만들었습니다.

이 문서의 도구에서 다루는 영역을 나열해야 하는 경우:

  • 페이지 속도를 결정하는 도구
  • 이미지 크기를 줄이는 도구
  • CSS, JavaScript, HTML 최적화 도구

페이지 속도를 결정하는 도구

  1. Google Pagespeed Insights:  가장 잘 알려진 페이지 속도 도구입니다. Lighthouse 인프라를 사용하여 사이트의 점수를 매기고 지난 28일 동안의 데이터를 제공합니다.
  2. 웹페이지 테스트: 인프라에서 세 가지 다른 테스트를 수행하여 평균 결과를 제공하고 API를 통해 보다 기술적인 보고서를 제공하는 플랫폼입니다.
  3. Treo.sh: Pagespeed와 CrUX 인프라를 기반으로 최근 12개월 동안의 시각적 데이터를 제공하는 유일한 플랫폼입니다.
  4. GTmetrix: Lighthouse 인프라를 사용하여 사이트 속도에 대한 통찰력을 제공하고 자체 점수를 제공하는 도구입니다.
  5. 데어부스트: 인프라에 대한 사이트 속도 정보를 제공하는 도구입니다.
  6. 칼리브리 앱: Lighthouse 인프라를 사용하여 여러 페이지를 경쟁사와 비교할 수 있는 도구입니다.
  7. 속도곡선: RUM 및 합성 사이트 속도 데이터를 찾을 수 있는 유료 도구입니다.
  8. 옐로우랩: 인프라에 대해 고유하고 개선 가능한 측정항목을 제공하는 유용한 도구입니다.
  9. 스피드 키트: 사이트 문제를 진단할 뿐만 아니라 처리하는 보기 드문 도구 중 하나이며 WordPress 플러그인 및 일반 사이트에서 사용할 수 있습니다.
  10. Perfmatters.io: WordPress용 경량 성능 플러그인입니다.

이미지 크기를 줄이는 도구

  1. 이미지파이.io: API와 WordPress 플러그인을 사용하여 이미지 크기를 줄이는 도구입니다.
  2. 스쿼시.app: 이미지를 MozJPEG, OptiPNG 및 WebP와 같은 형식으로 변환하는 매우 간단하고 빠른 도구입니다.
  3. TinyJPG: JPG 크기를 줄이는 간단한 도구입니다.
  4. TinyPNG: 이전 도구의 PNG 버전입니다.
  5. Compressor.io: JPEG, PNG, GIF, SVG 형식을 압축하고 상대적인 시각적 측면이 돋보이는 플랫폼입니다.
  6. 크라켄: WordPress 및 Magento 플러그인과 함께 JPEG, PNG, GIF, 애니메이션 GIF 및 SVG 형식을 제공하는 API 지원을 갖춘 가장 오래되고 강력한 도구 중 하나입니다.
  7. Optimizilla: 간단하고 매우 유용한 JPEG 및 PNG 파일 압축기입니다.
  8. ImageOptim: Mac 컴퓨터에서 일괄 이미지 압축에 특히 유용한 온라인 도구입니다.
  9. 크러시 사진: API를 통해서도 사용할 수 있는 Shopify 및 WordPress 플러그인을 사용하여 이미지에 대한 무손실 최적화를 제공하는 도구입니다.
  10. 미니 파이어: 이미지에 대한 대체 태그를 생성하는 Shopify용 SEO 친화적인 도구입니다.
  11. 김프 웹용으로 저장: 일괄 이미지 압축을 허용하는 Windows용 애플리케이션입니다.
  12. 웹사이트 이미지 분석 도구: 입력 URL을 기준으로 어떤 이미지 형식이 더 최적화되어 있는지 알려주는 도구입니다.

CSS, JavaScript, HTML 최적화 도구

  1. 새로고침-SF: CSS, JS, HTML을 모두 하나의 사이트에 압축하는 도구입니다.
  2. 클린CSS: CSS 압축에 널리 사용되는 도구입니다.
  3. 스타일깔끔하다: CSS, JS, HTML 형식을 단일 플랫폼에서 압축하는 도구입니다.
  4. CSS 최적화 프로그램: CSS 최적화를 제공하는 플랫폼입니다.
  5. 태비어: HTML, CSS, JSON 코드 구조를 압축하는 플랫폼입니다.
  6. 미니 파이어: CSS와 JS 구조를 압축하는 플랫폼입니다.
  7. 중요한 CSS: 페이지에서 중요한 CSS를 추출하기 위해 Addy Osmani가 개발한 GitHub 소스 코드입니다.
  8. 정화 CSS: 페이지에서 사용되지 않는 CSS를 분리하는 매우 유용한 도구입니다.

이러한 도구는 귀하의 작업을 크게 향상시킬 수 있습니다. 웹사이트의 성능 페이지 속도 측정부터 자산 크기 감소 및 코드 최적화에 이르기까지 다양한 측면을 최적화합니다.