Contact
Site: US UK AU |
Nexcess Blog

Performance Optimizing The Magento Front-End In Time For The Holiday Season

October 27, 2016 1 Comment RSS Feed

Performance OptimizingLast month, we published The Ultimate Guide to Prepping Your Magento Store for Around-the-Clock Holiday Sales in partnership with Groove. The ebook is a comprehensive guide to getting your Magento eCommerce store in shape for the holiday season. If you haven’t already started to prepare, time is running out to give your customers the best possible experience, not to mention maximizing revenue over the busiest shopping period of the year.

But better late than never, so I want to share some more optimization tips drawn from the Ultimate Guide to make sure that your customers don’t have to sit twiddling their thumbs before they can make a purchase.

In our previous Holiday Season preparation guide article, we focused on how you can use data to improve performance. Today I want to examine some of the techniques for improving Magento front-end performance.

Find The Bottlenecks

As the saying goes, premature optimization is the root of all evil. All of the advice I’m about to give is valid, but every eCommerce store is different. There’s no point wasting time on optimizations that don’t make a practical difference to your store’s performance.

There are several free tools to help identify targets for optimization. I recommend Pingdom Tools and Google Pagespeed Insights. Each provides useful information you can use to target optimizations where they’ll do the most good.

Reduce HTTP Requests

Every HTTP request takes time as data packets travel from the shopper’s browser to your server and back again. Reducing the number of round trips can substantially decrease latency problems.

If your store loads large numbers of CSS and JavaScript files, latency can quickly add up. One way to cut down on round-trip times is to concatenate and minify these assets.

Concatenation is joining all the files together into one big file. Minification is removing all the whitespace, comments, and other pieces of information the browser doesn’t care about.

Hopefully, your Magento theme developer has done this for you, but you can also use the built-in Merge JavaScript and Merge CSS options in the Developer menu.

Don’t Go Nuts With Trackers

Adtech, trackers, and other JavaScript snippets that call out to external servers can have a huge impact on performance. I know you need to track what users are doing to improve their experience, but don’t go overboard.

Think carefully about the negative performance implications of adding too many JavaScript snippets to pages.

Defer JavaScript Loading

JavaScript often blocks page rendering, which is why sometimes pages load a little bit of content and then stop for several seconds while they load and execute JavaScript.

Ideally, your store should initially only load the assets — including JS and CSS — it needs to display the content. Everything else should load after the content.

Optimize Images

Images often constitute the largest proportion of a page’s weight. That’s especially true on eCommerce stores, where large compelling images can make all the difference to a sale.

On eCommerce product pages, I’d encourage you to use as many images as you think are necessary. However, those images should be optimized to consume as little bandwidth as possible. You can use a tool like ImageOptim to optimize before uploading, or use an extension like Image Optimizer to optimize them in place (although be aware, this can take a substantial chunk of your server’s resources if you have lots of product images).

Consider AMP

Google’s Accelerated Mobile Pages project is a way to do an end-run around the whole optimization process and deploy parallel pages that offer great performance on mobile.

Originally AMP was designed for news sites, but it’s seen considerable uptake with eCommerce stores too. Personally, I’d argue that the best approach is to optimize a store’s pages so they offer great performance whatever the platform, but eCommerce merchants should definitely be aware of AMP as an option.

If you haven’t already read it, be sure to take a look at The Ultimate Guide to Prepping Your Magento Store for Around-the-Clock Holiday Sales for more inspiration as we draw closer to Black Friday and Cyber Monday.

Posted in: Magento
  • Thank you for sharing guys,
    By the way, there’s another great solution for images – Cloudinary. I’ve seen it work and it’s a great image optimization solution. With modern requirements to quality of product photos, it’s getting pretty hard to store HQ images for hundreds/thousands of products. But I’d also suggest starting by deleting unused images, for cases when products get deleted, but images stay in the database. This way, when you get to optimization you’ll already have more space for images. Also, caching…