웹 페이지 속도 향상: 기술 SEO 가이드 초보자를 위한 가이드

목차

1. 웹 페이지 속도의 중요성
2. 웹 페이지 속도 최적화 방법
   1. 이미지 최적화
   2. CSS 및 JavaScript 최적화
   3. 캐싱 활용하기
   4. CDN 사용하기
3. 마무리 멘트

1. 웹 페이지 속도의 중요성

웹 페이지 속도는 SEO 성공에 있어 핵심 요소입니다. 속도가 느린 웹 페이지는 사용자들의 경험을 해치고, 더 나아가 검색 엔진 순위에도 영향을 줄 수 있습니다. 그렇기 때문에 이 글에서는 블로그를 시작하는 초보자를 위한 웹 페이지 속도 최적화 방법에 대해서 알아보고 자주하는 질문들을 통해서 중급의 개념까지 확장하겟습니다.

2. 웹 페이지 속도 최적화 방법

2-1. 이미지 최적화

이미지는 웹 페이지 속도에 큰 영향을 줍니다. 고품질의 이미지는 많은 용량을 차지하므로, 이미지 최적화를 통해 속도를 향상시킬 수 있습니다.

1. 용량 줄이기: 이미지 편집 도구(예: Photoshop)를 사용해 이미지의 크기를 줄이고, 저장할 때 "Save for Web" 옵션을 선택합니다. ex) 무조건 100kb 이하
2. 적절한 확장자 선택: 이미지의 확장자를 최적화하는 것도 중요합니다. 일반적으로 JPG는 사진, PNG는 로고와 같은 투명 요소가 있는 이미지에 사용됩니다. ex)jpg가 용량이 작음. jpg 쓰세요.
3. Lazy Loading 적용: 이미지를 불러오는 시점을 늦춤으로써 웹 페이지의 초기 로딩 속도를 개선할 수 있습니다. 이 기능은 대부분의 웹사이트 빌더나 워드프레스 플러그인에서도 지원됩니다.

2-2. CSS 및 JavaScript 최적화

CSS와 JavaScript 파일은 웹 페이지의 스타일과 기능을 결정합니다. 이들 파일을 최적화하면 웹 페이지 속도를 향상시킬 수 있습니다.

1. 코드 최적화: 불필요한 공백, 주석, 줄바꿈 등을 제거하여 코드를 최적화할 수 있습니다. 이를 "Minification"이라고 합니다. 워드프레스의 경우 Autoptimize와 같은 플러그인을 사용하여 코드를 최적화할 수 있습니다.
2. 파일 병합: 여러 개의 CSS 및 JavaScript 파일을 하나로 합치면, 웹 페이지가 서버와의 통신을 줄이며 속도를 개선할 수 있습니다.
3. 비동기 로딩: JavaScript 파일을 비동기로 로딩하면, 웹 페이지의 로딩을 차단하지 않고 자원을 불러올 수 있습니다. 이를 위해 async 또는 defer 속성을 사용할 수 있습니다.

2-3. 캐싱 활용하기

캐싱은 웹 페이지의 로딩 시간을 줄이고 서버의 부하를 낮추는 데 도움이 됩니다. 캐싱은 웹 페이지의 내용을 빠르게 불러올 수 있도록 일정 기간 동안 저장해 놓는 것입니다.

1. 브라우저 캐싱: 브라우저 캐싱을 설정하면, 사용자의 브라우저에 웹 페이지의 일부 요소(이미지, CSS, JavaScript 등)를 저장하여 빠르게 로딩할 수 있습니다. 워드프레스 사용자의 경우 W3 Total Cache, WP Super Cache 등의 플러그인을 사용하여 캐싱을 설정할 수 있습니다.
2. 서버 캐싱: 서버 캐싱은 웹 페이지를 미리 생성하여 서버에 저장하는 방식입니다. 이로 인해 서버는 동적 요청에 대한 응답 시간을 줄일 수 있습니다.

2-4. CDN 사용하기

CDN(Content Delivery Network)은 전 세계의 데이터 센터를 통해 웹 페이지의 콘텐츠를 빠르게 전달하는 서비스입니다. 사용자가 웹 페이지를 요청하면, 가장 가까운 데이터 센터에서 콘텐츠를 전달함으로써 로딩 시간을 줄일 수 있습니다. Cloudflare, Amazon CloudFront, Akamai 등이 유명한 CDN 서비스입니다.

