Loading..
Processing... Please wait...

Product was successfully added to your shopping cart.



5 Tips to Improve Magento 2 Mobile Speed

Magento 2 powered E-Commerce businesses get more and more sales through mobile traffic. They also lose sales due to poor mobile site speed.

 

Based on my experience as a performance optimization consultant, I am going to list 5 steps to help increase Magento 2 performance on mobile devices.

5 ways to speed up your Magento 2 mobile site

 

  1. Lower page weight

  2. Do not use JS bundling

  3. Optimize server response time

  4. HTTP/2

  5. Prioritize visible content

 

 

1. Decrease page size

 

Total page weight becomes an important speed factor when we are talking about mobile traffic.

 

According to data published by Ookla, on average, fixed broadband speed across the U.S. is 300% faster than mobile speed. This means a smartphone spends 3 times as much time downloading a page than a desktop computer does. This illustrates how important it is to keep your Magento 2 mobile site as fit as possible.

 

There are various ways you can decrease your Magento 2 page size.

 

1.1 Turn on JavaScript / CSS files minification

 

M2 comes equipped with JS/CSS minification feature (unlike M1 where it was only possible with a 3rd-party extension).

 

To turn on minification go to the backend menu: Store > Configuration > Advanced > Developer > JavaScript and CSS Settings.

 

Just remember that minification is only applied in production mode.

1.2. Optimize images

 

It is important that you compress your images to the smallest size possible. I have written a detailed post on how to do that—make sure you check it out.

 

The bigger your product catalog is the more images you’ll have so it might be tedious to optimize them one by one.

 

I personally suggest the Google PageSpeed (GPS) server extension. It compresses images on the fly and does many more things that can improve Magento 2 speed. Contact your hosting support for assistance in getting GPS up and running.

1.3 Set GZIP compression

 

GZIP can lower your page size by as much as 70%. If you have managed hosting you probably already have GZIP enabled but it does not hurt to double check.

 

Run any of your front-end pages through Google PageSpeed Insights. Look for any GZIP related complaints. Make sure compression is enabled for JS/CSS files as well.

2. Never use JS bundling

 

Magento 2 has this feature—JS bundling.

 

It is supposed to group JavaScript files to lower the number of HTTP requests a browser needs to make to load a page.

 

A side effect is it composes a huge JS file with an average size of 5-10 Mb. On mobile networks this is a serious performance hog. It turns out the time you save by lowering HTTP requests is less than the time you spend downloading this enormous external file.

 

My advice is do not activate JavaScript bundling. It is not worth it.

3. Minimize server response time

 

Server response time or time to first byte (TTFB) indicates how long a browser waits for a page’s HTML content. You want TTFB to be around 0.5 s.

3.1 Perform a 3rd-party extensions audit

The easiest way to lower server response time is to have the least amount of custom plugins as possible. In most cases, 3rd-party extensions make Magento 2 slow. Turn off and on each module you have installed and see if it improves site speed. Toss or replace those that negatively affect performance.

3.2 Upgrade your hosting plan

Magento 2 is very sensitive to hosting resources. Make sure you run your site on the best hardware you can afford. More CPU and RAM does make a difference.

3.4 Use Varnish as a full-page cache (FPC) application

Varnish is a special software that caches and serves content. Ask your hosting support team for assistance in setting it up on your server.

 

Magento 2 supports Varnish natively. To use Varnish as an FPC application go to the backend menu: Stores > Configuration > Advanced > System > Full Page Cache.

 

You will need to specify a hostname, port and Varnish export configuration. Contact your system administrator to help you set everything up correctly.

4. Utilize the power of HTTP/2

HTTP/2 is the next generation of HTTP protocol. Without getting into the technical details, I will say it greatly improves a web page’s download speed. This is very important for slow mobile networks.

 

HTTP/2 should be supported by both the server and the browser. All major mobile browsers support HTTP/2. Contact your server maintenance team to enable HTTP/2 for your Magento 2 server.

5. Prioritize visible content

You need to prioritize above-the-fold (AF) content. AF content is what is displayed on your screen until you scroll down. The term originally referred to newsprint.

 

If you can get AF content rendered and painted first it will make the site visually faster for end users.

 

How can you do that? There are several ways.

5.1 Remove render-blocking Javascript

This technique is used to defer loading of JS scripts, thus making AF content appear quicker.

I have a Magento 2 extension that moves all Javascript to the bottom of a page. This causes AF content to be rendered and displayed faster.

5.1 Inline critical CSS

Critical CSS is a set of Cascading Style Sheets used to paint AF content. Inlining it directly to HTML between <head> and </head> tags will speed up the AF content display rate. You can place non-critical CSS at the bottom of a page.

The question is how should you extract critical CSS from Magento 2 style sheets? There are various online tools that claim to generate above-the-fold CSS for you. I’ve tested them and they are not accuratefor Magento sites.

 

I suggest you separate critical CSS manually. Though it might not be as hard as it sounds it willinvolve some tedious work. You will have to handle every page type: homepage, product, category, checkout, cart, etc. At the end you will merge critical CSS or inline different CSS for different pages.

Takeaway

 

If you want to optimize Magento 2 for mobile the first step is to lower page weight as much as possible. Compress images then turn on gzip and CSS/JS minification.

 

Pay attention to the server response time. Make it around 0.5 s or less. Go for a more powerful hosting plan. More CPU and RAM won’t hurt.

 

Do not turn JS bundling on. It will increase page size drastically.

 

Update your server to support HTTP/2. Prioritize visible content and load above-the-fold content first. Defer JavaScript loading and inline critical CSS.

  

Strugle with slow Magento! We can help! Fill out the form below.

 

Like the article? Share:

 

Other articles you might be interested in:

  1. Marius Strajeru, Jisse Reitsma, Rakesh Jesadiya talk about Magento 2
  2. How to lower TTFB from 8s down to 0.8s
  3. The fastest way to get 90% PageSpeed score
  4. [Infographic] Why site loading time is important
  5. Magento image optimization in 3 easy steps

  

If you find this post interesting do not hesitate to sign up for our newsletter and join the 871 people who receive Magento news, tips and tricks regularly.

Thank You!

 

 

One thought on “5 Tips to Improve Magento 2 Mobile Speed”
  • Syed Muneeb Ul Hasan
    Syed Muneeb Ul Hasan February 7, 2018 at 7:36 am

    Store with a good speed is always beneficial in getting more sales. All the tips mentioned are useful.