The Eco-system-design-tips

本プロジェクト

エコデザインのフレームワークの内容は、Frédéric Bordage / GreenIT.frが出版したものです:

1. 2012年10月「エコデザインweb：100のグッドプラクティス」
2. 2015年9月「エコデザインweb：115のグッドプラクティス 第2版」
3. 2019年4月「エコデザインweb：115のグッドプラクティス 第3版」
4. 2022年5月「エコデザインweb：115のグッドプラクティス 第4版」 出版にあたりご協力いただいた皆様、アップデートしている全てのコントリビューターにとても感謝します。

Needs

Webの継続的な進化を考えると、このリポジトリは定期的に更新される必要があります。 改善、修正、削除など、どのような提案やアイデアでもWelcomeです。

貢献するには？

Contributing Guideを参照ください。

本プロジェクトのDiscussionに関するショートカットリンク

検索の手間を省くために、ディスカッションのページではフィルタを利用することができます。

• ♾️ 全スレッド一覧
• ➕ BP追加に関する議論一覧
• 📝 BP修正スレッド一覧
• ✖️ BP削除に関する議論一覧

グッドプラクティス一覧(更新中)

1. 不要な機能の削除
2. ニーズを的確に定量化する
3. ユーザーパスの最適化
4. オートコンプリートよりもアシスト入力を優先する
5. ウェブに適応したシンプルですっきりしたデザインを推奨
6. モバイルファーストのアプローチで、アダプティブローディングを採用
7. 履歴のクイックナビゲーションの原則を尊重する
8. 可能な限り非同期処理を実現する
9. HTTPリクエスト数を制限する
10. 静的データをローカルに保存
11. CMSを利用したカスタマイズ開発の推進
12. 静的なページを推奨
13. モジュール化されたアプリケーションアーキテクチャの構築
14. 最適な技術選定
15. パフォーマンス重視のアプリケーションフォークをいくつか使用する
16. 適切なデータ形式を選択する
17. リソースを提供するドメイン数を制限する
18. 公式SNSのシェアボタンの書き方
19. CSSのカッティング
20. ロードするCSSの数を減らす
21. 画像よりCSSを優先
22. 効果的なCSSセレクタの書き方
23. 類似のCSSのグループ化
24. CSSの略記号の使用
25. CSSにおけるフットプリントを抑える
26. 標準フォントの利用
27. 画像より絵文字を優先
28. W3Cでページを検証する
29. CSSとJavaScriptのアウトソーシング
30. ブラウザ側で画像のリサイズを行わない
31. インターフェイスにラスター画像を使用しない
32. ベクター画像の最適化
33. レイジーロードの使用
34. コンテンツエリアの部分再読み込みの利用
35. JavaScript / CSSによるアニメーションの回避
36. JavaScriptライブラリやCSSフレームワークの必要な部分のみを使用する
37. DOMをトラバースする際に、DOMに変更を加えないこと
38. DOM 要素が変更されたときに見えないようにする
39. 再描画（外観）とリフロー（レイアウト）の最小化
40. イベントデリゲーションの使用
41. 複数のCSSプロパティを一度に変更する
42. Linterでコードを検証する
43. JavaScriptで頻繁にアクセスされるオブジェクトをキャッシュする
44. JavaScriptによるDOMアクセスの削減
45. すべてのCMSキャッシュレベルを使用する
46. CMSに取り込む前のメディアの最適化および生成
47. CMS以外のサウンドをエンコードする
48. よく使う計算データをキャッシュする
49. 警告と通知を削除する
50. ループ内のSQLクエリを回避する
51. 必要な場合のみデータベースへの接続を行う
52. データベースクエリの最適化
53. 大量のデータ転送を避ける
54. CSS、JavaScript、HTML、SVGファイルの最小化
55. CSS、JavaScript、HTML、SVGファイルを圧縮する。
56. CSSとJavaScriptのファイルを結合する
57. 画像の最適化
58. Cookieのサイズの最適化
59. 301リダイレクトよりFavour HSTS Preloadリスト
60. webサイトのエンドオブライフの設計
61. 環境に配慮したホストの選択
62. 環境に配慮した電力供給会社を選ぶ
63. Adapter la qualité de service et le niveau de disponibilité
64. サービス品質と可用性の調整
65. サーバーのエネルギー効率の最適化
66. サーバーに最低限必要なもののみをインストールする
67. キャッシュを完全にRAMに置く（opcodeとkvs）
68. クラウド上にデータを保存する
69. Héberger les ressources (CSS/JS) sur un domaine sans cookie
70. Cookieを使用しないドメインでのリソース（CSS/JS）のホスティング
71. 静的なエラーページの表示
72. 非同期サーバーを使用する
73. CDNを利用する
74. HTTPキャッシュの利用
75. ExpiresまたはCache-Controlヘッダを追加する
76. Ajaxレスポンスのキャッシュ
77. サーバーログの最小化
78. ApacheのDNSルックアップを無効にする
79. Apache Vhost: AllowOverrideを無効にする
80. バイナリログを無効にする
81. ドキュメントの圧縮
82. PDFの最適化
83. 大規模で冗長なメールを制限する
84. ダブルオプトインファイルのみを使用する
85. 送信するメールのサイズを制限する
86. リスニングコンテキストにサウンドを適応させる
87. テキストをウェブに適応させる
88. 視聴コンテキストに合わせた映像の調整
89. 分析ツールや収集データの制限
90. アニメーションGIFの使用を制限する
91. 動画や音声の自動再生や読み込みを避ける
92. CSS Containmentを使用する
93. マルチメディアコンテンツの代替テキストを提供する
94. HTTP/1よりもHTTP/2を優先する
95. ServiceWorkerで帯域幅を節約
96. 効率的なサイトマップを設定する
97. 保有する古い機器やソフトウェアとの互換性確保
98. 保存するデータ量を必要最低限にする
99. データの有効期限と削除に関するポリシーの導入
100. キャンバスの使用を制限する
101. ユーザージャーニーに基づいたアクションを達成できるようにする
102. ページの内容に関連したページタイトルとメタディスクリプションがある
103. 最新バージョンの言語を使用する
104. 必要なときだけデータ/コードをロードする
105. 未使用の機能を排除する
106. ウェブサイトに似たネイティブモバイルアプリよりもPWAの採用を優先する
107. 長いJavaScriptの処理によるブロック時間の回避
108. エラスティックアーキテクチャの実装
109. HTTP APIの呼び出し回数を制限する
110. カルーセルの使用を制限する
111. コンテンツのエンド・オブ・ライフ戦略を設計する
112. サーキットブレーカーを設定する
113. Request Collapsingを利用する
114. マネージドサービスに頼る
115. 無限スクロールよりもページネーションを優先する
116. 定期的なサイトのメンテナンス
117. CMSの拡張機能の数を制限する
118. 管理ページへの安全なアクセス
119. ページ内にドキュメントを埋め込まない

Licence

このプロジェクトのソースとコンテンツは保護されています。

※ 原文(fr)のページはこちら