Architecture Website UX: How to Fix Masonry Portfolio Layout Shift

Fixing Masonry Layout Shifts on Architecture Portfolios

For high-end interior design and architecture firms, visual-heavy portfolios are non-negotiable. However, masonry grids—the design standard for showing off projects of varying shapes and sizes—are a common source of high Cumulative Layout Shift (CLS) scores in Google Lighthouse.

If your portfolio page shifts dynamically as images load, it frustrates users and hurts your Core Web Vitals. As an agency that has built dozens of architectural portfolios, we’ve developed a reliable process to fix this.

1. Avoid jQuery Masonry and Use Modern CSS Grid

Older WordPress themes rely heavily on heavy jQuery libraries to calculate absolute positions for masonry layouts. This calculation runs after the DOM is fully loaded, causing a visible jump on the screen.

Instead, we recommend using modern CSS grid properties. By utilizing grid-template-rows: masonry (where supported) or building clean flexbox wrappers with aspect-ratio, you let the browser calculate the layout before downloading the full image files.

.portfolio-item img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

This simple line of CSS instructs the browser to reserve the exact layout space based on the image's raw dimensions.

2. Fetch and Output Image Dimensions via PHP

A major developer mistake is dynamically injecting images into templates without defining their height and width attributes.

In your custom template loop, make sure you query the attachment metadata directly. Instead of outputting a generic image block, pull the specific dimensions using wp_get_attachment_image_src():

$thumbnail_id = get_post_thumbnail_id($post->ID);
$image_data = wp_get_attachment_image_src($thumbnail_id, 'large');

if ($image_data) {
    $img_url = $image_data[0];
    $width = $image_data[1];
    $height = $image_data[2];
    
    echo '<img src="' . esc_url($img_url) . '" width="' . esc_attr($width) . '" height="' . esc_attr($height) . '" alt="Project Layout" loading="lazy" />';
}

This forces the server to output raw width and height properties in the HTML code. Even if an image takes 2 seconds to download over a weak 3G connection, the portfolio container will not shift or jump.

3. Build on CSS-Optimized Layouts

Fixing an existing, poorly built grid system can sometimes require a complete rebuild of your theme's archive files. If you are starting a fresh project, it is much easier to choose a layout designed with modern rendering paths in mind.

In our recent agency tests, we used the Interar WordPress Theme for an interior design portfolio. The codebase uses modern flex wrappers that automatically assign dimensions to the containers, keeping layout shifts minimal.

If you build sites for various client industries, checking curated selections like the Medit WordPress Theme directory on GPLPal is a great way to find similar, lightweight structures. Getting your themes from GPLPal allows you to run local diagnostic tests and check the database footprint before committing to a client's live production server.

To make sure your development work aligns with official standards, refer to the developer handbooks on WordPress.org for detailed guides on how to properly filter post attachments.

Summary

Building a successful design portfolio requires balancing high-resolution aesthetics with modern technical execution. By ditching outdated script-heavy grid engines and declaring image sizes directly in your templates, you can give your architectural clients a stunning gallery that scores perfectly on performance audits.