프론트엔드 최적화 솔루션 - CDN 최적화

프런트엔드 CDN 최적화 솔루션에는 주로 다음이 포함됩니다.

1: 리소스를 로드하는 도메인 이름에 CDN을 사용합니다. CSS, js, 이미지 등과 같은 프런트 엔드 페이지에서 참조되는 정적 리소스는 CDN을 사용하여 가속화될 수 있습니다. 리소스를 CDN에 업로드한 다음 페이지에서 CDN의 리소스 링크를 참조하세요.

http://www.example.com/images/logo.png

CDN 사용 후 주소는 다음과 같습니다.

http://cdn.example.com/images/logo.png

2: CDN을 사용하여 글꼴 로딩 속도 향상: 페이지에서 글꼴 파일이 사용되는 경우 CDN을 사용하여 글꼴 파일 로딩 속도를 높이는 것을 고려할 수 있습니다.

CDN을 사용하면 사용자에게 가장 가까운 서버에 글꼴을 로드할 수 있으므로 글꼴 로드 속도가 빨라집니다.

CDN을 사용하여 글꼴 로딩 속도를 높이는 단계는 다음과 같습니다.

1. 믿을 수 있는 글꼴 CDN 서비스 제공업체를 찾으세요. Google Fonts, Adobe Fonts 및 Fonts.com은 모두 CDN 서비스를 제공합니다. 귀하는 다른 제3자 서비스 제공업체를 이용할 수도 있습니다.

2. HTML 파일에 글꼴 CDN 링크를 포함시킵니다. 링크 형식은 다음 예와 유사합니다.

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>

3. CSS 스타일시트에 글꼴 이름을 적용합니다. 예를 들어:

body {
    font-family: 'Open Sans', sans-serif;
}

4. 브라우저 개발 도구를 사용하여 글꼴이 CDN에서 로드되었는지 확인하여 시나리오가 성공했는지 확인합니다.

3: 캐시 제어 설정: 정적 리소스에 대한 캐시 제어를 설정하면 페이지에 대한 HTTP 요청 수를 효과적으로 줄이고 페이지 로딩 속도를 향상시킬 수 있습니다. Expires 및 Cache-Control 응답 헤더를 설정하여 브라우저 캐싱을 제어합니다.

Expires 및 Cache-Control은 브라우저 캐싱 동작을 제어하는 데 사용되는 HTTP 응답 헤더 필드입니다.

Expires는 응답의 만료 시간을 지정하여 만료 시간 전에 브라우저 캐시에서 직접 리소스를 얻을 수 있음을 브라우저에 알려줍니다. 만료 시간은 서버 시간이며 고정 시간으로 설정해야 합니다. 예를 들어 지정된 리소스는 5분 후에 만료됩니다.

Expires: Wed, 21 Oct 2019 07:28:00 GMT

Cache-Control은 캐시 여부, 캐시 시간 등과 같은 캐시 동작을 지정할 수 있는 캐시 제어를 나타냅니다. 일반적으로 사용되는 지침은 다음과 같습니다.

public: CDN 등을 포함한 모든 사용자가 응답을 캐시할 수 있음을 나타냅니다.
private: 응답은 단일 사용자만 캐시할 수 있고 CDN 등에서는 캐시할 수 없음을 나타냅니다.
no-cache: 브라우저가 캐시의 유효성을 다시 확인해야 함을 나타냅니다.
max-age: 지정된 리소스를 캐시할 수 있는 최대 시간입니다. 예를 들어 지정된 리소스를 10분 동안 캐시할 수 있습니다.

Cache-Control: max-age=600

Expires 및 Cache-Control을 설정할 때 다음과 같은 두 개의 응답 헤더를 동시에 설정할 수 있습니다.

Expires: Wed, 21 Oct 2019 07:28:00 GMT
Cache-Control: max-age=600, public

이는 만료 시간 전에 모든 사용자가 리소스를 캐시할 수 있으며, 10분 동안 캐시할 수 있음을 의미합니다.

4: 불필요한 쿠키 비활성화: 정적 리소스 요청의 경우 쿠키를 설정할 필요가 없으므로 불필요한 쿠키를 비활성화할 수 있습니다.

불필요한 쿠키를 비활성화하면 HTTP 요청 헤더의 크기가 줄어들어 응답 속도가 향상될 수 있습니다. 이는 HttpOnly 속성을 설정하거나 브라우저 플러그인을 사용하여 서버 측에서 달성할 수 있습니다.

