지속 가능한 웹 디자인이란 무엇이며 어떻게 구현할 수 있습니까?

지속 가능한 웹 디자인의 중요성

웹 기술은 잠재적으로 사회와 환경에 도움이 될 수 있지만 현명하게 사용하는 경우에만…

지속 가능성이 점점 더 중요해짐에 따라 많은 기업이 탄소 발자국을 줄이는 방법을 찾고 있습니다. 운영을 변경한 후 기술적인 영향이 다음 단계인 것이 논리적으로 보입니다.

웹이 환경에 미치는 영향은 널리 알려졌으며 전 세계 배출량의 3.7%를 차지합니다. 따라서 더 많은 디자이너들이 자신의 사이트를 지속 가능하게 만들어 환경을 보존하기 위해 자신의 몫을 다할 수 있도록 노력하고 있습니다.

인터넷이 국가라면 4번째로 큰 오염원이 될 것입니다. 지속 가능한 웹 선언문

사물 인터넷과 같은 기술 발전 덕분에 개발자는 이전에는 불가능했던 방식으로 지속 가능한 디자인을 집이나 회사에 통합할 수 있습니다! 가장 최근에 가장 빠르게 성장하고 있는 웹 디자인 분야 중 하나는 웹사이트의 탄소 발자국을 줄이고 에너지 효율성을 높이는 데 중점을 둔 지속 가능한 웹 디자인입니다.

그러나 2023년 인기 있는 대화 주제임에도 불구하고 지속 가능한 웹사이트 디자인에 대해서는 여전히 약간의 혼란이 있습니다.

이 게시물에서는 지속 가능한 웹 디자인과 웹 사이트를 보다 환경 친화적으로 만드는 방법에 대해 설명합니다.

몇 가지 일반적인 질문에 답하는 것으로 시작하겠습니다.

지속 가능한 웹사이트란 무엇입니까?

지속 가능한 웹사이트는 사람, 지구의 미래, 이익을 염두에 두고 설계되었습니다. 그들은 재생 가능 에너지로 작동하며 가장 적은 양을 소비합니다. 또한 윤리적이고 부가가치가 있으며 착취하지 않습니다.

웹사이트는 왜 지속 가능해야 합니까?

소셜 미디어 사용자뿐만 아니라 언론에서도 기후 위기의 주요 원인으로 거물급 석유를 뜯어내고 현실적인 기후 목표를 설정하지 않은 정치인을 비난하는 것이 일반적인 관행이 되었지만, 이에 대한 관심은 많지 않습니다. 급속한 성장에도 불구하고 인터넷이 환경에 미치는 영향

기술은 우리의 직업 생활과 개인 생활의 중심에 있습니다. 연결된 장치의 수는 증가하고 있으며 2025년까지 557억 개에 이를 것으로 예상됩니다.

디지털 기술은 온실가스 배출량(GHG)의 4%를 차지하며 에너지 소비는 매년 9%씩 증가하고 있습니다.

인터넷은 연간 16억 톤의 온실 가스를 배출합니다. 이 모든 탄소를 제거하려면 성숙한 숲으로 세계 육지 표면의 1/3을 덮어야 합니다!

이러한 추세에 친환경 웹사이트가 필요한 이유입니다.

지속 가능한 웹 디자인이란 무엇입니까?

지속 가능한 웹 디자인은 환경 영향을 최소화하고 에너지를 절약하며 자원을 효율적으로 사용하도록 웹 사이트를 구축하는 것입니다. 즉, 지속 가능한 웹 디자인은 지구를 위해 좋은 사이트를 만드는 것입니다.

그렇다면 웹사이트 디자인은 전 세계 배출량에 어떤 영향을 미칠까요?

최근 연구에 따르면 2013년 이후 일일 화면 시간이 거의 50분 증가했으며 평균 미국인은 매일 7시간 4분 동안 화면을 보는 것으로 나타났습니다.

우리가 인터넷을 서핑할 때 많은 사람들이 고려하지 않는 문제가 있습니다. 바로 우리의 온라인 행동이 우리 주변 환경에 어떤 영향을 미칠 수 있는지입니다. 웹사이트 디자인은 전기 또는 기타 자원을 사용하고 작업에서 대기로 유해한 가스를 방출하는 두 가지 방식으로 전 세계적으로 탄소 배출을 유발합니다. 그것이 지속 가능한 웹 디자인이 들어오는 곳입니다.