3. 마무리 멘트

웹 페이지 속도 최적화는 사용자 경험을 향상시키고, 검색 엔진 순위에 긍정적인 영향을 미치는 중요한 작업입니다.이미지 최적화, CSS 및 JavaScript 최적화, 캐싱 활용, 그리고 CDN 사용 등의 방법을 적용하면 웹 페이지의 로딩 속도가 빨라질 것입니다.

기술 SEO의 성공적인 실행은 꾸준한 노력과 시행착오를 통해 이루어집니다. 끊임없이 최적화를 진행은 블로그의 성장과 발전의 기초를 다지는 작업입니다. 우리가 꼭 기억해야 하는것이 있습니다. 더 빠른 웹 페이지는 더 나은 사용자 경험과 높은 검색 순위를 가져올 것입니다. 이를 통해 우리들의 블로그가 성공적으로 성장할 수 있기를 기원합니다.

질문1)이미지 => Lazy Loading 관련

"Lazy Loading 적용" 에서 "이미지를 불러오는 시점을 늦춤" 이라는데 이해가 잘 되지 않아요.
늦추면 로딩이 늦어지는거 아닌가요? 예시를 들어서 설명해주세요.

"Lazy Loading 적용"에서 말하는 "이미지를 불러오는 시점을 늦춤"이란, 사용자가 해당 이미지를 볼 때까지 이미지 로딩을 지연시킨다는 의미입니다. 이로 인해 웹 페이지의 초기 로딩 시간이 단축되고, 사용자 경험이 향상됩니다.

예를 들어, 긴 블로그 글이 있고, 여러 개의 이미지가 포함되어 있다고 가정해봅시다. 일반적인 로딩 방식에서는 웹 페이지를 열 때 모든 이미지가 로딩됩니다. 그러나 Lazy Loading을 적용하면 사용자가 이미지까지 스크롤해야 이미지가 로딩됩니다. 이 방식은 사용자가 실제로 볼 이미지만 로딩하므로 불필요한 리소스 사용을 줄이고 초기 로딩 속도를 빠르게 합니다.

즉, Lazy Loading은 웹 페이지에 있는 모든 이미지를 한 번에 로딩하는 것이 아니라 필요한 시점에만 로딩하도록 하는 기술입니다. 이렇게 하면 초기 로딩 속도가 향상되고, 서버의 부하도 줄일 수 있습니다. 사용자가 실제로 볼 이미지만 로딩되므로, 늦어지는 것이 아니라 오히려 전체적인 웹 페이지 로딩 속도와 사용자 경험이 개선됩니다.

질문2)CSS & javascript 최적화 => 코드 최적화 관련

"코드 최적화: 불필요한 공백, 주석, 줄바꿈 등을 제거하여 코드를 최적화"???
공백과 주석 줄바꿈을 제거하면 작성자의 가독성이 나빠질것 같은데 어떤가요?

코드 최적화에서 말하는 "불필요한 공백, 주석, 줄바꿈 등을 제거"하는 것은 웹 페이지의 로딩 속도를 향상시키기 위한 목적이 있습니다. 웹 페이지를 로딩할 때, 브라우저는 HTML, CSS, JavaScript 코드를 해석하고 실행해야 하는데, 이 과정에서 코드에 있는 공백, 주석, 줄바꿈 등은 해석할 필요가 없는 불필요한 요소들입니다. 따라서 이런 요소들을 제거하면 코드의 크기가 줄어들고 로딩 속도가 개선됩니다.

그렇지만 작성자의 가독성 측면에서는 이러한 요소들이 중요합니다. 코드를 작성하거나 수정할 때, 가독성이 좋은 코드는 작업 효율을 높이고 버그 발생 가능성을 낮춥니다. 이 문제를 해결하기 위해 개발자들은 보통 두 가지 버전의 코드를 유지합니다.

