BBC의 성능 부스터에서 캐시

Sep 11, 2025

어떻게

A cached image of the BBC homepage featuring a selection of news headlines

작년 BBC 뉴스 앱의 사용자 테스트 세션 중 하나는 사용자 중 한 명이 정말로 나와 갇혀있는 의견을 만들었습니다. 그들은 "나는 흐르고 싶다"를 선언했다. 우리에게 어떤 성과 수단이 무엇인지 더 나은 요약이 있다고 생각하지 않습니다. 빠른 앱이나 웹 사이트에서 사용자는 콘텐츠를 유입하고 상호 작용하고 컨텐츠와 연결할 수 있습니다.

유동 경험은 사이트 소유자에게도 좋습니다. 빠르게 흐르는 경험은 사용자가 자신의 목표를 달성하고 조직의 목표를 달성하는 데 도움이됩니다. Amazon과 다른 사람들은 성능과 사용자 활동 간의 강력한 링크를 보여주었습니다. 페이지가 거절당한 기다리면 사용자가 보내는 시간과 비용이 올라갑니다.

더 읽기 : Nordvpn Review.

캐시로 거리를 자르십시오

캐시는 소량의 무언가가 필요한 곳에 더 가까워지면서 재 작업을 방지하기 위해 일반적으로 저장됩니다. 예를 들어, 만약 내가 skittles를 먹는다면 나는 몇 가지를 내 손에 붓고 거기에서 먹는 경향이 있습니다. 사실상, 나는 패킷으로 돌아가는 것보다 더 빨리 먹는 것이 더 빠를 때, 내 손에 들리는 캐시를 만듭니다.

이 동일한 패턴은 기술에서 사용됩니다. 고려해야 할 세 개의 캐시가 있습니다.

서버 캐시 : 데이터베이스 쿼리의 결과와 같은 서버의 캐시 된 데이터
네트워크 캐시 : 사이트 운영자 (역방향 프록시 캐시로 알려짐)가 때로는 네트워크에 내장 된 캐시가 있지만 ISP 또는 다른 네트워킹 공급자가 더 자주
브라우저 캐시 : 브라우저는 사용자가 재사용하기 위해 사용자의 하드 드라이브에 파일을 저장합니다.

캐싱은 엄청난 성능 향상을 위해 만들 수 있습니다. BBC에서는 Production Code에서 20 배 이상 성능을 향상 시켰습니다. 사이트 운영자도 유익합니다. 캐싱을 사용하면 더 많은 사용자가 동일한 하드웨어에서 지원할 수 있습니다. 이렇게하면 사용자 당 하드웨어의 비용이 절감되므로 웹 사이트 운영 비용이 절감됩니다.

캐시로 디자인하십시오

효과적이기 위해서는 가능한 한 캐시 된 데이터를 사용하고자합니다. Skittles 비유를 확장하려면 파란색 Skittle을 원하지 만 손에 푸른 푸른 가죽을 가지고 있지 않습니다 (일명 내 캐시). 패킷으로 돌아 가야합니다. 이것은 '히트 율'이라고합니다. 항목이 캐시에있을 때 '히트'와 '미스'가 아니면 '미스'입니다. 캐시가 대부분의 하중을 가져 오도록 높은 히트율을 원합니다.

적중률을 높이는 가장 간단한 방법 중 하나는 변동을 줄이는 것입니다. 조금 내마이를 뻗어 모든 멍청이가 빨갛게되었다고 상상해보십시오. 그런 식으로, 내 손에있는 skittle은 캐시 히트가 될 것입니다. 나는 결코 패킷으로 돌아갈 필요가 없다. 웹 에이 문제를 적용하면 가능한 한 많은 사용자에게 동일한 페이지를 제공 할 수 있으면 더 많은 요청이 캐시를 누르면 캐시가 더 효과적입니다.

짧은 시간 동안 HTML을 캐시하십시오

A 30-second cache of the BBC News homepage displaying regularly updated content — 뉴스 홈페이지는 30 초의 최대 캐시 헤더를 사용하여 너무 많은로드없이 사용자 앞에서 콘텐츠를 빠르게 가져옵니다.

그래서 그 이론입니다. 실용 해 보겠습니다. HTML 요청을 캐싱하는 것을보고 시작합시다. 모든 파일 형식의 캐싱은 HTTP 헤더를 사용하여 제어됩니다. 헤더는 서버에서 브라우저로 보낸 메타 데이터 (데이터 데이터)이며 간극 중간의 모든 네트워크 하드웨어에서 볼 수 있습니다. 세계에 우리의 페이지를 캐시하고 사용자간에 해당 캐시를 공유 할 수있는 권한이있는 경우 다음 헤더를 설정할 수있는 권한이 있습니다.

Cache-Control: public, max-age=30

여기에서는 시간 제한을 설정했습니다. 캐시 가이 페이지를 초 단위로 재사용 해야하는 최대 시간입니다. 이 예제에서는 30 초로 설정했습니다.

