# Page Weight Summary in the Admin Bar

> Shows an admin bar item on the front of the site with the total size of the page's scripts, stylesheets, images and fonts, and a breakdown with the heaviest files when you click it.

- Type: PHP
- Runs: Frontend only
- Category: [Performance](https://wpide.com/library/category/performance/)
- Tags: admin-bar, page-weight, debugging
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/perf-page-weight-admin-bar/

## Code

```php
add_action( 'admin_bar_menu', function ( $bar ) {
    if ( is_admin() || ! current_user_can( 'manage_options' ) ) {
        return;
    }

    $bar->add_node( array(
        'id'    => 'wpide-page-weight',
        'title' => 'Page weight: ...',
        'href'  => '#',
    ) );
}, 96 );

add_action( 'wp_footer', function () {
    if ( ! is_admin_bar_showing() || ! current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
<script>
(function () {
    var link = document.querySelector('#wp-admin-bar-wpide-page-weight > a');
    if (!link || !window.performance || !performance.getEntriesByType) { return; }
    function kb(b) { return b > 1048576 ? (b / 1048576).toFixed(2) + ' MB' : Math.round(b / 1024) + ' KB'; }
    function collect() {
        var groups = {}, files = [], total = 0;
        var nav = performance.getEntriesByType('navigation')[0];
        if (nav) { total += nav.transferSize || 0; groups.html = nav.transferSize || 0; }
        performance.getEntriesByType('resource').forEach(function (r) {
            var size = r.transferSize || r.encodedBodySize || 0;
            var type = /\.css(\?|$)/.test(r.name) || r.initiatorType === 'css' && /\.css/.test(r.name) ? 'css' : (r.initiatorType === 'script' ? 'js' : (r.initiatorType === 'img' || /\.(png|jpe?g|gif|webp|avif|svg)(\?|$)/.test(r.name) ? 'images' : (/\.(woff2?|ttf|otf)(\?|$)/.test(r.name) ? 'fonts' : 'other')));
            groups[type] = (groups[type] || 0) + size;
            total += size;
            files.push([size, r.name]);
        });
        files.sort(function (a, b) { return b[0] - a[0]; });
        return { groups: groups, files: files, total: total };
    }
    window.addEventListener('load', function () {
        setTimeout(function () { link.textContent = 'Page weight: ' + kb(collect().total); }, 1000);
    });
    link.addEventListener('click', function (e) {
        e.preventDefault();
        var d = collect();
        var lines = Object.keys(d.groups).map(function (k) { return k + ': ' + kb(d.groups[k]); });
        lines.push('', 'Heaviest files:');
        d.files.slice(0, 8).forEach(function (f) { lines.push(kb(f[0]) + '  ' + f[1].split('?')[0]); });
        window.alert('Total: ' + kb(d.total) + '\n\n' + lines.join('\n'));
    });
})();
</script>
    <?php
}, 99 );
```

## Notes

Sizes are the transferred (compressed) bytes reported by your browser; files served from another domain without timing headers count as 0.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Page Weight Summary in the Admin Bar" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/