대답은 처음에는 모호하게 보일 수 있지만 글꼴 크기에서 사이트에 게시하기 위해 선택한 이미지에 이르기까지 모든 것이 포함됩니다. 모든 것이 영향을 미치며 이러한 작은 것들이 시간이 지나면서 합산되어 전 세계 탄소 배출량에 크게 기여하게 됩니다.

공간을 줄이는 가장 쉬운 방법은 새 사이트를 설계하거나 기존 사이트를 유지할 때 낭비를 최소화하는 것입니다. 아래에서 이를 수행할 수 있는 몇 가지 방법을 설명합니다.

지속 가능한 웹 디자인의 이점

지속 가능한 웹 디자인은 환경에 유익하고 전환율을 효과적으로 향상시킵니다. 친환경 웹사이트는 환경 친화적이지 않은 웹사이트보다 전환율이 더 높습니다. 지속 가능한 웹 디자인의 주목할만한 이점은 다음과 같습니다.

간단하고 직관적인 사용자 인터페이스

녹색 웹 사이트에는 일반적으로 탐색하기 쉬운 직관적인 사용자 인터페이스가 있습니다. 사용자는 다음에 어디로 가야 하는지에 대해 길을 잃거나 혼란스러워하지 않습니다. 깨끗하고 단순한 레이아웃과 사이트 전체에 걸쳐 정보를 신중하게 배치하여 방문자는 원하는 것을 빠르게 찾는 데 아무런 문제가 없습니다. 기업은 사이트를 디자인할 때 사용자의 요구를 최전선에 두어야 합니다.

더 빠른 속도 성능

더 많은 인터넷 소비자가 계속해서 온라인 콘텐츠에 액세스함에 따라 비즈니스에서 사이트가 모바일 반응형인지 확인하는 것이 점점 더 중요해지고 있습니다. 모바일 반응성은 사이트가 올바르게 수행될 때 스마트폰에서 더 빠르게 로드되도록 하여 고객 만족도를 높입니다.

또한 대부분의 모바일 장치는 배터리 전원으로 실행되기 때문에 회사는 사이트에서 이러한 장치의 에너지를 불필요하게 소모하지 않도록 해야 합니다.

검색 엔진 최적화(SEO)

지속 가능한 웹 디자인은 검색 엔진 결과 페이지에서 순위를 매기기 위해 추가 코드 변경이 필요하지 않으므로 SEO 친화적입니다. 따라서 녹색 사이트를 보유하면 경쟁에서 우위를 점할 수 있습니다.

다양한 화면 크기에서 우수한 성능 발휘

친환경 웹사이트를 차별화하는 한 가지는 다양한 화면 크기에서 잘 작동하는 기능입니다. 콘텐츠를 보는 것은 방문자가 어떤 기기에서 검색하든 문제가 되지 않습니다.

지속 가능한 웹 디자인의 특징

다음 예는 아름답고 효과적인 웹 사이트를 만드는 데 사용할 수 있는 다양한 지속 가능한 웹 디자인 기술 및 기능을 보여줍니다.

