Page speed is one of the ranking factors for Google. So almost every store owner thinks about how to optimize Magento performance.

You can check right now your website at PageSpeed Insights to get your score between 0 and 100. A 0 score usually indicates an error in PageSpeed Insights. 100 is the best possible score, which represents a top-performing site.

PageSpeed Insights

If your score is lower than 90, then you get recommendations from Google on how to improve it. In this post, we’ll consider how you can solve them all with one optimization solution.

Images Slow Loading

Images, photos and gifs slow loading is one of the most evident problems for any Magento store. They obstruct fast pages loading. For instance, your admins can forget to squeeze images, or your designers can use images in PNG format, or upload the same image twice or more times, etc. As a result, even high ranking websites may receive such recommendations:

PageSpeed Insights images recommendation

Speed up your Magento store in few clicks!

Solution: Optimize images

This should be the first step on the way to speeding Magento up, as you can make it without any dev’s help. Main mistakes at PageSpeed Insights looks like:

Serve images in next-gen formats.
Properly size images.

Google suggests using formats like JPEG 2000, JPEG XR, and WebP, rather than PNG or JPEG. But what if you already have thousands of images on your server? It may become a problem to convert them all one by one.

Besides, although Google doesn’t have any special requirements, there is one more difficulty – loss of quality:

Low quality image

We know how to solve this problem. This Google Page Speed Optimizer can shrink your images without quality loss. In your Magento admin panel, you can choose the needed folder(s) to optimize them in bulk. We use special optimization tools for JPEG, PNG, GIF, WEB. It usually takes 5-10 minutes to optimize 1000 pictures.

Images optimization settings

Moreover, if you have a heavy mobile or tablet traffic, you can create copies of your images with a suitable resolution for mobile devices. There are 2 algorithms: crop and resize. The Crop algorithm reduces the picture to the maximum width or height and then cuts off the excess. And it can be disproportionate to the original picture. And the Resize algorithm compresses the images according to the size of the image.

Mobile and tablet images settings

After that, you generate a queue based on your configuration setting, which we described above, and specify the value that will indicate the number of images to optimize in a single request to the database files. Next, click the Run optimization Now button. It will initiate the optimization process according to your settings. You can change the settings, generate the new queue, and run a new optimization process in the future.

Generate images queue

Website lazy loading

Users don’t see your full website page in one moment. So you can take advantage of it and enable lazy loading system. It means that your page images will be downloaded on demand. It helps you avoid this message from Google:

Defer offscreen images.

Our Optimizer has two options: simple and advanced.

The simple lazy load has the next settings: Use Lazy Loading Images, Lazy Load Script, Preload Images, Preload Images Number, Preload Images Strategy, Ignore Images That Contain.

Enable Lazy Loading Images to make off-screen images load when a customer scrolls to them. Test 2 different scripts jQuery Lazy Script and Native JS Lazy Script to choose one that fits your system best.

Set Preload Images for smooth website loading. These images will load in the main flow. You can also decide what Preload Images Strategy use:

  • WebP Format + Image Resolution – This option is better for speed optimization, but sometimes it can lead to some bugs, such as problems with swatches.
  • Original Format of Images – with this option images will be loaded in the default format.

The advanced option allows a wide range of customizations. For example, you can turn off it for some pages or use another Lazy Load Script, as they vary being applied to different pages.

Simple lazy load settings
Advanced lazy load settings

JavaScript + CSS files

JavaScript and CSS files are another headache for every SEO specialist. Their processing usually takes a lot of time.

Minify and merge CSS and JavaScript

Remove unused CSS.
Reduce JavaScript execution time.
Minify JavaScript.
Minify CSS.
Minimize main-thread work.

If you get these messages, be ready to work with code. Google suggests reducing the unnecessary parts of code and organize it into smaller parts. Minifying CSS and JS files can reduce network payload sizes and script parse time. As a result, time spent parsing, compiling, and executing will be less.

But what if you are not a developer? Google Page Speed Optimizer will come to the rescue. Just turn on the settings, and it will do all the work.

JS and CSS settings

Amasty JS Optimization chooses the most important JS files and merges them into one. This means that your server will process only one file. As a result, your store will work faster. Merging and minifying CSS Files works the same way as JS files optimization.

Cache usage

The cache includes HTML, CSS, JavaScript files, and images, that are stored in a users’ browser. If your server is configured correctly, the browser cache your static files. It will increase the server response speed because the number of requests will be as low as possible.

Read more about leverage browser caching. There you will get the information about how to check if you already use cache and enable it on different servers.

Google Page Speed Optimizer will improve Magento performance with static files.

But don’t forget about the Magento page cache. Full Page Cache Warmer helps you keep it in the current state. It will cache and auto-update all the necessary pages in advance. Install these modules together for the best results.

Additional tools

Flat Tables

Enabling a flat catalog is an additional option that you can use to optimize Magento 2 shop performance. It is a table storing all the information about a product or a category. It works by the simple principle: the fewer requests to the server, the better. If you have a big shop with 300 products in many categories, the result will be clear.

Asynchronous Indexing

Your server may experience maximum loads during the season of active sales. This means you may get conflicts between frontend and backend traffic flows. To avoid this – use asynchronous indexing. Thus, order data will be placed in a temporary storage and moved to the Order Management grid safely. The server load will be less in that case, and, as a result, order processing will be faster.

No need to be a specialist to speed up your Magento!