2020년에 웹사이트 속도를 높이는 10가지 쉬운 방법
게시 됨: 2020-01-29
페이지 속도는 웹 디자인의 기본 기둥 중 하나였습니다. 최근에는 불행하게도 더 높은 대역폭의 인터넷("그래서 왜 귀찮게?")과 최신 프런트 엔드 프레임워크의 채택으로 인해 뒷자리를 차지했습니다. 그러나 웹 사이트 속도는 사용자 경험과 수익 창출에 여전히 중요하며 사이트에 미치는 영향은 생각보다 훨씬 클 것입니다.
광고 수익화 및 사용자 경험과 관련된 속도에 대해 웹사이트를 최적화하는 효과는 아무리 강조해도 지나치지 않습니다. 사이트가 속도와 관련하여 얼마나 잘 작동하는지 알아보려면 Chrome 감사 도구를 사용하거나 GTmetrix 또는 Google의 개발 도구와 같은 도구를 사용할 수 있습니다.
이 기사에서는 2020년 웹사이트 속도를 높여 더 나은 UX와 더 나은 수익 창출을 가져올 10가지 기본 작업을 안내하면서 약간의 기술적인 정보를 얻을 것입니다.
서버가 당신을 위해 작동하도록 만드십시오
서버를 올바르게 설정하면 속도 성능을 크게 향상시킬 수 있습니다. 다음을 확인하는 데 필요한 두 가지 쉬운 설정:
- 압축 활성화 – 모든 텍스트 파일(HTML, JS, CSS, ETC….)에 대해 GZIP 압축을 활성화했는지 확인하십시오.
- HTTP2 – 서버가 HTTP2를 지원할 수 있는 경우 활성화해야 합니다.사이트에서 아무것도 변경하지 않고도 성능을 향상시킬 수 있는 좋은 방법입니다.
Vodien의 멋진 HTTP2 데모를 확인하십시오.
지연 로딩 사용
지연 로드는 콘텐츠가 표시되려고 할 때만 콘텐츠를 로드하는 프로세스입니다. 이렇게 하면 사용자가 절대 얻을 수 없는 많은 추가 콘텐츠의 다운로드가 줄어들고 브라우저의 여유 공간이 확보되어 성능이 크게 향상됩니다. 좋은 소식은 콘텐츠를 빠르게 지연 로드하는 데 도움이 되는 미리 만들어진 패키지가 많이 있다는 것입니다. 더 좋은 점은 Chrome 76(2019년 7월)부터 Lazy Loading이 기본적으로 HTML과 통합된다는 점입니다. 태그에loading=”lazy ”를 추가하기만 하면 완료됩니다.
파일 크기 줄이기
축소 – 코드에서 공백과 주석을 제거하는 프로세스입니다.사람이 코드를 읽을 수 있도록 만드는 데 필수적이지만 컴퓨터에는 필요하지 않습니다. 축소하면 파일 크기를 70% 이상 줄일 수 있습니다. 모든 HTML, CSS 및 JS 파일을 축소해야 합니다. 변경해야 할 경우를 대비하여 원본을 보관하십시오. 오늘날 모든 주요 IDE에는 파일을 축소하는 플러그인이 있습니다. React와 같은 패키지를 사용하는 경우 축소에는 트리 쉐이킹이 내장되어 있습니다.
파일 분할 – 파일 에 필요한 항목만 있는지 확인합니다.파일을 분할하면 파일을 더 작게 만들고 프로젝트를 훨씬 더 쉽게 관리할 수 있습니다.
이미지 최적화
올바른 크기의 이미지 – 반응형 웹 디자인은 화면에 따라 이미지가 다른 크기로 표시되는 표준이 되었습니다.우리는 그것을 유리하게 사용할 수 있고 이미지에 대해 몇 가지 다른 크기를 유지할 수 있습니다. 이미지가 모든 픽셀을 표시할 수 없는 경우 큰 파일을 다운로드할 필요가 없습니다. 그림 태그와srcset속성을 사용하면 매우 쉽게 할 수 있습니다.
이 가이드는 반응형 이미지 크기 조정을 위한 몇 가지 모범 사례와 손쉬운 구현을 안내합니다.
차세대 형식 – 현재 대부분의 브라우저에서 지원되는 새로운 이미지 형식은 파일 크기를 크게 줄일 수 있습니다(사진뿐만 아니라).예를 들어 Google의 개방형 WebP 형식은 파일 크기를 64%에서 92%까지 줄일 수 있습니다. 아래의 경우 2가지 크기의 WebP 파일을 사용하고 webP를 지원하지 않는 브라우저를 위한 대체 jpg 이미지를 추가합니다.
이미지 스프라이트 – 이미지 스프라이트는 많은 작은 이미지로 구성된 이미지입니다.모든 버튼/로고에 이미지 스프라이트를 사용하면 페이지를 로드하는 데 필요한 서버 호출 수가 줄어듭니다. HTTP/1.1을 사용하는 경우 로딩 시간이 향상됩니다.
클라이언트 측 캐시 정책 구현
이미 다운로드한 파일을 보관하도록 브라우저에 요청하면 페이지 로드 시간을 크게 개선할 수 있습니다. 이는 내부 파일과 외부 파일 모두에 관련됩니다.
내부 파일 – 스타일 시트 및 로고와 같이 사이트에서 재사용 가능한 파일입니다.로고, 일반 CSS, 고유 식별자가 있는 그림 등 변경되지 않는 파일의 경우 만료 날짜를 1년으로 설정하는 것이 일반적입니다. 더 자주 변경할 것으로 예상되는 파일이 있는 경우 적절한 만료 날짜를 설정할 수 있습니다.
외부 패키지 – 예를 들어 사이트에서 부트스트랩 패키지를 사용하는 경우 웹 사이트에 패키지를 다운로드하는 대신 CDN을 사용할 수 있습니다.이렇게 하면 사용자가 웹 사이트를 처음 방문하더라도 인기 있는 패키지이고 이미 다른 사이트에서 다운로드했을 수 있으므로 패키지를 다운로드할 필요가 없을 것입니다.
서버 측 캐싱 활용
아이디어는 프런트엔드 캐싱과 동일하며 서버가 이미 생성했거나 자주 사용하는 작업을 하지 않도록 합니다. 콘텐츠 사이트가 있는 경우 느린 성능과 데이터베이스 비용으로 인해 사용자가 웹사이트에 들어올 때마다 데이터베이스 히트를 원하지 않습니다. 모든 사용자가 동일한 기사를 보게 되므로 한 번 캐시하고 변경될 때까지 캐시된 버전을 계속 제공할 수 있습니다.
서버 설계 방식에 따라 다양한 패키지가 이에 도움이 될 수 있습니다. 물론 특정 요구 사항에 맞게 고유한 캐싱을 설계할 수 있습니다.
CDN 사용
Content Delivery Network는 서버에 접속하고 응답을 캐시한 다음 사용자에게 로컬로 제공합니다. 언뜻보기에 그들은 매우 비싸 보입니다. 그러나 CDN을 올바르게 설정하면 서비스 비용을 줄이면서 성능을 크게 향상시킬 수 있습니다.
리디렉션 방지
리디렉션을 피하십시오! 리디렉션은 모든 속도를 늦추는 확실한 방법입니다. 사이트의 보안 버전(HTTP VS HTTPS)을 사용하도록 사용자를 리디렉션하거나 웹사이트에서 콘텐츠를 이동하지만 이전 SEO 링크가 콘텐츠로 계속 이어지길 원하는 경우와 같이 때로는 필요합니다.
리디렉션을 사용하는 경우 연결된 리디렉션을 피해야 합니다. 연결된 리디렉션은 다른 리디렉션으로 연결되는 리디렉션입니다. 리디렉션해야 하는 경우 한 번만 리디렉션해야 합니다!
렌더링 차단 활동의 우선 순위 지정 및 제거
렌더링이란 로딩을 말하며, 웹페이지를 볼 때 빠른 로딩을 위해 가장 우선순위가 높은 부분은 접힌 부분입니다. HTML은 위에서 아래로 읽기 때문에 첫 페이지 보기에 중요하지 않은 것을 있는 것 이상으로 푸시하는 것이 중요합니다.
예를 들어 분석용 JS 태그가 있는 경우 페이지 바닥글에 배치할 수 있습니다. 이렇게 하면 사용자의 브라우저가 먼저 사용자가 볼 수 있는 항목을 처리하고 다른 항목은 나중에 처리하도록 할 수 있습니다.
파트너를 현명하게 선택하십시오
인생에서와 마찬가지로 웹에서도 가장 중요한 것은 올바른 파트너를 선택하는 것입니다. 사이트를 간소화하고 빠르게 작동하도록 설계된 아름다운 웹사이트를 가질 수 있습니다. 그러나 사이트를 느리게 로드하는 광고 파트너를 사용하면 거슬리는 사용자 경험을 만들 수 있습니다. 1년 전, 우리는 e스포츠 업계의 퍼블리셔와 협력하기 시작했고 사이트에서 수익을 창출하는 데 어려움을 겪고 있었습니다. 사이트를 면밀히 조사한 결과 너무 느려서 사이트의 다른 모든 광고 파트너가 시간 초과되는 광고 단위를 발견했습니다. 사이트에서 이 광고 파트너를 제거한 후 사이트의 전체 페이지당 RPM이 4배로 증가했습니다!
계속 배우도록
이 기사에서는 몇 가지 간단한 팁만 다루었습니다. 따라서 성능 향상을 위해 더 깊이 들어가야 합니다. 또한 우리의 생태계는 지속적으로 진화하고 있습니다. 여기까지 왔다면 항상 새로운 것을 배울 수 있다는 것을 알고 계실 것입니다.
아래 두 링크를 보시는 것을 추천드립니다. 나는 그들이 시작하기에 좋은 곳이라고 생각합니다.
https://www.udacity.com/course/browser-rendering-optimization–ud860
https://medium.com/swlh/what-the-amp-augmenting-my-own-site-with-accelerated-mobile-pages-amp-52927bab7cb8