웹사이트 성능 개선이 지구를 구하는 데 도움이 되는 방법

자주 생각하지 않을지 모르지만 인터넷은 엄청난 양의 전기를 사용합니다. 이 전기는 어딘가에서 생산되어야 합니다. 대부분의 국가에서 이것은 화석 연료의 연소를 의미합니다. 이것은 차례로 인터넷의 탄소 발자국이 전 세계 항공 여행을 능가할 정도로 증가했으며, 이로 인해 인터넷이 지구상에서 가장 큰 석탄 화력 발전 기계가 되었습니다.

Mozilla Internet Health Report 2018에서는 특히 인터넷이 새로운 영역으로 확장됨에 따라 "지속 가능성이 더 큰 우선 순위가 되어야 합니다"라고 명시하고 있습니다. 그러나 현재 상태로 웹 사이트는 점점 더 비만해지고 있습니다. 이는 인터넷의 에너지 수요가 계속 기하급수적으로 증가하고 있음을 의미합니다.

그 동안 기후 변화의 영향은 해가 갈수록 더 악화되고 더 많아집니다. 대다수의 기후 과학자들은 전 세계적으로 증가하는 극한 기상 현상의 강도와 빈도를 기후 변화의 원인으로 돌립니다. 기후 변화는 주로 인간 활동에 기인합니다. 일부 사람들은 과학에 의문을 제기하지만 이제는 세계 최대의 석유 회사들조차 이를 받아들이며 비즈니스 모델이 변화해야 한다는 점을 인정합니다.

지구상의 모든 국가(미국 제외)는 파리 기후 협정에 가입되어 있습니다. 미국은 논란의 여지가 있지만 미국 인구와 경제의 절반 이상을 대표하는 미국의 가장 영향력 있는 개인, 도시, 주 및 기업 중 다수가 America's Pledge 이니셔티브를 통해 협정에 대한 약속을 유지했습니다.

웹 개발자로서 이것이 우리가 영향을 미칠 수 있는 문제가 아니라고 느끼는 것은 이해할 수 있지만 사실이 아닙니다. 웹상의 상황을 개선하기 위한 많은 노력이 진행 중입니다. Green Web Foundation은 전적으로 재생 가능 에너지로 구동되거나 최소한 탄소 중립을 유지하기 위해 노력하는 웹 호스트의 계속 증가하는 데이터베이스를 유지 관리합니다. 2013년 A List Apart는 James Christie의 Sustainable Web Design을 출판했습니다. 지난 3년 동안 SustainableUX 컨퍼런스는 웹 지속 가능성 전문가들이 다양한 웹 기반 분야에 걸쳐 지식을 공유하는 것을 보았습니다.

2009년부터 Greenpeace는 Clicking Clean 캠페인을 통해 대형 인터넷 회사에 에너지 믹스를 정리하도록 압력을 가해 왔습니다. 부분적으로는 이 캠페인의 결과로 Google은 작년에 처음으로 운영에 사용되는 전 세계 소비량의 100%를 충족할 만큼 충분한 재생 에너지를 구매했다고 발표했습니다.

따라서 재생 에너지로 서버에 전력을 공급하는 것 외에 웹 개발자는 기후 변화에 대해 무엇을 할 수 있습니까?

“측정할 수 없는 것은 관리할 수 없습니다”

웹 사이트를 보다 지속 가능하게 만드는 것과 관련하여 가장 큰 승리는 아마도 성능, 사용자 경험 및 지속 가능성이 모두 깔끔하게 얽혀 있다는 것입니다. 디지털 제품의 지속 가능성을 측정하는 핵심 지표는 에너지 사용량입니다. 여기에는 서버, 클라이언트 및 둘 사이에서 데이터를 전송하는 중개 통신 네트워크가 수행하는 작업이 포함됩니다.

이를 염두에 두고 가장 먼저 고려해야 할 사항은 웹사이트의 에너지 사용량을 측정하는 방법입니다. 이것은 실제로 당신이 상상하는 것보다 더 까다로운 작업이며 여기서 정확한 데이터를 얻기가 어렵습니다. 그러나 에너지 사용을 보여주는 몇 가지 좋은 대안이 있습니다. 여기에는 데이터 전송(즉, 브라우저가 웹사이트를 표시하기 위해 다운로드해야 하는 데이터 양)과 웹사이트를 제공하고 수신하는 하드웨어의 리소스 사용량이 포함됩니다. 여기서 명백한 메트릭은 CPU 사용량이지만 메모리 사용량 및 기타 형태의 데이터 저장도 역할을 합니다.