• 미니멀리즘 사용: 지속 가능한 웹 디자인의 가장 중요한 측면 중 하나는 미니멀리즘입니다. 더 적은 코드, 더 적은 이미지, 더 작은 파일을 사용하여 더 빠르게 로드되고 더 적은 리소스를 사용하는 웹 사이트를 만들 수 있습니다.
• 이미지 최적화: 이미지는 종종 웹 페이지에서 가장 무거운 요소이므로 웹에 맞게 이미지를 최적화하는 것이 필수적입니다. 압축하면 나머지 페이지 속도를 저하시키지 않으면서 공간을 덜 차지하고 효율적으로 로드됩니다.
• CSS 스프라이트 사용: CSS 스프라이트는 여러 이미지를 하나의 파일로 결합하는 지속 가능한 웹 디자인 기술입니다. 따라서 사전에 더 많은 작업이 필요하지만 모든 이미지 데이터가 여러 페이지에 분산되지 않고 한 곳에 저장되기 때문에 장기적으로 대역폭을 절약할 수 있습니다.
• HTML, CSS 및 JavaScript 리소스 최소화: 웹사이트가 로드될 때마다 추가 서버 데이터를 가져와야 합니다. 따라서 이러한 항목을 줄이면 사이트 로드 속도를 높이는 데 도움이 됩니다. 예를 들어 Google Analytics와 같은 외부 스크립트를 사용하는 대신 WordPress에 내장된 분석 도구를 사용합니다. 수백 개의 스타일시트가 있는 전체 라이브러리를 가져오는 대신 콘텐츠를 효과적으로 표시하는 데 필요한 항목만 가져옵니다.
• 코드 재사용성 활용: 웹 디자인을 일회성 프로세스로 보지 않는 것이 중요합니다. PixoLabo에서는 우리가 만든 모든 스크립트 또는 템플릿을 추적하고 가능한 경우 재사용합니다.
• 중복 파일 제거: 웹 사이트에는 종종 중복 파일이 있습니다. 예를 들어 index.html 및 index.php 파일이 있으면 불필요한 디스크 공간이 낭비되고 로드 시간이 느려집니다. 개발자는 이러한 파일을 효과적으로 제거하여 디스크 공간을 줄이고 더 빠른 웹 로딩을 보장합니다.
• 리치 미디어를 책임감 있게 사용: 웹사이트를 디자인할 때 기능이 아닌 콘텐츠에 집중하고 싶습니다. 기능을 너무 많이 추가하면 로드할 때마다 더 많은 코드를 처리해야 하므로 사이트 속도가 느려집니다.
• 레디메이드 솔루션 통합: 가장 일반적인 웹사이트 문제에 대한 많은 레디메이드 솔루션이 존재합니다. 시간과 에너지를 절약할 수 있다면 스스로 무언가를 만들기 전에 항상 해결책을 찾으려고 노력해야 합니다. 예를 들어 WordPress에는 Facebook, Twitter 및 LinkedIn과 같은 소셜 미디어 네트워크를 통합하기 위한 모듈이 이미 있으므로 바퀴를 재발명할 필요가 없습니다!

디지털 발자국 이해하기

콘텐츠를 제작하고, 웹사이트를 시작하고, 마케팅 업데이트를 공유하고, 가상 워크숍을 주최하고, 클라우드 계정을 업그레이드하고, 진화하는 비즈니스 요구 사항을 충족하기 위해 더 많은 앱을 설계함에 따라 조직의 디지털 공간이 커집니다. 다음은 한 가지 예입니다.

• 사진이 첨부된 단일 이메일은 최대 50그램의 CO2e를 배출할 수 있습니다. (e = 이산화탄소 이외의 온실 가스를 포함하는 "등가".)
• 적은 양처럼 보일 수 있지만 조직에서 매일 보내는 이메일 수를 생각해 보십시오.
• 이제 전 세계의 모든 디지털 지원 조직에 이를 곱하십시오.

그리고 그것은 단지 이메일입니다. 연간 GHG 배출량이 16억 톤에 도달하는 방법을 쉽게 알 수 있습니다.

많은 조직이 온라인 상태를 정기적으로 감사하지 않아 수백만 개의 웹사이트에 읽지 않은 블로그 게시물, 끊어진 링크, 부풀린 이미지 및 오래된 콘텐츠가 포함됩니다. 이러한 문제는 사용자를 좌절시키고 에너지를 낭비하며 시간과 비용을 낭비하여 조직의 장기적인 지속 가능성과 수익에 영향을 미칩니다.

많은 조직이 사무실 공간, 공급망 또는 비즈니스 관행이 환경에 미치는 영향을 평가하지만 온라인 자산의 탄소 발자국을 거의 감사하지 않습니다. 인터넷이 성장하는 속도를 감안할 때 이것은 변화가 필요합니다.

지속 가능한 웹 디자인 사례

지속 가능한 웹 디자인은 환경 보존 원칙과 성능 기반 웹 및 사용성 표준의 하이브리드 혼합입니다. 기업과 조직은 모든 ​​웹사이트, 앱 또는 온라인 미디어의 수명 주기에 적용하여 효율성을 극대화하고 사용성을 높이며 성능을 개선할 수 있습니다.

