It was late 2014, and we were asked to design and develop a site for a prominent fishing boat manufacturer. The client wanted a unique and captivating website, and we were excited about the many possibilities. They wanted it to be good and had given us permission to do whatever we needed to make it happen.
As excited as I was, I’ll admit that at the time, I was also totally freaked out. Incorporating video backgrounds and dynamic elements in websites was cutting edge at the time. The pages we needed to develop were going to be significantly larger than anything we had worked with before.
We didn’t have a big hosting budget to pay a company like Akamai to deliver the site through a super fast, reliable and secure content delivery network (CDN). Initially, I tried to create an account with Akamai so we could deliver multiple sites through one account. I got their monthly rate down to about $1500, but ultimately, they wouldn’t allow us to subdivide a single account.
I told Akamai in late 2014 that connecting smaller businesses to their network would be a great idea, but the folks in India weren’t all that interested in my insight. I’m betting today they wish they had the opportunity to do that one over again.
With Akamai out of the picture and conversations with smaller CDN’s leading nowhere (value propositions weren’t where they are today), we decided to try to work out our page speed issues utilizing good clean code, optimized images and video, a good server and speed-enabling plugins.
I was concerned, to say the least.
Over the next six months (yes, six months), we worked to create the right balance of a professional, attractive appearance and fast page speeds on the client’s website. The process consisted of a lot of trial and error, but the end result was an innovative, fully functional and dynamic website that also successfully hosted an eCommerce platform.
In the process, we had developed an exclusive method for creating lightning fast websites. While we’ve now built many sites that are faster, to this day, none have been as complicated to deliver. The lessons we learned stuck with us, and they still apply today.
Why the Obsession?
You’ve heard the saying, “Time is money.” Page speed matters in the world of bounce rates, conversions, user experience, and even Google rankings. As early as 2010, Google included page speed as part of their algorithm for ranking websites.
Here are a few facts to chew on from KissMetrics:
- 25% of users abandon a page that takes 4 seconds or longer to load
- 79% of shoppers not happy with website performance will be less likely to buy again from the same site
- 44% of online shoppers will tell a friend about a bad experience
No business website would be successful without images, videos and animation, even though their use results in file sizes that decrease page speed. Consider the following:
According to Akamai:
- Articles with images get 94% more total views
- Visual content is 40X more likely to be shared on social media
- In 2014, 30% of consumers expected a page to load in one second or less
Couple the rise in the use of mobile devices such as tablets and smartphones and the launch of the Accelerated Mobile Project, and it’s not hard to see why getting your site to load and open quickly is such a big deal.
We’ve had lots of help along the way as we’ve developed techniques for increasing page speeds. As a way to pay it forward, here’s a compilation of suggestions from the OC pros to help increase page speed:
Video and Animation According to Rachel (OC Video Coordinator Extraordinaire)
You need a “sweet spot” of balance between quality and file size. At the same time, videos need to be playable across multiple platforms. We’ve played with dozens of flavors and combinations to find solutions that make both our video nerds and programming nerds happy. The following settings work for both video and gif files.
Early on, we chose to wrap the video files in the widely accepted H.264 format, which offers room for a great compression-to-quality ratio. Within H.264, a variety of parameters affects appearance, file size, and readability. For maximum compatibility, we choose the baseline profile, at a 4.1 level. Next, we play with tiny adjustments to bitrate settings, pulling our file size down as far as possible. We choose VBR two-pass, with a target bit rate of 2.9 Mbps. At any lower bitrate, we see too much compression. At any higher, our file sizes are really pushing against our site speed.
After creating our compression preset, we find that some videos worked better within the settings. Highly detailed images, especially images with more variance in dark areas, do not hold up to the compression as well. A few video clips with excessive tiny details might need to be replaced, as the bitrate required to show them could double file sizes! We always perform color correction on our desired video files, crushing blacks and creating more simple contrasts to better hide potential compression artifacts and mush. In the end, it’s just one part of the equation, but you’re on your way to looking and running great!
Coding Wizardry by Mr. Dreher
Coding for speed is partly at the mercy of design. As a team, you have to decide that page speed is a priority and then consider how design elements and JavaScript might affect page speed. In many cases, there’s no way around JS or CSS needs. Then, it becomes about utilizing optimization techniques to best minify the overall site.
Here are a few Word Press plugins we use to increase site speed. Some are more helpful with certain minifying functions that others.
This plugin generates static HTML files from your dynamic WordPress blog. After an HTML file is generated, your webserver serves that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.
Autoptimize makes optimizing your site easy. It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, moves styles to the page head, and can move scripts to the footer. It also minifies the HTML code itself, making your page more lightweight.
Optimus reduces the file size of uploaded media files lossless. Depending on the image and format, reductions in sizes of up to 70% are possible. Several kilobytes can be saved per image, adding to the performance of the blog website. What’s most impressive about the compression technology is the quality of the images is maintained—guaranteed.
Hosting
We’ve been utilizing Hostgator’s Cloud Hosting for a while now. While not perfect, they certainly have been a part of the equation for some time. In the near future, I can see trying out GT.net. I like their obsession with speed. I use their page speed tool fairly regularly.
Never Stop Obsessing
I can’t imagine that this whole page speed thing will go away anytime soon. It may look different as AMP develops and becomes more mainstream, but the constraints will also continue to grow as impressive design elements result in even larger file sizes.
We know the ability to design and develop good websites will always be connected to – and even limited by – our ability to deliver the content. But that doesn’t freak me out now like it did in 2014. I also know now that with hard work, experience and ingenuity, anything is possible.