페이지를 '공개'로 설정하면 사용자의 브라우저 (및 방식에 따라 모든 하드웨어)가 복사본을 보관할 것입니다. 따라서 첫 번째 페이지로드는 요청을 만들지만 모든 페이지로드는 시간 제한에 도달 할 때까지 원래의 응답을 재사용합니다.

이 길을 따라 네트워크 하드웨어의 효과는 깊이있을 수 있습니다. 많은 대규모 네트워크 (예 : ISPS)는 사용자간에 캐시 공유가 있습니다. 모바일 운영자는 3G에서 제공되는 이미지를 캐시하고 재구성하는 것과 같이이 기술을 많이 사용합니다. 사이트 운영자는 서비스 앞에 HTTP 캐시를 배치 할 수도 있습니다. 이것은 우리가 BBC에서 한 일입니다.

시대에 대한 정적 자산 캐시

A longer-term cache of BBC iPlayer displaying content that is updated only periodically — BBC iPlayer는 1 년 동안 정적 자산을 저장합니다. URL 변경 사용자가 새 버전을 즉시 볼 수 있도록합니다.

우리가 BBC에서 많은 것을 사용하는 기술은 우리가 페이지를 어떻게 대우하는지와 다르게 정적 자산 (예 : 이미지, CSS 및 스크립트)을 처리하는 것입니다. HTML 페이지를 너무 오랫동안 캐싱하면 사용자가 콘텐츠 업데이트가 누락되지만 정적 자산이 발생할 때이 동작을 활용할 수 있습니다.

BBC에서 우리는 캐시 헤더에 설정된 최대 31,536,000 초의 최대 1,536,000 초의 모든 정전기 자산을 보냅니다. 이렇게하면 자산이 365 일 동안 캐시됩니다. 결과적으로 자산은 한 번만 요청됩니다. 이것은 성능을 위해 좋지만, 해당 자산의 변경 사항이 사용자에게 가기까지 오랜 시간이 걸릴 때까지 유연성에 좋습니다.

이 문제를 해결하려면 새 버전의 페이지를 릴리스 할 때마다 자산이 유지되는 URL을 변경합니다. 이 속임수는 새로운 변경 사항이 즉시 사용자 앞에 놓여 있지만 여전히 동일한 성능 혜택을 얻을 수 있음을 의미합니다.

최종 단어

웹 사이트 성과를 향상시키기 위해 캐싱하면 웹 사이트의 운영 비용이 줄어들고 사용자의 흐름을 보존하여 훌륭한 사용자 경험을 선도합니다.

이 기사는 원래 웹 디자이너 및 개발자를위한 세계 최고의 판매 매거진 인 NET 279 호에 출판되었습니다. 구입 문제 279. 또는 Net에 가입하십시오 ...에

사이트를 속도 향상시키는 다른 방법을 배우고 싶습니까?

Jason Lengstorf is giving his workshop Modern Front-End Performance Strategies and Techniques at Generate New York from 25 27 April 2018 — Jason Lengstorf는 2018 년 4 월 25 일부터 25 일까지 뉴욕을 생성하는 워크샵 현대 프런트 엔드 실적 전략 및 기술을 제공합니다.

Jason Lengstorf는 개발자, 디자이너, 저자 및 친근한 곰입니다. 그의 초점은 사람, 팀 및 소프트웨어의 효율성과 성과에 관한 것입니다. IBM에서 그는 옳은 일을 쉽게 할 수 있도록 프로세스와 시스템을 만듭니다. 다른 시간에 그는 새롭고 더 나은 간식을 찾아 지구를 방황합니다.

그의 워크샵 현대 프런트 엔드 성과 전략 및 기술 2018 년 4 월 25-27 일부터 뉴욕을 생성합니다 또한 Jason은 인식 된로드 시간을 향상시키는 방법을 향상시킬 것입니다 - 페이지를로드하는 데 걸리는 것처럼 느껴지는 기분이 얼마나 걸립니다.

골격 로딩 패턴
정적 자산을위한 더 나은 적재
게으른 로딩
서비스 노동자
프로세스를 더 잘 빌드하십시오!

2018 년 4 월 25-27 일부터 뉴욕을 창출합니다. 지금 티켓을 가져 가라 ...에

관련 기사:

4 가지 팁이 페이지의 성능을 향상시킵니다
웹 성능을 못 박는 7 개의 전문가 팁
웹 사이트를 가속화하는 3 가지 간단한 방법

BBC의 성능 부스터에서 캐시

캐시로 거리를 자르십시오

캐시로 디자인하십시오

짧은 시간 동안 HTML을 캐시하십시오

시대에 대한 정적 자산 캐시

최종 단어

사이트를 속도 향상시키는 다른 방법을 배우고 싶습니까?

어떻게 - 가장 인기있는 기사

WordPress 사이트 속도 향상 및 최적화 방법

Houdini가있는 작업 이미지 마스크 마술

SASS에서 미디어 쿼리를 구조하는 방법

19 세기 마스터처럼 페인트하는 방법

2018 년 Flash 웹 사이트 재구성

돔 라이트로 3D 작업을 비추십시오

3D 세계의 파일 다운로드 232

VR 게임 세계를 만드는 13 가지 팁

카테고리