Magento Pagespeed - Common Problems and Solutions

Magento 2's default, unoptimised template comes with a range of speed-related issues, which is increasingly becoming a problem from a usability and conversion perspective and also a problem in Google's speed-obsessed world (with pagespeed not only being essential for bounce rates but also being a ranking factor.)

The oft-cited statistic from Amazon (that for every one second delay on a website selling $100,000 a day will lose $2.5 million over the course of a year, which equals a 7% conversion drop) makes from grim reading, as does the expectation from modern users that sites should load in 2 seconds or less (for comparison, in 2006 users were content to wait 4 seconds- in 1999 it was 8.)

Given the above it's important that your Magento store loads swiftly, so as not to irritate potential customers. One of the most common speed-related issues we see (across all platforms as well as Magento) is non-minified, external JavaScript files:

Render blocking CSS and JS is often a problem, which is problematic for mobile devices:

Browser caching and expired headers - often a hit or miss scenario, we find that caching is often not enabled on Magento sites we work on; and as it's one of the most crucial factors in serving fast pages to users (correctly caching a page in Magento can raise loading speeds by up to 80%), enabling it is essential.

Solving the above issues with plugins

Whilst there are several excellent guides online already that can assist with technical optimisation, there are occasions where those less technically adept may be required to make changes, in which instance extensions and modules can be an acceptable solution. We recommend only using one or two plugins as per the Magento site's specific needs (Google's Pagespeed Insights tool, GTmetrix and Webpagetest usually suffice to diagnose problems, especially as GTmetrix includes Yslow rendering) as having too many extensions can create loading problems.

Javascript (and CSS)

A common Magento issue, there are fortunately a number of extensions that can assist with Javascript minification. One of these is Potatocommerce, which can minify both JS and CSS, (in our experience CSS is always uncompressed if the Javascript is) cut request numbers and also defer Javascript parsing to solve render-blocking issues. Gzip compression and HTML minification is included with the package as well.

Caching

As far as extensions go, a combination of Varnish and Turpentine should work well for most stores. Alternatively, where extensive caching at an Enterprise level is required AMasty (also known as FPC, or Full page cache) can resolve Caching issues effectively, although such benefits should be offset against its rather steep asking price of $199.

Images

Any E-commerce store is almost certainly going to have a large number of images on it; many of these are often high-resolution product images which are often regularly uploaded without reducing them to an appropriate size, doing large amounts of damage to loading speed in the process. The author once audited a domain with a 6.3 MB image on a page, which was causing a huge increase in loading time (once the image was compressed and rescaled the page loading speed increased fourfold.) There are two ways to mitigate this problem, either by using a plugin or a CDN.

Plugin solution

Our preferred module-specific solution for dealing with large numbers of uncompressed images where alternative methods are not an option is to use Apptrian, which can be scheduled to automatically strip down oversized images by means of a Cron job through configurable batch sizes. This is particularly helpful where multiple high-resolution product images are added on a regular basis.

It is also possible to use Smush.it, although this may not be as effective - Smush.it will typically strip unnecessary data from pictures but not do a great deal of direct compression.

CDN Solution

In instances where your store is using a lot of large images, hosting them externally on a CDN may make sense for enterprise scale solutions. Providers such as Cloudflare can greatly reduce the strain on your own server through external hosting, although for smaller stores on-site compressing should work well enough.