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.
Opens WPIDE on
Code
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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.