US Storage Centers
As lead developer of this website for a self-storage company with hundreds of facilities across 20 states, I built the site on Umbraco CMS with a strong emphasis on page speed. Some highlights:
- Page Speed Overhaul. Led a significant page speed initiative that brought mobile PageSpeed Insights scores to 99–100. This involved replacing Angular with plain JavaScript modules across the site, inlining critical path CSS directly in the HTML with the full stylesheet lazy-loaded after initial paint, and continuously monitoring performance with DebugBear to catch regressions early.
- Deferred DOM Strategy. Pages originally had 4,000+ DOM elements, so I employed several strategies to cut that down. The footer is stored in a
<template>element and lazily injected after load. The header excludes its full navigation menu from the initial HTML, loading those items via AJAX only when the menu is expanded. Large page sections are deferred with pagination and “View More” buttons to keep the initial DOM lean. - LCP Image Optimization. Built a custom Web Component that injects a base64-encoded WebP
<source>into the<picture>element for mobile viewports, giving users an instant hero image from the initial HTML payload with zero network requests. On first user interaction, a higher-resolution image swaps in and the component removes itself from the DOM. This technique was used on the homepage hero and the facility detail pages (which contain a slideshow), yielding meaningful LCP improvements without sacrificing image quality. - Responsive Images. All images are converted to WebP and resized on the server on demand via URL query string parameters, with
<picture>elements serving optimized sources across multiple breakpoints. The markup was structured to make it easy to define these different image variations per breakpoint, ensuring every device downloads only the resolution it needs. - Caching Architecture. Configured Cloudflare to strip unnecessary query strings so that URL variations resolve to the same cached page, achieving near-100% cache hit rates. Pages are served from cache while revalidating in the background to stay fresh, and Umbraco publish events trigger Cloudflare API calls to purge affected pages immediately.
- Conditional Script Loading. Third-party ad tracking scripts injected by Google Tag Manager are loaded conditionally based on traffic source, so pages that don’t need heavy tracking scripts avoid loading them entirely.
- Storage CRM Integration. Integrated heavily with the storage industry CRM to display real-time unit availability, pricing, and facility details across all location pages. This involved substantial business logic to map CRM data to the website’s content model.
- Location Pages. Each facility has its own page with unit sizes, pricing, availability, amenities, access hours, and directions. These pages pull live data from the CRM and are supplemented by CMS-managed content built on a widget-based architecture, where named widgets are rendered server-side and composed per page.
- Umbraco CMS. All non-CRM content is fully editable in the Umbraco back office, including facility descriptions, promotions, and page layouts. The site is built on my Wireframe Starter Kit (WiSKi), a comprehensive backend/frontend foundation I created that served as the starting point for most websites at Rhythm, a supercharged theme that handled common patterns like routing, templating, and content modeling out of the box.
