Rebuilding Precision Creative

I rebuilt Precision Creative's initial website, originally built without web development expertise, into a lighter, more accessible, organized, and optimized platform.
Tech stack
Sole developer
A screenshot of the new front page for Precision Creative


The workflow for the project had three main phases.

  1. Tech Stack Selection (Phase 1): The need for a CMS editable by the marketing team led me to use WordPress for its reliability, openness, and flexibility.
  2. Custom Theme Development (Phase 2): Created a "block" system using PHP, Sass, and Advanced Custom Fields plugin, empowering the marketing team with pre-defined front-end components for flexible page building.
  3. Content Addition and Optimization (Phase 3): Ensured content addition and optimization, resulting in exceptional Lighthouse scores and improved SEO.
 * Check to see if the page has blocks.
if (have_rows('blocks')) {

   * Loop through each block.
  while (have_rows('blocks')) {

     * Render the blocks.
     * Each block will pull in data from the CMS, populate the data
     * into the template, and display itself. 
    if ('text' === get_row_layout()) {
      echo get_template_part('blocks/text.php');
    } elseif ('image' === get_row_layout()) {
      echo get_template_part('blocks/image.php');


The absence of code splitting posed a challenge, addressed by manually segmenting CSS using Sass modules and implementation of efficient caching resulted in efficient resource delivery tailored to each page's needs.

Lessons learned

Key takeaways included simplifying backend usability for the marketing team, structuring the custom theme effectively, and implementing optimization techniques to enhance core web vital scores like LCP, CLS, and FID. Strategies such as preloading critical fonts, adhering to accessibility guidelines, optimizing images, caching, and limiting third-party scripts significantly contributed to improved performance metrics.