1. 개발용 버전: 공백, 주석, 줄바꿈 등이 포함되어 있는 원본 코드로, 개발자가 수정하고 유지보수할 때 사용하는 버전입니다. 가독성이 좋아서 작업하기 편리합니다.
2. 배포용 버전: 최적화된 코드로, 불필요한 요소들이 제거된 상태입니다. 이 버전은 실제 웹 페이지에 사용되며, 로딩 속도를 개선하기 위한 목적으로 사용됩니다.

개발자는 작업 중인 개발용 버전에서 필요한 수정을 하고, 배포 전에 코드를 최적화하여 배포용 버전을 생성합니다. 이렇게 하면 작성자의 가독성을 유지하면서도 웹 페이지 로딩 속도를 향상시킬 수 있습니다. 최적화 작업은 자동화 도구와 플러그인을 사용하여 손쉽게 진행할 수 있습니다.

질문3)CSS & javascript 최적화=> 파일병합 관련

"파일 병합: 여러 개의 CSS 및 JavaScript 파일을 하나로 합치면"
이것도 작업의 편의성에 관련있을것 같은데요.
혹시 이것도 개발자 버전과 배포용 버전이 따로 있나요?

네, 맞습니다. 파일 병합도 작업의 편의성과 웹 페이지 로딩 속도 간의 균형을 맞추기 위해 개발자 버전과 배포용 버전을 따로 유지하는 경우가 많습니다.

개발자 버전에서는 여러 개의 CSS 및 JavaScript 파일을 유지하여 작업의 편의성을 높입니다. 각각의 파일은 특정 기능이나 스타일을 관리하므로, 코드를 찾기 쉽고 유지보수하기 편리합니다.

반면 배포용 버전에서는 여러 개의 CSS 및 JavaScript 파일을 하나로 합쳐서 웹 페이지 로딩 속도를 개선합니다. 파일 병합을 통해 브라우저가 요청하는 파일 수를 줄이고, 서버와의 통신을 최소화하여 성능을 향상시킬 수 있습니다.

질문4) 질문3) 추가질문

약간 이상한게 있는데요. 하나의 파일이 너무 크면 메모리?캐시? 이런거 많이 잡아 먹지 않나요?

하나의 큰 파일이 메모리와 캐시 사용량에 영향을 줄 수 있지만, 웹 페이지 로딩 속도를 최적화하는 관점에서는 여러 작은 파일보다 하나의 큰 파일이 더 효율적입니다.

하나의 큰 파일을 사용하면 초기에 메모리와 캐시 사용량이 높을 수 있지만, 이는 브라우저가 단 한 번의 요청으로 파일을 로딩할 수 있기 때문에 전체적인 로딩 시간이 줄어듭니다. 브라우저는 각 파일을 요청할 때마다 네트워크 지연과 요청 처리에 시간이 소요되므로, 여러 개의 작은 파일을 로딩하는 것보다 하나의 큰 파일을 로딩하는 것이 성능상 이점이 있습니다.

하지만 모든 상황에서 큰 파일이 항상 이점이 되는 것은 아닙니다. 너무 큰 파일은 브라우저가 한 번에 처리하기 어려울 수 있으며, 모바일 기기와 같은 제한된 리소스 환경에서는 성능 저하를 일으킬 수도 있습니다. 따라서 적절한 크기의 파일로 병합하고 최적화하는 것이 중요합니다.

또한, HTTP/2와 같은 최신 프로토콜을 사용하면 여러 개의 파일을 효율적으로 동시에 로딩할 수 있습니다. 이 경우, 각 파일을 별도로 로딩하는 것이 성능에 큰 차이를 만들지 않을 수 있습니다.

결국, 웹 페이지의 특성과 사용자 환경을 고려하여 최적의 전략을 선택해야 합니다. 필요에 따라 파일을 병합하고 최적화하면서도, 캐시 정책 및 최신 웹 기술을 활용하여 성능을 향상시킬 수 있습니다.

질문5) CSS & javascript 최적화=> 비동기 로딩 관련

이해가 잘 안됩니다. 예를 들어서 설명해주세요.

비동기 로딩이란 웹 페이지의 다른 부분이 로딩되는 동안 특정 리소스(예: JavaScript, CSS 파일)를 독립적으로 로딩하고 실행하는 방식입니다. 이 방식은 웹 페이지 로딩 속도를 개선하고 사용자 경험을 향상시키는 데 도움이 됩니다.

