July 11, 2017

Front-End Optimizations Black Friday and Cyber Monday are almost here, not to mention Christmas. eCommerce merchants all over world are battening down the hatches in preparation for the busiest and most profitable shopping season of the year. To make the most of the Holiday Season, retailers should take a careful look at their store’s performance. Harried shoppers don’t want to deal with slow eCommerce stores, and that goes double for mobile users.
Articles discussing Magento performance optimization often focus on server-side optimizations: choosing a hosting company that values performance, configuring caching, database optimization, and so on. But ignoring the front-end is a mistake. The most carefully optimized back-end won’t compensate for a poorly optimized front-end that leaves the shopper hanging while multiple scripts block rendering and enormous unoptimized images download.

I’d like to take a look at five ways Magento merchants can improve the performance of their store’s front-end.
Before you do anything, gather data so you know how well your store performs today. Without a clear idea of current performance, you won’t be able to tell which optimizations are effective. I recommend using Pingdom Tools and Google Pagespeed Insights to develop an understanding of your site’s performance.

Performance Budget

A performance budget sets limits within which your designers and developers must work. You might budget by load-times: this page has to load within two-seconds on a typical low-bandwidth connection. Or you might budget by page weight: this page can load no more than 1 MB of content in total. Performance budgets help focus attention on page performance.

Minify And Concatenate

When you order dinner at a restaurant, you don’t expect the server to bring each item to the table individually. They don’t bring you the bread, return to the kitchen to get a plate, then again for a fork, and a knife, and a spoon, and so on. They bring everything at once so they only have to make one trip to the kitchen.
Whenever the browser makes a request to a server, the load time of the page increases. If a store loads lots of JavaScript and CSS files, each file adds a bit more latency. The browser has to make lots of round-trips to the “kitchen” and back. This is inefficient.
It’s far better to join JavaScript and CSS files together in a process called concatenation, reducing the number of round trips.
You can use the built-in Merge JavaScript and Merge CSS options in the Developer menu to concatenate your store’s files.

Defer Loading Of Non-Essential JavaScript

If you want shoppers to see the content of product pages quickly, that content has to be loaded before everything else, including non-essential JavaScript and CSS. Otherwise, the rendering of the page will stop and wait every time a new JavaScript or CSS file has to be loaded.
Defer loading of all non-essential JavaScript and CSS, and, where possible, use the “async” tag to load JavaScript asynchronously.

Image Optimization

Images are an essential part of any product page, but the bigger they are, the longer they take to download. That’s not much of a problem for people shopping on high-bandwidth broadband connections, but it can negatively impact the experience (and the bandwidth bills) of mobile users.
First, make sure that your store delivers the right image sizes for the screen size of the shopper’s device. Hopefully, your theme does this for you. If not, consider modifying the theme so it makes use of responsive image best practices.
Many images contain data that isn’t especially useful for eCommerce shoppers, including EXIF headers and other metadata. Using a tool like ImageOptim or the Image Optimizer Magento extension will strip all that extraneous metadata and compress images for smaller file sizes.

Frugal Tracking

eCommerce merchants are often tempted to include as many tracking and conversion optimization scripts as possible on their pages. After all, data is key to improving shopper experience and optimizing for conversions. However, most tracking scripts are loaded from external servers, aren’t especially well optimized, and seriously impact page-load times. I advise Magento merchants to include only the services they really need.
To give shoppers the best experience this Holiday season, optimization efforts should focus on both the back-end and the front-end. Front-end optimization is a easy win for eCommerce retailers and their customers, and ignoring the front-end optimization may well lead to shoppers deciding your store just isn’t worth their time.


Nexcess, the premium hosting provider for WordPress, WooCommerce, and Magento, is optimized for your hosting needs. Nexcess provides a managed hosting infrastructure, curated tools, and a team of experts that make it easy to build, manage, and grow your business online. Serving SMBs and the designers, developers, and agencies who create for them, Nexcess has provided fully managed, high-performance cloud solutions for more than 22 years.

We use cookies to understand how you interact with our site, to personalize and streamline your experience, and to tailor advertising. By continuing to use our site, you accept our use of cookies and accept our Privacy Policy.