diff --git a/app/assets/stylesheets/admin/components/content-editor.sass b/app/assets/stylesheets/admin/components/content-editor.sass
index 35ca3ec788..a7d943c790 100644
--- a/app/assets/stylesheets/admin/components/content-editor.sass
+++ b/app/assets/stylesheets/admin/components/content-editor.sass
@@ -98,6 +98,66 @@
                             font-size: 10px
                             margin: 0
                             text-align: center
+    .vue__dom-count
+        background: $color-flexoki-100
+        outline-offset: -10px
+        outline-color: $color-flexoki-300
+        outline-style: solid
+        outline-width: 1px
+        padding: var(--bs-gutter-x)
+        @include media-breakpoint-down(md)
+            margin-left: calc(-1 * var(--bs-gutter-x))
+            margin-right: calc(-1 * var(--bs-gutter-x))
+        &__information
+            &__button
+                text-align: right
+                button
+                    border: 0
+                    background: none
+                    font-size: pxToRem(12)
+                    color: $color-flexoki-700
+                    svg
+                        width: 16px
+            &__content
+                margin-top: 30px
+                margin-bottom: 50px
+                h2
+                    margin-bottom: 1rem
+                ol
+                    padding-left: 0
+                    list-style: none
+                    display: flex
+                    flex-wrap: wrap
+                    li
+                        width: 20%
+                        @include media-breakpoint-down(md)
+                            width: 33%
+                &__title
+                    font-family: $font-family-serif
+                    text-align: center
+                &__text
+                    font-size: pxToRem(12)
+                    color: $color-flexoki-700
+                    text-align: center
 
+        &__image
+            mix-blend-mode: multiply
+        &__title
+            font-family: $font-family-serif
+            font-size: pxToRem(30)
+        &__count
+            font-size: pxToRem(12)
+            text-transform: uppercase
+            color: $color-flexoki-700
+        &__credit
+            font-size: pxToRem(12)
+            color: $color-flexoki-700
+            &:before
+                content: ""
+                display: block
+                height: 1px
+                width: 20px
+                margin: 10px 0
+                background: $color-flexoki-300
 .sortable-ghost
     opacity: 0.3
diff --git a/app/javascript/apps/blocks-editor/BlocksEditorApp.vue b/app/javascript/apps/blocks-editor/BlocksEditorApp.vue
index 7b71cec299..a3b211b42c 100644
--- a/app/javascript/apps/blocks-editor/BlocksEditorApp.vue
+++ b/app/javascript/apps/blocks-editor/BlocksEditorApp.vue
@@ -1,11 +1,12 @@
 <script>
 import Blocks from './components/Blocks.vue';