쿠키 설정 시 HttpOnly 속성이 추가되는데, 이 속성을 사용하면 클라이언트 JavaScript에서 해당 쿠키에 접근하는 것을 방지할 수 있습니다. 이러한 방식으로 쿠키는 크로스 사이트 스크립팅 공격에 악용될 수 없으며 쿠키 크기도 줄어들 수 있습니다. 서버 측에서 다음 응답 헤더를 설정할 수 있습니다.

Set-Cookie: mycookie=xxx; HttpOnly

쿠키는 브라우저 플러그인을 사용하여 선택적으로 비활성화할 수 있습니다. 예를 들어, Chrome 브라우저의 EditThisCookie 플러그인은 쿠키를 쉽게 관리하고 불필요한 쿠키를 비활성화하거나 삭제할 수 있습니다.

다섯 번째: js의 비동기 로딩: 즉시 로드할 필요가 없는 일부 js의 경우 비동기 로딩을 사용하여 페이지 로딩 속도에 영향을 주지 않을 수 있습니다.

비동기 로딩(Asynchronous Loading)은 웹 페이지 성능을 최적화하기 위한 일반적인 방법으로, 페이지 로드 속도를 높이고 사용자 경험을 향상시킬 수 있습니다. js 파일의 비동기 로딩은 페이지 렌더링 차단을 방지하고 페이지 로딩 속도를 높일 수 있습니다. 다음은 js의 비동기 로딩을 구현하는 두 가지 방법입니다.

1. 비동기 속성을 사용하세요

HTML5에서 async 속성을 추가하면 js 파일을 비동기적으로 로드할 수 있습니다. 예를 들면 다음과 같습니다.

<script src="your-script.js" async></script>

이러한 방식으로 브라우저는 페이지 렌더링을 차단하지 않고 비동기적으로 your-script.js 파일을 다운로드하고 실행합니다. js 파일의 비동기 로딩으로 인해 파일의 실행 순서가 변경될 수 있으며, 서로 다른 파일 간의 종속성을 보장해야 한다는 점에 유의해야 합니다.

2. 동적으로 생성된 스크립트 태그를 사용하세요.

js의 비동기 로딩을 구현하는 또 다른 방법은 JavaScript를 사용하여 스크립트 태그를 동적으로 생성하는 것입니다. 예를 들면 다음과 같습니다.

var script = document.createElement('script');
script.src = 'your-script.js';
document.head.appendChild(script);

이렇게 하면 브라우저가 your-script.js 파일을 비동기식으로 다운로드하고 실행하여 페이지 로드 속도가 더 빨라집니다. async 속성을 사용하는 것에 비해 동적으로 생성된 스크립트 태그를 사용하면 파일 간의 종속성을 더 잘 제어할 수 있으며, 실행 순서를 보장하면서 다른 js 파일을 비동기적으로 로드할 수 있습니다.

여섯째: HTTP2 프로토콜을 사용합니다. HTTP2 프로토콜은 리소스와 파일을 더 빠르게 로드할 수 있으므로 웹사이트의 응답 속도가 향상됩니다. 대부분의 CDN 서비스 제공업체는 HTTP2 프로토콜을 지원합니다.

HTTP2 프로토콜을 사용하는 것은 웹사이트 성능을 최적화하는 효과적인 방법으로, 웹페이지 로딩 속도를 높이고 사용자 경험을 향상시킬 수 있습니다. HTTP2 프로토콜은 HTTP1.1 프로토콜에 비해 다음과 같은 장점이 있습니다 .

멀티플렉싱: HTTP2 프로토콜은 하나의 연결에서 여러 요청과 응답을 동시에 전송할 수 있는 멀티플렉싱을 지원하므로 HTTP1.1의 헤드 오브 라인 차단 문제를 피할 수 있습니다.
바이너리 전송: HTTP2 프로토콜은 바이너리 형식을 사용하여 데이터를 전송합니다. HTTP1.1의 텍스트 형식을 대체하여 전송되는 데이터의 크기를 줄여 전송 효율성을 향상시킵니다.
헤더 압축: HTTP2 프로토콜은 HPACK 알고리즘을 사용하여 요청 및 응답 헤더를 압축하여 전송되는 데이터의 크기를 줄이고 전송 효율성을 향상시킵니다.
서버 푸시: HTTP2 프로토콜은 서버 푸시를 지원합니다. 이는 클라이언트가 페이지 로딩 속도를 높이기 위해 요청을 보내기 전에 일부 리소스를 클라이언트에 적극적으로 푸시할 수 있습니다.

