프로그레시브 렌더링: 콘텐츠 표시 성능 향상

프로그레시브 렌더링은 특히 콘텐츠가 사용자에게 표시되는 속도 측면에서 웹 페이지 성능을 향상하는 데 사용되는 기술 집합입니다. 전체 페이지가 한 번에 로드되는 대신 페이지의 일부가 점진적으로 표시되고 로드됩니다. 목표는 콘텐츠를 최대한 빨리 표시하여 지각적 로딩 시간, 즉 사용자가 페이지가 로딩되고 있다고 인지하는 시간

을 개선하는 것입니다.

---

프로그레시브 렌더링의 장점

1. 더 빠른 표시 시간 - 사용자는 첫 번째 콘텐츠를 더 빠르게 볼 수 있어 특히 느린 네트워크에서 사용자 경험이 향상됩니다.

2. 저사양 기기에 대한 최적화 - 성능이 낮은 기기일수록 초기 콘텐츠를 지연 없이 더 쉽게 표시할 수 있습니다.

3. SEO는을 사용합니다. - 검색 엔진은 초기에 로드된 요소를 색인화하여 페이지 순위를 높이는 데 도움이 됩니다.

---

프로그레시브 렌더링 기술

프로그레시브 렌더링에 사용되는 기술에는 이미지 및 기타 리소스에 대한 지연 로딩, 서버측 렌더링(SSR) 및 클라이언트측 하이드레이션 코드 SPA가 포함됩니다. 신청하세요.

프로그레시브 렌더링은 인터넷 속도가 느린 시대에 특히 중요했지만, 신뢰할 수 없는 모바일 네트워크의 광범위한 사용으로 인해 오늘날의 개발에는 여전히 유용합니다. 프로그레시브 렌더링에 사용되는 몇 가지 기술은 다음과 같습니다.

1. 이미지 지연 로딩(Lazy loading)

이 기술에서는 페이지의 이미지가 한꺼번에 로드되지 않습니다. 대신, 사용자가 페이지에서 이미지가 있는 부분으로 스크롤할 때만 이미지가 로드됩니다. 이런 방식으로 가장 중요한 콘텐츠만 먼저 표시되므로 리소스가 더욱 경제적으로 사용되며 페이지 로드 속도가 빨라집니다.

• 최신 지연 로딩: 이제 HTML은 에 대한 loading="lazy" 속성을 지원합니다. 사용자가 페이지 근처로 스크롤할 때까지 페이지의 보이는 부분 외부에 있는 이미지 로드를 지연하도록 브라우저에 지시하는 요소입니다. 예를 들어:

   <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" loading="lazy" alt="Opis slike">

• JavaScript 스크롤 추적: JavaScript를 사용하여 스크롤 위치를 추적할 수 있으며, 이미지가 화면의 보이는 부분에 가까워지면 그 순간 이미지 로드가 트리거될 수 있습니다(이미지의 좌표를 비교하여). 현재 스크롤 위치가 있는 이미지).

2. 눈에 보이는 콘텐츠 우선(오버레이 위에 콘텐츠 렌더링)

'스크롤 없이 볼 수 있는 부분'이란 스크롤하지 않고도 브라우저에 즉시 표시되는 콘텐츠를 의미합니다. 이 핵심 콘텐츠를 페이지에 최대한 빨리 표시하려면 기본 CSS, 초기 페이지 렌더링 스크립트 등 필요한 리소스만 로드하면 됩니다.

리소스 최소화: 페이지를 로드할 때 페이지의 첫 번째 부분을 렌더링하는 데 필요한 최소한의 CSS, 콘텐츠 및 스크립트만 포함해야 합니다. 다른 리소스는 지연 스크립트를 사용하거나 DOMContentLoaded 또는 로드와 같은 이벤트를 모니터링하여 지연할 수 있으므로 초기 표시 후에 추가 리소스가 로드됩니다.

3. 비동기 HTML 조각

이 기술을 사용하면 서버가 HTML의 일부를 브라우저에 보내 페이지가 즉시 렌더링되고 나머지 부분은 연속적으로 로드될 수 있습니다. 이 접근 방식은 콘텐츠가 서버에서 제공되는 동적 페이지에 특히 유용합니다. 즉, 페이지의 일부가 먼저 표시되고 다른 부분은 나중에 추가됩니다.

4. 리소스 미리 로드 및 미리 가져오기

사용 또는 스타일, 스크립트 또는 글꼴과 같은 중요한 리소스가 필요하기 전에 로드합니다. 이를 통해 특히 즉시 필요하지는 않지만 나중에 페이지에서 사용되는 리소스의 경우 콘텐츠를 더 빠르게 로드할 수 있습니다.

5. 코드 분할 및 동적 JavaScript 로딩

JavaScript 코드를 필요할 때만 로드되는 더 작은 부분(청크)으로 나누어 다운로드되는 초기 데이터 양을 줄입니다.

6. CSS 주요 경로(Critical CSS)

초기 페이지 표시를 위해 가장 중요한 CSS만 분리하여 로드하고 나머지는 비동기적으로 로드할 수 있습니다. 이를 통해 페이지의 나머지 부분이 백그라운드에서 로드되는 동안 시각적 콘텐츠를 더 빠르게 렌더링할 수 있습니다.

7. 서버측 렌더링(SSR) 및 정적 사이트 생성(SSG)

사용자에게 전송되기 전에 서버에서 페이지의 일부를 렌더링합니다. 이를 통해 사용자는 JavaScript가 로드될 때까지 기다리지 않고 즉시 콘텐츠를 볼 수 있으므로 성능과 SEO가 향상됩니다.

8. 프로그레시브 웹 앱(PWA)

PWA 기술을 사용하면 사용자가 온라인이 아닐 때에도 애플리케이션을 로드하고 액세스할 수 있어 네트워크 부하가 줄어들고 인터넷 연결이 좋지 않은 상황에서도 콘텐츠를 빠르게 로드할 수 있습니다.

---

결론

프로그레시브 렌더링을 사용하면 콘텐츠 렌더링 속도가 빨라지고 인식되는 로드 시간이 줄어듭니다. 더 빠른 인터넷 연결에도 불구하고 이러한 기술은 모바일 장치 사용 증가와 모바일 네트워크 품질 변화로 인해 여전히 유용합니다. 이러한 방식으로 사용자에게 더 나은 경험을 제공하고 페이지의 가장 중요한 정보에 더 빠르게 액세스할 수 있습니다.

위 내용은 프로그레시브 렌더링: 콘텐츠 표시 성능 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!