Google Page Speed Optimizer for Magento 2

HOW TO EVALUATE YOUR STORE PAGES PERFORMANCE

Challenge: Google PageSpeed Insights and GTmetrix are the tools that indicate how well a webpage performs, but still there are no clear steps on how to fix the problems.

Solution: use the built-in diagnostic tool right from the admin panel. The extension processes the information provided by Google Insights and supplies each issue with detailed configuration tips. Check the score before running the optimization, follow step-by-step instructions and start diagnostic once again to see the results!

→ Learn more about the common Google PageSpeed Insights problems and steps to solve them

See our Magento 2 Performance Tuning module in action

Prevent losing potential customers by making your Magento 2 store faster. See the results of optimization with help of Google PageSpeed Insights tool for Home page , Category page , and Product page . Use our Magento 2 page speed extension and you will definitely improve your store score.

Code structure optimization in Magento

With Magento 2 performance tuning extension you will definitely increase a store performance score in the Google PageSpeed Insights and GTmetrix tools by optimizing Javascript, CSS and HTML content.

Advanced JS Optimization

HTML, CSS, JS minifying

CSS and JS merging

Move JS to the footer

Defer CSS files loading

NEW | Activate Server Push

Optimize JS code by Amasty

When you run Amasty JS optimization, the module automatically launches JS files merging, bundling, minifying, and other actions you don’t need to do manually. Reduce JS code weight and requests to speed up your Magento 2 store and render web page content faster.

Make on-the-fly code compression

Speed up your Magento 2 store by reducing HTML, CSS and JS code up to 10-20% without affecting its content. Extra whitespaces, line breaks, comments and block delimiters will be removed, so a web browser can operate these files faster.

Merge CSS and JS into one single file

Combine external CSS and JS files into one. On the one hand, the speed module helps Magento 2 to reduce the number of requests. On the other hand, merged CSS and JS files are cached, which stops a browser from loading one file several times.

Move JS to the page bottom

Not all of the JS scripts are needed to render a web page correctly, besides some of them weight a lot. As soon as this Magento site optimization feature is activated, JS files are moved to the page bottom of the HTML body. Defer JS files loading till the end of a page rendering to fix render-blocking issues.

Defer fonts and print CSS files loading

Optimize a critical rendering path and improve a first contentful paint by loading fonts and print CSS files at the end. These files are non-critical for a page rendering and can be load after all principal files. It’s possible to exclude specific fonts you don’t want to apply the feature to from deferring.

NEW: Enable Server Push for Nginx and Apache servers

Generally, a user sends a request to a server and a server responses with some delay. It happens with each request and takes some time for a customer to get the required information. Server Push changes the algorithm and sends multiple responses to the first request without waiting for further requests. Thus, the content is delivered much faster.

Images compression

Let a browser deliver a web pages content faster with fever bytes to download. Image optimization helps to enhance the user experience and attract new customers by improving seo-positioning and performance of Magento 2 store.

Convert images to Webp

Adjust resolutions

Choose a resize algorithm

Compress JPEG images

Lighten PNG and GIF images

Optimize images in bulk

Make images lighter by Webp format

Apply this function to your store, and Magento 2 Performance Optimization extension will create a copy of every image in Webp format. Webp images are 26% smaller in size compared to PNGs.

Create images in smaller resolutions

When a user makes a purchase using a mobile or a tablet device it’s a no worth to load a high resolution image on a small display. The extension automatically creates copies of images suitable for mobile and tablet devices. Using smaller resolutions positively influence a Google rank.

Automatically resize images

It’s possible to choose between a resize or a crop image algorithm. When you resize, images will be cut proportionally to the originals, but become smaller in pixels. When you crop, you cut a part of the image, changing its width. Make sure the pictures on your product pages are displayed appropriately after mobile Magento optimization.

Choose JPEG compression strategy

Image compression allows you to reduce the size of JPEG images with 100, 90 or 80% of quality saving. Choose a middle ground between a higher quality or a lower weight of images and provide your Magento 2 store with significant performance improvements.

Try the optimization tool for PNG and GIF images

The PNG and GIF optimization is a powerful Magento 2 performance improvement tool for compressing the size of your images and photos while maintaining a high quality with almost no difference before and after compression. Cut the weight of your images up to 67%!

Boost the speed of image optimization

With the Multi-Process Generation feature, you can compress images significantly faster. The setting allows you to run multiple threads and minimize the time spent on your media optimization. In addition to this, it is possible to automatically optimize newly uploaded images in Catalog and Wysiwyg folders.

Speeding up of loading process

Use Magento 2 Page Speed Optimization to defer initialization of an object until the point at which it is needed and to clear pagespeed cache. Accelerate web pages loading and prevent your store with long catalog pages full of images from lagging. Additionally, Lazy Load functionality is fully compatible with the Full Page Cache Warmer extension: warm store pages according to user agents to maximize the effect.

NEW | Enable User Agent

Lazy load images

Choose a lazy load strategy

Customize lazy loading process

Preload images when needed

NEW | Fetch properly optimized images based on User Agent data

Benefit from smart images fetching with User Agent to automatically pre-load properly optimized images for any device. Employ all advanced page speed optimization techniques, including Lazy Load, WebP and image resize at once. This way, no matter what device your customer may have, the pages will load in no time.

Avoid visitors’ leaving because of a long waiting time

Load images on websites asynchronously only when they appear in the browser’s viewport.This means that if users don’t scroll all the way down, images placed at the bottom of the page won't even be loaded. On a site with a significant number of images, lazy loading could make the difference between users staying or leaving your website.

Select your own loading strategy

Magento 2 Performance Optimization improvements let you decide which one of two lazy loading scripts suits your system best. It’s possible to choose between jQuerry Lazy Script or Native JS Lazy Script.

Apply lazy loading to a certain page

Try an advanced Magento optimization option for lazy loading. You can adjust this feature for store pages you want to save the maximum images quality: General, Home, Category, Product and CMS pages. Set a specific customization type for various store pages.

Adjust the preload images number

When you preload, images from above-the-fold content will be processed by a browser as usual. Show customers the maximum image quality for a perfect first impression of your store view. You can exclude incompetible with lazy load images from the feature action mentioning a special blocks’ content in order to avoid errors.

Expert Opinion

What Experts Say?

The result of rebuilding our pages for performance led to a 40 percent decrease in Pinner wait time, a 15 percent increase in SEO traffic and a 15 percent increase in conversion rate to signup. Because the traffic and conversion rate increases are multiplicative, this was a huge win for us in terms of web and app signups. Because of the web pages improvement project, the team now focuses on performance as one of the biggest opportunities for new user growth.

Sam Meder //Engineering Manager & Tech Lead, Pinterest

19 year engineering expert, deep experience in development & management

How to increase Magento 2 speed fast?

• given the extension is enabled, the fastest way to optimize the loading speed is to complete the general settings;
• extend the HTML tab and set Minify HTML to Yes;
• then, go to the JavaScript tab and enable all the optimization settings there;
• switch to CSS optimization and choose the needed values;
• also, use Flat Tables, Images Optimization and Other Settings to achieve a more vivid result faster;
• save the changes and check the result.

How to tune Magento 2 performance?

• Install and enable the Google Page Speed Optimizer extension.
• Go to Stores > Configuration > Google Page Speed Optimizer and open the Settings section.
• Enable HTML, JavaScript, and CSS optimization.
• Open the Image optimization section.
• Set up automatic image resizing and lazy loading.
• Save the changes.

According to the statistics, the extension can cover each business need in synergy with the following solution: magento 2 full page cache.