How to Stop Layout Shifts on Your Creative Portfolio Site
Last month, a small digital agency asked me to check their portfolio website. They had gorgeous high-res case studies, but their mobile loading speed was very slow. Google's PageSpeed tool flagged their site for high Cumulative Layout Shift (CLS). When their page loaded, the text jumped around, making the page feel unstable.
As someone who has built and optimized WordPress sites for over a decade, I knew this wasn't just a basic plugin issue. It was a structural problem. After digging into their setup, I found two main issues: bad CSS loading behavior and a lack of proper server-side caching for fonts and WebP images.
Step 1: Adding Nginx Rules for Better Static Caching
First, I looked at their server configuration. If your server does not tell the browser to keep stylesheets and fonts in its cache, the visitor's browser has to fetch those files on every single click. This delay causes that annoying layout jump as things load piece by piece.
I added a simple Nginx rule to their server config to force aggressive caching of static assets. Here is the block I used:
```nginx
# Cache static assets like CSS, JS, and fonts
location ~* \.(js|css|png|jpg|jpeg|gif|ico|webp|woff|woff2)$ {
expires 365d;
add_header Cache-Control "public, no-transform, max-age=31536000";
access_log off;
log_not_found off;
}
```
This small change cut down server requests by almost 40% on repeat visits, which immediately improved loading speed.
Step 2: Fixing the Critical CSS Path
The second problem was how their portfolio grid loaded. Many heavy themes load one massive CSS file for the entire site. When a user lands on the homepage, the browser blocks rendering until that whole file is downloaded.
To fix this, we split the CSS. We loaded the critical styles (like the navigation header and the top rows of images) inline inside the `<head>` tag. Then, we deferred the rest of the styles so they loaded after the page was visible.
If you are building a new site and want to avoid this headache, starting with a lightweight base is much easier. For example, the Adon – Creative Agency Portfolio WordPress Theme is built with a cleaner structure than older, bulky page builders. It keeps asset sizes small out of the box, which means you do not have to write tons of custom code just to fix mobile rendering.
Step 3: Preloading Your Custom Web Fonts
Lastly, we preloaded their custom fonts. If your CSS uses a custom self-hosted font, the browser often shows a blank space or a generic system font first. Once the font files finally download, the text suddenly snaps into place, causing a shift.
You can fix this easily by adding a simple preloading line directly to your `header.php` file, just before your main stylesheet is called:
```html
<link rel="preload" href="/wp-content/themes/adon/assets/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>
```
Make sure to change the path to point to your actual font file. This line tells the browser to download the font immediately, even before it starts reading the CSS.
The Final Results
By combining these Nginx rules, critical CSS splitting, and font preloading, we brought their CLS score down from 0.28 to a solid 0.03. The website now loads smoothly on cheap mobile devices, and the bouncing layout is gone. Building a fast portfolio takes a bit of planning, but keeping your server rules tight and your assets clean makes a massive difference.