데이터 전송은 우리가 아주 쉽게 측정할 수 있는 것 중 하나입니다. 모든 주요 브라우저는 네트워크 활동을 측정할 수 있는 개발자 도구를 제공합니다. 예를 들어 아래의 이 스크린샷에서 Smashing Magazine 웹사이트를 처음 로드할 때 메가바이트 미만의 데이터 전송이 발생한다는 것을 알 수 있습니다. Firefox의 개발자 도구는 실제로 두 가지 숫자를 제공합니다. 첫 번째는 전송된 파일의 압축되지 않은 크기이고, 후자는 압축된 크기입니다.

네트워크를 통해 이동할 때 자산을 압축하는 가장 일반적인 도구는 gzip이므로 이 두 숫자의 차이는 일반적으로 gzip의 작업 결과입니다. 이 후자의 숫자는 실제로 전송된 데이터의 양을 나타내며 계속 주시해야 합니다.

참고 : 많은 존경을 받는 WebPagetest를 포함하여 데이터 전송에 대한 메트릭을 제공하는 다른 도구가 많이 있습니다.

CPU 사용량을 측정하기 위해 Chrome은 개별 탭의 메모리 공간, CPU 사용량 및 네트워크 활동을 보여주는 세분화된 작업 관리자를 제공합니다. 보다 모험적이고 기술적인 경우, top(table of processes) 명령은 macOS 및 Ubuntu와 같은 대부분의 Unix 계열 운영 체제에서 유사한 메트릭을 제공합니다. 일반적으로 우리는 쉘 액세스 권한이 있는 모든 서버에서 top 명령을 실행할 수도 있습니다.

다행스럽게도 이러한 지표를 특정 CO2 수치(WebsiteCarbon의 경우) 또는 점수(Ecograder의 경우)로 변환하려는 WebsiteCarbon 및 Ecograder와 같은 노력이 있습니다.

지속 가능한 웹 디자인

이제 우리는 사이트의 영향을 측정하는 방법을 알았으므로 더 지속 가능하고 성능이 뛰어나며 일반적으로 더 나은 사용 환경을 만들기 위해 최적화할 수 있는 방법을 생각할 때입니다.

여기에 도움이 될 만한 기존 작업이 몇 가지 있습니다. 2016년에 O'Reilly는 Tim Frick의 "Designing For Sustainability"를 출판했습니다. 이 책에서 Tim은 지속 가능한 디자인의 이유와 방법에 대해 설명합니다. 그러나 우리는 또한 지속 가능성에 대해 명시적으로 초점을 맞추지 않았지만 지속 가능한 웹 디자인 철학과 크게 겹치는 기존의 풍부한 아이디어, 회의 연설 및 기사를 활용할 수 있습니다. 여기에서 특히 좋은 예는 Brad Frost의 사이드 프로젝트인 "Death to Bullshit", Heydon Pickering의 기사 및 덜 빌어먹을 코드 작성에 대한 이야기, Adam Silver의 블로그 게시물인 "Designing For Actual Performance"입니다.

웹 사이트를 완전히 재설계하거나 처음부터 새로 시작하는 경우 여기에서 몇 가지 매우 높은 수준의 질문으로 시작할 수 있습니다. 예를 들어, 실제로 홈페이지에 있어야 할 가치가 있거나 필요한 것은 무엇입니까? 그리고 더 구체적으로, 홈페이지의 각 요소는 어떤 가치를 가져오는가? Heydon Pickering은 다음과 같이 말합니다.

"웹 사이트의 가장 성능이 좋고 접근하기 쉬우며 유지 관리가 쉬운 기능은 처음부터 만들지 않는 기능입니다."