지속 가능한 웹 디자인은 또한 친환경 호스팅, 탄소 측정 및 감소, 전기 사용 최소화 등을 통해 디지털 제품 및 서비스의 환경적 영향을 줄일 수 있습니다.

지속 가능한 웹 디자인의 실행은 다음 범주로 나뉩니다.

1. 웹 성능 최적화: 자산이 사용자 장치에 얼마나 빨리 다운로드됩니까?
2. 콘텐츠 검색 가능성: 사용자가 필요한 콘텐츠를 얼마나 빨리 찾을 수 있습니까? 그리고 사용자가 콘텐츠를 발견하면 해당 콘텐츠는 얼마나 적용 가능할까요?
3. 유용성: 모든 사용자가 다양한 대역폭 속도로 장치 및 플랫폼에서 작업을 얼마나 빨리 수행할 수 있습니까?
4. 그린 웹 호스팅: 디지털 제품 및 서비스를 호스팅하는 서버가 재생 가능 에너지로 구동됩니까?

최근에는 지속 가능한 웹 디자인 어휘집에 두 가지 중요한 추가 사항이 추가되었습니다.

1. 클라이언트 및 프로젝트 정신: 귀하의 디지털 프로젝트는 무엇을 홍보하거나 판매합니까? 어떻게 투명하고 효과적으로 실행합니까?
2. 비즈니스 관행: 귀하의 조직은 이러한 동일한 원칙을 어떻게 구현합니까?

웹 사이트를 지속 가능하게 만드는 방법

1 – 사용자 여정 계획부터 시작

이 개념에 익숙하지 않은 경우 사용자 여정은 특정 목표(가입, 구매 등)를 달성하기 위해 사이트를 방문할 때 사용자가 취하는 일련의 행동을 의미합니다.

명백한 이유로 사용자는 시간을 낭비하지 않기 때문에 짧은 사용자 여정을 선호합니다. 그러나 고객 경험 외에도 필요한 것을 찾기 위해 더 적은 수의 페이지를 방문하여 방문으로 인한 탄소 배출량을 줄일 수 있습니다.

사용자 여정에 익숙해지고 여정 지도를 자유롭게 디자인할 수 있게 되면 웹 디자인을 그에 맞게 조정하는 것이 좋습니다.

마찰점을 피하는 좋은 사용자 경험(UX)은 필연적으로 에너지 소비를 줄이고 고객을 더 행복하게 만듭니다.

2 – 친환경 호스팅 제공업체 선택

우리는 결국 호스팅 제공업체이기 때문에 이것이 약간 이기적으로 들릴 수 있다는 것을 알고 있지만 현실은 탄소 발자국을 줄이려면 웹 사이트를 매일 운영하는 사람이 중요하다는 것입니다. 불행하게도 데이터 센터는 인터넷에 전력을 공급하는 데 사용되는 에너지의 상당 부분을 소비합니다. 우리는 100% 재생 가능 자원으로 빠르게 전환해야 합니다.

재생 가능 에너지로 구동되는 지속 가능한 호스팅 제공업체를 선택하는 것은 필수입니다. 전반적인 환경 정책을 살펴보고 호스팅 제공업체가 CO2 배출량을 보충하기 위해 추가 조치를 취했으며 다른 지속 가능성 관행에 참여하고 있는지 확인하는 것도 좋은 생각입니다.

3 – 반응형 디자인 선택

반응형 디자인을 선택하는 것은 지속 가능한 웹 디자인 관행처럼 보이지 않을 수 있지만 하나입니다. 반응형 디자인은 다양한 화면 크기의 장치에 적응하는 웹 디자인으로, 오늘날 인터넷에 액세스하는 여러 장치와 화면의 세계에서 매우 중요합니다.

이러한 종류의 디자인을 선택하면 웹 사이트가 다양한 형식에 적응하고 그 과정에서 리소스 소비를 줄일 수 있습니다.

연결 속도가 간헐적이거나 불안정한 모바일 사용자를 위해 사이트가 매우 빠른지 확인하는 것이 도움이 될 것입니다. 대부분의 사이트가 모바일 우선 색인에 있는 경우 Google은 모바일 크롤러의 사이트 속도도 살펴보므로 모바일 사용자의 우선 순위를 정하는 것이 좋습니다.

