可持續網站的並非無用的指南-js教程-PHP中文網

A not useless guide to sustainable websites

지구에 대한 모든 종말의 공황은 잠시 접어두고 웹사이트를 지속 가능하게 만들고 싶은 이유부터 시작하겠습니다. 웹사이트를 구축하거나 비용을 지불하고 계시나요?

성능이 높을수록 좋습니다. 귀하의 웹 사이트 속도를 높이고 생산성을 향상시키며 방문자는 멋진 웹 사이트를 좋아하게 되어 전환율이 높아지고 Google은 SEO 보너스 포인트를 제공합니다. 트래픽이 많은 사이트의 경우 비용도 절약할 수 있습니다.

아, 그래, 지구를 행복하게 해줄 거야. IT가 많은 에너지를 사용하기 때문에 지구에 미치는 영향이 점점 커지고 있기 때문입니다. 우리 모두가 참여한다면 큰 영향을 미칠 수 있습니다.

당신은 지구만을 돕는 것이 아닙니다. 유효한 비즈니스 사례입니다.

그린 호스팅! 내가 그걸 사용하고 있는 걸까?

서버는 많은 에너지를 사용하고 밤낮으로 켜져 있기 때문에 애플리케이션과 웹사이트에 지속 가능한 에너지를 사용하는 것은 큰 영향을 미칩니다. 시작하기 좋은 곳입니다.

당신이 지속가능한 에너지를 사용하고 있는지 궁금하세요? Green Web Foundation은 이를 확인할 수 있는 훌륭한 도구를 제공합니다: The Green Web Check.

그렇지 않다면 동일한 재단에 Green Web Directory가 있습니다. 거기에서 지역 및 전 세계의 지속 가능한 호스팅 제공업체를 많이 찾을 수 있습니다.

내 웹사이트가 친환경 호스팅을 사용하면 지속 가능합니까?

훌륭한 시작이지만 그 이상의 의미가 있습니다. 리소스를 많이 먹는 Chunky Boy 웹사이트를 운영하면 그린 호스팅에서도 많은 에너지를 사용하고 전송 속도가 느려집니다.

흥미로운 일들이 벌어지는 퍼포먼스 현장으로 가볼까요?

자산 최적화, 작은 것이 빠릅니다

많은 프로젝트에서 여기가 큰 변화를 가져올 수 있는 곳입니다. 자산은 크기가 크고 대역폭과 리소스를 많이 낭비할 수 있습니다. 다양한 팁:

필요한 글꼴 수를 최소화하고 로드하세요. 큰 문제가 발생하면 최대 3개를 사용해 보세요. 적을수록 좋습니다.
가능한 경우 SVG를 사용하세요. SVG는 작고 확장성이 좋습니다.
이미지를 필요한 크기로 조정하고 자르세요. WordPress와 같은 시스템에는 이를 위한 도구가 있으며 srcset 속성은 크기 전환에 도움이 될 수 있습니다.
이미지와 동영상에는 WebP, WebM/AV1 등 최신 형식을 사용하세요. 이는 향상된 압축 및 품질을 제공합니다.
지연 로딩 이미지는 loading="lazy"를 사용하는 문제이므로 필요한 것만 로드하세요. 더 이상 스크립트가 필요하지 않습니다.
동영상의 경우 꼭 필요한 경우에만 자동재생을 사용하세요.
압축을 사용하고(다음 단계) 필요하지 않은 항목은 로드하지 마세요. :)

태그 관리자 사용자를 위한 보너스: 보유하고 있는 모든 타사 스크립트와 도구를 확인하세요. 당신은 그것을 사용합니까? 당신은 그들에게서 어떤 가치를 얻나요? 주기적으로 그루밍이 필요합니다. 로드하는 자산뿐만 아니라 빅데이터 처리에도 많은 에너지가 필요합니다.

빠르고 작게 제공: 캐시 및 압축

압축을 활성화합니다. 모든 최신 웹서버에는 이 기능이 있으므로 꼭 사용하세요. Brotli와 같은 최신 옵션이 더 좋지만 GZIP이나 Deflate도 대역폭에 큰 차이를 만들 수 있습니다. 모바일 방문객들은 더욱 감사할 것입니다.

캐싱은 프로젝트에 따라 다르지만 방문자에게 최대한 가까운 데이터를 캐시하도록 노력하세요. CSS/JS와 같은 정적 자산의 경우 브라우저에 적합한 캐시 헤더로 시작하여 다운로드한 파일을 계속해서 재사용할 수 있습니다.

업데이트보다 읽은 횟수가 더 많은 콘텐츠 페이지가 있나요? 디스크 또는 CDN에서 정적으로 제공합니다. Astro와 같은 프레임워크는 CDN을 정적으로 생성할 수 있거나 W3 Total Cache와 같은 플러그인은 디스크에서 WordPress 페이지를 제공할 수 있습니다.

친구는 가까이 두되 데이터는 더 가까이 두세요

CDN에 대해 이야기합니다. 방문자에 대해 생각해 보십시오. 그들은 어디에서 왔습니까? 지역 베이커리 웹사이트를 제공하기 위해 엣지 작업자가 포함된 글로벌 분산 다중 구역 설정이 필요합니까?

아마도 그럴 것입니다. 하지만 그것은 당신 내면의 괴짜가 즐기는 즐거움입니다. 과도한 솔루션을 과도하게 사용하지 말고 서버를 사용자 가까이에 유지하십시오. 컴퓨팅과 전송 모두에 리소스를 절약하여 지연 시간을 낮게 유지합니다.

JavaScript 사용을 중단하세요. CSS는 굉장합니다!

많은 개발자가 JavaScript 작성, 온갖 멋진 애니메이션, 페이지 전환 및 기타 헛소리를 하는 것을 좋아합니다. 바닐라 JS나 CSS를 사용하지 않고 대규모 프레임워크나 라이브러리를 사용합니다. 여기에는 jQuery가 포함됩니다. DOM 요소를 가져오고 클래스를 전환하는 데 jQuery가 필요하지 않습니다! Next.js를 시작하지 마세요.

화났어요, 미안해요. 그리고 솔직히 말해서, 그러한 웹사이트들은 아름다울 수 있습니다. 문제는 요즘 바닐라 JS와 CSS가 훌륭하다는 것입니다. 모든 종류의 멋진 대화형 구성 요소, 애니메이션, 심지어 페이지 전환까지 구축할 수 있는 기능이 가득합니다.

이를 사용하면 코드를 더 적게 작성하고 배포하고 실행할 수 있습니다. 이 모든 것은 브라우저에서 처리됩니다. 메인 스레드를 차단하지 않고도 더욱 부드러운 애니메이션이 가능합니다.