실패는 시도하지 않는 것보다 낫다

가장 오랜 시간 동안 내 웹사이트를 더욱 최적화하고 싶었습니다.
주말마다 시간을 할애하여 어디에서 더 최적화할 수 있는지 알아보려고 합니다.

이번 주말에는 CSS 로딩이 전부였습니다.
이미 꽤 최적화되어 있고 내가 생각할 수 있는 항목은 두 개뿐이었습니다.

페이지별 로드

스타일시트 미리 로드

페이지별 로드

안타깝게도 Astro의 Tailwind에서는 하나의 일반 출력 CSS를 사용하므로 지원되지 않습니다.
내 웹사이트의 경우 게시물 페이지에는 홈페이지에 비해 몇 줄의 추가 CSS만 있기 때문에 큰 차이가 없습니다.

그러나 여전히 더 많이 사용되는 것을 최적화할 수 있는 방법을 찾고 있습니다.

결론: 빠른 승리를 위해 최적화할 것이 없습니다. 더 많은 연구가 필요합니다.

스타일시트 미리 로드

이것이 도움이 될지는 모르겠지만 rel="preload" 링크를 추가하여 기본 스타일시트를 중요하다고 선언할 수 있습니다.
이것은 페이지가 가장 우선 순위로 이것을 가져와야 함을 나타냅니다.

시도하기는 쉬울 것 같았지만 많은 연구와 시도가 필요했습니다.

Astro 문서를 검토한 결과 ?url 매개변수를 추가하여 일반 URL로 스타일시트를 로드할 수 있다는 것을 알았습니다.

그런 다음 다음과 같이 직접 로드할 수 있습니다.

---
import stylesUrl from '../styles/main.css?url';
---
<link rel="preload" href={stylesUrl} as="style">
<link rel="stylesheet" href={stylesUrl}>

dev 버전은 완벽하게 작동했지만 이것을 빌드로 출력하려고 시도했고 전체 CSS 파일을 base64로 인코딩한 것을 확인했습니다.

이것이 발생할 수 있다는 문서에 문서화되어 있으며 이 Vite 구성을 비활성화해야 합니다.
내 astro.config.mjs 파일에 다음을 추가했습니다.

export default defineConfig({
  vite: {
    build: {
      assetsInlineLimit: 0,
    },
  },
});

빌드 출력을 다시 실행하고 다음과 같이 컴파일된 CSS로 끝났습니다.

@tailwind base;
@tailwind components;
@tailwind utilities;
.some-of-my-custom-css {
  // ...
}

아, Tailwind가 현재 처리되지 않았기 때문에 제가 원했던 것이 아닙니다.

옵션 3에 대한 기존 빌드 컴파일 CSS 파일 중 하나를 가져와 내 프로젝트에 넣었습니다.

Note: My CSS doesn't ever change, so that it could be a viable option.

이 CSS 파일을 로드하도록 가져오기를 변경했습니다.

얼마나 빨리 로드되는지 확인하기 위해 열심히 테스트를 다시 시도했습니다.
실망스럽게도 뒤로 물러났습니다. 이제 첫 번째 바이트를 로드하는 데 또 다른 2ms가 더 걸렸습니다.

따라서 CSS 최적화를 사용하여 드로잉 보드로 돌아갑니다.

결론

때로는 예상대로 작동하지 않는 작업에 많은 노력을 기울였을 수 있습니다.

그것은 완전히 괜찮고 모든 사람에게 발생합니다.
적어도 당신은 무언가를 배웠고 그것을 시도했습니다.

나는 일반적으로 실패한 실험에 대해 많이 쓰지 않지만 첫 번째 시도에서 무언가가 작동하지 않을 때 다른 사람들이 기분 나쁘게 생각하지 않는 데 도움이 될 것이라고 생각했습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나