4 – 정보를 찾기 쉽게 만들기

이것은 Sustainable Web Manifesto의 지침과 매우 일치합니다. 환경적으로 건전한 웹 디자인을 위해서는 정보를 쉽게 찾을 수 있도록 노력해야 합니다. 접근성은 더 친환경적인 웹사이트뿐만 아니라 더 나은 사용자 경험을 위해서도 중요합니다.

그것은 모두 귀하의 웹 사이트를 탐색하는 것이 얼마나 간단한지에 달려 있습니다. 간단한 탐색은 사람들이 필요한 정보를 찾기 위해 웹사이트를 클릭하는 시간을 줄여줍니다. 이렇게 하면 고객에게 완전한 투명성을 제공하는 데에도 도움이 됩니다.

5 – 모든 것을 캐시하세요!

많은 웹사이트(WordPress, Magento, Drupal 등)와 마찬가지로 PHP 기반 애플리케이션을 사용하는 경우 지속 가능성을 위해 캐싱이 필요합니다.

사이트에 캐싱이 없으면 서버 작업이 더 어려워집니다. 누군가 웹사이트의 페이지에 액세스할 때마다 페이지 콘텐츠는 PHP 코드를 처리하고 데이터베이스에 쿼리를 작성하여 웹사이트를 표시하는 HTML 콘텐츠로 변환하여 즉시 로드해야 합니다.

이 프로세스는 서버의 CPU, 메모리 및 디스크를 더 많이 사용하여 에너지를 소비합니다. 서버는 모든 방문자와 모든 페이지에 대해 이 작업을 수행해야 하므로 방문자와 페이지가 많을수록 더 많은 에너지를 소비합니다.

캐싱을 사용하면 방문자가 처음으로 페이지를 요청할 때만 이 집약적인 워크로드의 대부분이 수행됩니다. 그런 다음 결과 HTML은 캐시에 저장되므로 이후의 각 페이지 로드는 그렇게 힘든 작업을 모두 수행할 필요가 없습니다.

또한 페이지가 더 빨리 로드됩니다. 더 빠른 페이지 속도는 귀하와 귀하의 방문자에게 이익이 될 뿐만 아니라 귀하의 방문자가 유휴 상태로 페이지가 로드될 때까지 기다리는 시간을 줄여 프로세스에서 더 적은 에너지를 소비한다는 것을 의미합니다.

웹사이트를 캐싱하는 방법에는 여러 가지가 있습니다. PixoLabo에서는 페이지 캐싱을 위해 WP Rocket을 선호합니다. 초고속 웹사이트와 더 나은 지속 가능성 – 사랑하지 않을 수 없는 것은 무엇입니까?

6 – 코드를 작성하고 있다면 깨끗한 코드인지 확인하십시오.

대부분의 사용자는 CMS를 사용하지만 일부 코드를 작성하는 경우 이해하기 쉽고 변경하기 쉽고 불필요한 중복 및 작업을 피하십시오.

7 – 불필요한 플러그인 및 애드온 피하기

이 단계는 위의 규칙과 관련이 있지만 WordPress와 같은 CMS를 사용하는 사람들을 위한 것입니다. 때때로 우리는 플러그인 시장이 제공하는 모든 가능성에 너무 흥분하여 불필요한 플러그인으로 웹 사이트를 익사시킬 수 있습니다.

마케팅 지향 플러그인이나 우리가 잊어버린 중복 플러그인이 종종 그런 경우입니다. 가지고 있는 것과 필요한 것을 평가하고 다른 것에 시동을 겁니다.

8 – 사용자 지정 글꼴을 피하거나 제한합니다.

이 사실은 놀라울 수도 있지만 사용자 정의 글꼴은 웹 사이트의 파일 크기를 증가시킬 수 있습니다.

사용자 지정 글꼴 파일은 단일 가중치를 포함하는 동안 쉽게 200kb를 초과할 수 있습니다. 다양한 두께와 서체를 사용하면 필연적으로 합산되어 속도와 에너지 소비에 모두 영향을 미칩니다.

따라서 사용자 지정 글꼴은 브랜드 및 실용적인 목적에 필수적이라고 생각되는 경우에만 사용해야 합니다.

