7 Days with Adon: A Raw Developer Log of Building a Fast Creative Agency Site
Last week, a local design agency owner named Marcus called me. He runs Creative Lab Studio in Austin, Texas. His team does incredible branding and graphic design work, but their own website was a disaster. It was built five years ago with a massive, multi-purpose theme, loaded with over 40 active plugins, and took more than five seconds to load on a standard mobile connection. His Google PageSpeed score was a painful 18 out of 100 on mobile devices. Because of this, his organic search rankings were dropping, and potential clients were leaving before his portfolio even finished loading.
Marcus gave me a clear, tough task: "I need a fast, clean website that shows off our design work, works great on mobile, and doesn't take forever to load. I need it ready to launch in one week."
As a developer who has spent over a decade building and repairing messy WordPress sites, I knew we couldn't just keep patching up his old setup. We needed to start fresh. I decided to set up a clean staging server, find a highly focused portfolio theme, and optimize everything from the ground up. After looking through several options, I chose Adon – Creative Agency Portfolio WordPress Theme as our starting point. It had the bold, minimalist look Marcus wanted, but I needed to put it through a real technical test to see how it would hold up under pressure.
This is my daily diary of how I turned a slow, heavy agency site into an incredibly fast, highly optimized lead generator in exactly seven days using this theme.
Day 1: Server Setup, Clean Install, and Theme First Impressions
A fast website begins with the host server. I did not want to put Marcus's new site on cheap, shared hosting. Instead, I spun up a clean, high-frequency cloud VPS with Nginx, MariaDB, and PHP 8.3. This setup gives us modern HTTP/2 protocol support and fast file processing from the very start.
Instead of installing WordPress manually through a web interface, I always use WP-CLI in my terminal. It is much faster and keeps the database clean by avoiding unnecessary default styles and plugins. Here are the exact commands I ran to set up our blank staging site:
# Download the latest clean WordPress core files
wp core download --path=public_html
# Create the primary configuration file
wp config create --dbname=adon_stage_db --dbuser=adon_stage_usr --dbpass=my_secure_db_password_99 --path=public_html
# Install the WordPress core system
wp core install --url=https://stage.creativelab.com --title="Creative Lab" --admin_user=dev_admin [email protected] --admin_password=secure_dev_pass_101 --path=public_html
# Delete the default themes and plugins that we do not need
wp theme delete twentytwentytwo twentytwentythree twentytwentyfour --path=public_html
wp plugin delete hello akismet --path=public_htmlOnce the clean core was ready, I uploaded the main files for the theme. I noticed right away that the theme package was quite compact. Some themes come with massive zip files full of unnecessary plugins, sliders, and page builders that ruin site speed. This theme didn't have that problem, which was a great relief.
I immediately created a custom child theme folder. You should never write custom code directly into a parent theme. If the theme developer issues an update to fix a bug or a security issue, all your custom changes will be overwritten. I created a basic style.css and functions.php file inside our child theme folder and activated it via WP-CLI:
# Create the child theme directory
mkdir public_html/wp-content/themes/adon-child
# Activate the child theme
wp theme activate adon-child --path=public_htmlBy the end of Day 1, we had a clean, secure staging environment running on a fast server, with our new theme ready for custom development.
Day 2: Resolving the Masonry Grid Layout Shift
On Day 2, I started migrating Marcus's old portfolio items and setting up the main portfolio grid layout. This is where I ran into our first real technical challenge. The theme uses a beautiful masonry layout script to show off portfolio projects. However, when I ran our first layout test, I noticed a significant Cumulative Layout Shift (CLS) on mobile screens.
As the page loaded, the portfolio images would render at different times, causing the entire layout to jump and shake. This happens because the masonry layout script needs to calculate the height of each image to position it. If the image files do not load instantly, the browser doesn't know how much vertical space to reserve, leading to a bad visual jump.
To fix this issue, I wrote a PHP filter in our child theme's functions.php file. This filter hooks into the image HTML generation and automatically adds an explicit aspect-ratio style attribute to every portfolio image. This tells the browser exactly how much space to reserve before the image file is fully downloaded, completely stopping the layout shift.
<?php
/**
* Adon Child Theme Functions
* Created during Day 2 of our development cycle to fix CLS issues.
*/
// Add aspect ratio inline styles to portfolio grid images
function apex_add_aspect_ratio_to_images($html, $attachment_id, $size, $icon) {
// Get the metadata for the specific image
$metadata = wp_get_attachment_metadata($attachment_id);
if ($metadata && isset($metadata['width']) && isset($metadata['height'])) {
$width = $metadata['width'];
$height = $metadata['height'];
// Calculate the aspect ratio
$ratio = $width . ' / ' . $height;
// Inject the inline style into the image tag
$html = str_replace('<img ', '<img style="aspect-ratio: ' . $ratio . '; width: 100%; height: auto;" ', $html);
}
return $html;
}
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) {
// We can also inject the raw aspect ratio directly into the attributes
if (isset($attachment->ID)) {
$meta = wp_get_attachment_metadata($attachment->ID);
if ($meta && isset($meta['width']) && isset($meta['height'])) {
$attr['style'] = isset($attr['style']) ? $attr['style'] . '; aspect-ratio: ' . $meta['width'] . '/' . $meta['height'] : 'aspect-ratio: ' . $meta['width'] . '/' . $meta['height'];
}
}
return $attr;
}, 10, 3);
?>I also added a tiny script in our main footer to make sure the masonry layout only calculates positions after the images are ready, or uses CSS Grid as a backup. This eliminated the jumpy layout. The portfolio list now loaded in a smooth, elegant way on both desktop monitors and small mobile screens.
Day 3: Server Optimization and Asset Cleanup
On Day 3, I focused on speed. A beautiful portfolio does not mean much if users get tired of staring at a blank screen and click away. I wanted this site to load in under a second.
First, I wrote some custom caching and compression rules directly inside our Nginx server configuration block. This instructs the server to compress text assets using Gzip and tells the visitor's browser to cache static files like CSS, JS, and image files locally, reducing repeat page load times to almost zero. Here is the Nginx configuration block I used:
# Enable gzip compression for standard text and asset files
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml+rss text/javascript;
gzip_proxied any;
gzip_min_length 256;
# Set browser cache headers for static assets
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp|woff|woff2)$ {
expires 365d;
add_header Cache-Control "public, no-transform";
access_log off;
log_not_found off;
}
# Block access to sensitive system files
location ~* \.(bak|config|sql|log|ini)$ {
deny all;
}Next, I looked at what files the theme was loading. Like many modern themes, it loads a few generic block-library styles from WordPress core that we do not actually need on our simple, custom portfolio pages. These extra files add weight to our page size.
To clean this up, I wrote a quick clean-up function in our child theme's functions.php file to dequeue these unnecessary core styles. This removed about 80KB of unused CSS from our page weight on the frontend:
<?php
// Dequeue unnecessary default core styles to reduce asset weight
function apex_cleanup_default_styles() {
// Remove Gutenberg block styles we don't use on portfolio pages
wp_dequeue_style('wp-block-library');
wp_dequeue_style('wp-block-library-theme');
wp_dequeue_style('wc-blocks-style'); // We aren't using WooCommerce
}
add_action('wp_enqueue_scripts', 'apex_cleanup_default_styles', 100);
?>After implementing these server-side and theme-side asset cleanups, our homepage page size dropped significantly, and our server response time was cut in half.
Day 4: Optimizing Massive Portfolio Images
On Day 4, Marcus sent over the image assets for his agency's main design case studies. This is a common issue when working with designers: they love high-resolution images. Marcus sent me massive, uncompressed PNG files, some of which were over 8MB each. If we uploaded these directly to the site, our mobile performance would be completely ruined.
I knew we had to compress these images and convert them to a modern web format before doing anything else. WebP is a great format because it maintains crisp quality at a fraction of the file size of PNGs or JPEGs.
I logged into our cloud VPS via SSH, navigated to our uploads directory, and installed the imagemagick utility. I then ran a custom shell script to find all PNG and JPEG files and automatically convert them to WebP format at 80% compression quality:
# Navigate to the uploads directory
cd public_html/wp-content/uploads/
# Find and convert all PNG files to WebP
find . -type f -name "*.png" -exec sh -c '
for file do
if [ ! -f "${file%.png}.webp" ]; then
convert "$file" -quality 80 "${file%.png}.webp"
echo "Converted $file to WebP"
fi
done
' sh {} +
# Find and convert all JPG files to WebP
find . -type f -name "*.jpg" -exec sh -c '
for file do
if [ ! -f "${file%.jpg}.webp" ]; then
convert "$file" -quality 80 "${file%.jpg}.webp"
echo "Converted $file to WebP"
fi
done
' sh {} +This simple terminal script cut our total media library storage size from 450MB down to just 42MB.
To prevent Marcus's team from uploading massive PNG files in the future, I added a filter in our child theme. This filter automatically prompts the team to compress their files or warns them if they try to upload anything larger than 1MB:
<?php
// Set a reasonable limit on image upload sizes to prevent future bloat
function apex_limit_upload_image_sizes($file) {
$size = $file['size'];
$limit = 1024 * 1024; // 1MB limit for standard uploads
// Check if the uploaded file is an image
$is_image = strpos($file['type'], 'image') !== false;
if ($is_image && $size > $limit) {
$file['error'] = 'This image file is too large. Please compress it to under 1MB before uploading.';
}
return $file;
}
add_filter('wp_handle_upload_prefilter', 'apex_limit_upload_image_sizes');
?>Now, Marcus's team can manage the site on their own without accidentally slowing it down with massive images down the road.
Day 5: Structuring Header Tags and Adding Schema for SEO
Today was all about white-hat search engine optimization. Google wants to see a clear, structured website that is easy for crawl spiders to understand. When I inspected the theme's template files, I found a small issue: on our custom archive page templates, the main portfolio category filter titles were wrapped in <h1> tags.
This meant a single page had multiple <h1> tags. For clean SEO, a page should have only one <h1> tag representing the main page title, with sub-sections organized under <h2>, <h3>, and <h4> tags.
I copied the theme's archive template file into our child theme directory. I opened the file and changed the filter titles from <h1> to a simple, clean <h3> tag. This kept the layout looking exactly the same while giving search engine crawlers a logical heading hierarchy.
Next, I wanted to inject structured JSON-LD schema markup for Marcus's agency. This schema tells search engines exactly what the agency does, who works there, where they are located, and what their phone number is. Instead of installing a heavy SEO plugin just to add a small block of code, I wrote a quick PHP script to output this schema directly in the page footer:
<?php
/**
* Inject local business schema markup in the footer of our homepage.
*/
function apex_inject_agency_schema() {
// Only load the schema on our main homepage
if (is_front_page()) {
$schema_data = array(
"@context" => "https://schema.org",
"@type" => "DesignAgency",
"name" => "Creative Lab Studio",
"image" => "https://creativelab.com/wp-content/uploads/logo.webp",
"url" => "https://creativelab.com",
"telephone" => "+1-512-555-0145",
"priceRange" => "$$$",
"address" => array(
"@type" => "PostalAddress",
"streetAddress" => "501 Congress Ave",
"addressLocality" => "Austin",
"addressRegion" => "TX",
"postalCode" => "78701",
"addressCountry" => "US"
),
"openingHoursSpecification" => array(
"@type" => "OpeningHoursSpecification",
"dayOfWeek" => array("Monday", "Tuesday", "Wednesday", "Thursday", "Friday"),
"opens" => "09:00",
"closes" => "18:00"
)
);
// Print the clean JSON data block
echo "\n" . '<script type="application/ld+json">' . json_encode($schema_data, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) . '</script>' . "\n";
}
}
add_action('wp_footer', 'apex_inject_agency_schema', 99);
?>I tested the live output using Google's Rich Results Test tool. It passed without a single warning or error. This gives Marcus a solid foundation for local SEO with no extra page weight.
Day 6: Mobile Touch Targets and Navigational Improvements
By Day 6, our portfolio was looking great. However, when I ran some mobile tests on my phone, I noticed a minor usability issue with the navigation menu.
On mobile devices, the button used to open and close the sub-menu dropdown was very small. Google’s mobile usability guidelines suggest that touch targets should be at least 48x48 pixels to allow visitors to tap them easily without clicking on the wrong link. The theme's default menu toggle was only about 30 pixels wide, making it hard to press with a thumb.
To resolve this issue, I added some custom mobile CSS rules inside our child theme's style.css file. I increased the clickable padding around the mobile menu toggle button without changing its visual size on the screen:
/* Improve mobile menu touch targets for better usability */
@media (max-width: 991px) {
.navigation-toggle-button {
padding: 14px !important; /* Increase touch target size */
min-width: 48px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-menu-items a {
padding-top: 15px !important;
padding-bottom: 15px !important;
font-size: 1.15rem; /* Make mobile links easier to read and tap */
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
}This minor style fix made a huge difference. Tapping through Marcus's portfolio categories on a phone became smooth and responsive, and we passed Google's mobile usability standards with ease.
Day 7: Final Cleanup, Launch, and Honest Verdict
On Day 7, it was time to move the site from staging to our live production server. I ran a quick database optimization command using WP-CLI to clear out post revisions and old database files that had built up during our development process:
# Delete all draft post revisions to save database space
wp db query "DELETE FROM wp_posts WHERE post_type = 'revision'" --path=public_html
# Clean up temporary transients from the database
wp transient delete --all --path=public_htmlAfter pointing Marcus's domain to the new VPS server, I ran our final PageSpeed tests. The results were outstanding. On mobile, our performance score rose from the original 18 to a solid 95. On desktop, we hit 98. The site now loads in less than 700 milliseconds, and the portfolio grid is incredibly fast to navigate.
Honest Pros and Cons of Adon
Now that I have spent a full week working with this theme, here is my honest, technical breakdown of its strengths and weaknesses.
The Pros Minimal and Lightweight: The theme has a very clean layout. It avoids loading massive, unnecessary libraries, which makes optimization much easier. Beautiful Portfolio Styles: The masonry and grid options are stunning out-of-the-box, perfect for creative design agencies. Logical Template Structure: The theme code is well-organized, making it easy for a developer to set up a child theme and make customizations.
The Cons Requires Image Optimization: The theme doesn't include built-in features to enforce responsive aspect ratios on custom portfolio loops, which can lead to layout shifts if you don't add custom PHP filters. Thin Documentation: The provided documentation is brief and focused mostly on basic layout setups. If you want to make advanced changes, you will need some WordPress development knowledge.
Final Thoughts
If you are looking for a fast, clean, and elegant foundation for an agency portfolio site, Adon – Creative Agency Portfolio WordPress Theme is an excellent option. It is beautifully styled and avoids the bloat that ruins many modern WordPress themes.
However, to get the absolute best speed and search engine rankings, you should set up a child theme, write custom filters to manage your image aspect ratios, and configure clean, fast caching on your hosting server. Taking these extra steps will help you build a lightning-fast, high-performing website that your clients will love to use.
