痛みは避けられず、痛みは結果として現れる。

ウェブサイトのエコ責任とは、エコデザインと社会的責任を両立させることです。
ロレム・イプサム・コンサクアト・ドローレ。

イベント

Jonas

2023年12月21日

リニューアル前、数年前に作られたscoreddb.frのスコアは以下の通りでした:

websitecarbon.comによると、1回の訪問で1.60グラムのCO2が排出されていました。このサイトはテストされたページの86%よりも多くの汚染を出していました。スコアの理解には「websitecarbon.comでウェブサイトの環境負荷を測る」という記事をご覧ください。

  • EcoIndexスコア:F(サイト全体の平均)。ページが重すぎて複雑すぎ、リクエスト数も多い(237件)。
  • Google PageSpeed Insightsスコア:モバイルで18%、非常に遅く重いサイトでした。
  • すでにエコ対応のホスティングを利用していました。

これらのスコアは、多くのコンテンツや画像、動画を含む古いサイトではよくあるものです。リニューアルはこれらを改善する良い機会となりました。

SCORE DDBクライアントの強い意志:デジタルエコデザインの限界に挑戦

「コミュニケーションエージェンシーとして、新しいサイトで色やビジュアル、動画を削ることは不可能でしたし、低消費モードの切替のような小手先の技を使うのも不自然でした。サイトの体験はできるだけ効果的でありながら、最高の環境パフォーマンススコアを達成し、カーボンフットプリントを削減する必要がありました。」
— SCORE DDBのプロジェクトリーダー、ゴーティエ・リナール氏

最初から大きな制約がありました:ホームページに自動再生される背景動画の存在。これはエコデザインにおける最大の難関です。

SCORE DDBチームと密に連携し、最適化されたデザインとコンテンツを実現

サイトの全機能も見直し、最も重要なものだけを残しました。

当社は静的サイトを開発しました。これはコーポレートサイトに最適な技術であり、エコデザインの基本原則です。サーバーの負担が減り、発熱も抑えられます。ページは一度だけ生成され、訪問者ごとに生成されることはありません。

静的コードはシンプルで軽量なため、ページも軽くなります。画像のフォーマットや圧縮を最適化し、ブラウザ機能を最大限に活用しました。例えばモバイルでは小さい画像サイズを提供し、WebPやSVGを優先的に使用。フォントは可変フォントを使い、JavaScriptは最小限に制限。キャッシュ設定や遅延読み込み(lazy loading)などのベストプラクティスも徹底し、無駄を防ぎました。

最初のバージョンは優れたスコアを獲得

SCORE DDBに最初のバージョンを納品した時点で、Website Carbon、EcoIndex、PageSpeedで優れた結果が出ました。16ページ中、5ページがA、9ページがB、2ページのみCでした。最もコンテンツが多いページです。視覚的にリッチなサイトでこの結果は大変な成果です。Internet 2000の通常の施策も全て投入し、平均よりもはるかにクリーンなサイトとなりました。

しかしクライアントの要求は厳しく、更なる改善を求められました。私たちは再び努力を重ねました。クライアントもとても協力的で、サイトは美しく仕上がりました。各所のページをさらに最適化しました:

  • 表示サイズに合わせた画像のピクセル単位調整
  • ホームページの動画の動作最適化
  • Alex Hoyau CTOが特別に開発したプラグイン「Concat」を使ったスクリプトとスタイルの最適化(オープンソースで公開中)

SCORE DDBリニューアルの結果:エコデザインと美しさの両立

websitecarbon.comによると、最も重いページでも1訪問あたり0.04グラムのCO2排出となり、テストされたページの92%よりも環境負荷が少なく、CO2排出は95%減少しました。

  • EcoIndexスコア:A(サイト平均)。軽量でシンプル、リクエスト数も少ない。EcoIndexは初期サイト比でCO2排出46.5%減を示しています。
  • Google PageSpeed Insightsスコア:モバイルで96%、78ポイント向上。
  • ページ平均サイズは500KBで、現在のウェブページ平均の半分(出典あり)。

これらの高スコアにより、環境負荷が減るだけでなく、モバイルや低速回線でも快適に使えるユーザー体験が向上しました。

SCORE DDBとInternet 2000の協力で、スムーズで閲覧しやすく、環境負荷を抑えたサイトが実現。プロジェクトの満足度は最高評価のAです。

お問い合わせフォーム