저는 워드프레스닷컴 VIP 팀에서 일하기 때문에 이러한 맥락에서 지속 가능한 웹 디자인 기술을 어디까지 사용할 수 있는지 알아보기 위해 미니멀리스트 워드프레스 테마를 조합하여 나 자신에게 도전하기로 결정했습니다. 그 결과 Susty라는 테마가 생겼고, 내가 함께 만든 웹사이트 sustywp.com에서 실제로 작동하는 모습을 볼 수 있습니다. 이 특정 예에서 웹사이트는 6KB가 조금 넘는 데이터 전송으로 제공되며, 이는 중간 웹사이트가 약 1.5MB라는 점을 감안할 때 기분이 좋습니다.

그래서, 내가 무엇을 했는가? 글쎄, 내가 당신에게 말할거야.

네트워크 요청 줄이기

위에서 설명한 것처럼 네트워크 요청은 쉽게 측정할 수 있으므로 좋은 출발점이 됩니다. Susty를 통합하면서 필요하지 않은 것처럼 보이는 많은 HTTP 요청이 진행되고 있음을 알게 되었습니다. 예를 들어 WordPress는 이모티콘 사용을 감지하고 잘못된 문자로 표시되지 않도록 하는 일부 CSS 및 JavaScript를 번들로 제공합니다. 본질적으로 잘못된 것은 없지만 이모티콘을 사용할 계획이 아니거나 다양한 시스템 기본 설정에 만족하고 확신한다면 이러한 이모티콘이 로드되지 않도록 할 수 있습니다.

이는 상대적으로 적은 비용 절감을 나타내지만 원치 않는 코드와 페이지의 요청을 제거한다는 철학을 수립함으로써 훨씬 더 중요한 성능 개선을 이룰 수 있습니다. 예를 들어:

• 일부 기본 DOM 작업을 위해 jQuery 전체를 로드하고 있습니까?
  순수한 JavaScript로 동일한 목적을 달성할 수 있습니까? Jeremy Wagner의 이 Google 게시물에서 고급 데드 코드 제거(일명 트리 쉐이킹)에 대해 읽을 수 있습니다.
• 이미지 캐러셀이 있습니까?
  그 모든 이미지가 정말로 필요합니까? 사용자 경험을 크게 향상시키고 있습니까? 아니면 하나의 강력한 이미지로 줄일 수 있습니까? 아니면 재방문 사용자에게 역동감을 주기 위해 선택한 이미지 중 하나를 무작위로 표시하시겠습니까? 그건 그렇고, 여기에서 수행된 연구에 따르면 대부분의 사용자는 캐러셀을 좋아하지도 참여하지도 않습니다.
• 많은 이미지를 사용하는 경우 WebP 형식을 지원하는 브라우저에 대해 WebP 형식을 사용하여 이미지를 제공하는 것이 도움이 될까요?
  오랫동안 WebP의 지원은 실망스러울 정도로 제한적이었습니다. 그러나 Firefox가 버전 65(2019년 1월 예정)에서 지원을 시작할 예정이므로 Safari와 같은 낙오자가 남아 있는 것은 시간 문제일 뿐입니다.
• 수백 킬로바이트의 웹 글꼴을 로드하고 있습니까?
  로드하는 모든 웹 글꼴을 사용하고 있습니까? 웹 글꼴도 필요합니까? 요즘 대부분의 장치에는 반쯤 괜찮은 글꼴 스택이 있습니다. 선호하는 글꼴 목록을 원하는 대로 지정할 수 있습니까? 웹 글꼴을 사용해야 하는 경우 글꼴이 합리적으로 가능한 한 성능이 좋은지 확인해야 합니다.
• YouTube 동영상을 포함하고 있습니까?
  삽입된 YouTube 비디오는 일반적으로 누군가와 상호작용하기도 전에 약 메가바이트의 데이터 전송을 추가합니다. 우리 사용자의 일부만이 실제로 앉아서 웹사이트에 포함된 비디오를 시청할 예정이라면 대신 링크를 걸 수 있습니까?

모든 것을 조사하다

이러한 맥락에서 우리는 페이지의 모든 측면을 조사할 수도 있습니다. 거기에 정말로 가치가있는 것은 무엇입니까? 사이드바가 실제 가치를 추가합니까, 아니면 웹사이트에 사이드바가 있어야 하는 관습 때문에 거기에 추가한 것입니까? 그래서 우리는 하나를 추가하고 쓰레기로 채웠습니다.

