There is a cruel irony to digital marketing. You spend so much time helping your clients, that you often forget to take care of your own digital well-being. As a digital marketer, this can also be embarrassing as a potential client’s initial impression of us is what they see on our website. Until recently, our site was outdated and full of stock videos that we had acquired to fill the void — until we were able to devote the time to create proper content.
The Old Website
The initial idea behind the old site design was to see what we could build using Twenty Seventeen, the default WordPress theme at the time. Other than some CSS tweaks, and some plug-ins added for functionality, the site was pretty much the stock theme. It got the job done but did not really allow us the freedom or control that our normal framework allows. We desperately needed an update.
Practice What You Preach
We never shut up about how the website is the digital foundation of a business’s online presence. In fact, if you search the word “foundation” on our website, you get multiple pages of results. Basically, we have an obligation to lead by example — our own website MUST be the foundation of OUR online presence.
The NEED for SPEED
Photos and images make up a large part of a webpage’s size. Our new home page is 1.78 MB and of that, almost 30% of it is from images. We decided to use black and white photos on the site for both aesthetic reasons and because they make for smaller file sizes. Even so, you can only optimize a large photo so much before you start dealing with pixelation and noise. We aimed for a happy medium between size and quality and still end up with over half a megabyte in images on the home page.
As for the scripts, another compromise that we had to make was that we wanted to have various call-to-action options on the site. We wanted to have a contact form, Facebook chat, and social sharing available on every page. Unfortunately, each tool requires it’s own script (or scripts) to run.
The Mobile Problem
Google has made it clear that page speed is, and will continue to be, a factor in mobile search ranking. Because of this, it is imperative to find every way possible to shrink the size of a web page on mobile without sacrificing too much. Since we still want the scripts to run on mobile devices, we decided to focus on reducing the image sizes to cut the size. There’s not currently a clean solution to this issue but there is a CSS tweak that does the job.
The Mobile Tweak
The second step is to add CSS code to change each background image based on the screen size. Luckily, media queries makes it incredibly easy. For our site, we set the breakpoint at a width of 767 pixels, so anyone who views our website on a device that displays less than 767 pixels will see the smaller image.
The Mobile Result
As you can see from the test, the overall page size drops from 1.78 MB to 1.1 MB. The load time is still a little over 3 seconds so we’ll need to continue to work on it to hit the goal of under 3.
The New Website
We are super excited by the end result. The new site looks great (hopefully you agree) and is extremely functional. It loads quickly and is full of content that captures who we are and what we do.