이미지가 많은 사이트 속도 향상

지원
1

Cloudflare와 무거운 이미지 사이트를 사용할 때의 경고들을 모두 확인한 후, 진행 중인 작은 개인 프로젝트에서 이 도전을 받아들이기로 결정했습니다. Cloudflare 사용에는 대체로 성공적이었지만, JS 실행이 완료되기 전에 테마 이미지가 로드되지 않는 이유를 파악하는 데 어려움을 겪고 있습니다(CDN 문제가 아닌 것 같습니다).

이미지가 더 일찍 로드되도록 하는 방법이 있을까요(JS/CSS와 동시에, 또는 JS 실행 중에)? 아니면 불가능한 것일까요? 이것이 필요한 우선순위 설정 때문일 수 있을까요?

아래는 webpagetest.org 결과이며, 제 관심사는 마지막 JS 스크립트가 로드 완료되는 약 2.3초 시점과 이미지가 다운로드를 시작하는 약 3.4초 시점 사이의 큰 간극입니다.

image
image1098×1514 328 KB

테마 레이아웃:

image
image1859×1488 466 KB

구성
링크: https://investorcommunity.org
테마: Graceful
서버: DO Droplet(추가 캐싱 또는 s3 없음)
CDN: Cloudflare(무료 버전, JS 간섭을 방지하기 위해 “Rocket Loader” 비활성화). 참고로, Cloudflare를 비활성화해도 이 특정 문제는 영향을 받지 않는 것으로 보입니다.

아무 아이디어가 있으시면 알려주시면 감사하겠습니다..

2

그 간격은 JS 실행 기간으로, Discourse EmberJS 앱을 다운로드하는 것을 완료하고 시작하는 단계입니다. EmberJS 앱을 현대화하는 작업을 여러 명이 진행 중이며, 올해 이 작업의 이점을 누리기 시작할 것입니다.

하지만 자바스크립트 애플리케이션이므로 항상 일부 JS 실행이 이루어집니다. 따라서 커뮤니티에 Discourse를 사용하기로 결심하셨다면 이 부분에 대해 너무 걱정하지 않으셔도 됩니다.

3

말씀이 일리 있네요. 설명해 주셔서 감사합니다.

해당 스크립트가 초기화되는 동안 테마 이미지 전송을 병렬로 시작할 수 있는 방법이 있을까요? 그렇게 하면 JS가 완료되는 즉시 이미지가 미리 로드되어 표시될 수 있을 텐데 말입니다. 아니면 JS 스크립트가 어떤 이미지를 가져올지 파악하는 데 필수적인 선행 조건인 건가요?

EmberJS 소식에 기대가 큽니다. 여러분이 계속 내놓고 있는 훌륭한 개선 사항들을 기대하고 있습니다!