Page Caching On BigCommerce Enterprise, NeedInk

Man holding colorful blocks sees word: CACHE.

The team behind NeedInk.com runs multiple ecommerce websites selling replacement ink and ink cartridges; however, all three websites are on different platforms. When they looked to consolidate technology and choose the best platform, they chose BigCommerce Enterprise with IntuitSolutions.

Improving Category Page Load Speed

Based upon their experience in the industry, NeedInk knew that customers start their search with the brand, then the series, then the model. This presented a challenge because they needed to be able to display all of this information in an organized fashion on the category page — specifically, to show two levels of subcategories on the page without putting excessive demand on the server to build the category page dynamically each time.

BigCommerce’s top-of-the-line standard category options are robust and far better than most competing platforms. However, when dynamically populating such a large number of categories, it is a great idea to implement a custom-coded solution to minimize page load speed issues. It is very important for search engine optimization and making sure the load on the server isn’t taxed by having to rebuild 1000+ categories each time a page is requested.

NeedInk Custom Product Drill Down
Custom Category Options on NeedInk.com.

Our solution: an advanced caching tool implementing a combination of custom programming and Data Hercules — our SEO app that can export your entire category structure for editing, then import the update back into BigCommerce, complete with title tags and meta descriptions.

Pages need to load really quickly; otherwise, it’s not only a bad user experience, but a bad effect on SEO. Our custom tool caches the category output in such a way that the page loads really quickly, in an organized fashion, and doesn’t tax the server.

Make Model Year Category Drill-Down

The ink and toner finder on the homepage is similar to a make-model-year selector for cars. The naming is slightly different for printers. It is manufacturer, series, model. Unfortunately, the way most other providers implement these selectors is code heavy and resource intensive. The entire category output is again requested on each and every page load and has to exist in the page output to make it work. IntuitSolutions handled this problem with flat files, similar to category caching.

NeedInk Custom Toner Finder
Make Model Year Category Drill Down on NeedInk.com.

With our Data Hercules tool, NeedInk is able to export the category structure and create the flat file necessary for the three-step selector, which is very fast and very accurate; it also does not require a huge category output on every page load, greatly speeding up the site.

NeedInk Page Load Speed Comparison
Load Speed Comparisons on NeedInk.com.

You may be asking, just how much can this benefit my site speed? Don’t worry, we did the math for you! Comparing to a similar site with a drill-down menu that does not cache with flat files, NeedInk was over 300% faster! Although this speed difference cannot be completely attributed to caching, it’s clear that it makes a significant impact.

Google Ranking Benefits of Caching

So, we’ve talked about the effects of caching, but why does it matter? In the example above, the NeedInk site comes in at about 600 lines of code for their cache-optimized page. The other page has about 2800 — nearly five times as many lines as Needink. While it’s not the beginning and end of SEO, Google doesn’t like lots of lines of code to crawl (more on that in a second). Why is this important to Google? They know that there is a direct correlation between the amount of code in the page output that the server and browser have to handle, and the page load speed.

With many competing search engines and browsers, Google takes great care to make sure that it’s outputting the best site results based on not just their content, but their user-friendliness. If one of their pages takes forever to load, a user may backtrack, fault Google for having a bad link, and try another search engine, so those types of pages are pushed down the ranks. If you approach your site building from a philosophical standpoint and look through Google’s lens, you’ll have a higher quality site, a better ranking site, and you will make more money.

NeedInk Google Page Speed Lines of Code
NeedInk.com is far more lightweight than its competitors.

While we’re here, let’s also touch on Googlebot crawling. Essentially, Google’s site indexing algorithms provide a “crawl budget” for pages (based on trust and authority), giving each page a specified amount of time to be crawled and indexed before leaving for the next site. When you have heavy pages, you lower the number of pages indexed. In ecommerce, it’s a direct correlation that your organic rankings will suffer when less of your products are indexed!

For example, let’s say that Googlebot crawl budget is 30,000 lines. The site above with 2800 lines of code, that’s just over 10 pages indexed; when your site has just 600 lines of code, the number of indexed pages rockets up to 50 in the same “budget”! Having 5 times as many pages indexed means that you will have more data available for search on Google, and if your content is good, you’ll shoot up the ranks. As you can see, clean page output is beneficial in more ways than just your front-end user.

Adding Multiple Related Products to Cart from a Single Page

Alongside handling the category level page caching, we designed a custom responsive site for them on the BigCommerce platform, including product pages with multi-tab layouts. Another great customization we made on the 3rd-level category page allows their user to add multiple products to cart at one time based on the series and model that they have.

NeedInk Customized 3rd-Level Product Selection Page
Customized 3rd-Level Product Selectors on NeedInk.com.

For example, if a user has an HP OfficeJet Series, with model number OfficeJet 710, they can then add two black ink cartridges, two color ink cartridges and one twin pack, all from a single page. This was an important and necessary usability requirement for NeedInk, and IntuitSolutions handled it.

True One-Page Checkout with BigCommerce

The last major requirement was a true one page checkout. A lot of other “one page checkouts” for BigCommerce stay on one page, but it loads each section step by step, and if you make a mistake you have to go back and open up the previous step. We implemented a true one page checkout environment for them, where all the information is displayed on the page without multiple submits.

NeedInk One-Page Checkout
One-Page Checkout on NeedInk.com.

We did extensive on-page Javascript testing for the form fields to ensure they are filled out properly prior to submitting to prevent user error. This creates a situation where the abandoned carts are down considerably.

Ours is the first true one page checkout for BigCommerce. We’ve also developed a similar checkout system for ShabbyApple.com — stay tuned for our Shabby Apple feature post coming soon!

Interested in One-Page Checkout and increasing your conversions? Contact us today!

Contact Us

Related Post

Olark Widget Preloader