9 – 미디어 파일을 현명하게 사용하고 최적화하십시오!

웹사이트의 모든 이미지를 최적화해야 한다는 것은 말할 필요도 없습니다. 우리는 웹사이트 속도(및 SEO)와 관련된 모범 사례를 통해 알고 있습니다. 때때로 사이트가 느린 이유를 묻는 고객을 볼 수 있습니다. 초대형 원본을 업로드했기 때문에 홈페이지에 4MB의 이미지가 포함되어 있다는 것을 알게 됩니다! 동일한 이미지를 최적화하여 품질 저하 없이 제공할 수 있습니다.

Imagify for WordPress에는 자동 이미지 최적화가 포함되어 있으므로 직접 수행하는 것에 대해 걱정할 필요가 없습니다. 또한 이미지를 PNG 또는 JPG 이미지보다 약 25% 더 작은 WebP와 같은 최신 파일 형식으로 변환할 수 있습니다.

최적화 외에도 사용이 정당하고 목적이 있는지도 고려해야 합니다.

예를 들어 일부 제품 사진은 쓸모가 없을 수 있습니다(예: 매우 유사한 각도). 다른 경우에는 임의 스톡 이미지와 같이 페이지에 사용된 이미지를 SVG 그래픽과 같은 대안으로 쉽게 대체하거나 CSS 스타일을 통해 동일한 효과를 얻을 수 있습니다.

10 – 접힌 부분 콘텐츠 아래의 지연 로드

각 웹 페이지에는 '접혀야 볼 수 있는 부분'에 많은 콘텐츠가 포함될 수 있습니다. 즉, 방문자가 페이지를 아래로 스크롤하지 않으면 표시되지 않는 콘텐츠입니다.

여기에 크기가 상당할 수 있는 많은 이미지나 비디오가 포함된 경우 해당 데이터는 절대 볼 수 없더라도 인터넷을 통해 이동해야 합니다.

지연 로드는 사용자가 페이지를 아래로 스크롤할 때만 이 콘텐츠를 요청하는 것을 의미합니다. 해당 섹션은 해당 콘텐츠가 표시되기 직전에 표시되므로 방문자의 관점에서 보면 마치 항상 거기에 있었던 것처럼 인식할 수 있는 차이가 없습니다.

불필요한 데이터 전송을 피할 수 있을 뿐만 아니라 웹사이트의 가중치를 줄여 PageSpeed ​​점수도 높일 수 있습니다.

일부 애플리케이션에는 지연 로딩이 내장되어 있거나 플러그인을 사용할 수 있습니다. WordPress의 경우 LiteSpeed ​​Cache에는 페이지가 매우 긴 경우 이미지, 비디오, 포함된 콘텐츠 또는 전체 HTML 블록에서 무엇이든 로드할 수 있는 지연 로드 기능이 포함되어 있습니다.

11 – 비디오 및 애니메이션 사용 제한

웹 사이트를 Word 페이지처럼 보이게 만들고 전염병과 같은 비디오 및 애니메이션을 피할 필요는 없지만 대신 이미지와 마찬가지로 검소하게 사용하십시오.

애니메이션은 일반적으로 전술적인 목적이 없으므로 가능한 한 최소한으로 사용하십시오. 동영상의 경우 어떤 목적에 도움이 되는지가 중요하므로 사용자에게 도움이 된다고 생각되면 사용하세요. 가능한 한 최적화되어 있는지 확인하십시오.

12 – HTML, CSS 및 Javascript 축소

다시 말하지만, 이미 속도 향상을 위해 이 작업을 수행하고 있을 수 있지만 그렇지 않은 경우 그 이유를 빠르게 살펴보겠습니다.

HTML, CSS 및 Javascript 코드에는 공백, 줄 바꿈 또는 주석과 같은 추가 데이터가 포함되는 경우가 많습니다. 이러한 공백이나 주석은 개발자가 코드를 쉽게 읽고 이해할 수 있도록 하는 데만 도움이 되지만 브라우저가 코드를 해석하는 방식에는 영향을 미치지 않습니다.

코드를 최소화하면 불필요한 무게가 모두 제거되어 인터넷을 통해 전송해야 하는 파일의 크기가 줄어들고 사이트 로드 속도가 빨라집니다.