예를 들어, 웹 페이지에 큰 이미지와 함께 복잡한 JavaScript 기능이 포함되어 있다고 가정해봅시다.

동기 로딩의 경우:

1. 웹 페이지가 로딩됩니다.
2. 브라우저가 JavaScript 파일을 발견하고 로딩 및 실행을 시작합니다.
3. JavaScript 파일이 완전히 로딩되고 실행되기 전까지 웹 페이지의 로딩이 멈춥니다. 이로 인해 사용자는 웹 페이지를 보거나 상호작용할 수 없게 됩니다.
4. JavaScript 파일이 완전히 로딩되고 실행된 후에 웹 페이지의 로딩이 계속됩니다.

비동기 로딩의 경우:

1. 웹 페이지가 로딩됩니다.
2. 브라우저가 JavaScript 파일을 발견하고 로딩 및 실행을 시작합니다.
3. JavaScript 파일이 로딩되고 실행되는 동안 웹 페이지의 로딩이 계속됩니다. 사용자는 웹 페이지를 볼 수 있고 상호작용할 수 있습니다.
4. JavaScript 파일이 완전히 로딩되고 실행되면 해당 기능이 활성화됩니다.

비동기 로딩은 웹 페이지의 다른 부분이 로딩되는 동안 JavaScript와 같은 리소스를 독립적으로 로딩하므로, 웹 페이지 전체의 로딩 시간이 단축되고 사용자 경험이 향상됩니다.

비동기 로딩을 적용하려면, <script> 태그에 async 또는 defer 속성을 추가하면 됩니다. 예를 들어, <script src="example.js" async></script>와 같이 작성하면 해당 JavaScript 파일이 비동기적으로 로딩됩니다.

질문6) 5번 추가 질문

동기 로딩은 한명의 사람이 순차적을 일처리 하는 느낌이라면
비동기는 메인 진행은 한명이 하고 보조인력을 구해서 같이 한다는 느낌인데 비슷한가요?

그 비유가 일정 부분 비동기 로딩에 대한 이해를 돕기에 적절합니다. 동기 로딩은 한 명의 사람이 일을 순차적으로 처리하는 것처럼 브라우저가 웹 페이지의 모든 요소를 순차적으로 로딩하고 실행합니다. 이 때문에 한 작업이 완료되기 전까지 다음 작업으로 넘어가지 못하고 기다리게 됩니다.

비동기 로딩의 경우, 메인 작업(웹 페이지 로딩)이 진행되는 동안 별도의 리소스(예: JavaScript, CSS 파일)가 보조인력처럼 독립적으로 로딩되고 실행됩니다. 이 방식으로 인해 메인 작업은 리소스 로딩을 기다리지 않고 계속 진행되며, 독립적으로 로딩되는 리소스들은 병렬적으로 처리되어 전체적인 로딩 시간이 단축됩니다.

그러나 이 비유를 사용할 때 주의해야 할 점은 비동기 로딩에서도 실제로는 한 명의 사람(브라우저)이 작업을 처리한다는 것입니다. 비동기 로딩이 병렬로 여러 작업을 동시에 처리하는 것처럼 보이지만, 실제로는 브라우저가 작업을 처리하는 순서와 우선순위를 재조정하여 빠르게 처리하는 것입니다. 이러한 처리 방식 덕분에 사용자는 웹 페이지 로딩이 빠르게 진행되는 것처럼 느낄 수 있습니다.

질문7)캐싱활용하기=>브라우져 캐싱 관련

브라우저 캐싱은 어떻게 하는건가요? 실제 예시나 방법을 설면해주세요.

브라우저 캐싱은 웹 페이지의 정적 리소스(이미지, CSS, JavaScript 파일 등)를 사용자의 컴퓨터나 기기에 일시적으로 저장해 놓는 기술입니다. 캐싱을 통해 웹 페이지를 다시 방문할 때 리소스를 서버에서 다시 다운로드 받지 않아도 되므로 로딩 속도가 빨라지고 서버의 부하가 줄어듭니다.

브라우저 캐싱은 웹 서버의 설정과 HTML 문서의 메타 태그를 통해 구현할 수 있습니다.

