Who We Are

Believe Kids offers fundraisers for thousands of elementary schools, middle schools and school districts. Our programs are unique and we strive to make fundraising as easy as possible for our sponsors. We do this through a great team of people and through technology.  One of our best offerings is our online shopping site ShopBelieve.com. It allows sponsors to track their fundraisers, parents to share their student’s fundraiser with family and friends, and allows supporters to purchase products and support students.

In 2015 we decided to revamp our web site and make it easier to maintain content and products. Through our research we came across Hotcakes Commerce. After doing a trial and coding a few modules we knew we had found the solution for our needs. We purchased the licenses for our environment and started implementing a new responsive shopping experience. That fall we saw a 20% increase in sales year over year. We still had some issues to work out but we were very happy with the results.

Problem

Fundraising is an interesting business. We work in two seasons, spring and fall. Spring is usually a slower time of year for fundraising in general and we use this time to test out new ideas. Fall is crazy. Most fundraisers start at the beginning of September and 98% of them are done by mid-December. We run approximately 2,500 programs during this time and usually see around 260,000 unique visitors come to our site. We work all year to make sure that those short 3.5 months go as smooth as possible. In 2015 we had environment issues as we were hosting our sites in house. I remember one day a car crashed over the curb straight into a power box and took out the power for the block we were on. That meant our servers went down, which was no good. So we began the process to move our sites off premises to the Microsoft Azure cloud. That move went smoothly. We prepped our virtual machines and databases, alerted the support teams for our CMS and Hotcakes who helped move our licenses. Our fall season kicked off and things seemed to be going great. Then around mid August we started getting complaints of the site going slow.

Discovering What Was Happening

The first thing we did was run several tests from WebPageTest and Pingdom to see what our page load times were looking like. We ran the tests when we had 60 people on the site at once and were getting average page load times of 6 seconds. OUCH. We were not even under a heavy load and the site was taking forever to load. The biggest glaring issue was our Time to First Byte (TTFB). TTFB measures the responsiveness of a web server. When a user clicks a link, it measures the time from the click to when the first bit of data is received by the user. Our TTFB was 2-3 seconds or more in some cases. That is where we focused most of our attention.

The first thing to figure out was what was happening in that first 2-3 seconds before anything was transferred. We created a page that only contained our base skin and started trouble shooting from there. With only our base theme and no other content on the page we were still seeing the slow load times.

To figure out what was going on with that page we started looking into some of the performance tools available to us in our Azure subscription. The SQL Azure Database performance tools showed us our top 5 running queries. After analyzing those queries we noticed quite a few calls going to the Hotcakes tables. We contact Hotcakes support.

Hotcakes Commerce support is the best there is. I cannot praise this team enough. Every problem or question we have ever had has been responded to quickly. They always come from a place of wanting to help and guide you to the best possible solution. This case was no different. They responded with great questions and several suggestions to look at specific settings in the CMS.

Solutions

CMS Settings

If you are having any performance issues you need to make sure the base configuration of the CMS is correct before you start tweaking anything. We started with Hotcakes Suggested Configuration Settings for Performance article. In our instance the settings that made the biggest difference were enabling the CDN, enabling the event log buffer, and disabling the Auto-Sync File System settings.

After the performance settings were configured according to the article we evaluated what could we cache on the servers to improve response time. We quickly went through the site and cached every single HTML module that we had on the page for 24 hours. Our content on the shopping site does not change that often and we thought this would be a good setting. We also cached our menu and category modules for the same amount of time. This noticeably improved the response time from the server.

Database Calls

The very first thing we figured out was the Mini Cart module was making excessive calls to the database. This was easily remedied. Instead of using the Mini Cart Module we used the HTML from the Mini Cart Module and made an Ajax call on the page load via jQuery to update the number of items in the users’ cart. This was made very easy using the server side Hotcakes Commerce API exposed through a REST endpoint. After deploying that change we started to see 1.5-2 seconds server response times. This was still slow, but a big win for the team.

Hotcakes has greatly improved the speed of the Mini Cart module and other modules in version 2 and are constantly making improvements to the system. We were restricted from upgrading to version 2 until our selling season was over.

Image Size

We also looked at the sizes of our product and category images. While our images were properly sized for the areas we were putting the content in they were large. We needed to compress our images. We simply downloaded all of our product images, ran the images through ImageOptim, (an image compression tool), and uploaded them back to the server. This gave us another gain in speed.

JavaScript and CSS Sizes

After tackling the image sizes, we looked to our CSS and JavaScript file sizes. There are several tools available out there that minify CSS and JavaScript files for you. The minification process involves removing all white space and replacing names where possible with a single letter to make the file as small as possible. Since these files change with our code base we needed to figure out how to minify the files in our build process. We ended up using a Node.js tool called Grunt. It allowed us to specify what files we wanted to minify and then run this as a build step in TeamCity before we built our project and made our packages for deployment.

The team at Believe contacted Hotcakes and asked if they minified their script files. In the version of Hotcakes we are on, they did not provide that, but do in newer versions. They did provide us a file with the location of all the JavaScript files in the system. We used that list to run the files through a Grunt process and then uploaded all the files to our server. We started with 25.9 MB of JavaScript files. After we minified them we ended up with 8.35 MB. That is a huge savings in transfer time to the client from the server!

Render Blocking JavaScript

The next problem we faced was render blocking JavaScript. These are basically JavaScript files that prevent the page from loading until the script is downloaded from the server and executed. To eliminate the scripts from blocking rendering the page we added defer attributes to our script tags. There are two attributes that work in conjunction with the script element in HTML that allow you to control how your script is processed on the client. They are “defer” and “async.” The “defer” tag delays execution of the script until the HTML parser has finished but respects the order of the scripts in the HTML. The “async” tag runs the script as soon as it is ready regardless of how much of the HTML has been executed. We felt for our project “defer” was the best option since quite a few elements on the page are altered by the scripts. If you would like more details of the “defer” and “async” attributes Chapman Lever wrote a great article called Eliminating Render Blocking JavaScript.

How Did it Work Out?

It was quite a bit of work to get all of this done quickly. Once we finished everything our average response time to load the page was 2.7 seconds. That is a far cry from the 6 – 7 seconds our users were experiencing before. All those improvements paid off as well. We saw an increase in web sales of 19% over the previous year. Overall we are very excited and are looking at new ways to increase the site performance. Our team is super excited to upgrade to the latest version of Hotcakes and take advantage of the speed improvements they have made as well.