지속 가능한 웹 디자인이란 무엇이며 이를 달성하는 방법
게시 됨: 2022-12-01
몇 달 전에 한 친구가 “전기 자동차를 정말 갖고 싶지만 살 형편이 안 됩니다.”라고 후회하며 말했습니다. 그와 나는 기후 변화와 우리 둘 다 습관의 변화에 대해 논의하고 있었습니다.
나는 웃었다.
"그것들도 에너지를 소비하고 재생 에너지를 사용하는 콘센트를 통해 전기 자동차를 충전하지 않으면 여전히 상당히 많이 오염시키는 것입니다."
그는 그것을 알고 있다고 말했지만, 그는 여전히 자신과 그의 20세 VW가 더 지속 가능하고 친환경적인 삶을 영위하려는 그의 모든 노력에 대해 뺨을 때리는 것 같다고 말했습니다.
"이건 어때? 디지털 세상을 통해 탄소 배출량을 줄이는 방법을 알려줄 수 있다"고 제안했습니다. 그는 나에게 당황한 표정을 지었다. 그런 다음 일부 통계에 따르면 평균적인 인터넷 사용자가 일반 자동차로 1000km를 여행하는 것과 거의 동일한 양의 CO2를 생성하며 기여하는 다양한 활동이 있다고 그에게 말했습니다.
그는 내가 휴대폰에서 데이터를 꺼낼 때까지 거의 10분 동안 이 아이디어와 씨름했습니다. 솔직히, 내가 방문하는 각 웹 페이지에는 숨겨진 비용, 즉 그것을 유지하는 데 사용되는 에너지 비용이 있다는 것을 깨달은 날 같은 반응을 보인 것을 기억하기 때문에 그를 비난하지 않았습니다.
말하자면 인터넷의 더러운 비밀.
Website Carbon Calculator에 따르면 평균 웹사이트는 페이지 조회당 약 0.5g의 CO2를 생성하므로 월간 조회수가 100,000인 웹사이트의 경우 연간 500kg입니다. 웹사이트당이라는 점을 명심하세요!
참고로 평균적인 자동차는 1000km당 1200kg의 CO2를 배출하므로 인터넷이 막대한 탄소 발자국으로 인해 기후 변화와 지구 온난화에 매우 눈에 띄는 영향을 미친다는 것을 알 수 있습니다.
따라서 질문은 다음과 같습니다. 사이트가 우리 환경에 미치는 영향을 줄이기 위해 웹사이트 소유자로서 무엇을 할 수 있습니까?
물론 지속 가능한 웹 디자인입니다.
Kualo에서 우리는 지속 가능성의 개념과 본질적으로 얽혀 있어서 이 주제를 탐구하는 것이 자연스럽다고 느꼈습니다. 이 기사에서는 다음을 배웁니다.
웹 사이트의 탄소 발자국을 최소화하는 데 도움이 되는 정확한 청사진을 제공하고자 합니다.
이것이 우리가 지속 가능한 웹 디자인 선언문에서 읽을 수 있는 내용이며, 이 신조가 무엇을 포함하는지 간략하게 설명하는 웹 사이트가 있습니다. 6가지 사항에 대해 빠르게 살펴보겠습니다.
위에서 언급한 모든 사항을 고려한다면 이 선언문이 요구하는 것은 지속 가능한 웹 디자인일 뿐만 아니라 실제로 지속 가능한 비즈니스 관행과 지속 가능한 경제의 기초임을 알 수 있습니다. 더 나은 미래를 위해서는 환경과 사람에게 부정적인 영향을 최소화하면서 의미 있고 유용한 서비스와 제품을 제공하는 기업이 필요합니다.
즉, 지속 가능한 웹 디자인을 하려면 다음을 수행해야 합니다.
이제 이 기사의 시작 부분에서 말한 내용(및 인터넷의 환경 영향에 대한 인포그래픽)으로 돌아가서 이것이 기본적으로 계속 증가하는 에너지 블랙홀임을 알고 있습니다. 다른 한편으로 우리는 인터넷이 많은 사람들에게 매우 중요하다는 것을 알고 있으며 자동차나 노트북처럼 인터넷을 더 에너지 효율적인 버전으로 바꿀 수 있는 것은 아닙니다.
하지만 무엇을 교환할 수 있는지 아세요?
물론 우리의 웹사이트 디자인.
웹사이트의 크기와 구축 방식이 생성되는 CO2의 양에 직접적인 영향을 미친다는 것이 요점이라면 웹사이트 소유자로서 우리가 해결해야 할 사항입니다.
그러나 웹 디자인과 관련하여 우리의 방식을 바꾸면 추가적인 이점이 있습니까?
나는 절대적으로 그렇다고 말할 것입니다.
마케터로서 저는 제 디지털 노력의 모든 각도와 그것이 제 프로젝트에 미치는 영향을 고려하는 데 익숙합니다. 개인적인 차원에서도 환경 친화적인 웹사이트를 구축하는 것이 훨씬 낫다는 것을 바로 말씀드릴 수 있습니다. 웹 디자인과 그 이유는 다음과 같습니다.
명백한 이유로 사용자는 시간을 낭비하지 않기 때문에 짧은 사용자 여정을 선호합니다. 그러나 고객 경험 외에도 필요한 것을 찾기 위해 더 적은 수의 페이지를 방문하여 방문으로 인한 탄소 배출량을 줄일 수 있습니다.
(이미지 출처: https://www.appcues.com/blog/user-journey-map)
사용자 여정의 개념에 익숙해지고 사용자 여정 맵을 자유롭게 디자인할 수 있게 되면 웹 디자인을 그에 맞게 조정하는 것이 좋습니다.
마찰점을 피하는 좋은 사용자 경험(UX)은 필연적으로 에너지 소비를 낮추고 고객을 더 행복하게 만듭니다.
재생 가능 에너지로 구동되는 지속 가능한 호스팅을 제공하는 제공업체를 선택하는 것은 필수입니다. 전반적인 환경 정책을 살펴보고 호스팅 제공업체가 CO2 배출량을 보충하기 위해 추가 조치를 취했는지 및/또는 다른 지속 가능성 관행에 관여하고 있는지 확인하는 것도 좋은 생각입니다.
사이트에 캐싱이 없으면 서버 작업이 더 어려워집니다. 누군가 웹사이트의 페이지에 액세스할 때마다 PHP 코드를 처리하고 데이터베이스에 쿼리를 작성하여 웹사이트를 표시하는 HTML 콘텐츠로 변환하여 페이지 콘텐츠를 즉석에서 구성해야 합니다.
이것은 서버의 CPU, 메모리 및 디스크를 더 많이 사용하여 프로세스에서 에너지를 소비합니다. 서버는 모든 방문자와 모든 페이지에 대해 이 작업을 수행해야 하므로 방문자와 페이지가 많을수록 더 많은 에너지를 소비합니다.
캐싱을 사용하면 방문자가 처음으로 페이지를 요청할 때만 이 집약적인 워크로드의 대부분이 수행됩니다. 그런 다음 결과 HTML은 캐시에 저장되므로 이후의 각 페이지 로드는 그렇게 힘든 작업을 모두 수행할 필요가 없습니다.
또한 페이지가 더 빨리 로드됩니다. 이것은 귀하와 귀하의 방문자 모두에게 이득이 될 뿐만 아니라 귀하의 방문자가 페이지가 로드될 때까지 기다리는 유휴 시간을 줄여 프로세스에서 더 적은 에너지를 소비한다는 것을 의미합니다.
웹사이트를 캐싱하는 방법은 다양합니다. Kualo에서는 페이지 캐싱을 위해 LiteSpeed Cache를 선호하며 데이터베이스 쿼리를 캐싱하기 위해 Redis 및 Memcached도 있습니다. 초고속 웹사이트 와 더 나은 지속 가능성 - 사랑하지 않을 수 있는 것은 무엇입니까?
마케팅 지향 플러그인이나 우리가 잊어버린 중복 플러그인이 종종 그런 경우입니다. 가지고 있는 것과 필요한 것을 평가하고 다른 것에 부팅을 제공하십시오.
(Johnson Banks 대행사가 듀오링고용으로 만든 맞춤 글꼴)
일반적인 사용자 지정 글꼴 파일은 단일 가중치를 포함하는 동안 쉽게 200kb를 초과할 수 있습니다. 다양한 두께와 서체를 사용하면 필연적으로 합산되어 속도와 에너지 소비에 모두 영향을 미칩니다.
따라서 브랜드와 실용적인 목적에 정말 중요하다고 생각되는 경우에만 맞춤 글꼴을 사용하는 것이 좋습니다.
https://youtu.be/eY-VyLd2t-Q
LiteSpeed Cache for WordPress에는 자동 이미지 최적화 기능이 포함되어 있으므로 직접 수행하는 것에 대해 걱정할 필요가 없습니다. 또한 PNG 또는 JPG 이미지에 비해 크기가 약 25% 더 작은 WebP와 같은 최신 파일 형식을 사용하도록 이미지를 변환할 수 있습니다.
최적화 외에도 고려해야 할 사항은 사용이 정당하고 목적이 있는지 여부입니다.
예를 들어 일부 제품 사진은 쓸모가 없을 수 있습니다(예: 매우 유사한 각도). 다른 경우에는 임의 스톡 이미지와 같이 페이지에 사용된 이미지를 SVG 그래픽과 같은 대안으로 쉽게 대체하거나 CSS 스타일을 통해 동일한 효과를 얻을 수 있습니다.
여기에 특히 크기가 클 수 있는 많은 이미지나 비디오가 포함된 경우 해당 데이터는 전혀 볼 수 없더라도 인터넷을 통해 이동해야 합니다.
지연 로드는 사용자가 페이지를 아래로 스크롤할 때만 이 콘텐츠를 요청하는 것을 의미합니다. 해당 섹션은 해당 콘텐츠가 표시되기 직전에 표시되므로 방문자의 관점에서 볼 때 항상 거기에 있었던 것처럼 인식할 수 있는 차이가 없습니다.
불필요한 데이터 전송을 피할 수 있을 뿐만 아니라 웹사이트의 가중치를 줄여 PageSpeed 점수도 높일 수 있습니다.
일부 애플리케이션에는 지연 로딩이 내장되어 있거나 플러그인으로 결합할 수 있습니다. WordPress의 경우 LiteSpeed Cache에는 페이지가 매우 긴 경우 이미지, 비디오, 포함된 콘텐츠 또는 전체 HTML 블록에서 무엇이든 레이지 로딩할 수 있는 레이지 로딩 기능이 포함되어 있습니다.
애니메이션은 일반적으로 전술적인 목적이 없으므로 가능한 한 최소한으로 사용하십시오. 비디오의 경우 어떤 목적으로 사용할 것인지가 중요하므로 사용자에게 유용하다고 생각되면 실제로 사용하고 가능한 한 최적화되었는지 확인하십시오.
종종 HTML, CSS 및 Javascript 코드에는 공백, 줄 바꿈 또는 주석과 같은 추가 데이터가 포함됩니다. 이러한 공백이나 주석은 개발자가 코드를 쉽게 읽고 이해할 수 있도록 하는 데만 유용하지만 브라우저가 코드를 해석하는 방식에는 차이가 없습니다.
코드를 최소화하면 이러한 불필요한 무게가 모두 제거되어 인터넷을 통해 전송해야 하는 파일의 크기가 줄어들고 사이트 로드 속도가 빨라집니다.
WordPress의 경우 LiteSpeed Cache가 이 측면을 처리하지만 대부분의 다른 애플리케이션도 플러그인을 통해 유사한 기능을 사용할 수 있습니다.
사이트에서 전혀 사용하지 않는 다양한 레이아웃, 스타일 또는 기능이 포함된 테마 또는 페이지 빌더를 사용했을 수 있습니다.
모든 코드는 CSS 및 JS 파일에 남아 있으므로 인터넷을 통해 전송해야 하는 데이터의 양이 늘어나고 정당한 이유 없이 사이트 로드 속도가 느려집니다.
정확히 어떤 코드를 수동으로 제거해야 하는지 파악하기 어려울 수 있지만 WordPress의 경우 LiteSpeed Cache를 사용하면 사용하지 않는 CSS를 자동으로 제거할 수 있습니다. 이렇게 하면 사용되지 않는 CSS가 제거되고 각 페이지에 대해 고유한 CSS 파일이 생성됩니다. 몇 페이지만 있는 경우에는 유용할 수 있지만 사이트에 많은 페이지가 있는 경우 단일 CSS 파일을 사용하는 것이 더 효율적일 수 있습니다.
Javascript는 제거하기가 더 복잡할 수 있지만 LiteSpeed는 최소한 사용자 활동이 감지될 때까지 로드되는 것을 지연시킬 수 있습니다. 스크롤 없이 볼 수 있는 콘텐츠에 필요하지 않다면 적절할 수 있습니다.
궁극적으로 가장 좋은 조언은 가능한 한 페이지 빌더나 부풀려진 플러그인을 사용하지 말고 실제로 필요하다고 알고 있는 깨끗한 코드를 사용하는 것입니다.
원하는 것을 찾는 데 훨씬 더 많은 시간을 할애하여 더 많은 에너지를 소비하게 됩니다.
이를 방지하려면 사용자에게 최적의 경험을 제공할 수 있도록 디자인이 이러한 변수에 최대한 잘 적응하도록 해야 합니다.
그러나 더 중요한 것은 지속 가능성의 관점에서 데이터를 세계 각지로 전송하는 데 많은 에너지가 필요하므로 CO2를 줄이는 데 도움이 된다는 것입니다. 그리고 데이터가 더 멀리 이동할수록 더 많은 에너지가 필요합니다.
CDN을 통해 제공되는 이미지는 일반적으로 이 단계를 건너뛴 경우 크기가 줄어듭니다. 많은 CDN은 이미지 크기, 픽셀 밀도, 형식 및 압축을 줄이는 것을 포함하여 이미지 최적화를 위한 도구를 제공합니다.
물론 Cloudflare와 같이 재생 가능한 전력을 사용하는 CDN을 선택하는 것이 중요합니다.
수동으로 스카우트하거나 Google Analytics를 사용하여 어떤 페이지가 오래되었거나 성능이 저하될 수 있는지 평가할 수 있습니다. 그런 다음 유용한 최신 콘텐츠를 포함하도록 조정할 수 있는지 또는 단순히 휴지통으로 보내야 하는지 결정할 수 있습니다.
나무를 심고 탄소를 상쇄하는 프로젝트에 참여하는 것은 웹 디자인뿐만 아니라 비즈니스 전반의 지속 가능성을 향상시키는 놀라운 방법입니다. 나무는 이산화탄소를 흡수하고 산소로 변환하므로 CO2 배출량을 줄이는 데 있어 절대적인 승자입니다.
Ecologi(또는 다른 유사 조직)의 파트너를 방문하여 나무 심기를 시작하도록 초대합니다!
나는 웃었다.
"그것들도 에너지를 소비하고 재생 에너지를 사용하는 콘센트를 통해 전기 자동차를 충전하지 않으면 여전히 상당히 많이 오염시키는 것입니다."
그는 그것을 알고 있다고 말했지만, 그는 여전히 자신과 그의 20세 VW가 더 지속 가능하고 친환경적인 삶을 영위하려는 그의 모든 노력에 대해 뺨을 때리는 것 같다고 말했습니다.
"이건 어때? 디지털 세상을 통해 탄소 배출량을 줄이는 방법을 알려줄 수 있다"고 제안했습니다. 그는 나에게 당황한 표정을 지었다. 그런 다음 일부 통계에 따르면 평균적인 인터넷 사용자가 일반 자동차로 1000km를 여행하는 것과 거의 동일한 양의 CO2를 생성하며 기여하는 다양한 활동이 있다고 그에게 말했습니다.
그는 내가 휴대폰에서 데이터를 꺼낼 때까지 거의 10분 동안 이 아이디어와 씨름했습니다. 솔직히, 내가 방문하는 각 웹 페이지에는 숨겨진 비용, 즉 그것을 유지하는 데 사용되는 에너지 비용이 있다는 것을 깨달은 날 같은 반응을 보인 것을 기억하기 때문에 그를 비난하지 않았습니다.
말하자면 인터넷의 더러운 비밀.
Website Carbon Calculator에 따르면 평균 웹사이트는 페이지 조회당 약 0.5g의 CO2를 생성하므로 월간 조회수가 100,000인 웹사이트의 경우 연간 500kg입니다. 웹사이트당이라는 점을 명심하세요!
참고로 평균적인 자동차는 1000km당 1200kg의 CO2를 배출하므로 인터넷이 막대한 탄소 발자국으로 인해 기후 변화와 지구 온난화에 매우 눈에 띄는 영향을 미친다는 것을 알 수 있습니다.
따라서 질문은 다음과 같습니다. 사이트가 우리 환경에 미치는 영향을 줄이기 위해 웹사이트 소유자로서 무엇을 할 수 있습니까?
물론 지속 가능한 웹 디자인입니다.
Kualo에서 우리는 지속 가능성의 개념과 본질적으로 얽혀 있어서 이 주제를 탐구하는 것이 자연스럽다고 느꼈습니다. 이 기사에서는 다음을 배웁니다.
- 지속 가능한 웹 디자인이란 무엇입니까?
- 지속 가능한 웹 디자인이 필요한 이유는 무엇입니까?
- 지속 가능한 웹 디자인의 이점은 무엇입니까?
- 지속 가능한 웹 디자인 모범 사례
웹 사이트의 탄소 발자국을 최소화하는 데 도움이 되는 정확한 청사진을 제공하고자 합니다.
지속 가능한 웹 디자인이란 무엇입니까?
“지속 가능한 웹 디자인은 사람과 지구를 최우선으로 생각하는 웹 서비스를 디자인하는 접근 방식입니다. 지속 가능한 웹 선언문(깨끗하고 효율적이며 개방적이며 정직하고 재생 가능하며 탄력적임)의 원칙을 존중하는 디지털 제품과 서비스를 제공합니다.”이것이 우리가 지속 가능한 웹 디자인 선언문에서 읽을 수 있는 내용이며, 이 신조가 무엇을 포함하는지 간략하게 설명하는 웹 사이트가 있습니다. 6가지 사항에 대해 빠르게 살펴보겠습니다.
- 깨끗함: 웹사이트에서 사용하는 서비스는 재생 가능한 에너지원으로 구동되어야 합니다. 즉, 웹 호스팅은 친환경이어야 합니다.
- 효율성: 제공하는 서비스는 최소한의 에너지(및 재료)를 사용하도록 완전히 최적화되어야 합니다.
- 개방성: 귀하가 제공하는 서비스는 모든 사람이 액세스할 수 있어야 하며 사용자가 자신의 데이터를 완전히 제어할 수 있어야 합니다.
- 정직: 귀하의 웹사이트는 오해의 소지가 있는 콘텐츠를 제공하거나 웹 디자인을 통해 사용자를 오도하지 않습니다.
- 재생: 귀하의 서비스는 지역 사회와 환경을 지원하는 방향으로 경제에 참여할 것입니다.
- 회복력: 귀하의 서비스는 가장 필요할 때와 장소에서 제공됩니다.
위에서 언급한 모든 사항을 고려한다면 이 선언문이 요구하는 것은 지속 가능한 웹 디자인일 뿐만 아니라 실제로 지속 가능한 비즈니스 관행과 지속 가능한 경제의 기초임을 알 수 있습니다. 더 나은 미래를 위해서는 환경과 사람에게 부정적인 영향을 최소화하면서 의미 있고 유용한 서비스와 제품을 제공하는 기업이 필요합니다.
즉, 지속 가능한 웹 디자인을 하려면 다음을 수행해야 합니다.
- 가능한 최소한의 리소스 사용
- 디자인한 각 페이지에 목적이 있는지 잘 고려한 콘텐츠 계획을 개발하고 따르십시오.
- 최적화된 웹사이트 구축 활용
- 어떤 식으로든 사용자가 원하지 않는 작업을 수행하도록 오도하지 않도록 합니다.
지속 가능한 웹 디자인이 중요한 이유는 무엇입니까?
따라서 인터넷은 사회에 많은 혜택을 주지만 막대한 환경적 비용을 초래합니다. 평균적인 웹 사용자는 컴퓨터나 모바일 장치에서 하루에 5-6시간 동안 온라인 콘텐츠를 소비합니다. 우리가 그 어느 때보다 더 자주 기술을 계속 사용함에 따라 수십억 명의 사람들이 8가지 유형의 장치를 사용하여 전 세계의 웹 사이트를 서핑할 때까지 향후 몇 년 동안만 증가할 것입니다!이제 이 기사의 시작 부분에서 말한 내용(및 인터넷의 환경 영향에 대한 인포그래픽)으로 돌아가서 이것이 기본적으로 계속 증가하는 에너지 블랙홀임을 알고 있습니다. 다른 한편으로 우리는 인터넷이 많은 사람들에게 매우 중요하다는 것을 알고 있으며 자동차나 노트북처럼 인터넷을 더 에너지 효율적인 버전으로 바꿀 수 있는 것은 아닙니다.
하지만 무엇을 교환할 수 있는지 아세요?
물론 우리의 웹사이트 디자인.
웹사이트의 크기와 구축 방식이 생성되는 CO2의 양에 직접적인 영향을 미친다는 것이 요점이라면 웹사이트 소유자로서 우리가 해결해야 할 사항입니다.
지속 가능한 웹 디자인의 이점
일반적으로 말하자면, 이 글을 읽고 계신다면 이미 지속 가능한 웹사이트를 원할 충분한 이유가 있으며 그 이유는 환경 보호와 관련이 있습니다. 기본적으로, 당신은 지구의 영웅이 되고 싶어하고, 나는 당신을 존경합니다.그러나 웹 디자인과 관련하여 우리의 방식을 바꾸면 추가적인 이점이 있습니까?
나는 절대적으로 그렇다고 말할 것입니다.
마케터로서 저는 제 디지털 노력의 모든 각도와 그것이 제 프로젝트에 미치는 영향을 고려하는 데 익숙합니다. 개인적인 차원에서도 환경 친화적인 웹사이트를 구축하는 것이 훨씬 낫다는 것을 바로 말씀드릴 수 있습니다. 웹 디자인과 그 이유는 다음과 같습니다.
- 지출이 줄어듭니다 . 디자이너 비용에서 콘텐츠 제작에 이르기까지 추가 비용이 들 때마다 비용이 발생합니다. 더 복잡한 디자인은 비용이 들고, 더 많은 카피라이팅과 콘텐츠는 비용이 듭니다. 미니멀리스트가 되어 실제로 필요한 것만 가지고 있으면 비용을 절감할 수 있습니다.
- 귀하의 고객은 더 만족할 것입니다. 예전에는 웹 사이트가 참신했고 사람들은 종소리와 휘파람을 즐겼지만 이제는 하루 종일 서핑을 하면서 모든 사람들이 그것에 압도당하고 있습니다. 즉, 일반 사용자의 경우 웹사이트가 명확할수록 X 버튼을 누르고 시간을 낭비하지 않는 사람에게 가는 대신 원하는 것을 찾을 가능성이 높아집니다.
- 귀하의 SEO 노력은 더 효과적 일 것입니다. Google 순위와 관련하여 몇 년 동안 속도는 중요했지만 해가 갈수록 SEO와 관련하여 속도가 점점 더 중요해지고 있습니다. Google은 느린 웹사이트를 싫어하며 더 가볍고 빠른 사이트를 절대적으로 우선시합니다. 그건 그렇고, 이것은 우리 모두가 알고 있듯이 고객 경험에도 해당됩니다.
웹 사이트를 지속 가능하게 만드는 방법
1. 사용자 여정 계획부터 시작
이 개념에 익숙하지 않은 경우 사용자 여정은 특정 목표(가입, 구매 등)를 달성하기 위해 사이트를 방문할 때 사용자가 취하는 일련의 행동을 말합니다.명백한 이유로 사용자는 시간을 낭비하지 않기 때문에 짧은 사용자 여정을 선호합니다. 그러나 고객 경험 외에도 필요한 것을 찾기 위해 더 적은 수의 페이지를 방문하여 방문으로 인한 탄소 배출량을 줄일 수 있습니다.
(이미지 출처: https://www.appcues.com/blog/user-journey-map)
사용자 여정의 개념에 익숙해지고 사용자 여정 맵을 자유롭게 디자인할 수 있게 되면 웹 디자인을 그에 맞게 조정하는 것이 좋습니다.
마찰점을 피하는 좋은 사용자 경험(UX)은 필연적으로 에너지 소비를 낮추고 고객을 더 행복하게 만듭니다.
2. 친환경 호스팅 제공업체 선택
우리는 결국 호스팅 회사이기 때문에 이것이 약간 이기적으로 들릴 수 있다는 것을 알고 있지만 현실은 탄소 발자국을 줄이려면 매일 웹 사이트를 운영하는 사람이 절대적으로 중요하다는 것입니다. 불행하게도 데이터 센터는 인터넷에 전력을 공급하는 데 사용되는 에너지의 상당 부분을 소비합니다. 100% 재생 가능 자원으로 빠르게 전환하는 것이 중요합니다.재생 가능 에너지로 구동되는 지속 가능한 호스팅을 제공하는 제공업체를 선택하는 것은 필수입니다. 전반적인 환경 정책을 살펴보고 호스팅 제공업체가 CO2 배출량을 보충하기 위해 추가 조치를 취했는지 및/또는 다른 지속 가능성 관행에 관여하고 있는지 확인하는 것도 좋은 생각입니다.
3. 모든 것을 캐시하세요!
많은 웹사이트(WordPress, Magento, Drupal 등)에서와 같이 PHP 기반 애플리케이션을 사용하는 경우 캐싱은 지속 가능성을 위해 반드시 해야 할 일입니다.사이트에 캐싱이 없으면 서버 작업이 더 어려워집니다. 누군가 웹사이트의 페이지에 액세스할 때마다 PHP 코드를 처리하고 데이터베이스에 쿼리를 작성하여 웹사이트를 표시하는 HTML 콘텐츠로 변환하여 페이지 콘텐츠를 즉석에서 구성해야 합니다.
이것은 서버의 CPU, 메모리 및 디스크를 더 많이 사용하여 프로세스에서 에너지를 소비합니다. 서버는 모든 방문자와 모든 페이지에 대해 이 작업을 수행해야 하므로 방문자와 페이지가 많을수록 더 많은 에너지를 소비합니다.
캐싱을 사용하면 방문자가 처음으로 페이지를 요청할 때만 이 집약적인 워크로드의 대부분이 수행됩니다. 그런 다음 결과 HTML은 캐시에 저장되므로 이후의 각 페이지 로드는 그렇게 힘든 작업을 모두 수행할 필요가 없습니다.
또한 페이지가 더 빨리 로드됩니다. 이것은 귀하와 귀하의 방문자 모두에게 이득이 될 뿐만 아니라 귀하의 방문자가 페이지가 로드될 때까지 기다리는 유휴 시간을 줄여 프로세스에서 더 적은 에너지를 소비한다는 것을 의미합니다.
웹사이트를 캐싱하는 방법은 다양합니다. Kualo에서는 페이지 캐싱을 위해 LiteSpeed Cache를 선호하며 데이터베이스 쿼리를 캐싱하기 위해 Redis 및 Memcached도 있습니다. 초고속 웹사이트 와 더 나은 지속 가능성 - 사랑하지 않을 수 있는 것은 무엇입니까?
4. 코드를 작성하고 있다면 깨끗한 코드인지 확인하십시오.
대부분의 사용자는 일종의 CMS를 사용하지만 코드를 작성하는 경우 이해하기 쉽고 변경하기 쉽고 불필요한 중복 및 작업을 피해야 합니다.5. 쓸모없는 플러그인과 애드온을 피하십시오
이것은 위의 규칙과 관련이 있지만 실제로 WordPress, Magento, Craft, Laravel 등과 같은 CMS를 사용하는 사람들을 위한 것입니다. 때때로 우리는 플러그인 시장이 우리에게 제공하는 모든 가능성에 너무 흥분하여 불필요한 플러그인으로 웹 사이트를 익사시킬 수 있습니다.마케팅 지향 플러그인이나 우리가 잊어버린 중복 플러그인이 종종 그런 경우입니다. 가지고 있는 것과 필요한 것을 평가하고 다른 것에 부팅을 제공하십시오.
6. 최소한의 맞춤형 글꼴을 피하거나 사용하십시오.
이것은 놀라운 일이 될 수 있지만 사용자 정의 글꼴은 웹 사이트의 파일 크기를 절대적으로 증가시킬 수 있습니다].(Johnson Banks 대행사가 듀오링고용으로 만든 맞춤 글꼴)
일반적인 사용자 지정 글꼴 파일은 단일 가중치를 포함하는 동안 쉽게 200kb를 초과할 수 있습니다. 다양한 두께와 서체를 사용하면 필연적으로 합산되어 속도와 에너지 소비에 모두 영향을 미칩니다.
따라서 브랜드와 실용적인 목적에 정말 중요하다고 생각되는 경우에만 맞춤 글꼴을 사용하는 것이 좋습니다.
7. 미디어 파일을 현명하게 사용(및 최적화)
웹사이트의 모든 이미지는 크기가 최적화되어야 합니다. 우리는 웹사이트 속도(및 이후 SEO)와 관련된 모범 사례를 통해 이를 알고 있습니다. 때때로 사이트가 느린 이유를 묻는 고객을 볼 수 있습니다. 초대형 원본을 업로드했기 때문에 홈페이지에 4MB의 이미지가 포함되어 있다는 것을 알게 됩니다! 동일한 이미지를 최적화하여 품질 저하 없이 제공할 수 있습니다.https://youtu.be/eY-VyLd2t-Q
LiteSpeed Cache for WordPress에는 자동 이미지 최적화 기능이 포함되어 있으므로 직접 수행하는 것에 대해 걱정할 필요가 없습니다. 또한 PNG 또는 JPG 이미지에 비해 크기가 약 25% 더 작은 WebP와 같은 최신 파일 형식을 사용하도록 이미지를 변환할 수 있습니다.
최적화 외에도 고려해야 할 사항은 사용이 정당하고 목적이 있는지 여부입니다.
예를 들어 일부 제품 사진은 쓸모가 없을 수 있습니다(예: 매우 유사한 각도). 다른 경우에는 임의 스톡 이미지와 같이 페이지에 사용된 이미지를 SVG 그래픽과 같은 대안으로 쉽게 대체하거나 CSS 스타일을 통해 동일한 효과를 얻을 수 있습니다.
8. 접힌 콘텐츠 아래의 지연 로드
각 웹 페이지에는 '접혀야 볼 수 있는 부분'에 많은 콘텐츠가 포함될 수 있습니다. 즉, 방문자가 페이지를 아래로 스크롤하지 않으면 표시되지 않는 콘텐츠입니다.여기에 특히 크기가 클 수 있는 많은 이미지나 비디오가 포함된 경우 해당 데이터는 전혀 볼 수 없더라도 인터넷을 통해 이동해야 합니다.
지연 로드는 사용자가 페이지를 아래로 스크롤할 때만 이 콘텐츠를 요청하는 것을 의미합니다. 해당 섹션은 해당 콘텐츠가 표시되기 직전에 표시되므로 방문자의 관점에서 볼 때 항상 거기에 있었던 것처럼 인식할 수 있는 차이가 없습니다.
불필요한 데이터 전송을 피할 수 있을 뿐만 아니라 웹사이트의 가중치를 줄여 PageSpeed 점수도 높일 수 있습니다.
일부 애플리케이션에는 지연 로딩이 내장되어 있거나 플러그인으로 결합할 수 있습니다. WordPress의 경우 LiteSpeed Cache에는 페이지가 매우 긴 경우 이미지, 비디오, 포함된 콘텐츠 또는 전체 HTML 블록에서 무엇이든 레이지 로딩할 수 있는 레이지 로딩 기능이 포함되어 있습니다.
9. 동영상 및 애니메이션 사용 제한
웹 사이트를 Word 페이지처럼 보이게 만들고 전염병과 같은 비디오 및 애니메이션을 피할 필요는 없지만 대신 이미지와 마찬가지로 검소하게 사용하십시오.애니메이션은 일반적으로 전술적인 목적이 없으므로 가능한 한 최소한으로 사용하십시오. 비디오의 경우 어떤 목적으로 사용할 것인지가 중요하므로 사용자에게 유용하다고 생각되면 실제로 사용하고 가능한 한 최적화되었는지 확인하십시오.
10. 사이트에서 HTML, CSS 및 Javascript 축소
다시 말하지만, 속도 향상을 위해 이미 이 작업을 수행하고 있을 수 있지만 그렇지 않은 경우 이 이면의 이유를 빠르게 살펴보겠습니다.종종 HTML, CSS 및 Javascript 코드에는 공백, 줄 바꿈 또는 주석과 같은 추가 데이터가 포함됩니다. 이러한 공백이나 주석은 개발자가 코드를 쉽게 읽고 이해할 수 있도록 하는 데만 유용하지만 브라우저가 코드를 해석하는 방식에는 차이가 없습니다.
코드를 최소화하면 이러한 불필요한 무게가 모두 제거되어 인터넷을 통해 전송해야 하는 파일의 크기가 줄어들고 사이트 로드 속도가 빨라집니다.
WordPress의 경우 LiteSpeed Cache가 이 측면을 처리하지만 대부분의 다른 애플리케이션도 플러그인을 통해 유사한 기능을 사용할 수 있습니다.
11. 불필요한 CSS 및 Javascript 제거
최소화는 불필요한 데이터를 제거하지만 해당 코드가 사이트에서 실제로 사용되는지 여부를 분석하지 않습니다.사이트에서 전혀 사용하지 않는 다양한 레이아웃, 스타일 또는 기능이 포함된 테마 또는 페이지 빌더를 사용했을 수 있습니다.
모든 코드는 CSS 및 JS 파일에 남아 있으므로 인터넷을 통해 전송해야 하는 데이터의 양이 늘어나고 정당한 이유 없이 사이트 로드 속도가 느려집니다.
정확히 어떤 코드를 수동으로 제거해야 하는지 파악하기 어려울 수 있지만 WordPress의 경우 LiteSpeed Cache를 사용하면 사용하지 않는 CSS를 자동으로 제거할 수 있습니다. 이렇게 하면 사용되지 않는 CSS가 제거되고 각 페이지에 대해 고유한 CSS 파일이 생성됩니다. 몇 페이지만 있는 경우에는 유용할 수 있지만 사이트에 많은 페이지가 있는 경우 단일 CSS 파일을 사용하는 것이 더 효율적일 수 있습니다.
Javascript는 제거하기가 더 복잡할 수 있지만 LiteSpeed는 최소한 사용자 활동이 감지될 때까지 로드되는 것을 지연시킬 수 있습니다. 스크롤 없이 볼 수 있는 콘텐츠에 필요하지 않다면 적절할 수 있습니다.
궁극적으로 가장 좋은 조언은 가능한 한 페이지 빌더나 부풀려진 플러그인을 사용하지 말고 실제로 필요하다고 알고 있는 깨끗한 코드를 사용하는 것입니다.
12. 다양한 기기에서 웹사이트가 제대로 작동하는지 확인하세요.
다양한 화면 크기, 브라우저, 장치 및 대역폭 속도로 사이트를 테스트하는 것은 다소 시간이 많이 소요될 수 있지만 지속 가능한 웹 디자인과 밀접하게 연결되어 있습니다. 이는 n.1번 항목과 관련이 있습니다. 즉, 콘텐츠와 디자인이 잘못 표시되면 UX가 좋지 않고 사용자들 사이에 많은 혼란을 야기할 수 있습니다.원하는 것을 찾는 데 훨씬 더 많은 시간을 할애하여 더 많은 에너지를 소비하게 됩니다.
이를 방지하려면 사용자에게 최적의 경험을 제공할 수 있도록 디자인이 이러한 변수에 최대한 잘 적응하도록 해야 합니다.
13. CDN을 사용하여 콘텐츠 제공
그렇다면 CDN이란 무엇입니까? 콘텐츠 전송 네트워크(CDN)는 서로 다른 지리적 위치에 있는 서버 네트워크입니다. 콘텐츠 로드 속도를 높이는 방법은 사용자와 가까운 위치에서 제공하는 것입니다. 즉, 이것은 속도와 사용자 경험 모두에 연결되어 있습니다.그러나 더 중요한 것은 지속 가능성의 관점에서 데이터를 세계 각지로 전송하는 데 많은 에너지가 필요하므로 CO2를 줄이는 데 도움이 된다는 것입니다. 그리고 데이터가 더 멀리 이동할수록 더 많은 에너지가 필요합니다.
CDN을 통해 제공되는 이미지는 일반적으로 이 단계를 건너뛴 경우 크기가 줄어듭니다. 많은 CDN은 이미지 크기, 픽셀 밀도, 형식 및 압축을 줄이는 것을 포함하여 이미지 최적화를 위한 도구를 제공합니다.
물론 Cloudflare와 같이 재생 가능한 전력을 사용하는 CDN을 선택하는 것이 중요합니다.
14. 콘텐츠가 전략에 부합하는지 확인하기 위해 콘텐츠 감사
대규모 웹 사이트가 있는 경우 주기적으로 콘텐츠를 감사하는 것이 중요합니다. 일부 페이지는 필연적으로 구식이 되거나 더 이상 목적을 달성하지 못할 것입니다. 이것은 특히 기술 자료에 해당되지만 제품 페이지, 블로그 게시물 등에도 해당됩니다.수동으로 스카우트하거나 Google Analytics를 사용하여 어떤 페이지가 오래되었거나 성능이 저하될 수 있는지 평가할 수 있습니다. 그런 다음 유용한 최신 콘텐츠를 포함하도록 조정할 수 있는지 또는 단순히 휴지통으로 보내야 하는지 결정할 수 있습니다.
15. 탄소 발자국을 상쇄하여 CO2 배출량을 줄입니다.
기후에 긍정적인 기업이 된 것은 아마도 지속 가능성 수준을 높이는 측면에서 우리가 내린 최고의 결정 중 하나였을 것입니다. 이 순간까지 우리는 50,000그루 이상의 나무를 심었고 앞으로 몇 년 동안 이 여정을 계속할 의도로 2000t 이상의 CO2를 상쇄했습니다.나무를 심고 탄소를 상쇄하는 프로젝트에 참여하는 것은 웹 디자인뿐만 아니라 비즈니스 전반의 지속 가능성을 향상시키는 놀라운 방법입니다. 나무는 이산화탄소를 흡수하고 산소로 변환하므로 CO2 배출량을 줄이는 데 있어 절대적인 승자입니다.
Ecologi(또는 다른 유사 조직)의 파트너를 방문하여 나무 심기를 시작하도록 초대합니다!