+import DomCount from './components/DomCount.vue';
 import Editor from './components/Editor.vue';
 import OffcanvasShell from './components/OffcanvasShell.vue';
 import TemplatePicker from './components/TemplatePicker.vue';
 
 export default {
-  components: { Blocks, Editor, OffcanvasShell, TemplatePicker },
+  components: { Blocks, DomCount, Editor, OffcanvasShell, TemplatePicker },
   data() {
     return {
       loading: true,
@@ -165,6 +166,9 @@ export default {
             {{ i18n.blocksEditor.actions.addBlock }}</a>
         </div>
       </div>
+      <DomCount
+        :count="data.about.dom_count"
+        :i18n="i18n" />
       <OffcanvasShell
         :open="offcanvasState !== 'closed'"
         :title="i18n.blocksEditor.offcanvas.title"
diff --git a/app/javascript/apps/blocks-editor/components/DomCount.vue b/app/javascript/apps/blocks-editor/components/DomCount.vue
new file mode 100644
index 0000000000..abf16429d2
--- /dev/null
+++ b/app/javascript/apps/blocks-editor/components/DomCount.vue
@@ -0,0 +1,90 @@
+<script>
+import { CircleQuestionMark } from '@lucide/vue';
+export default {
+  name: 'DomCount',
+  props: [
+    'count',
+    'i18n'
+  ],
+  components: {
+    CircleQuestionMark,
+  },
+  computed: {
+    level() {
+      return this.levels.find(l => this.count < l.threshold).name;
+    },
+    roundedCount() {
+      return Math.round(this.count / this.rounding_step) * this.rounding_step;
+    },
+    countSentence() {
+      return this.i18n.blocksEditor.dom_count.count.replace('{count}', this.roundedCount);
+    },
+  },
+  data () {
+    return {
+      // Beware if you change levels, there are texts in the i18n files!
+      levels: [
+        { name: 'one',   threshold: 300 },
+        { name: 'two',   threshold: 600 },
+        { name: 'three', threshold: 1000 },
+        { name: 'four',  threshold: 2000 },
+        { name: 'five',  threshold: Infinity },
+      ],
+      // Affichage arrondi pour ne pas donner un faux sentiment de précision
+      rounding_step: 50,
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="row mt-5">
+    <div class="offset-lg-4 col-lg-8 col-xxl-6">
+      <div class="vue__dom-count">
+        <div class="vue__dom-count__information">
+          <div class="vue__dom-count__information__button">
+            <button data-bs-toggle="collapse" data-bs-target="#dom-count-information">
+              {{ i18n.blocksEditor.dom_count.more.title }}
+              <CircleQuestionMark />
+            </button>
+          </div>
+          <div class="collapse vue__dom-count__information__content" id="dom-count-information">
+            <h2>{{ i18n.blocksEditor.dom_count.more.title }}</h2>
+            <div v-html="i18n.blocksEditor.dom_count.more.explanation"></div>
+            <ol>
+              <li v-for="level in levels" :key="level.name">
+                <img :src="`/vue/dom_count/${level.name}.png`" class="vue__dom-count__image img-fluid" alt="" />
+                <div>
+                  <p class="vue__dom-count__information__content__title">
+                    {{ i18n.blocksEditor.dom_count.level[level.name].title }}
+                  </p>
+                  <p class="vue__dom-count__information__content__text">
+                    {{ i18n.blocksEditor.dom_count.level[level.name].dom }}
+                  </p>
+                </div>
+              </li>
+            </ol>
+            <hr>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-5">
+            <img :src="`/vue/dom_count/${level}.png`" class="vue__dom-count__image img-fluid" alt="" />
+          </div>
+          <div class="col-md-7">
+            <p class="vue__dom-count__title">
+              {{ i18n.blocksEditor.dom_count.level[level].title }}
+            </p>
+            <p class="vue__dom-count__count">
+              {{ countSentence }}
+            </p>
+            <p class="vue__dom-count__text">
+              {{ i18n.blocksEditor.dom_count.level[level].text }}
+            </p>
+            <p class="vue__dom-count__credit" v-html="i18n.blocksEditor.dom_count.credit"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/apps/components/CropperModal.vue b/app/javascript/apps/components/CropperModal.vue
index ccba152cb2..baff69dd3d 100644
--- a/app/javascript/apps/components/CropperModal.vue
+++ b/app/javascript/apps/components/CropperModal.vue
@@ -1,5 +1,5 @@
 <script>
-import { Cropper } from 'vue-advanced-cropper';
+import { Cropper } from 'vue-advanced-cropper';
 
 export default {
     components: {
diff --git a/app/javascript/apps/media-picker/components/Cloud.vue b/app/javascript/apps/media-picker/components/Cloud.vue
index f4c765721c..6a7ba0ab72 100644
--- a/app/javascript/apps/media-picker/components/Cloud.vue
+++ b/app/javascript/apps/media-picker/components/Cloud.vue
@@ -1,5 +1,5 @@
 <script>
-import { CloudDownload, ArrowRight, ArrowLeft } from 'lucide-vue-next';
+import { CloudDownload, ArrowRight, ArrowLeft } from '@lucide/vue';
 
 export default {
     components: {
diff --git a/app/javascript/apps/media-picker/components/ImageUploader.vue b/app/javascript/apps/media-picker/components/ImageUploader.vue
index 74c09b08b8..b8c820387a 100644
--- a/app/javascript/apps/media-picker/components/ImageUploader.vue
+++ b/app/javascript/apps/media-picker/components/ImageUploader.vue
@@ -1,5 +1,5 @@
 <script>
-import { Upload } from 'lucide-vue-next';
+import { Upload } from '@lucide/vue';
 import CropperModal from '../../components/CropperModal.vue';
 
 export default {
diff --git a/app/javascript/apps/media-picker/components/Medias.vue b/app/javascript/apps/media-picker/components/Medias.vue
index 6f0f3bdb56..f04161c50b 100644
--- a/app/javascript/apps/media-picker/components/Medias.vue
+++ b/app/javascript/apps/media-picker/components/Medias.vue
@@ -1,5 +1,5 @@
 <script>
-import { Image, ArrowRight, ArrowLeft } from 'lucide-vue-next';
+import { Image, ArrowRight, ArrowLeft } from '@lucide/vue';
 import Taxonomies from './medias/Taxonomies.vue';
 
 export default {
diff --git a/app/javascript/apps/time-slots/TimeSlotsApp.vue b/app/javascript/apps/time-slots/TimeSlotsApp.vue
index c898dbbc4c..f0930b3411 100644
--- a/app/javascript/apps/time-slots/TimeSlotsApp.vue
+++ b/app/javascript/apps/time-slots/TimeSlotsApp.vue
@@ -1,7 +1,7 @@
 <script>
 import Changes from '../components/Changes.vue';
 import Duration from './components/Duration.vue';
-import { Plus, X } from 'lucide-vue-next';
+import { Plus, X } from '@lucide/vue';
 
 export default {
     components: {
diff --git a/app/models/communication/block.rb b/app/models/communication/block.rb
index ba2f240345..ad1e9a7f23 100644
--- a/app/models/communication/block.rb
+++ b/app/models/communication/block.rb
@@ -71,6 +71,8 @@ class Communication::Block < ApplicationRecord
   scope :for_about_type, -> (about_type, language = nil) { where(about_type: about_type) }
   scope :for_university, -> (university, language = nil) { where(university: university) }
 
+  delegate :dom_count, to: :template
+
   # When we set data from json, we pass it to the template.
   # The json we save is first sanitized and prepared by the template.
   def data=(value)
diff --git a/app/models/communication/block/component/array.rb b/app/models/communication/block/component/array.rb
index f791da436b..03cb836bca 100644
--- a/app/models/communication/block/component/array.rb
+++ b/app/models/communication/block/component/array.rb
@@ -17,4 +17,7 @@ def default_data
     ['']
   end
 
+  def dom_count
+    data.count
+  end
 end
diff --git a/app/models/communication/block/component/base.rb b/app/models/communication/block/component/base.rb
index 3af4dc3352..0b394ec891 100644
--- a/app/models/communication/block/component/base.rb
+++ b/app/models/communication/block/component/base.rb
@@ -51,6 +51,10 @@ def full_text
     ''
   end
 
+  def dom_count
+    1
+  end
+
   def to_s
     self.class.to_s.demodulize
   end
diff --git a/app/models/communication/block/component/file.rb b/app/models/communication/block/component/file.rb
index f5573cce5d..c5a7ab50cb 100644
--- a/app/models/communication/block/component/file.rb
+++ b/app/models/communication/block/component/file.rb
@@ -32,4 +32,8 @@ def dependencies
     [blob]
   end
 
+  def blob_count
+    5
+  end
+
 end
diff --git a/app/models/communication/block/component/image.rb b/app/models/communication/block/component/image.rb
index 31c2e57261..c8634e2834 100644
--- a/app/models/communication/block/component/image.rb
+++ b/app/models/communication/block/component/image.rb
@@ -1,2 +1,6 @@
 class Communication::Block::Component::Image < Communication::Block::Component::File
+
+  def dom_count
+    9
+  end
 end
diff --git a/app/models/communication/block/component/rich_text.rb b/app/models/communication/block/component/rich_text.rb
index ca68968668..c3be614be4 100644
--- a/app/models/communication/block/component/rich_text.rb
+++ b/app/models/communication/block/component/rich_text.rb
@@ -9,7 +9,16 @@ def data=(value)
   # Add whitespace between tags https://stackoverflow.com/a/28449868
   # strip_tags does not work because it removes all tags and joins text together without spaces
   def full_text
-    Nokogiri::HTML(data).xpath('//text()').map(&:text).join(' ')
+    nokogiri.xpath('//text()').map(&:text).join(' ')
   end
 
+  def dom_count
+    nokogiri.css('*').count
+  end
+
+  protected
+
+  def nokogiri
+    @nokogiri ||= Nokogiri::HTML(data)
+  end
 end
diff --git a/app/models/communication/block/template/agenda.rb b/app/models/communication/block/template/agenda.rb
index e9c2a554d8..217c2777cf 100644
--- a/app/models/communication/block/template/agenda.rb
+++ b/app/models/communication/block/template/agenda.rb
@@ -68,6 +68,12 @@ def top_link
     title_link
   end
 
+  def dom_count
+    5 +
+    description_component.dom_count +
+    children.length * 25
+  end
+
   protected
 
   def selected_events_all
diff --git a/app/models/communication/block/template/base.rb b/app/models/communication/block/template/base.rb
index 2c803204b0..28525b69c8 100644
--- a/app/models/communication/block/template/base.rb
+++ b/app/models/communication/block/template/base.rb
@@ -93,6 +93,10 @@ def media_blobs
     []
   end
 
+  def dom_count
+    1
+  end
+
   def to_s
     self.class.to_s.demodulize
   end
diff --git a/app/models/communication/block/template/call_to_action/element.rb b/app/models/communication/block/template/call_to_action/element.rb
index 91db731343..60958d5b5a 100644
--- a/app/models/communication/block/template/call_to_action/element.rb
+++ b/app/models/communication/block/template/call_to_action/element.rb
@@ -4,4 +4,7 @@ class Communication::Block::Template::CallToAction::Element < Communication::Blo
   has_component :url, :string
   has_component :target_blank, :boolean
 
+  def dom_count
+    1
+  end
 end
diff --git a/app/models/communication/block/template/chapter.rb b/app/models/communication/block/template/chapter.rb
index e29b921a7f..692d2d1fc1 100644
--- a/app/models/communication/block/template/chapter.rb
+++ b/app/models/communication/block/template/chapter.rb
@@ -19,6 +19,15 @@ def media_blobs
     ]
   end
 
+  def dom_count
+    5 +
+    text_component.dom_count +
+    notes_component.dom_count +
+    image_component.dom_count +
+    alt_component.dom_count +
+    credit_component.dom_count
+  end
+
   protected
 
   def check_accessibility
diff --git a/app/models/communication/block/template/contact/element.rb b/app/models/communication/block/template/contact/element.rb
index c0a30e9984..e13c6bc4bb 100644
--- a/app/models/communication/block/template/contact/element.rb
+++ b/app/models/communication/block/template/contact/element.rb
@@ -8,4 +8,9 @@ def empty?
     time_slot_morning['from'].blank? &&
     time_slot_afternoon['from'].blank?
   end
+
+  def dom_count
+    25
+  end
+
 end
diff --git a/app/models/communication/block/template/datatable/element.rb b/app/models/communication/block/template/datatable/element.rb
index d6d786a735..fd82b5eb9a 100644
--- a/app/models/communication/block/template/datatable/element.rb
+++ b/app/models/communication/block/template/datatable/element.rb
@@ -2,4 +2,7 @@ class Communication::Block::Template::Datatable::Element < Communication::Block:
 
   has_component :cells, :array
 
+  def dom_count
+    cells_component.dom_count
+  end
 end
diff --git a/app/models/communication/block/template/definition/element.rb b/app/models/communication/block/template/definition/element.rb
index 53ba0bb83a..425876c4a1 100644
--- a/app/models/communication/block/template/definition/element.rb
+++ b/app/models/communication/block/template/definition/element.rb
@@ -5,4 +5,8 @@ class Communication::Block::Template::Definition::Element < Communication::Block
   def empty?
     title.blank? && description.blank?
   end
+
+  def dom_count
+    2 + description_component.dom_count
+  end
 end
diff --git a/app/models/communication/block/template/exhibition.rb b/app/models/communication/block/template/exhibition.rb
index 8db4899e6c..9571ccb4e5 100644
--- a/app/models/communication/block/template/exhibition.rb
+++ b/app/models/communication/block/template/exhibition.rb
@@ -61,6 +61,12 @@ def top_link
     title_link
   end
 
+  def dom_count
+    5 +
+    description_component.dom_count +
+    children.length * 25
+  end
+
   protected
 
   def link_to_exhibitions
diff --git a/app/models/communication/block/template/feature/element.rb b/app/models/communication/block/template/feature/element.rb
index 04d20b7c53..5aaac61569 100644
--- a/app/models/communication/block/template/feature/element.rb
+++ b/app/models/communication/block/template/feature/element.rb
@@ -9,4 +9,12 @@ class Communication::Block::Template::Feature::Element < Communication::Block::T
   def empty?
     title.blank? && description.blank?
   end
+
+  def dom_count
+    2 + 
+    description_component.dom_count +
+    image_component.dom_count +
+    alt_component.dom_count +
+    credit_component.dom_count
+  end
 end
diff --git a/app/models/communication/block/template/file/element.rb b/app/models/communication/block/template/file/element.rb
index 5b68d2b9d6..fa705f6821 100644
--- a/app/models/communication/block/template/file/element.rb
+++ b/app/models/communication/block/template/file/element.rb
@@ -7,4 +7,10 @@ class Communication::Block::Template::File::Element < Communication::Block::Temp
   def blob
     file_component.blob
   end
+
+  def dom_count
+    2 +
+    file_component.blob_count +
+    image_component.blob_count
+  end
 end
diff --git a/app/models/communication/block/template/gallery/element.rb b/app/models/communication/block/template/gallery/element.rb
index aa25e0b850..16447305cb 100644
--- a/app/models/communication/block/template/gallery/element.rb
+++ b/app/models/communication/block/template/gallery/element.rb
@@ -25,4 +25,11 @@ def check_accessibility
   def empty?
     blob.blank?
   end
+
+  def dom_count
+    image_component.dom_count +
+    alt_component.dom_count +
+    credit_component.dom_count +
+    text_component.dom_count
+  end
 end
diff --git a/app/models/communication/block/template/key_figure/element.rb b/app/models/communication/block/template/key_figure/element.rb
index 38c60d11ea..75c1813773 100644
--- a/app/models/communication/block/template/key_figure/element.rb
+++ b/app/models/communication/block/template/key_figure/element.rb
@@ -9,4 +9,8 @@ def blob
     image_component.blob
   end
 
+  def dom_count
+    5 +
+    image_component.dom_count
+  end
 end
diff --git a/app/models/communication/block/template/link/element.rb b/app/models/communication/block/template/link/element.rb
index a8962445ca..cf3ed23b60 100644
--- a/app/models/communication/block/template/link/element.rb
+++ b/app/models/communication/block/template/link/element.rb
@@ -14,4 +14,12 @@ def url_external?(website)
   def empty?
     title.blank? && description.blank? && url.blank?
   end
+
+  def dom_count
+    1 + 
+    title_component.dom_count +
+    description_component.dom_count +
+    url_component.dom_count +
+    image_component.dom_count
+  end
 end
diff --git a/app/models/communication/block/template/location.rb b/app/models/communication/block/template/location.rb
index d68379df8b..b5ede0e89a 100644
--- a/app/models/communication/block/template/location.rb
+++ b/app/models/communication/block/template/location.rb
@@ -29,4 +29,9 @@ def available_locations
   def children
     selected_locations
   end
+
+  def dom_count
+    5 +
+    children.length * 25
+  end
 end
diff --git a/app/models/communication/block/template/organization.rb b/app/models/communication/block/template/organization.rb
index 6d5d49e251..3526cefea4 100644
--- a/app/models/communication/block/template/organization.rb
+++ b/app/models/communication/block/template/organization.rb
@@ -75,6 +75,11 @@ def filters_categories
     organizations.collect(&:categories).flatten.compact.uniq
   end
 
+  def dom_count
+    5 +
+    children.length * 15
+  end
+
   protected
 
   def link_to_category
diff --git a/app/models/communication/block/template/organization/element.rb b/app/models/communication/block/template/organization/element.rb
index b1de5e86c2..b4ad2582be 100644
--- a/app/models/communication/block/template/organization/element.rb
+++ b/app/models/communication/block/template/organization/element.rb
@@ -44,4 +44,12 @@ def best_logo_blob
     organization_l10n.logo&.blob
   end
 
+  def dom_count
+    2 + 
+    name_component.dom_count +
+    url_component.dom_count +
+    logo_component.dom_count +
+    role_component.dom_count
+  end
+
 end
diff --git a/app/models/communication/block/template/page.rb b/app/models/communication/block/template/page.rb
index ac4044bd28..0084515bdd 100644
--- a/app/models/communication/block/template/page.rb
+++ b/app/models/communication/block/template/page.rb
@@ -60,6 +60,11 @@ def top_link
     page_l10n.hugo(website).permalink
   end
 
+  def dom_count
+    5 +
+    children.length * 25
+  end
+
   protected
 
   def page_l10n
diff --git a/app/models/communication/block/template/paper.rb b/app/models/communication/block/template/paper.rb
index 3f871cdb5b..6cd02b1860 100644
--- a/app/models/communication/block/template/paper.rb
+++ b/app/models/communication/block/template/paper.rb
@@ -29,6 +29,11 @@ def top_link
     l10n.hugo(website).permalink
   end
 
+  def dom_count
+    5 +
+    children.length * 25
+  end
+
   protected
 
   def selected_papers_all
diff --git a/app/models/communication/block/template/person.rb b/app/models/communication/block/template/person.rb
index 0d5845b31b..8e32279d2c 100644
--- a/app/models/communication/block/template/person.rb
+++ b/app/models/communication/block/template/person.rb
@@ -62,6 +62,11 @@ def top_link
     link_to_category
   end
 
+  def dom_count
+    5 +
+    children.length * 25
+  end
+
   protected
 
   def link_to_category
diff --git a/app/models/communication/block/template/post.rb b/app/models/communication/block/template/post.rb
index c63ae5cb4c..a24642d358 100644
--- a/app/models/communication/block/template/post.rb
+++ b/app/models/communication/block/template/post.rb
@@ -51,6 +51,11 @@ def top_link
     nil
   end
 
+  def dom_count
+    5 +
+    children.length * 25
+  end
+
   protected
 
   def link_to_category
diff --git a/app/models/communication/block/template/program.rb b/app/models/communication/block/template/program.rb
index 314b1cb157..baa6d4a7d9 100644
--- a/app/models/communication/block/template/program.rb
+++ b/app/models/communication/block/template/program.rb
@@ -32,4 +32,9 @@ def available_programs
   def children
     selected_programs
   end
+
+  def dom_count
+    5 +
+    children.length * 25
+  end
 end
diff --git a/app/models/communication/block/template/project.rb b/app/models/communication/block/template/project.rb
index 1b866898b2..a8606715fd 100644
--- a/app/models/communication/block/template/project.rb
+++ b/app/models/communication/block/template/project.rb
@@ -47,6 +47,11 @@ def top_link
     nil
   end
 
+  def dom_count
+    5 +
+    children.length * 25
+  end
+
   protected
 
   def link_to_category
diff --git a/app/models/communication/block/template/sound.rb b/app/models/communication/block/template/sound.rb
index 451db2c7d2..45e5a3ee11 100644
--- a/app/models/communication/block/template/sound.rb
+++ b/app/models/communication/block/template/sound.rb
@@ -11,6 +11,13 @@ def allowed_for_about?
   def empty?
     file_component.blob.nil?
   end
+
+  def dom_count
+    5 +
+    file_component.dom_count +
+    title_component.dom_count +
+    transcription_component.dom_count
+  end
   
   protected
 
diff --git a/app/models/communication/block/template/testimonial.rb b/app/models/communication/block/template/testimonial.rb
index f164452c82..7e1049ebb5 100644
--- a/app/models/communication/block/template/testimonial.rb
+++ b/app/models/communication/block/template/testimonial.rb
@@ -15,4 +15,13 @@ def allowed_for_about?
   def top_screen_reader_only
     true
   end
+
+  def children
+    elements
+  end
+
+  def dom_count
+    5 +
+    children.sum(&:dom_count)
+  end
 end
diff --git a/app/models/communication/block/template/testimonial/element.rb b/app/models/communication/block/template/testimonial/element.rb
index b7dd29ffa1..d6381a28a1 100644
--- a/app/models/communication/block/template/testimonial/element.rb
+++ b/app/models/communication/block/template/testimonial/element.rb
@@ -8,4 +8,12 @@ class Communication::Block::Template::Testimonial::Element < Communication::Bloc
   def empty?
     text.blank?
   end
+
+  def dom_count
+    2 +
+    text_component.dom_count +
+    author_component.dom_count +
+    job_component.dom_count +
+    photo_component.dom_count
+  end
 end
diff --git a/app/models/communication/block/template/timeline.rb b/app/models/communication/block/template/timeline.rb
index c4985ebf95..92f6caa3ff 100644
--- a/app/models/communication/block/template/timeline.rb
+++ b/app/models/communication/block/template/timeline.rb
@@ -14,4 +14,9 @@ def children
   def empty?
     elements.none?
   end
+
+  def dom_count
+    5 +
+    children.sum(&:dom_count)
+  end
 end
diff --git a/app/models/communication/block/template/timeline/element.rb b/app/models/communication/block/template/timeline/element.rb
index c4e215a6e2..5a21f08b25 100644
--- a/app/models/communication/block/template/timeline/element.rb
+++ b/app/models/communication/block/template/timeline/element.rb
@@ -6,4 +6,10 @@ class Communication::Block::Template::Timeline::Element < Communication::Block::
   def empty?
    title.blank? && text.blank?
   end
+
+  def dom_count
+    2 +
+    title_component.dom_count +
+    text_component.dom_count
+  end
 end
diff --git a/app/models/communication/block/template/title.rb b/app/models/communication/block/template/title.rb
index 344c817fb1..84feefc2c5 100644
--- a/app/models/communication/block/template/title.rb
+++ b/app/models/communication/block/template/title.rb
@@ -6,4 +6,10 @@ def empty?
     block.title.blank?
   end
 
+  def dom_count
+    count = 2
+    # TODO collapsed
+    count += 2 if block.about.show_toc?
+    count
+  end
 end
diff --git a/app/models/communication/block/template/video.rb b/app/models/communication/block/template/video.rb
index bf5bdd85e7..c9e596725b 100644
--- a/app/models/communication/block/template/video.rb
+++ b/app/models/communication/block/template/video.rb
@@ -50,6 +50,14 @@ def before_validation
     block.attributes['data']['video_title'] = video_provider.title
   end
 
+  def dom_count
+    2 +
+    description_component.dom_count +
+    url_component.dom_count +
+    video_title_component.dom_count +
+    transcription_component.dom_count
+  end
+
   protected
 
   def video_provider
diff --git a/app/models/communication/block/template/volume.rb b/app/models/communication/block/template/volume.rb
index b2763255bc..61d4c1c92a 100644
--- a/app/models/communication/block/template/volume.rb
+++ b/app/models/communication/block/template/volume.rb
@@ -28,6 +28,11 @@ def top_link
     link_to_special_page
   end
 
+  def dom_count
+    5 +
+    children.length * 25
+  end
+
   protected
 
   def link_to_special_page
diff --git a/app/models/communication/website.rb b/app/models/communication/website.rb
index a147dd0bf8..d1b0be2b09 100644
--- a/app/models/communication/website.rb
+++ b/app/models/communication/website.rb
@@ -73,6 +73,7 @@ class Communication::Website < ApplicationRecord
   include WithContentArchive
   include WithDependencies
   include WithDeuxfleurs
+  include WithDomCount
   include WithFeatureAgenda
   include WithFeatureAlerts
   include WithFeatureAlumni
diff --git a/app/models/communication/website/with_dom_count.rb b/app/models/communication/website/with_dom_count.rb
new file mode 100644
index 0000000000..d43e972464
--- /dev/null
+++ b/app/models/communication/website/with_dom_count.rb
@@ -0,0 +1,12 @@
+module Communication::Website::WithDomCount
+  extend ActiveSupport::Concern
+
+  DEFAULT_DOM_COUNT = 250
+
+  # L'idée est de fournir un socle correspondant au header et au footer
+  def dom_count
+    # TODO count menus
+    DEFAULT_DOM_COUNT
+  end
+
+end
diff --git a/app/models/concerns/contentful.rb b/app/models/concerns/contentful.rb
index 6e137f3c22..4178200422 100644
--- a/app/models/concerns/contentful.rb
+++ b/app/models/concerns/contentful.rb
@@ -56,8 +56,25 @@ def reset_blocks
     about.touch
   end
 
+  def dom_count
+    blocks_dom_count + website_dom_count
+  end
+
   protected
 
+  def blocks_dom_count
+    count = 0
+    blocks.each do |block|
+      next if block.empty?
+      count += block.dom_count
+    end
+    count
+  end
+
+  def website_dom_count
+    websites.first&.dom_count || Communication::Website::DEFAULT_DOM_COUNT
+  end
+
   def generate_block(hash)
     hash[:university] = university
     hash[:published] = true unless hash.has_key?(:published)
diff --git a/app/views/admin/communication/blocks/group/index.json.jbuilder b/app/views/admin/communication/blocks/group/index.json.jbuilder
index cbad37b141..6930debaab 100644
--- a/app/views/admin/communication/blocks/group/index.json.jbuilder
+++ b/app/views/admin/communication/blocks/group/index.json.jbuilder
@@ -1,6 +1,7 @@
 json.about do
   json.type params[:about_type]
   json.id params[:about_id]
+  json.dom_count @about.dom_count
 end
 json.blocks @blocks do |block|
   json.id block.id
diff --git a/config/locales/vue/en.yml b/config/locales/vue/en.yml
index 0568059881..c115761e42 100644
--- a/config/locales/vue/en.yml
+++ b/config/locales/vue/en.yml
@@ -14,6 +14,60 @@ en:
         deletion: Are you sure you want to delete?
         duplication: Are you sure you want to duplicate?
         reset: Reset will remove all blocks in this language. Are you sure?
+      dom_count:
+        count: Around {count} elements in the DOM
+        credit: "Illustration from the book<br>Botanique élémentaire : organographie et classification<br>Ferdinand Faideau (1862-193.)<br>Source gallica.bnf.fr / Bibliothèque nationale de France"
+        more:
+          title: How does it work?
+          explanation: "<p>
+              A web page is made up of a set of elements.
+              A paragraph of text is an element, a link inside that text is another element, a word in italics is a third element.
+              This does not say anything about the weight of the page, because an img element can load an image weighing several megabytes, and a single paragraph can contain all of Balzac's books.
+              In code, we interact with these elements through a document model, the DOM (Document Object Model).
+            </p>
+            <p>
+              The EcoIndex score places a great deal of importance on the size of the DOM when calculating the ecological quality of a page.
+              The underlying idea is that a larger DOM will require more energy from the device to be rendered and displayed in the browser.
+              While this idea is theoretically correct, it misses the biggest consumer of energy on the device: JavaScript.
+              A single demanding animation or 3D object is enough for JavaScript to turn your computer into a fan, or your mobile phone into a heater.
+              To learn more, read the article <a href=\"https://www.osuny.org/actualites/2026-06-03-osuny-et-le-score-ecoindex/\" target=\"_blank\">osuny and the EcoIndex score</a>.
+            </p>
+            <p>
+              Nevertheless, the number of DOM elements is an interesting indicator in terms of editorial sobriety.
+              It is not a matter of trying to measure the ecological impact, but of evaluating the effect on attention.
+              Here too, it is not very exact: for instance, if you use collapsed titles, you do not saturate a person's attention in the same way as when the content is displayed directly.
+              But it is worth asking whether the content is both as small as possible, and as large as necessary.
+              Neither too much, nor too little.
+            </p>
+            <p>
+              For this, osuny relies on the blocks used to approximately compute the number of elements on the page.
+              This number of elements is then translated into five tiers, presented below.
+              None of these tiers is good or bad in itself, it is purely a question of fit with actual usage.
+              One way of evaluating the relevance of dense pages is to check that the time spent on those pages by users is significant.
+              For very simple pages, it is about evaluating whether people find the information they are looking for, or whether they are forced to load other pages.
+              Eco-design work is subtle, and it always relies on listening to people and observing usage.
+            </p>"
+        level:
+          one:
+            title: Poppy
+            text: This web page is extremely simple! That is probably a very good thing, if it matches user expectations. But you should also ask whether it forces users to load several pages to find the information they need. A well eco-designed page is one that meets people's needs, no more and no less.
+            dom: Less than 300 elements in the DOM
+          two:
+            title: Hollyhock
+            text: This page is simple, which is a good sign! However, you should check that it actually meets user needs. If it is simple but forces users to load 3 others, that is probably not the best balance. A well eco-designed page is one that meets people's needs, no more and no less.
+            dom: Between 300 and 600 elements in the DOM
+          three:
+            title: Olive tree
+            text: This page is medium-sized. It may be a bit large, depending on the use case. Are all the elements useful to the users? If some are missing, you should consider adding them. If some are almost always superfluous, it is better to remove them or group them on a dedicated page. A well eco-designed page is one that meets people's needs, no more and no less.
+            dom: Between 600 and 1000 elements in the DOM
+          four:
+            title: Oak
+            text: This page is large, it is worth pausing to think about it. If users spend several minutes browsing it and find it really useful, that is fine. But if people get lost in the page, it would be better to split it into several pages, each better matching a specific use. A well eco-designed page is one that meets people's needs, no more and no less.
+            dom: Between 1000 and 2000 elements in the DOM
+          five:
+            title: Giant sequoia
+            text: This page is absolutely huge. If your visit statistics show that the average time spent on the page is 30 minutes, that is fine. But in other cases, you should probably tidy up and split the content into simpler pieces, in order to better address users' actual needs. A well eco-designed page is one that meets people's needs, no more and no less.
+            dom: More than 2000 elements in the DOM
       empty: This block is empty and will not appear
       offcanvas:
         close: Close block edition
diff --git a/config/locales/vue/fr.yml b/config/locales/vue/fr.yml
index 0a0cb32c0e..5f597c8361 100644
--- a/config/locales/vue/fr.yml
+++ b/config/locales/vue/fr.yml
@@ -14,6 +14,60 @@ fr:
         deletion: Est-ce que vous confirmez la suppression ?
         duplication: Est-ce que vous confirmez la duplication ?
         reset: La réinitialisation va supprimer tous les blocs dans cette langue. Est-ce que vous confirmez ?
+      dom_count:
+        count: Environ {count} éléments dans le DOM
+        credit: "Illustration tirée de l'ouvrage<br>Botanique élémentaire : organographie et classification<br>Ferdinand Faideau (1862-193.)<br>Source gallica.bnf.fr / Bibliothèque nationale de France"
+        more:
+          title: Comment ça marche ?
+          explanation: "<p>
+              Une page Web est composée d'un ensemble d'éléments. 
+              Un paragraphe de texte est un élément, un lien à l'intérieur de ce texte est un autre élément, un mot en italique constitue un troisième élément. 
+              Cela ne présage pas du poids de la page, parce qu'un élément img peut appeler une image qui pèse plusieurs mégaoctets, et qu'un seul paragraphe peut contenir tous les livres de Balzac bout à bout. 
+              En code, on interagit avec ces éléments via un modèle de document, le DOM (Document Object Model).
+            </p>
+            <p>
+              Le score EcoIndex accorde une très grande importance à la taille du DOM pour calculer la qualité écologique d'une page. 
+              L'idée sous-jacente est qu'un DOM plus grand va nécessiter plus d'énergie du périphérique pour être rendu, et affiché dans le navigateur. 
+              Si cette idée est juste théoriquement, elle passe à côté du plus gros consommateur d'énergie du périphérique : le JavaScript.
+              Ainsi, il suffit d'une animation gourmande ou d'un objet 3D pour que le JavaScript transforme votre ordinateur en ventilateur ou votre téléphone mobile en chaufferette. 
+              Pour en savoir plus, consultez l'article <a href=\"https://www.osuny.org/actualites/2026-06-03-osuny-et-le-score-ecoindex/\" target=\"_blank\">osuny et le score EcoIndex</a>.
+            </p>
+            <p>
+              Néanmoins, le nombre d'éléments du DOM est un élément intéressant en termes de sobriété éditoriale. 
+              Il s'agit, non pas d'essayer de mesurer l'impact écologique, mais d'évaluer l'effet sur l'attention.
+              Là non plus, ce n'est pas très exact, par exemple, si vous utilisez des titres repliés, vous ne saturez pas l'attention de la personne de la même manière que si le contenu est directement affiché.
+              Mais il est souhaitable de se demander si le contenu est à la fois aussi petit que possible, et aussi gros que nécessaire. 
+              Qu'il n'y en a ni trop, ni trop peu. 
+            </p>
+            <p>
+              Pour cela, osuny s'appuie sur les blocs utilisés pour calculer approximativement le nombre d'éléments de la page.
+              Ce nombre d'éléments est ensuite traduit en cinq paliers, présentés ci-dessous. 
+              Aucun de ces paliers n'est bon ou mauvais en soi, c'est purement une question d'adéquation aux usages.
+              Une des méthodes permettant d'évaluer la pertinence des pages denses est de vérifier que le temps passé sur ces pages par les internautes est significatif. 
+              Pour les pages très simples, il s'agit d'évaluer si les personnes trouvent l'information qu'elles cherchent, ou si elles sont contraintes de charger d'autres pages. 
+              Le travail d'écoconception est subtil, et il s'appuie toujours sur l'écoute des personnes et l'observation des usages. 
+            </p>"
+        level:
+          one:
+            title: Coquelicot
+            text: Cette page web est extrêmement simple ! C'est probablement une très bonne chose, si ça correspond bien à l'usage des internautes. Mais il faut aussi se demander si cela ne les oblige pas à charger plusieurs pages pour trouver l'information souhaitée. Une page bien écoconçue, c'est une page qui répond aux besoins des personnes, ni plus ni moins.
+            dom: Moins de 300 éléments dans le DOM
+          two:
+            title: Rose trémière
+            text: Cette page est simple, c'est bon signe ! Toutefois, il faut vérifier si elle répond bien à l'usage des internautes. Si elle est simple mais qu'elle contraint les internautes à en charger 3 autres, ce n'est probablement pas le meilleur équilibre. Une page bien écoconçue, c'est une page qui répond aux besoins des personnes, ni plus ni moins.
+            dom: Entre 300 et 600 éléments dans le DOM
+          three:
+            title: Olivier
+            text: Cette page est de taille intermédiaire. C'est peut-être un peu gros, tout dépend de l'usage. Est-ce que tous les éléments sont utiles aux personnes utilisatrices ? S'il en manque, il faut envisager de les ajouter. Si certains sont presque toujours superflus, il vaut mieux les enlever ou les regrouper dans une page dédiée. Une page bien écoconçue, c'est une page qui répond aux besoins des personnes, ni plus ni moins.
+            dom: Entre 600 et 1000 éléments dans le DOM
+          four:
+            title: Chêne
+            text: Cette page est grande, il faut s'arrêter pour y réfléchir. Si les internautes passent plusieurs minutes à la parcourir, et que c'est vraiment pratique, c'est très bien. Mais les personnes se perdent dans la page, il serait préférable de la couper en plusieurs pages, répondant mieux à chaque usage. Une page bien écoconçue, c'est une page qui répond aux besoins des personnes, ni plus ni moins.
+            dom: Entre 1000 et 2000 éléments dans le DOM
+          five:
+            title: Séquoia géant
+            text: Cette page est absolument énorme. Si vos statistiques de visite vous indiquent que le temps moyen passé sur la page est de 30 minutes, c'est très bien. Mais dans les autres cas, il faut certainement ranger et découper le contenus en morceaux plus simples, afin de bien répondre aux besoins réels des internautes. Une page bien écoconçue, c'est une page qui répond aux besoins des personnes, ni plus ni moins.
+            dom: Plus de 2000 éléments dans le DOM
       empty: Ce bloc est vide et n'apparaitra pas
       offcanvas:
         close: Fermer l'édition du bloc
diff --git a/package.json b/package.json
index dbcb28d7cb..00aceda8c1 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
   "dependencies": {
+    "@lucide/vue": "^1.21.0",
     "bootstrap-icons": "^1.9.1",
     "bootstrap-print-css": "^1.0.1",
     "codemirror": "5",
     "cropperjs": "^1.5.12",
     "jquery-cropper": "^1.0.1",
     "leaflet": "^1.9.4",
-    "lucide-vue-next": "^0.473.0",
     "notyf": "^3.10.0",
     "select2": "^4.1.0-rc.0",
     "slug": "^5.1.0",
diff --git a/public/vue/dom_count/five.png b/public/vue/dom_count/five.png
new file mode 100644
index 0000000000..fe8c1c4a17
Binary files /dev/null and b/public/vue/dom_count/five.png differ
diff --git a/public/vue/dom_count/four.png b/public/vue/dom_count/four.png
new file mode 100644
index 0000000000..ac3cd5aad0
Binary files /dev/null and b/public/vue/dom_count/four.png differ
diff --git a/public/vue/dom_count/one.png b/public/vue/dom_count/one.png
new file mode 100644
index 0000000000..136a0fcd41
Binary files /dev/null and b/public/vue/dom_count/one.png differ
diff --git a/public/vue/dom_count/three.png b/public/vue/dom_count/three.png
new file mode 100644
index 0000000000..f0336551b4
Binary files /dev/null and b/public/vue/dom_count/three.png differ
diff --git a/public/vue/dom_count/two.png b/public/vue/dom_count/two.png
new file mode 100644
index 0000000000..b58d6e2746
Binary files /dev/null and b/public/vue/dom_count/two.png differ
diff --git a/yarn.lock b/yarn.lock
index ddf14597a4..7b02e1b9d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -162,6 +162,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba"
   integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==
 
+"@lucide/vue@^1.21.0":
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/@lucide/vue/-/vue-1.21.0.tgz#658eeb23bf0fdc20dec63a190edf9c2e83dc8549"
+  integrity sha512-eoFn3tppjKAc12ZqdnRSMFdtwQ1ZMRQFb6SV1Eub6Y8kU28ccnqKeSFdnur9hMg8gIbosU2Y3WFJr/J/xS/IlQ==
+
 "@vue/compiler-core@3.5.35":
   version "3.5.35"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.35.tgz#e789c89b0fee47683e5300c715bb9243c07a6bbd"