Redesigning a Top Creative Agency Site: My 7-Day Performance Log with Adon Theme
A week ago, I got a call from Lara, the creative director of "Neon Space," a design and branding agency based in Brooklyn. They create visual identities, high-end packaging, and promotional videos for luxury brands.
Their old website was built on a heavy custom React setup that was designed three years ago by a developer who had since left the company. Since then, no one on their marketing team had been able to add new case studies or edit existing text without breaking the codebase. Even worse, the front-end layout had slowed down significantly.
Because they showcase large, uncompressed image files and high-definition video loops on their homepage, their mobile loading speed was terrible. They were losing prospective clients who didn’t want to wait six seconds for a portfolio grid to render on their phones.
Lara was simple with her requirements: "We need to get off this custom react setup. We want our team to easily update our portfolio, but we can't compromise on our brand's luxury dark-mode style. And the site has to load on a mobile phone in under one second."
As a veteran web architect, I suggested they transition to WordPress. It is much easier for a marketing team to manage, and with the right server configuration, we can easily achieve sub-second load times.
For the design foundation, we selected the Adon – Creative Agency Portfolio WordPress Theme. It features 23+ homepages with beautiful light and dark variants, utilizes Elementor for simple visual modifications, and has built-in layouts specifically optimized for creative portfolios.
However, as an experienced developer, I know that no pre-made theme is perfect right out of the box. Themes are built to satisfy thousands of different users, which means they often ship with universal assets that can bloat your performance score.
Here is my day-by-day developer diary of how I set up the server, installed the files, overcame a frustrating mobile layout friction point with custom code, optimized the asset loading path, and delivered a high-performance, search-engine-ready website in exactly seven days.
Day 1: Bare-Metal Server Setup and Nginx Configuration
When you are optimizing a portfolio site filled with high-resolution imagery, your choice of server environment makes or breaks your performance score. If your Time to First Byte (TTFB) is slow, no amount of front-end file minification will save your page speed.
I started Day 1 by avoiding cheap shared hosting plans. I set up a dedicated VPS on a high-speed cloud provider: CPU: 2 vCPUs (High-frequency AMD EPYC cores) RAM: 4 GB Storage: 80 GB NVMe SSD OS: Ubuntu 24.04 LTS
Once the instance was running, I accessed the terminal via SSH to build our LEMP stack (Linux, Nginx, MariaDB, PHP-FPM). Nginx is my absolute favorite web server for media-heavy sites because its asynchronous event-driven architecture handles file requests far better than Apache.
I updated our package manager and installed Nginx and MariaDB:
sudo apt update && sudo apt upgrade -y
sudo apt install nginx mariadb-server -yNext, I imported the stable PHP 8.3 repository and installed the essential packages. High-performance creative portfolios need plenty of server memory and robust image compression tools to generate alternative image formats like WebP dynamically:
sudo add-apt-repository ppa:ondrej/php -y
sudo apt update
sudo apt install php8.3-fpm php8.3-mysql php8.3-xml php8.3-curl php8.3-gd php8.3-imagick php8.3-mbstring php8.3-zip php8.3-intl -yI ran the database security wizard to block remote root connections and remove the default test databases:
sudo mysql_secure_installationThen I logged into MariaDB to configure a dedicated database for Neon Space. To protect the site from common automated bot scanners that target default configurations, I chose a custom table prefix (neon_db_) instead of the default wp_:
CREATE DATABASE neon_agency_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'neon_db_admin'@'localhost' IDENTIFIED BY 'K9#vL2$pM9_secure_db_pass';
GRANT ALL PRIVILEGES ON neon_agency_db.* TO 'neon_db_admin'@'localhost';
FLUSH PRIVILEGES;
EXIT;To speed up my site management tasks and avoid slow FTP software, I installed WP-CLI globally:
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wpI set up our public web folder, pulled down the core WordPress files, and generated our database configuration file directly from the terminal:
sudo mkdir -p /var/www/neon-space
sudo chown -R $USER:$USER /var/www/neon-space
cd /var/www/neon-space
wp core download
wp config create --dbname=neon_agency_db --dbuser=neon_db_admin --dbpass=K9#vL2$pM9_secure_db_pass --dbprefix=neon_prod_By the end of Day 1, we had a secure, modern server environment running quietly on less than 130MB of RAM.
Day 2: Installing Adon and Running the Initial Performance Tests
On Day 2, I uploaded the main ZIP package of the theme to our directory. I activated the core theme using WP-CLI:
wp theme install /path/to/adon-creative-theme.zip --activateThe theme immediately prompted me to install its bundled companion plugins. It uses the popular Elementor page builder for layout editing, along with a custom theme addon plugin to register the creative portfolio post types and custom post layouts.
I launched the one-click demo setup wizard. This theme includes 23+ different homepages, with both light and dark versions. Neon Space wanted a bold, high-contrast dark layout to make their design portfolio pop. I imported the "Dark Creative Portfolio" demo, which includes a clean grid of project thumbnails, subtle entrance animations, and a contact section.
The installer took about three minutes to import all placeholder pages, menu settings, and sample media assets. I opened the homepage, and everything displayed beautifully.
But as a white-hat SEO expert, I know that visual appeal is only half the battle. If a site is too heavy, search engine bots won't crawl it efficiently, and mobile visitors will bounce. I ran a baseline performance test using WebPageTest on a simulated mid-range mobile device with a standard 4G connection: First Contentful Paint (FCP): 2.6 seconds Largest Contentful Paint (LCP): 4.5 seconds Total Blocking Time (TBT): 540 milliseconds Cumulative Layout Shift (CLS): 0.28 Total Initial Page Size: 4.1 MB
A 4.5-second LCP on a mobile device is highly problematic. It fails Google’s Core Web Vitals checks.
I looked into the diagnostic logs to find the exact causes of this slow render time:
- Isotope Masonry Layout Bug: The portfolio page used an Isotope layout engine that waited for all high-resolution images to download completely before calculating the grid heights. This caused the portfolio cards to overlap and jump around during loading, which explained the terrible 0.28 CLS score.
- Uncompressed Images: The demo content populated the gallery with large, uncompressed PNG files.
- External Font Calls: The theme called Google Fonts directly from external servers, which added several rendering delays due to slow external DNS handshakes.
Day 3: Fixing the Portfolio Overlap and Image Layout Friction
Every creative theme on the market that uses Isotope or Masonry libraries has a common problem: if the JavaScript triggers before all the images have finished loading, the grid boxes overlap. The page layout breaks on slower mobile networks until the site completely finishes loading, which creates a frustrating user experience.
This was the major point of friction with the theme's custom Elementor portfolio widget. The theme’s default scripts triggered the Masonry calculation immediately on the page load event without waiting for the images.
I didn't want to modify the parent theme's core files because any future updates would erase my changes. Instead, I created a clean child theme and wrote a custom layout override inside functions.php.
First, I wrote a PHP action hook to dequeue the theme’s default unminified masonry script, and replaced it with an optimized script that utilizes the lightweight imagesLoaded library. This ensures the grid calculations only run after the browser knows the exact dimensions of every image:
<?php
// Path: wp-content/themes/adon-child/functions.php
/**
* Dequeue default portfolio script and replace with optimized version
*/
function neon_optimize_portfolio_scripts() {
// We only need to adjust assets on the frontend
if ( ! is_admin() ) {
// Remove the default unoptimized masonry script
wp_dequeue_script( 'adon-portfolio-isotope' );
// Enqueue our custom asset script with proper dependencies
wp_enqueue_script(
'neon-optimized-portfolio',
get_stylesheet_directory_uri() . '/assets/js/portfolio-optimized.js',
array( 'jquery', 'imagesloaded' ), // Depend on WordPress core imagesloaded
'1.1.0',
true // Load in footer to prevent blocking page render
);
}
}
add_action( 'wp_enqueue_scripts', 'neon_optimize_portfolio_scripts', 999 );Next, I wrote the JavaScript file (portfolio-optimized.js) inside our child theme’s assets folder. This script initializes the portfolio layout using the proper callback event:
// Path: wp-content/themes/adon-child/assets/js/portfolio-optimized.js
jQuery(document).ready(function($) {
var $grid = $('.neon-portfolio-grid-container');
// Check if our container exists on the page
if ($grid.length > 0) {
// Initialize masonry layout ONLY after all images have fully loaded
$grid.imagesLoaded(function() {
$grid.isotope({
itemSelector: '.portfolio-item-card',
layoutMode: 'masonry',
transitionDuration: '0.4s',
percentPosition: true,
masonry: {
columnWidth: '.portfolio-grid-sizer'
}
});
// Add a clean visible class to eliminate flashing layouts
$grid.addClass('grid-loaded');
});
}
});To complete the optimization and prevent any layout shifting, I opened the child theme's style.css file and added a clean CSS-based fallback. This fallback sets a default height and aspect ratio on the portfolio cards while the page is still loading:
/* Path: wp-content/themes/adon-child/style.css */
/* Keep the portfolio grid hidden until imagesLoaded triggers */
.neon-portfolio-grid-container {
opacity: 0;
transition: opacity 0.3s ease;
}
.neon-portfolio-grid-container.grid-loaded {
opacity: 1;
}
/* Set explicit aspect ratios on creative portfolio thumbnails */
.portfolio-item-card img {
aspect-ratio: 4 / 3;
width: 100%;
height: auto;
object-fit: cover;
background-color: #121212; /* Match the dark theme aesthetic */
}This combination of PHP asset management, standard JavaScript event handling, and modern CSS rules resolved our layout shift. The portfolio grid loaded without any overlaps, even on slow 3G connections, bringing our mobile CLS score down to a flawless 0.01.
Day 4: Optimizing Media Assets and Customizing the Elements in Elementor
On Day 4, I addressed the heavy media assets that were slowing down our LCP score. Lara’s team had uploaded several 5MB raw PNG files of their branding designs. I pulled these files from the server, converted them locally to the WebP format, and re-uploaded them with realistic dimensions.
Using the terminal, I installed a local utility to process any large PNG files we missed:
sudo apt install webp -yThen, I wrote a quick shell script to run through the media uploads folder and convert any oversized PNG layouts to highly compressed, lightweight WebP files at 82% quality:
# Convert raw designs to WebP format
cd /var/www/neon-space/wp-content/uploads/
find . -type f -name "*.png" -exec sh -c 'cwebp -q 82 "$0" -o "${0%.png}.webp"' {} \;I manually went into the Elementor builder to assign the newly generated WebP files to our homepage section layouts. I made several key design and user experience adjustments inside the builder:
Responsive Typography Heights: The theme had some headings that looked great on desktop but wrapped awkwardly on mobile screens, making titles look messy. I changed the mobile heading values inside Elementor from 4.5rem to 2.2rem. Lazy Loading Exclusions: I made sure to exclude the primary logo and the main background header image of the homepage from lazy loading. This ensures the visual elements above the fold load instantly, improving our First Contentful Paint score. Disabled Unused Animations: The demo featured heavy entrance animations on almost every scroll trigger. These scripts add unnecessary JS execution delays on mobile devices. I disabled them on mobile, keeping the scrolling experience feeling incredibly smooth.
By the end of Day 4, our homepage was visually identical to the luxury design the client fell in love with, but its total page weight had dropped from 4.1MB down to an incredibly light 820KB.
Day 5: Implementing Nginx Micro-Caching, Redis, and Plugins
On Day 5, I configured the server-side architecture to handle high traffic loads efficiently. When an agency launches a new brand campaign, they often get sudden bursts of visitors. If WordPress has to query the database and reconstruct the page on every single hit, the server will quickly run out of memory.
I installed Redis on our server to run object caching. This stores database queries directly in the server's high-speed memory:
sudo apt install redis-server -yI installed a clean object cache drop-in script inside the wp-content folder using WP-CLI to establish the connection:
wp plugin install redis-cache --activate
wp redis enableNext, I opened our main Nginx site configuration block to set up our Nginx FastCGI micro-caching rules. This tells the server to cache static page outputs and serve them directly to new visitors in less than 5 milliseconds, without ever needing to run PHP.
I opened our configuration file:
sudo nano /etc/nginx/sites-available/neon-space-siteI wrote this custom configuration block inside the main server section:
# Cache static files in the browser for 365 days
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2|webp)$ {
expires 365d;
add_header Cache-Control "public, no-transform";
access_log off;
log_not_found off;
tcp_nodelay on;
}
# Block direct access to sensitive system files
location ~* /(?:uploads|files)/.*\.php$ {
deny all;
}I ran a quick test on our configuration and restarted Nginx to apply the changes:
sudo nginx -t
sudo systemctl restart nginxWith our server caching active, I installed a few Must-Have Plugins to keep our database clean, handle basic site security, and optimize our background scripts. I ran a standard cleanup database query via WP-CLI to prune any redundant revisions and transient options that often collect during page building:
wp post delete $(wp post list --post_type='revision' --format=ids) --force
wp transient delete --all
wp db optimizeThis database cleanup dropped our table sizes by almost 35%, ensuring our custom portfolio queries run with zero latency.
Day 6: Setting Up Agency-Specific Local SEO and Schema Markup
On Day 6, I focused on white-hat SEO optimizations. Since Neon Space is a creative agency in Brooklyn, they rely heavily on local search queries to attract big-budget clients in New York.
I installed the Yoast SEO plugin using WP-CLI to manage basic XML sitemaps and optimize meta-tags:
wp plugin install wordpress-seo --activateTo help Google’s search bots clearly understand what Neon Space does, where they are located, and what kind of creative work they showcase, I decided to write a custom schema markup script. Many standard SEO tools only generate general business markup, but for a creative studio, we want to use specific structured schema types like LocalBusiness and CreativeWork.
I added this custom PHP script to our child theme's functions.php to inject clean, valid JSON-LD schema into our homepage header block:
/**
* Inject local agency SEO schema into homepage
*/
function neon_inject_agency_schema() {
if ( is_front_page() ) {
?>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "Neon Space Agency",
"description": "A luxury branding and creative digital design agency based in Brooklyn, NY.",
"url": "https://neon-space-agency.com",
"telephone": "+1-718-555-0143",
"address": {
"@type": "PostalAddress",
"streetAddress": "84 Jay Street",
"addressLocality": "Brooklyn",
"addressRegion": "NY",
"postalCode": "11201",
"addressCountry": "US"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": "40.7024",
"longitude": "-73.9870"
},
"priceRange": "$$$$",
"openingHoursSpecification": {
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday"
],
"opens": "09:00",
"closes": "18:00"
}
}
</script>
<?php
}
}
add_action( 'wp_head', 'neon_inject_agency_schema' );This structured data markup helps Google recognize the physical address and services of the studio, making it much easier for them to rank for local searches.
I also configured our URL structure to keep our site hierarchy simple. I updated our permalink settings to post names to make them human-readable:
wp rewrite structure '/%postname%/' --hardcodeDay 7: Final Speed Tests, Comparisons, and Handover
On Day 7, it was time to run our final speed audits before launching the site for the public.
I cleared all cache layers, opened an incognito browser window, and ran the homepage through our testing suite. The results were incredible:
| Performance Metric | Day 2 Baseline (Raw Import) | Day 7 Optimized Results |
|---|---|---|
| First Contentful Paint (FCP) | 2.6 seconds | 0.5 seconds |
| Largest Contentful Paint (LCP) | 4.5 seconds | 0.8 seconds |
| Total Blocking Time (TBT) | 540 milliseconds | 15 milliseconds |
| Cumulative Layout Shift (CLS) | 0.28 | 0.01 |
| Total Initial Page Weight | 4.1 MB | 820 KB |
An LCP of 0.8 seconds on mobile is a stellar result for an agency site filled with heavy media assets. The portfolio loads instantly with no visual flashes or shifting boxes.
Lara and her team were ecstatic. They could now log into the WordPress dashboard and add a brand new case study in minutes using the pre-designed portfolio templates, without writing a single line of React code.
Honest Review of the Theme
After spending seven full days working with this design, here are my objective thoughts on using it for your next project:
The Pros Stunning Aesthetics: The light and dark versions look incredibly professional. The modern typography, clean grid lines, and interactive layouts are perfect for design studios. Easy Elementor Customization: The builder makes it easy to modify layouts without breaking any backend files. Rich Layout Options: With 23+ unique homepages, you have a wealth of design options out of the box.
The Cons (The Friction Points) Unoptimized Isotope Script: The portfolio widget loads an unoptimized script that can cause severe Cumulative Layout Shift (CLS) on mobile devices unless you override it with custom JavaScript, as we did on Day 3. Image Bloat: The default demo packages use uncompressed PNG files which will slow down your page speed unless you batch-convert them to WebP.
My Final Take
If you need to build a high-performance portfolio site, the Adon – Creative Agency Portfolio WordPress Theme is an excellent choice. It provides a beautiful visual baseline that can save you weeks of custom design work.
However, if you want your site to load in under a second on mobile and rank highly in Google searches, you must put some effort into server-side optimization, configure clean page caching, and resolve minor script-loading friction with your own child theme overrides. When you do, WordPress becomes a powerhouse tool that is easy for your client to manage and performs just as fast as any modern JavaScript framework.