HTTP2 프로토콜을 사용하려면 다음 조건을 충족해야 합니다.

HTTP2 프로토콜은 HTTPS 프로토콜을 통해서만 사용할 수 있으므로 웹 사이트는 HTTPS 프로토콜을 사용해야 합니다.
서버와 클라이언트는 HTTP2 프로토콜을 지원해야 하며, 대부분의 최신 브라우저와 웹서버는 이미 HTTP2 프로토콜을 지원하지만, 추가 구성이 필요한지 확인해야 합니다.
웹사이트의 리소스 크기가 HTTP2 프로토콜 다중화 및 헤더 압축에 적합한지 확인하세요. 리소스가 너무 작으면 멀티플렉싱 및 헤더 압축으로 인해 추가 오버헤드가 발생할 수 있습니다.

일곱 번째: DNS 프리페칭: DNS 프리페칭을 사용하면 타사 도메인 이름의 DNS 확인 결과를 미리 얻을 수 있으므로 리소스 요청 속도가 높아집니다.

DNS 프리페칭은 웹사이트 성능을 최적화하는 기술로, DNS 쿼리 시간을 줄이고 웹페이지 로딩 속도를 높일 수 있습니다. DNS 쿼리는 브라우저가 웹페이지를 로드하는 첫 번째 단계로, 웹사이트 도메인 이름에 해당하는 IP 주소를 확인하도록 DNS 서버에 요청해야 합니다. DNS 프리페칭은 브라우저가 웹 페이지 로딩을 시작하기 전에 웹 페이지에서 사용할 도메인 이름에 해당하는 IP 주소를 미리 확인하여 DNS 쿼리 프로세스를 가속화할 수 있습니다.

DNS 프리페칭을 사용하려면 웹페이지 헤드의 HTML 코드에 다음 코드를 추가하세요.

<link rel="dns-prefetch" href="//example.com">

그 중 href속성은 프리패치할 도메인 이름을 지정합니다. 미리 가져온 여러 도메인 이름을 동일한 페이지에 추가할 수 있으며, 각 도메인 이름에 대해 한 줄씩 추가할 수 있습니다.

DNS 프리페치를 사용하면 페이지 로딩 속도가 빨라질 수 있지만 DNS 프리페치를 과도하게 사용하면 일부 문제가 발생할 수도 있습니다. 많은 도메인 이름을 프리페치하면 네트워크 부하와 대역폭 오버헤드가 증가하고 DNS 캐시 오염이 발생할 수 있습니다. 따라서 프리페치할 도메인 이름 수는 웹사이트의 실제 상황에 따라 선택해야 합니다.

여덟 번째: Gzip 압축: Gzip 압축을 사용하면 리소스 요청 크기를 줄이고 응답 시간을 단축하며 성능을 향상시킬 수 있습니다.

Gzip 압축은 HTML, CSS, JavaScript 등의 텍스트 파일 크기를 줄여 페이지 로딩 속도를 높이고 네트워크 전송 오버헤드를 줄일 수 있는 일반적으로 사용되는 웹 페이지 성능 최적화 기술입니다. Gzip 압축은 텍스트 파일의 반복성을 활용하여 반복된 내용의 복사본을 하나만 유지하고 여러 개의 반복된 내용을 이러한 반복된 내용을 가리키는 참조로 대체합니다. 전송 중에 콘텐츠의 복사본 하나만 전송되므로 네트워크 크기가 줄어듭니다. .전송 오버헤드.

일반적으로 Gzip 압축 기능은 서버 측에서 활성화할 수 있는데, 서버가 파일을 보내면 클라이언트가 Gzip 압축을 지원하는지 확인하고, 지원한다면 파일을 압축한 뒤 클라이언트로 보낸다. 대부분의 최신 브라우저는 Gzip 압축을 지원하므로 서버 측에서 Gzip 압축을 활성화하여 웹 사이트 성능을 향상시킬 수 있습니다.

Apache 서버의 경우 .htaccess파일에 다음 코드를 추가하여 Gzip 압축을 켤 수 있습니다.