Susty를 사용하여 탐색을 자체 페이지로 분류하는 다소 정통하지 않은 접근 방식을 실험했습니다. 이를 통해 사용자의 명시적 요청 시에만 로드되는 추가 콘텐츠와 함께 말 그대로 핵심만 제거된 페이지를 가질 수 있습니다. Susty는 너무 가볍고 너무 빨라서 일부 사용자 연구(일명 내 파트너)를 통해 메뉴 로드가 실제로 새 페이지처럼 느껴지지 않는다는 것을 깨달았습니다. 그래서 오버레이처럼 보이게 하기로 결정했습니다. 실제로는 이전 페이지로 돌아갑니다.

가볍고 가벼운 페이지를 만드는 데 도움이 될 뿐만 아니라, 관련된 탐색 기능을 사용하면 이를 표시하기 위한 멋진 숨김/표시 코드가 필요하지 않습니다. 이 시점에서 저는 Susty가 지속 가능한 웹 디자인 기술을 극단으로 끌어낸 예라는 점을 분명히 하고 싶습니다(좋은 웹사이트의 원형을 제안하는 것은 아닙니다).

할머니처럼 CSS 작성

심각한 성능 향상에 관해서는 말 그대로 코드의 모든 문자가 중요하다는 것을 명심해야 합니다. 모든 문자는 바이트를 나타내며 gzip으로 압축된 후에도 여전히 무게를 차지합니다. CSS는 우리가 종종 부풀려지는 것을 많이 볼 수 있는 도메인입니다. 다행스럽게도 사용하지 않는 CSS를 제거하는 데 도움이 되는 점점 더 복잡한 도구가 늘어나고 있습니다. Sarah Dayan이 작성한 이 환상적인 게시물은 CSS 번들을 259KB에서 9KB로 줄이는 방법에 대해 설명합니다!

처음부터 시작한다면 처음에 CSS를 작성하는 방법에 대해 더 깊이 생각해야 할 것입니다. Heydon Pickering은 구문 설계 방식의 장점을 활용하여 CSS를 작성하는 방법과 이것이 개발자가 반복을 방지하는 데 도움이 되는 방법에 대한 훌륭한 게시물을 작성했습니다. Heydon은 또한 HTML과 CSS 모두에서 div와 클래스의 과도한 사용으로 인해 얼마나 많은 낭비가 발생하는지 지적합니다.

무엇을 분석하고 있습니까?

모든 사람이 Google Analytics, KISSmetrics, Piwik 등과 같은 도구를 통해 웹사이트 방문자가 수행하는 작업을 분석할 수 있도록 웹에서 어느 정도 유비쿼터스화된 것 같습니다. 합법적인 사용 사례가 있다는 데는 의심의 여지가 없지만, 모든 웹사이트에서 분석이 필요하십니까? 예를 들어, 저는 일반적으로 당연히 관리하는 모든 사이트에 Google Analytics를 추가했습니다. 그러나 비교적 최근에 문제의 대부분의 웹사이트에서 이것이 거의 완전히 무의미한 노력이라는 사실을 깨달았습니다. "아, 오늘 6명이 Facebook을 통해 이 게시물에 왔습니다." 무슨 상관이야?

정말로 필요하지 않고 데이터를 분석하고 그에 따라 조치를 취하려는 경우가 아니면 분석을 버리고 오늘 얼마나 많은 사람들이 웹사이트 X를 방문했는지 멍하니 바라보는 것보다 시간을 더 잘 보낼 수 있는 방법을 찾으십시오.

페이지 무게를 늘리는 것 외에도 Google Analytics와 같은 것을 사용하면 Google을 대신하여 사용자를 위해 수집하는 데이터에 대한 윤리적 문제가 제기됩니다. 즉, Google에서 Analytics를 무료로 제공하는 데에는 이유가 있습니다.

기본을 잊지 말자

요즘은 다음과 같은 정보가 넘쳐나지만 절대 안주해서 잊어버려서는 안 됩니다. 위의 모든 것과 함께 HTML, CSS 및 JavaScript를 항상 축소하고 적절한 위치에 연결해야 합니다. 또한 가능한 한 작게 모든 이미지를 압축하고 올바른 설정에서 올바른 형식을 사용하며 프로그레시브 렌더링을 사용해야 합니다.

