> 웹 프론트엔드 > JS 튜토리얼 > 지속 가능한 웹사이트를 위한 쓸모없는 가이드

지속 가능한 웹사이트를 위한 쓸모없는 가이드

Susan Sarandon
풀어 주다: 2024-10-17 22:59:02
원래의
850명이 탐색했습니다.

A not useless guide to sustainable websites

讓我們閉嘴關於地球,所有世界末日恐慌,並從為什麼你想讓你的網站可持續發展開始?您正在建立網站或付費,這對您有什麼好處?

更多性能,更好。它將加快您的網站速度,提高您的工作效率,您的訪客會喜歡這個活潑的網站,從而帶來更高的轉換率,並且谷歌會為您提供 SEO 獎勵積分。對於高流量網站,它甚至可以省錢。

哦,是的,這會讓地球變得幸福。由於 IT 使用大量能源,因此對地球的影響越來越大。如果我們都出力,我們就能產生巨大的影響力。

您不僅在幫助地球。這是一個有效的商業案例。

綠色託管!我用那個嗎?

為您的應用程式和網站使用永續能源會產生巨大影響,因為伺服器消耗大量能源並且日夜開啟。這是一個很好的起點。

好奇您是否使用永續能源?綠色網路基金會有一個很棒的工具來檢查:綠色網路檢查。

如果沒有,基金會也有綠色網路目錄。在那裡您可以找到許多本地和全球的可持續託管提供者。

使用綠色託管我的網站是否可持續?

這是一個很好的開始,但還不止於此。擁有一個資源消耗大的男孩網站將消耗大量能量並且傳輸緩慢,即使在綠色託管上也是如此。

我們可以進入所有有趣的事情發生的表演部分嗎?

優化資產,小就是快

對於許多項目來說,這是您可以發揮巨大作用的地方。資產可能很龐大並且浪費大量頻寬和資源。一些提示:

  • 最小化您需要和加載的字體數量,那些受到嚴重影響的字體(嘗試使用最多 3 個,但越少越好)。
  • 盡可能使用 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。您不需要 jQuery 來取得 DOM 元素並切換類別!甚至不讓我開始使用 Next.js。

我太激動了,抱歉。老實說,這些網站可能很漂亮。問題是,現在普通的 JS 和 CSS 都很棒。豐富的功能使您能夠建立各種酷炫的互動式元件、動畫甚至頁面轉換。

透過使用它們,您可以編寫、發布和運行更少的程式碼。這一切都由您的瀏覽器處理。動畫更流暢,不會阻塞主線。

지루하게 만들 필요는 없어요

어두운 색상, 시스템 글꼴 사용에 대해 이야기하고 모든 작은 종소리를 내려야 한다는 기사를 많이 보았습니다.

생활을 지루하게 만들려는 공익광고 같네요. 나는 그것을 원하지 않습니다. 웹사이트, 앱, 디자인, 기술은 재미있고, 영감을 주고, 살아 있어야 합니다.

많은 리소스를 사용하는 아무런 가치도 없는 어리석은 기능을 구축해야 한다는 뜻은 아닙니다. 주의를 기울이되 지루해하지는 마세요.

알았어, 안녕.

지금은 여기까지지만 제가 관심을 갖고 있는 주제입니다. 핵심 세부 사항에 대한 더 많은 기사를 기대하십시오. 질문이나 팁이 있나요? 댓글을 남기시거나 Xwitter 또는 LinkedIn에서 DM을 보내주세요!

위 내용은 지속 가능한 웹사이트를 위한 쓸모없는 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