1. 웹 서버 설정을 통한 캐싱: 웹 서버의 설정 파일(예: Apache의 .htaccess 파일, Nginx의 nginx.conf 파일)을 통해 캐싱을 설정할 수 있습니다. 설정 예시는 다음과 같습니다.

Apache의 경우 .htaccess 파일에 다음과 같이 작성합니다.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType application/javascript "access plus 1 week"
  </IfModule>

 Nginx의 경우 nginx.conf 파일에 다음과 같이 작성합니다.

location ~* \.(jpg|jpeg|gif|png)$ {
    expires 1M;
    add_header Cache-Control "public, no-transform";
  }
  
  location ~* \.(css|js)$ {
    expires 1w;
    add_header Cache-Control "public, no-transform";
  }

위 예시에서는 이미지 파일의 캐시 유효기간을 1달로, CSS와 JavaScript 파일의 캐시 유효기간을 1주로 설정하였습니다.

2. HTML 문서의 메타 태그를 통한 캐싱: HTML 문서의 <head> 영역에 메타 태그를 추가하여 캐싱을 설정할 수 있습니다. 예를 들어, 다음과 같이 작성합니다.

<meta http-equiv="Cache-Control" content="public, max-age=86400" />

위 코드는 모든 리소스의 캐시 유효기간을 86,400초(24시간)로 설정합니다. 이 방법은 웹 서버 설정에 접근할 수 없는 경우 유용하지만, 서버 설정을 통한 캐싱 설정이 권장되는 방법입니다.

이러한 방법으로 브라우저 캐싱을 설정하면, 사용자가 웹 페이지를 다시 방문할 때 서버에서 리소스를 다운로드 받지 않고 로컬 캐시에서 불러오게 되므로 로딩 속도가 빨라집니다.

질문8) 7번=> 추가 질문

브라우저면 사용자의 기기에 작동하는게 아닌가요? 웹서버 설정을 통한 캐싱이라는게 이해가 되지 않아요

브라우저 캐싱이 사용자의 기기(브라우저)에서 작동하는 것이 맞습니다. 웹 서버 설정을 통해 브라우저에게 캐싱을 할 지시를 내리는 것입니다.

웹 서버 설정을 통한 캐싱이란 웹 서버가 브라우저에게 어떤 리소스를 얼마 동안 캐싱해야 하는지 알려주는 방법입니다. 웹 서버가 HTTP 응답 헤더에 캐싱 관련 정보를 포함시켜 브라우저에 전달합니다. 브라우저는 이 정보를 바탕으로 리소스를 캐싱하고, 캐시된 리소스의 유효 기간이 지나지 않은 경우 서버에 재요청을 보내지 않고 로컬 캐시에서 해당 리소스를 불러옵니다.

 

예를 들어, 웹 서버 설정에서 이미지 파일의 캐시 유효기간을 1달로 설정했다고 가정해봅시다. 웹 서버는 이 설정에 따라 이미지 파일을 요청하는 브라우저에게 HTTP 응답 헤더에 캐시 유효기간을 1달로 설정한 정보를 포함시켜 전달합니다.

 

그러면 브라우저는 이 정보를 참고하여 이미지 파일을 사용자의 기기에 캐싱하고, 다음 방문 시 1달 이내에는 서버에 재요청을 보내지 않고 로컬 캐시에서 해당 이미지를 불러옵니다.

 

요약하자면, 웹 서버 설정을 통한 캐싱은 웹 서버가 브라우저에게 캐싱 지시를 내리는 방법입니다. 브라우저는 이 지시에 따라 사용자의 기기에 리소스를 캐싱하고 관리합니다.

질문9) 7번 추가질문=>8번추가질문=>이해 확인 요청

결국 브라우저 캐싱에서 웹 서버의 설정과 HTML 문서의 메타 태그 작성은 브라우저 입장에서는 헤더 파일에 담겨 있겟네요. 단지 웹서버 설정을 하면 관리자는 편의성이 높아 질것이고. HTML 문서의 메타 태그 작성 좀 유연하게 접근 할수 있겟네요.

맞습니다. 웹 서버 설정과 HTML 문서의 메타 태그 작성은 결국 브라우저에게 캐싱 관련 정보를 전달하는 방법이지만, 각각의 방식은 특정 상황에서 더 적합할 수 있습니다.

웹 서버 설정을 통한 캐싱:

