Giving a Plastic Surgeon's Website a Facelift

We originally built the website for Dr. Dana Goldberg site in 2012, and at the time, they needed more than just an update to the design of the homepage: they also needed a boost in loading speed as well. Like cars, websites, even after a couple years, need a tune-up to make sure everything is running smoothly. So we imagined a redesign that would not only look better, but also be rendered faster by desktops, laptops and especially mobile devices, since load speed is a Google ranking factor.

Updating the Website Design

First off, we wanted to streamline everything, from the amount of images, effects, textures, fonts, and even the total length of the homepage. The original design (see "Before and After Gallery" below) had a full screen slideshow, and javascript carousels for every procedure the surgeon specialized in. We even had a carousel for all the latest blogs on the site. There were parallax scrolling effects and even more full screen images further down the page of the site. Basically, this equates to a lot of elements to load, and the more elements, the longer everything takes to come into view.

At the time of the original design, it was trendy to have these "mile-long" pages with every bell and whistle you could imagine—the clients seem to like it, and it did, indeed, look very cool. However, this approach didn't take into consideration slow internet speeds or the rising popularity of using handheld devices to connect to the internet. Folks were using mobile devices to access the web back in those days, but nowhere near the scale it is now. Mobile devices are usually connecting via wi-fi, LTE or even 3G or lower depending on where you are. The previous homepage simply had too many things to load, and honestly, more content than anybody needs to see on the home page of a website.

Restructuring the design, we got more to the point.

We didn't need a slideshow with 5 separate slides of information that most people might not stick around to watch, as every slide went by. We wanted to go with a single beautiful photo of the surgeon and her staff. One of the biggest selling points for Dr. Dana is that she's a female plastic surgeon, and having her, and her all female staff, right up front was definitely most important. From there on down the home page, we simplified everything, and only left in the parts of the site that were most important to her audience.

We also took out the background textures, and replaced all the photos with more updated ones. We wanted the pictures to be not only sexy, but also empowering. We darkened and muted the colors a bit to give the website a more modern look than the previous site. And as we said, the content on the site now gets more to the point.

First, we show potential clients information about Dana herself and about her practice, and then introduce her primary procedures. This is a far cry from the previous site, which attempted to list every single procedure she offers, no matter how obscure they were. Just showing the primary procedures really helped clean up the site, and focused the hierarchy of content in a much better way.

Cleaning up the code

After cleaning up the design, getting rid of the fluff and modernizing the look, it was time to go under the hood. Using the Pingdom Speed Test tool, we noticed there were too many "request" on the site, and the page size was way too big. Page size and requests are usually very closely related. Requests are things like: images, scripts, Google fonts, videos, tracking codes and 3rd party software. And if you remove many of these requests, you're essentially lowering the "page size" (and therefore, load time) of the home page. We knew if we could reduce the page requests and the total page size, we knew we could improve the performance grade and overall website speed.

Dr. Dana's previous site had 126 requests, with had a page size of 5.4 MB, so our ideas of removing all the fancy javascript, parallax effects, slideshow and carousels was going to be a great start. As nice as many of these things were, they just didn't add enough value to the site, especially if they slowed the loading of the page down. After removing the slideshow, all the unnecessary javascript, background textures, carousels and all the extra images, there were still a lot of requests and miscellaneous things slowing down the site.

Cutting down the code

One of those miscellaneous culprits was old tracking codes. Over the course of last 6-7 years, the client had gone through a handful of social media companies and SEO companies, and each time they consulted with a new company, they had given us new code snippets and re-marketing tools to copy/paste onto the website. Some were still current, while others were long gone. So when the webpage was loaded, these old tracking codes were still making requests and slowing things down. We also noticed there were 7-8 different Google Fonts being loaded onto the site—certainly the result of too many cooks in the kitchen over a span of time. So we reduced those to 4 and that reduced the total number of requests as well.

Final touches

After trimming all the extra fat off the site (no pun intended... insert liposuction joke), we made sure all the new images from the redesign were optimized for fast loading. But the question remained, how do we do that, and still have the big beautiful images? The answer... is to darken them, do a little Photoshop magic treatment to all the images and suddenly, this already large photo that was 500 KB, is now just over 100 KB. Google will probably still yell at us, and say we can compress the image further, but that will start to make it blurry or muddled looking—not worth it in our opinion.

This being a Drupal website, we added some modules to help us to crunch things even further. We compressed the HTML, the remaining javascript and the CSS, and these modules helped us to asynchronously load the javascript after page load. This is what Google calls "Render Blocking".

The last part of this project was to look at the javascript we were keeping, and see if we could improve on it. We replaced some of the older clunky scripts with updated versions that were written much better now than their predecessors, and much faster to load.

The Final Result

After stripping this plastic surgeon's website down, redesigning it and in some cases re-coding it, we're left with a site, which we feel, is a total makeover. It's getting really hard not to make a plastic surgery pun about "sucking out the fat" here, but by doing  a complete redesign, we were able to:

• Get the "Performance Grade" up from 89 (though not a bad number to begin with), to 94
• Get the total number of requests were lowered to 44 from 126
• Get the page size down to 1.4 MB from 5.4 MB
• Cut the load time down by more than half, and
• Make the site faster than 84% of other website, instead of being faster than just 50%of the websites

We definitely gave it a whole new look, and hopefully now, with its new found confidence, it can go out there and impress visitors and attract new clients.

Before Improvements

After Improvements