Logs

Notes

    • HTML img 태그의 fetchPriority 속성의 기능은? (참고)
      • 이미지 가져오기의 우선순위를 지정할 수 있다.
        • high: 다른 이미지에 비해 높은 우선순위로 이미지를 가져옴.
        • low: 다른 이미지에 비해 낮은 우선순위로 이미지를 가져옴.
        • auto: 기본 모드. 브라우저가 알아서 결정함.
      • https://web.dev/articles/optimize-lcp#optimize-when-the-resource-is-discovered 문서에 따르면,
        • LCP 요소일 가능성이 높다고 생각되면 fetchpriority="high"를 설정하는 것이 좋다. 그러나 하나 또는 두 개 이상의 이미지에 높은 우선순위를 설정하는 것은 LCP를 줄이는 데 도움이 되지 않는다.
        • LCP 리소스는 다음과 같이 미리 로드하는 것을 권장함.
          • <link rel="preload" fetchpriority="high" as="image" href="/path/to/hero-image.webp" type="image/webp">
        • 그리고 loading="lazy" 설정하면 HTML을 사용하여 LCP 이미지를 지연하는 것은 권장하지 않음.
          • 지연 로드를 사용한다는 것은 레이아웃에서 이미지가 뷰포트에 있음을 확인한 후에야 리소스가 로드된다는 의미. 이로 인해 그렇지 않은 경우보다 늦게 로드되는 경우가 많음.
          • 지연 로드를 사용하면 불필요한 리소스 로드 지연이 발생하여 LCP가 증가함.
        • 잘 모르겠다면 fetchPriority=auto를 사용하자.
    • 세컨드브레인
      • 노션 vs 옵시디언: 노션은 독서 목록이나 작업 프로젝트처럼 계획하고 진행 상황을 추적하는 데 좋다. 옵시디언은 웹과 같은 구조로 연결된 텍스트를 작성하는 글쓰기에 좋다. (출처)

Resources