서버 측 성능

지금까지 우리는 거의 전적으로 프론트엔드에 초점을 맞추었지만, 서버 측에서도 최적화하지 않으면 이 중 많은 부분이 무의미해집니다. 이미 몇 번 언급했지만 항상 gzip 압축을 활성화해야 합니다.

우리는 우리 서버가 가능한 한 쉽게 웹사이트를 제공할 수 있도록 해야 합니다. 저는 주로 Nginx를 사용하며 FastCGI 캐시를 특히 좋아하며 특히 효율적인 것으로 나타났습니다. 자신의 서버에 대한 셸 액세스 권한이 있는 경우 구성 방법을 설명하는 게시물이 있습니다. 서버를 제어할 수 있는 권한이 없거나 원하지 않는 경우 기술 옵션이 더 적습니다. WordPress 공간에서 특히 좋아하는 것은 WP Super Cache입니다.

HTTPS를 통해 HTTP2를 사용해야 합니다. HTTPS를 사용하면 서비스 워커와 같은 새로운 웹 기술의 세계가 열리며, 이를 통해 네트워크 자체를 있으면 좋은 것으로 간주할 수 있습니다. 이에 대해 더 알고 싶다면 Jeremy Keith의 새 책 "오프라인으로 전환"을 적극 권장합니다.

참고 : Apache와 Nginx 모두에서 사용할 수 있는 Google의 PageSpeed ​​모듈을 조사할 수도 있습니다.

마지막으로, 여기에서 우리가 가질 수 있는 가장 큰 영향은 재생 가능 에너지로 구동되는 데이터 센터에서 웹 사이트를 호스팅하는 것입니다. 영국에서는 내 사이트를 직접 호스팅하는 회사 측면에서 Krystal과 Kualo를 적극 추천할 수 있습니다. (그린 웹 호스트의 전체 디렉토리는 The Green Web Foundation을 확인하십시오.)

결론적으로

웹사이트를 보다 지속 가능하게 만드는 노력을 기울일 가치가 있다는 것을 확신하셨기를 바랍니다. 특히 그 과정에서 우리는 웹사이트를 다음과 같이 만듭니다.

• 더 나은 성능,
• 보다 사용자 친화적인,
• 접근성이 더 좋고,
• 보다 서버 친화적인,
• 검색 엔진에 더 최적화되었습니다.

지속 가능한 웹 디자인에 대한 일부 사람들의 반응은 비합리적이지 않습니다. 이는 환경적 원인에 대한 아주 작은 양보로 ​​보인다는 것입니다. 물론 얼마나 많은 영향을 미칠 수 있는지는 작업하는 웹사이트가 얼마나 바쁜지에 달려 있습니다. 그러나 웹이 좀 더 환경 친화적이 되도록 도울 뿐만 아니라 지속 가능한 웹 디자인은 근본적으로 모범 사례 웹 디자인입니다.

피할 수 없는 탄소 배출을 상쇄하는 것에 대해서도 생각해 볼 가치가 있습니다. 탄소 상쇄는 때때로 조롱을 당하며 정당한 이유가 있습니다. 상쇄의 주요 문제는 일반적으로 탄소 상쇄 기간이 상당히 길다는 것입니다. 예를 들어, 나무를 심는 경우 탄소 격리량에 대해 주어진 수치는 일반적으로 100년 기간을 기준으로 합니다. 따라서 탄소 배출량을 줄이는 측면에서 이것은 실제로 해결책이 아닙니다. 하지만 없는 것보다는 낫습니다.

myclimate의 모토는 최선을 다하고 나머지는 상쇄하는 것입니다. 나는 탄소 상쇄 계획을 실행하는 것에 대한 블로그 게시물을 작성했습니다. 나는 또한 1% For the Planet 이니셔티브를 적극 권장합니다. 마지막으로, 귀하가 사업주이고 더 나은 사회, 환경 및 경제적 정의를 원하는 기업 연합에 가입하고 싶다면 Certified B Corporation 제도를 확인하십시오.