<IfModule mod_deflate.c>
    # force deflate for mangled headers
    # developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    # HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
    <IfModule filter_module>
        FilterDeclare   COMPRESS
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $text/html
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $text/css
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $text/plain
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $text/xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $text/x-component
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/javascript
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/json
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/rss+xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/atom+xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $image/svg+xml
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
        FilterProvider  COMPRESS DEFLATE resp=Content-Type $font/opentype
        FilterChain     COMPRESS
        FilterProtocol  COMPRESS DEFLATE change=yes;byteranges=no
    </IfModule>

    <IfModule !mod_filter.c>
        # Legacy versions of Apache
        AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
        AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
        AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
    </IfModule>
</IfModule>

위 내용은 Apache 서버에서의 설정 방법이며, 다른 서버에서는 구체적인 설정 방법이 다를 수 있으므로, 자세한 내용은 해당 서버 설명서를 확인하시기 바랍니다.

9: 이미지 최적화: 큰 이미지를 자르고 압축하여 파일 크기를 줄이고 페이지 로딩 속도를 향상시킬 수 있습니다.

일반적으로 사용되는 프런트엔드 이미지 최적화 기술은 다음과 같습니다.

이미지 압축: TinyPNG, JPEGmini 등과 같은 전문적인 이미지 압축 도구를 사용하여 이미지 크기를 더 작은 크기로 압축하여 파일 크기를 줄입니다. PNG 형식 이미지의 경우 손실 압축을 사용하여 파일 크기를 줄일 수 있습니다.
WebP 형식 이미지 사용: Google에서 개발한 WebP 형식 이미지는 이미지 크기를 보다 효율적으로 압축할 수 있으므로 파일 크기가 줄어들고 웹사이트 로딩 속도가 향상됩니다. 그러나 WebP 형식 이미지는 일부 이전 브라우저에서는 아직 지원되지 않습니다.
이미지 로딩 지연: 일부 큰 이미지의 경우 지연된 이미지 로딩을 사용하여 로딩 속도를 최적화할 수 있습니다. 즉, 페이지 내의 이미지를 섹션별로 로딩하고, 사용자가 페이지를 특정 위치로 스크롤하면 해당 위치 아래의 이미지를 로딩함으로써 첫 번째 화면의 로딩 시간을 단축시킨다.
적절한 이미지 형식 사용: 다양한 유형의 이미지에 대해 다양한 이미지 형식을 적절하게 선택하면 파일 크기를 줄일 수 있습니다. 예를 들어 아이콘, 간단한 벡터 그래픽 등의 경우 SVG 형식 이미지를 사용하도록 선택할 수 있으며, 사진과 같은 복잡한 이미지의 경우 JPEG 형식 이미지를 사용하도록 선택할 수 있습니다.
CDN 가속: CDN 가속 서비스를 사용하면 CDN 서버에 이미지를 캐시할 수 있으므로 이미지 로딩 속도가 빨라지고 원본 서버에 대한 요청 수가 줄어들며 웹사이트 성능과 사용자 경험이 향상됩니다.

위의 이미지 최적화 기술을 적용하면 웹사이트의 성능과 사용자 경험을 크게 향상시킬 수 있습니다.

10: js 및 css 파일 압축 및 병합: 동일한 유형의 일부 js 및 css 파일을 압축 및 병합하여 파일 크기를 줄임으로써 요청 수를 줄이고 페이지 로딩 속도를 향상시킵니다.

js, css 파일을 압축하면 파일 크기가 줄어들어 네트워크 전송 오버헤드가 줄어듭니다. 일반적으로 사용되는 압축 방법에는 두 가지가 있는데, 하나는 코드에서 공백, 줄 바꿈, 주석 등과 같은 쓸모 없는 문자를 삭제하여 파일 크기를 줄이는 것이고, 다른 하나는 압축 알고리즘을 사용하여 코드를 압축하는 것입니다. 파일 크기 추가 감소 파일 크기 일반적으로 사용되는 js 및 css 파일 압축 도구에는 UglifyJS, YUI Compressor, Google Closure Compiler 등이 있습니다.

이러한 프런트엔드 CDN 최적화 솔루션의 구성은 특정 상황에 따라 조정 및 최적화되어 최상의 결과를 얻을 수 있습니다.