WP Rocket은 WordPress에 대해 이러한 측면을 처리하지만 대부분의 다른 응용 프로그램도 플러그인을 통해 유사한 기능을 사용할 수 있습니다.

13 – 불필요한 CSS 및 Javascript 제거

최소화는 불필요한 데이터를 제거하지만 사이트에서 해당 코드를 사용하는지 여부를 분석하지 않습니다.

사이트에서 전혀 사용하지 않는 다양한 레이아웃, 스타일 또는 기능이 포함된 테마 또는 페이지 빌더를 사용했을 수 있습니다.

모든 코드는 CSS 및 JS 파일에 남아 있으므로 인터넷을 통해 전송해야 하는 데이터의 양이 늘어나고 정당한 이유 없이 사이트 로드 속도가 느려집니다.

정확히 어떤 코드를 수동으로 제거해야 하는지 파악하기 어려울 수 있지만 WordPress의 경우 WP Rocket을 사용하면 사용하지 않는 CSS를 자동으로 제거할 수 있습니다. 이 프로세스는 사용되지 않는 CSS를 제거하고 각 페이지에 대해 고유한 CSS 파일을 생성합니다. 사용하지 않는 CSS를 제거하는 것은 페이지가 몇 개뿐인 경우 유용할 수 있지만 사이트에 페이지가 많은 경우 단일 CSS 파일을 사용하는 것이 더 효율적일 수 있습니다.

Javascript는 제거하기가 더 복잡할 수 있지만 WP Rocket은 최소한 사용자 활동이 감지될 때까지 로드되는 것을 지연시킬 수 있습니다. 스크롤 없이 볼 수 있는 콘텐츠에 불필요한 경우 자바스크립트를 지연하는 것이 적절할 수 있습니다.

궁극적으로 가장 좋은 조언은 가능한 한 페이지 빌더나 부풀려진 플러그인을 사용하지 말고 필요하다고 알고 있는 깨끗한 코드를 사용하는 것입니다.

14 – 다양한 장치에 대한 웹 사이트 최적화

다양한 화면 크기, 브라우저, 장치 및 대역폭 속도에서 사이트를 테스트하려면 시간이 많이 소요될 수 있지만 모바일 친화적인 웹 디자인은 필수적입니다. 콘텐츠와 디자인의 잘못된 표시는 사용자의 UX 불량과 혼란으로 이어질 것입니다.

그들은 원하는 것을 찾는 데 훨씬 더 많은 시간을 할애하고 더 많은 에너지를 소비합니다.

이를 방지하려면 사용자에게 최적의 경험을 제공할 수 있도록 디자인이 이러한 변수에 최대한 잘 적응하도록 해야 합니다.

15 – CDN을 사용하여 콘텐츠 제공

그렇다면 CDN이란 무엇입니까? 콘텐츠 전송 네트워크(CDN)는 서로 다른 지리적 위치에 있는 서버 네트워크입니다. 사용자와 가까운 위치에서 서비스를 제공하여 콘텐츠 로드 속도를 높일 수 있습니다. 즉, 이것은 속도와 사용자 경험 모두에 연결되어 있습니다.

그러나 더 중요한 것은 지속 가능성의 관점에서 데이터를 세계 각지로 전송하는 데 많은 에너지가 필요하므로 CO2를 줄이는 데 도움이 된다는 것입니다. 그리고 데이터가 더 멀리 이동할수록 더 많은 에너지가 필요합니다.

CDN을 통해 제공되는 이미지는 일반적으로 이 단계를 건너뛴 경우 더 작다는 점을 언급하는 것도 좋습니다. 많은 CDN은 이미지 크기, 픽셀 밀도, 형식 및 압축을 줄이는 것을 포함하여 이미지 최적화를 위한 도구를 제공합니다.

Cloudflare와 같은 재생 가능한 전력을 사용하는 CDN을 선택하는 것이 필수적입니다.

16 – 콘텐츠를 감사하여 전략을 제공하는지 확인

대규모 웹 사이트가 있는 경우 주기적으로 콘텐츠를 감사하는 것이 중요합니다. 일부 페이지는 필연적으로 구식이 되거나 더 이상 목적을 달성하지 못할 것입니다. 이것은 특히 기술 자료, 제품 페이지, 블로그 게시물 등에 해당됩니다.

