We love building long-term relationships with clients, so when Driver Solutions—which provides truck drivers with CDL training and job opportunities—reached back out to us, we were thrilled. The Driver Solutions site, which Sparkbox designed and built in 2013, was attracting the right job-seekers, but Driver Solutions wanted it to capture and convert even more leads. This meant a renewed focus on performance, which impacts SEO.
Driver Solutions came to us with a simple question: “How can we make our site faster in order to improve Google search rankings?” Together, we came up with a plan, which included upgrading their content management system, implementing a CDN, adding expires headers, optimizing assets, and building Google AMP templates. We then put this plan into action iteratively, focusing on improvements that would yield the biggest wins with the least budget, and seeing how small changes could speed up the site and create a better overall user experience.
“We chose to work with Sparkbox (again) because of the expertise that their team brings to the table. As usual, Sparkbox was on top of the latest trends, particularly in the way of optimizing site speed. They made sure we were able to make huge strides in the right direction by dramatically improving page load time, in addition to updating our site’s infrastructure.” - Luke Coyle, Marketing Director, Driver Solutions
Before we started our engagement, it took an average of 1.8 seconds for a mobile user to see the homepage’s first visual response, according to WebPageTest.org, and a full 2 seconds for the HTML to be fully loaded and parsed. By the end of our engagement, those numbers sped up to 1.1 and 1.3 seconds respectively. Just as impressively, we took the homepage’s speed, according to Google PageSpeed, from an optimization of “medium” (scores of 75/100 on desktop and 79/100 on mobile) to “good,” the best ranking available (84/100 on desktop and an exciting 93/100 on mobile).
These milliseconds may seem minor, but according to research cited by Google, the BBC found they lost 10% of users for every additional second it took for their site to load. And COOK, a frozen meal provider, found that by cutting their average page load time by .85 seconds, they were able to increase conversions by 7%, decrease bounce rates by 7%, and increase pages per session by 10%.
Driver Solutions is seeing similar improvements in conversion rates. Before our engagement, Driver Solutions saw a conversion rate of 2.69% for organic traffic. Since deploying our performance updates and AMP pages, that conversion rate has more than doubled to 5.57%.
We were able to more than double Driver Solutions’ conversion rate for organic traffic, moving it from 2.69% to 5.57% after deploying performance updates and AMP pages.
Upgrading the Content Management System and PHP
When we originally built Driver Solutions’ site in 2013, we used the most modern tools available. But the web moves quickly. So our first step in optimizing the site was to update ExpressionEngine to a more recent version that would support PHP 7. Those updates also included updating the ExpressionEngine “add-ons” (that CMS’s version of “plug-ins”), as outdated add-ons can slow a site’s performance. We removed the add-ons that were no longer used, and updated or replaced those that were incompatible with PHP 7.
Once we upgraded Driver Solutions to a newer version of ExpressionEngine, we were able to upgrade them to PHP 7. PHP 7 provides a much-needed modernization to the language, including a new version of the PHP engine “phpng,” which was written to decrease memory consumption and increase performance.
Implementing a CDN
A CDN is a content delivery network that takes a website’s static files, such as CSS and images, and delivers them to users from servers that are close to the user’s physical location. This results in the site loading faster. Knowing that Driver Solutions targets aspiring truck drivers from all across America, we implemented a pull-based CDN on Amazon Cloudfront to make sure their site visitors would have a lightning-fast experience no matter their location.
We were cautious to make sure the CDN would not add any bloat to Driver Solutions’ editorial workflow. Their team still uploads assets directly to ExpressionEngine, and the CDN integration handles the rest.
Getting Rid of Modernizr and Disqus
One major way we set out to improve site performance was by thinking about how our code affected page rendering. With this in mind, we considered our use of Modernizr, which helps detect HTML5 features and provide fallbacks for older browsers but can also slow a site’s load time. We realized two things: 1) Modernizr was delaying the pages from loading as quickly as they could, and 2) the site didn’t really need Modernizr any longer based on visitor analytics. So we replaced Modernizr with CSS fallbacks for SVG files and included the HTML5 Shiv for Internet Explorer 8. We also removed Disqus for AMP and non-AMP pages, which reduces the HTML load as well as a JavaScript request.
Improving Font Loading with Asynchronous JavaScript
Another way we optimized site assets was by focusing on how the site loaded its two externally hosted Google fonts. Using Zach Leatherman’s blog post “23 Minutes of Work for Better Font Loading” as guidance, we decided to use asynchronous JavaScript to pull in the fonts. This way, the browser can load the fonts while other page assets load, rather than users having to wait for everything to load before the page displays. This improved font-loading approach goes a long way toward improving the actual page speed and the user’s perception of that speed.
Adding Expires Headers to Control Browser Caching
Expires headers tell browsers how long to store files in a cache so each time a user returns, they don’t have to re-download those files. Expires headers don’t improve page speed for first-time visitors, but they do make a big difference for returning visitors.
With returning visitors in mind, we set late expiry times for items on Driver Solutions’ site that don’t change often (including images, videos, audio, PDFs, JavaScript, CSS, and font files). This allows visitors to reuse cached files and reduce the number of files they need to download on each visit, which results in a much quicker experience.
Building AMP Templates
AMP is Google’s “Accelerated Mobile Pages,” an open-source website publishing technology created to quickly load search results on mobile devices. Google links directly to AMP versions of pages on its mobile results view and includes a carousel of AMP pages toward the top of its organic results, which impacts SEO. Overall, publishers who use AMP see higher click-through rates for mobile sites.
For Driver Solutions, we created AMP templates for their pages that were most trafficked by search, including the homepage, blog, and pages about specific jobs and training options. We began by looking for AMP validation errors on the site, then addressed those one by one. These efforts included removing custom JavaScript, inlining CSS and reducing its size to under 50K, updating Google Tag Manager, and removing banned HTML tags and including AMP-approved counterparts. We also wrote an ExpressionEngine AMP plugin to handle the conversion of image and video HTML tags into the AMP-approved HTML tags ‘amp-img’ and ‘amp-iframe’.
In building the AMP templates, we aimed to maintain consistent UI and functionality with the canonical site.
Performance Improvement Is Continuous
“When we work with Sparkbox, it truly feels like we have a whole team coming alongside us throughout the entire project. Thanks to their phenomenal work, our website’s performance is now where it needs to be for today, and the pieces are in place for it to continue to thrive in the years to come.” - Luke Coyle, Marketing Director, Driver Solutions
Performance optimization is not a one-time effort. It requires consistent, iterative assessment and updates. For Driver Solutions, the work paid off. Their site now gets an “A” from WebPageTest.org for performance metrics including time to first byte and image compression, and the site also gets a checkmark for effective use of CDN.
