diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
index 8e6286080..d0a2b9dcf 100644
--- a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
+++ b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
@@ -13,7 +13,15 @@ import {GraphRenderOpts, renderPlots} from "../../../../graph/render";
 import {GraphData, GraphKind, GraphsSelector} from "../../../../graph/data";
 import uPlot from "uplot";
 import CachegrindCmd from "../../../../components/cachegrind-cmd.vue";
-import {COMPILE_DETAIL_GRAPHS_RESOLVER} from "./detail-resolver";
+import {
+  COMPILE_DETAIL_GRAPHS_RESOLVER,
+  COMPILE_DETAIL_SECTIONS_RESOLVER,
+  CompileDetailGraphs,
+  CompileDetailGraphsSelector,
+  CompileDetailSections,
+  CompileDetailSectionsSelector,
+} from "./detail-resolver";
+import CompileSectionsChart from "./sections-chart.vue";
 import PerfettoLink from "../../../../components/perfetto-link.vue";
 
 const props = defineProps<{
@@ -97,10 +105,9 @@ function drawCurrentDate(opts: GraphRenderOpts, date: Date) {
   };
 }
 
-// Render both relative and absolute graphs
-async function renderGraphs() {
-  const {start, end, date} = graphRange.value;
-  const selector = {
+function createGraphsSelector(): CompileDetailGraphsSelector {
+  const {start, end} = graphRange.value;
+  return {
     benchmark: props.testCase.benchmark,
     profile: props.testCase.profile,
     scenario: props.testCase.scenario,
@@ -109,8 +116,31 @@ async function renderGraphs() {
     end,
     kinds: ["percentrelative", "raw"] as GraphKind[],
   };
-  const graphsDetail = await COMPILE_DETAIL_GRAPHS_RESOLVER.load(selector);
-  if (graphsDetail.commits.length === 0) {
+}
+
+async function loadGraphs(): Promise<CompileDetailGraphs> {
+  return await COMPILE_DETAIL_GRAPHS_RESOLVER.load(createGraphsSelector());
+}
+
+function createSectionsSelector(): CompileDetailSectionsSelector {
+  return {
+    benchmark: props.testCase.benchmark,
+    profile: props.testCase.profile,
+    scenario: props.testCase.scenario,
+    start: props.baseArtifact.commit,
+    end: props.artifact.commit,
+  };
+}
+
+async function loadSections(): Promise<CompileDetailSections> {
+  return await COMPILE_DETAIL_SECTIONS_RESOLVER.load(createSectionsSelector());
+}
+
+// Render both relative and absolute graphs
+async function renderGraphs(detail: CompileDetailGraphs) {
+  const selector = createGraphsSelector();
+  const date = graphRange.value.date;
+  if (detail.commits.length === 0) {
     return;
   }
 
@@ -119,13 +149,13 @@ async function renderGraphs() {
     kind: GraphKind
   ): [GraphData, GraphsSelector] {
     const data = {
-      commits: graphsDetail.commits,
+      commits: detail.commits,
       benchmarks: {
         [selector.benchmark]: {
           // The server returns profiles capitalized, so we need to match that
           // here, so that the graph code can find the expected profile.
           [capitalize(selector.profile)]: {
-            [selector.scenario]: graphsDetail.graphs[index],
+            [selector.scenario]: detail.graphs[index],
           },
         },
       },
@@ -264,7 +294,15 @@ function changeProfileCommand(event: Event) {
   profileCommand.value = target.value as ProfileCommand;
 }
 
-onMounted(() => renderGraphs());
+const sectionsDetail: Ref<CompileDetailSections | null> = ref(null);
+onMounted(() => {
+  loadGraphs().then((d) => {
+    renderGraphs(d);
+  });
+  loadSections().then((d) => {
+    sectionsDetail.value = d;
+  });
+});
 </script>
 
 <template>
@@ -297,7 +335,7 @@ onMounted(() => renderGraphs());
             <tr v-if="(metadata?.iterations ?? null) !== null">
               <td>
                 Iterations
-                <Tooltip> How many times is the benchmark executed? </Tooltip>
+                <Tooltip> How many times is the benchmark executed?</Tooltip>
               </td>
               <td>{{ metadata.iterations }}</td>
             </tr>
@@ -391,6 +429,32 @@ onMounted(() => renderGraphs());
         <div ref="relativeChartElement"></div>
       </div>
     </div>
+    <div class="columns">
+      <div class="rows grow">
+        <div class="title bold">
+          Sections
+          <Tooltip
+            >Percentual duration of individual compilation sections. This is a
+            rough estimate that might not necessarily contain all of the
+            individual parts of the compilation. The sections are calculated
+            based on the results of self-profile queries and they are measured
+            based on wall-time.
+          </Tooltip>
+        </div>
+        <div>
+          <CompileSectionsChart
+            v-if="
+              (sectionsDetail?.before ?? null) !== null &&
+              (sectionsDetail?.after ?? null) !== null
+            "
+            :before="sectionsDetail.before"
+            :after="sectionsDetail.after"
+          />
+          <span v-else-if="sectionsDetail === null">Loading…</span>
+          <span v-else>Not available</span>
+        </div>
+      </div>
+    </div>
     <div class="command">
       <div class="title bold">
         Local profiling command<Tooltip>
diff --git a/site/frontend/src/pages/compare/compile/table/detail-resolver.ts b/site/frontend/src/pages/compare/compile/table/detail-resolver.ts
index 2ba9cb497..69f367536 100644
--- a/site/frontend/src/pages/compare/compile/table/detail-resolver.ts
+++ b/site/frontend/src/pages/compare/compile/table/detail-resolver.ts
@@ -1,6 +1,9 @@
 import {GraphKind, Series} from "../../../../graph/data";
 import {getJson} from "../../../../utils/requests";
-import {COMPARE_COMPILE_DETAIL_GRAPHS_DATA_URL} from "../../../../urls";
+import {
+  COMPARE_COMPILE_DETAIL_GRAPHS_DATA_URL,
+  COMPARE_COMPILE_DETAIL_SECTIONS_DATA_URL,
+} from "../../../../urls";
 import {CachedDataLoader} from "./utils";
 
 export interface CompileDetailGraphsSelector {
@@ -18,6 +21,30 @@ export interface CompileDetailGraphs {
   commits: Array<[number, string]>;
   // One Series for each GraphKind in the CompileDetailSelector
   graphs: Series[];
+  sections_before: CompilationSections | null;
+  sections_after: CompilationSections | null;
+}
+
+export interface CompileDetailSectionsSelector {
+  start: string;
+  end: string;
+  benchmark: string;
+  scenario: string;
+  profile: string;
+}
+
+export interface CompileDetailSections {
+  before: CompilationSections | null;
+  after: CompilationSections | null;
+}
+
+export interface CompilationSection {
+  name: string;
+  value: number;
+}
+
+export interface CompilationSections {
+  sections: CompilationSection[];
 }
 
 /**
@@ -36,10 +63,10 @@ export const COMPILE_DETAIL_GRAPHS_RESOLVER: CachedDataLoader<
 > = new CachedDataLoader(
   (key: CompileDetailGraphsSelector) =>
     `${key.benchmark};${key.profile};${key.scenario};${key.start};${key.end};${key.stat};${key.kinds}`,
-  loadDetail
+  loadGraphsDetail
 );
 
-async function loadDetail(
+async function loadGraphsDetail(
   selector: CompileDetailGraphsSelector
 ): Promise<CompileDetailGraphs> {
   const params = {
@@ -56,3 +83,29 @@ async function loadDetail(
     params
   );
 }
+
+// The same thing, but for sections
+export const COMPILE_DETAIL_SECTIONS_RESOLVER: CachedDataLoader<
+  CompileDetailSectionsSelector,
+  CompileDetailSections
+> = new CachedDataLoader(
+  (key: CompileDetailGraphsSelector) =>
+    `${key.benchmark};${key.profile};${key.scenario};${key.start};${key.end}`,
+  loadSectionsDetail
+);
+
+async function loadSectionsDetail(
+  selector: CompileDetailSectionsSelector
+): Promise<CompileDetailSections> {
+  const params = {
+    start: selector.start,
+    end: selector.end,
+    benchmark: selector.benchmark,
+    scenario: selector.scenario,
+    profile: selector.profile,
+  };
+  return await getJson<CompileDetailSections>(
+    COMPARE_COMPILE_DETAIL_SECTIONS_DATA_URL,
+    params
+  );
+}
diff --git a/site/frontend/src/pages/compare/compile/table/sections-chart.vue b/site/frontend/src/pages/compare/compile/table/sections-chart.vue
new file mode 100644
index 000000000..c2625f1da
--- /dev/null
+++ b/site/frontend/src/pages/compare/compile/table/sections-chart.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import {CompilationSection, CompilationSections} from "./detail-resolver";
+import {computed, ComputedRef, Ref, ref} from "vue";
+
+const props = defineProps<{
+  before: CompilationSections;
+  after: CompilationSections;
+}>();
+
+const maxTotalDuration = computed(() => {
+  const before = calculateTotalSectionsDuration(props.before);
+  const after = calculateTotalSectionsDuration(props.after);
+  return Math.max(before, after);
+});
+
+function calculateTotalSectionsDuration(sections: CompilationSections): number {
+  return sections.sections.reduce((accum, section) => accum + section.value, 0);
+}
+
+const SECTIONS_PALETTE = [
+  "#7768AE",
+  "#FFCf96",
+  "#ff8080",
+  "#29adb2",
+  "#3BB273",
+];
+
+function getSectionColor(index: number): string {
+  return SECTIONS_PALETTE[index % SECTIONS_PALETTE.length];
+}
+
+function calculate_width(value: number): string {
+  const fraction = value / maxTotalDuration.value;
+  return `${(fraction * 100).toFixed(2)}%`;
+}
+
+function formatPercent(
+  sections: CompilationSections,
+  sectionName: string
+): string {
+  const values = sections.sections.filter((s) => s.name === sectionName);
+  if (values.length === 0) return "??";
+  const value = values[0].value;
+  const total = calculateTotalSectionsDuration(sections);
+  const percent = (value / total) * 100;
+  return `${percent.toFixed(2)}%`;
+}
+
+const chartRows: ComputedRef<Array<[string, CompilationSections]>> = computed(
+  () => [
+    ["Before", props.before],
+    ["After", props.after],
+  ]
+);
+const legendItems: ComputedRef<
+  Array<{section: CompilationSection; color: string}>
+> = computed(() => {
+  const items = [];
+  for (const section of props.before.sections) {
+    items.push({
+      section,
+      color: getSectionColor(items.length),
+    });
+  }
+  return items;
+});
+
+const activeSection: Ref<string | null> = ref(null);
+
+function activate(section: string) {
+  activeSection.value = section;
+}
+function deactivate() {
+  activeSection.value = null;
+}
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="chart-wrapper">
+      <div class="chart" v-for="([label, sections], rowIndex) in chartRows">
+        <span class="label">{{ label }}</span>
+        <div class="section-wrapper">
+          <div
+            v-for="(section, index) in sections.sections"
+            :class="{section: true, active: activeSection === section.name}"
+            @mouseenter="activate(section.name)"
+            @mouseleave="deactivate"
+            :style="{
+              width: calculate_width(section.value),
+              backgroundColor: getSectionColor(index),
+            }"
+          >
+            <div
+              class="description"
+              v-if="rowIndex == 1 && activeSection === section.name"
+            >
+              <div>
+                <b>{{ section.name }}</b>
+              </div>
+              <div>
+                {{ formatPercent(props.before, section.name) }} ->
+                {{ formatPercent(props.after, section.name) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="legend">
+      <div
+        class="item"
+        v-for="item in legendItems"
+        @mouseenter="activate(item.section.name)"
+        @mouseleave="deactivate"
+      >
+        <div
+          :class="{color: true, active: activeSection === item.section.name}"
+          :style="{backgroundColor: item.color}"
+        ></div>
+        <div class="name">{{ item.section.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.wrapper {
+  display: flex;
+}
+.chart {
+  display: flex;
+  justify-content: flex-end;
+  width: 600px;
+
+  &:first-child {
+    margin-bottom: 10px;
+  }
+
+  .label {
+    width: 55px;
+    margin-right: 5px;
+    align-self: center;
+  }
+
+  .section-wrapper {
+    width: calc(100% - 60px);
+    display: flex;
+    flex-direction: row;
+    border-right: 1px dashed #333333;
+
+    .section {
+      height: 30px;
+      position: relative;
+    }
+  }
+
+  .description {
+    position: absolute;
+    top: 35px;
+    width: max-content;
+    z-index: 99;
+    padding: 10px;
+    background-color: white;
+    border: 2px solid black;
+  }
+}
+
+.active {
+  box-shadow: inset 0 0 1px 2px #000;
+}
+
+.section:first-child {
+  border-radius: 5px 0 0 5px;
+}
+
+.section:last-child {
+  border-radius: 0 5px 5px 0;
+}
+.legend {
+  margin-left: 40px;
+
+  .item {
+    display: flex;
+    margin-bottom: 5px;
+
+    .color {
+      width: 15px;
+      height: 15px;
+    }
+    .name {
+      margin-left: 5px;
+    }
+  }
+}
+</style>
diff --git a/site/frontend/src/urls.ts b/site/frontend/src/urls.ts
index 2c0e1ef7a..62e637ba7 100644
--- a/site/frontend/src/urls.ts
+++ b/site/frontend/src/urls.ts
@@ -8,4 +8,5 @@ export const BOOTSTRAP_DATA_URL = `${BASE_URL}/bootstrap`;
 export const GRAPH_DATA_URL = `${BASE_URL}/graphs`;
 export const COMPARE_DATA_URL = `${BASE_URL}/get`;
 export const COMPARE_COMPILE_DETAIL_GRAPHS_DATA_URL = `${BASE_URL}/compare-compile-detail-graphs`;
+export const COMPARE_COMPILE_DETAIL_SECTIONS_DATA_URL = `${BASE_URL}/compare-compile-detail-sections`;
 export const SELF_PROFILE_DATA_URL = `${BASE_URL}/self-profile`;