수동으로 검사하거나 Google Analytics를 사용하여 어떤 페이지가 오래되었거나 성능이 저하될 수 있는지 평가할 수 있습니다. 그런 다음 유용하고 새로운 콘텐츠로 업데이트할지 아니면 삭제할지 결정할 수 있습니다.

17 – 탄소 발자국을 상쇄하여 CO2 배출량을 줄입니다.

나무를 심고 탄소를 상쇄하는 프로젝트에 참여하는 것은 웹 디자인과 비즈니스 전반의 지속 가능성을 향상시키는 환상적인 방법입니다. 나무는 이산화탄소를 흡수하여 산소로 변환하므로 이산화탄소 배출량을 줄이는 데 절대적인 승자입니다.

Treebuddy Earth의 친구들이 도와줄 수 있습니다.

웹사이트를 기후 친화적으로 만들기

지속 가능한 웹 디자인을 채택하는 것은 비즈니스를 선의의 힘으로 사용하는 완벽한 방법입니다. 친환경 웹사이트가 무엇인지에 대해 많은 혼란이 있습니다. 지속 가능한 웹 디자인은 지구와 사람을 우선시하는 웹 서비스를 디자인하는 것입니다.

지속 가능한 웹사이트는 수익성이 있어야 하고 지구를 생각하며 장기적으로 사람들을 위한 가치를 창출해야 합니다. 웹사이트 탄소 계산기와 같은 도구는 웹사이트 GHG 배출량의 대략적인 추정치를 제공합니다.

웹 사이트 탄소 중립성을 달성하기 위해 녹색 에너지에서 호스팅할 수 있습니다. 신뢰할 수 있는 녹색 에너지 공급업체로부터 구매한다고 명시하고 REC 기반 녹색 에너지에 의지할 수 있는 공급자를 추천합니다.

파일 크기, 속도 및 유용성 개선을 통해 전력 소비를 줄일 수도 있습니다. 가장 유망한 것은 검색 의도, 비디오, 이미지 및 플러그인/스크립트 최적화에 집중하는 것입니다.

마지막으로 탄소 상쇄 프로젝트를 통해 온실가스 배출량을 보상할 수 있습니다. 지속 가능한 웹 사이트를 만드는 것은 정밀한 착륙도 홍보 캠페인도 아닙니다. 탄소 발자국을 과도하게 보상하는 데 대담하되 겸손하고 자각하는 의사 소통을 하십시오.

지속 가능한 웹 디자인은 환경, 사회 및 경제에 긍정적인 영향을 미칩니다. 지속 가능한 웹 디자인의 원칙을 구현하는 일련의 관행을 통합할 수 있습니다. 그러나 가장 중요한 것은 리소스 사용을 줄이는 것입니다.

지속 가능한 웹사이트를 구축해야 합니까?

기후 친화적인 웹 사이트 또는 온라인 상점을 구축해야 합니까? 우리의 전문 디자이너 팀이 이를 도와드릴 것입니다. 그러나 먼저 포트폴리오를 살펴보고 사례 연구를 읽으십시오.

그런 다음 우리가 지속 가능한 웹 디자인 요구 사항에 적합하다고 생각되면 이야기합시다! 우리는 비즈니스 및 제품 브랜드를 위한 광범위한 컨설팅 및 디자인 솔루션을 제공합니다.

그리고 지속 가능한 웹사이트를 구축하는 방법에 대해 여전히 확신이 서지 않는다면 이야기를 나누십시오. 귀하의 의견을 경청하고 질문에 답변하며 귀하의 비즈니스 또는 제품 브랜드를 위한 친환경 웹사이트를 구축하는 방법을 결정할 것입니다!

무엇을 추가하시겠습니까?

지속 가능한 웹사이트와 웹 디자인의 미래에 대해 어떻게 생각하십니까? 마침내 지속 가능성 문제가 새로운 웹 프레임워크의 중심에 있고 모범 사례에 포함되는 것을 보게 될까요? 웹사이트를 보다 친환경적이고 효율적으로 만들기 위해 무엇을 더 할 수 있습니까?

그레고르 사이타

공동 설립자 / CXO

@그레고르사이타