• 전체 웹사이트나 특정 파일 유형에 대한 캐싱 정책을 일관되게 관리할 수 있습니다.
• 웹 서버 설정 파일을 수정할 수 있는 권한이 있어야 사용할 수 있습니다.

HTML 문서의 메타 태그 작성을 통한 캐싱:

• 개별 페이지별로 캐싱 정책을 유연하게 설정할 수 있습니다.
• 웹 서버 설정 파일에 접근할 수 없는 경우에도 사용할 수 있습니다.

웹 서버 설정을 사용하면 전체 웹사이트에 대한 일관된 캐싱 정책을 설정하고 관리하는데 편리합니다. 반면, HTML 문서의 메타 태그 작성은 개별 페이지별로 다양한 캐싱 정책을 적용하는 데 유연한 방법입니다. 상황에 따라 두 가지 방법 중 적절한 방법을 선택하여 캐싱을 구현할 수 있습니다.

질문 10) 캐싱 활용하기=>서버 캐싱 관련

이해가 잘 안됩니다.미리 생성하여 저장한다?? 미리 만들어 놓아 봤자. 사용자의 요청있어야지만 브라우저에 보여지는 거자나요. 그럼 미리 만들어 두나 요청있을때 전달 하나 똑같은거 아닌가요?

서버 캐싱의 개념을 좀 더 자세히 설명해 드리겠습니다. 서버 캐싱은 정적 콘텐츠와 동적 콘텐츠를 구분하여 처리하는 것이 중요한 포인트입니다. 정적 콘텐츠는 HTML, CSS, JavaScript 파일과 같이 고정된 콘텐츠입니다. 반면, 동적 콘텐츠는 사용자의 요청에 따라 변경되는 콘텐츠로, 웹 페이지에 표시되는 댓글, 글 등이 이에 해당합니다.

서버 캐싱의 주요 목적은 동적 콘텐츠를 빠르게 전달하기 위함입니다. 동적 콘텐츠는 사용자의 요청에 따라 실시간으로 생성되기 때문에, 서버의 부하가 높아지고 로딩 시간이 길어질 수 있습니다. 이 문제를 해결하기 위해 서버 캐싱이 사용됩니다.

서버 캐싱은 다음과 같은 과정으로 작동합니다:

1. 사용자가 웹 페이지에 접속하여 동적 콘텐츠를 요청합니다.
2. 웹 서버는 데이터베이스와 상호 작용하여 동적 콘텐츠를 생성합니다.
3. 서버는 생성된 동적 콘텐츠를 캐시에 저장하고 사용자에게 전달합니다.
4. 다음 사용자가 같은 동적 콘텐츠를 요청하면, 서버는 캐시에 저장된 콘텐츠를 전달합니다. 이 경우 데이터베이스와의 상호 작용이 발생하지 않아 서버의 부하가 줄어들고 응답 시간이 단축됩니다.
5. 캐시에 저장된 콘텐츠는 일정 기간 동안 유효하며, 이 기간이 지나면 새로운 동적 콘텐츠를 생성하여 캐시를 업데이트합니다.

서버 캐싱을 사용하면 동적 콘텐츠의 로딩 속도가 향상되고, 서버의 부하가 감소하여 전체 웹 사이트 성능이 향상됩니다. 캐시가 사용자의 요청이 있을 때마다 새로 생성되는 것이 아니라, 일정 기간 동안 재사용되기 때문에 서버의 부하를 줄이고 로딩 시간을 단축시키는 효과가 있습니다.

오늘 이야기한 내용을 3문장으로 요약

1. 웹 페이지 속도 최적화를 위해 이미지 최적화, Lazy Loading, 코드 최적화, 파일 병합, 비동기 로딩, 브라우저 및 서버 캐싱, 그리고 CDN 사용 등의 기법을 적용할 수 있습니다.

2, 이러한 최적화 기법들은 웹 사이트의 로딩 속도를 빠르게 하여 사용자 경험을 향상시키고, 검색 엔진 순위에 긍정적인 영향을 미칩니다.

3. 최적화 작업을 수행하며 개발자의 작업 편의성을 유지하고, 배포용 버전에서 성능 향상을 꾀하는 전략을 적용할 수 있습니다.