Canvas Page Weight

In Drupal Canvas, editors add sliders, background videos, large photos and embedded players. The page looks right, but it gets slow, and nobody notices until visitors leave and search engines rank it lower.

Canvas Page Weight shows editors how heavy a page is while they build it, in words they understand, and what to change to make it lighter.

Features

• A Page weight panel in the Canvas editor. It gives a verdict (🚀 Nice and light, 🙂 Close to the limit, 🐢 Heavy page), and how long the page takes to load on a slow phone connection. It updates as the editor works.
• Quick fixes, biggest saving first. Each fix names the component, explains the problem in plain words, says what to try, and estimates the saving. For example: Video background: the whole video downloads before the page feels ready. Try: replace it with a still image. Save 4.6 MB.
• The files behind each fix. Folded away under each fix: the name and size of each file, and for photos their size in pixels and how many times wider they are than a phone needs.
• A page weight budget. 2.5 MB by default, which still passes Lighthouse's page weight check. Over it, editors are warned, or the page cannot be published until it is lighter.
• An overview of every page. A gauge icon in the Canvas sidebar lists every page, heaviest first, with its verdict, weight, load time and biggest fix. Selecting a page opens it in the editor with the panel open.
• Measured as visitors receive it. An image counts as the image style derivative the page serves, the one a phone downloads, not the original upload. Embeds from other sites get an editable estimate per host.
• Every language Drupal supports, including right-to-left languages. All text comes from Drupal, translated.
• File details for developers, folded away in the panel: every file and its exact size, grouped by component.

Post-installation

1. Give editors the View page weight permission.
2. Optionally, set the budget at Configuration » Content authoring » Page weight, and choose whether pages over it are only flagged or cannot be published.
3. In the Canvas editor, open Extensions » Page weight, or select the gauge icon in the sidebar for the overview.

Choosing a budget

Lighthouse gives page weight a perfect score up to about 1.7 MB, and still passes it up to about 2.6 MB. The median mobile page on the web weighs about 2.2 MB (Web Almanac 2025). The default, 2.5 MB, keeps pages passing; set 1.7 MB for a stricter site.

Requirements

• Drupal 11.3 or later
• Drupal Canvas 1.12 or later

Similar projects

Lighthouse and PageSpeed Insights measure a published page, for developers. Canvas Page Weight measures the draft, for editors, while they can still change it.