How to improve page speed in Magento 2

The Most Popular Extension Builder for Magento 2

With a big catalog of 234+ extensions for your online store

We’re all aware that page speed significantly impacts the success of an online store because stores with low performance tend to have lower conversion rates and lose out to their competition eventually. The page speed builds the first impression, and that’s challenging to change.

Magento 2 appears as a new era of e-commerce innovation. It comes with more features and codes compared to its earlier versions. With such a level of flexibility, Magento 2 can be slow yet.

In this article, we’ll bring you some up-to-date techniques on speed optimization for Magento 2 stores.

Table of Contents

Some Influences of Page Speed
Why is it Challenging to Speed Up Your Magento 2 Site?
How to Improve Page Speed in Magento 2?
The Bottom Line

According to some surveys from kissmetrics.com

73% of mobile internet users say that they’ve encountered a website that was too slow to load.
40% of people abandon a website that takes more than 3 seconds to load.
The one-second delay in page response can result in a 7% reduction in conversions.

Look at the numbers, it does not lie. Page speed is really crucial to retain the visitors on your site.

Page Speed is the time a visitor has to wait until your page is completely loaded. This time is usually calculated by the time that it displays the full content for a particular page or the first time that the browser you receive from the web server.

Get Website Performance Audit

Some influences of Page Speed

Page Speed is one of the important factors for the users to decide whether they should stay on the site or not??? The users are not afraid to leave the page to find competitors websites have the page speed fast and impressively. Therefore, improving the page speed is essential in the era of online shopping and online business grows strongly and competes fiercely today.

In facts, page speed can impact strongly on user experience. Commonly, a page load for e-commerce site takes 7 seconds meanwhile the ideal load time is around 3 seconds or less. If the speed of page load is bad, the visitors will leave your website quickly because they have to wait too long to get what they are looking for.

Clearly, at the same time, if your website loads faster, users can read more web pages, learn more the content on the site, from that, the likelihood they share on social networking or link to your site is also greater. Besides that, the spiders are also limited about time. This is really a problem with big websites. Therefore, the faster the page load time, the more indexed the site is.

In 2010, Google announced that page speed is the factor for them to evaluate and rank the website ranking. Google always expects users to access sites with fast loading speed, not more than 3 seconds to increase the experience and usefulness of the website. This means that if you want the website to rank high, the page speed must reach Google standards. In contrast, the page speed exceeds 3 seconds, the ranking of the website will not be as high as you desired.

Get Website Performance Audit

Why is it Challenging to Speed Up Your Magento 2 Site?

Apparently, if speed optimization in Magento 2 stores was just adding and enabling extensions, you wouldn’t be finding yourself tired with performance optimization. It’s much more complex than that.

Many variables

You need to take into consideration the different variables involved in page speed assessment. Your page speed could be terrific in the ideal condition if the user’s device can render everything you put at it. Or it could be that your page speed is not that terrible, but the perceived performance for the user is bad because of cumulative layout shifts.

There are plenty of variables to be taken into account when enhancing your store performance which is why you should always find out the specific problems first.

Trade-off

As you really get into it, speed optimization is a continuous trade-off between performance and functionality - you always have to sacrifice a few things to get greater performance. Sometimes it’s a stunning Magento theme; sometimes, it’s an awesome extension that is harmful performance-wise to your store.

Priority

Even if you finished your homework and discovered all the existing problems your store has, it still wouldn’t be a great idea to try fixing them. Micro optimizations hardly do things to boost real-world performance. Hence, you should only focus on optimizing the problems that you think are the serious hindrances stopping your store from delivering the kind of shopping experience you want.

How to Improve Page Speed in Magento 2?

1. Update the latest version of Magento 2

One of the easiest ways to improve your page speed is to upgrade to the newest Magento 2 version. Whenever Magento launches a new version, both the performance and features are advanced considerably.

2. Consider your hosting

Magento cannot perform well on a cheap hosting plan. A lot of certified Magento developers will suggest you invest in a good hosting plan.

Shared plans often restrict you to a limited amount of space, and Magento is a kind of platform that requires a lot of space to address your site’s demands. Maintaining your Magento 2 website on a cheap hosting plan would potentially lead to slow loading time. Nevertheless, as traffic begins to grow, the loading time will be far slower. Thus, the ideal hosting plan to choose is a premium hosting plan.

Besides, it’s also critical to select a service that specifies Certified Magento Hosting.

A good idea would be to host your Magento site in a VPS network. A VPS (Virtual Private Server) is typically your own server space that offers more storage than a cloud hosting plan would. Being a site owner, VPS would allow you to manage your site with more flexibility.

Unlike cloud hosting, VPS hosting doesn’t offer server space dependent on a specific amount of traffic. You’ll have the freedom of using as much site space as you want.

3. Setup Varnish

Varnish is a program caching content. Some call it an HTTP accelerator. Nonetheless, what makes Varnish different is that it contains files or fragments of files in the memory and those files are utilized to decrease the response time for a site.

A major advantage of Varnish is that it has shown itself to be flexible. You can explore the code and create your own caching policies in Varnish’s lanuage. The language is interpreted into C code and accumulated, which makes the site go faster. Additionally, it can work on both small and large servers.

4. Transfer to HTTP/2

Launched back in February 2015, HTTP/2 is an innovative enhancement made to the current HTTP protocol. It is now used by 45.4% of all the sites, and will only be observing more adoptions from now, particularly since testing has proven that HTTP/2 contributes significant improvement in page load and other advantages.

To activate HTTP/2 for your Magento site, you have to configure it either via your CDN or your web servers.

5. Enable CSS & JavaScript minification

When operating a Magento store, there will be many times that you or your developers work alot with CSS & JavaScript. You can try minifying the CSS/ JavaScript or merge these files to speed up your website.

Go to the backend of the site, then navigate to Configuration > Developer > JavaScript Settings

When reaching the JavaScript settings, you search for the setting that says “Minify JavaScript Files,” and you will see a drop-down menu. Choose the Yes option.

Now, go to the CSS settings. Under the Merge CSS Files and Minify CSS files options, choose Yes.

6. Optimize CSS Delivery

CSS is regarded as the most crucial thing to consider when building your Magento 2 website. CSS is the programming language that decides what the site will look like. Your browser loads your CSS, while the site users only see a white blank screen.

Obviously, you want to load your site as quickly as possible. This will decrease lost traffic. In which case, you should optimize the CSS delivery on your online store. To make sure that the blank, white screen disappears as fast as possible. There are a few tips & tricks that help boost the site’s CSS delivery.

Put your above-the-fold content high in your HTML. Then, a browser will select and render the above-the-fold content.

Transfer all the other CSS resources to the bottom of the page. That content shouldn’t need to load until the visitor scrolls down.

7. Go headless with a PWA storefront

As the majority of the Magento sites are still based on the traditional architecture, you’re more confined by the infrastructure since traditional architecture is inflexible, conservative, and apt to slow down gradually.

Headless architecture more or less can address this problem because it is a method that seeks to provide more scalability, flexibility, and more performance advancements to storefronts.

This is the reason why you see brands are choosing PWA storefronts (which is a headless storefront) as a way to gain more performance improvements. It’s also a sleeper that will win more recognition in the upcoming time.

Read more:

8. Do not use JS bundling

JavaScript bundling is a method that gathers different files to decrease the number of HTTP requests to load a page. In brief, the fewers the files, the fewer the HTTP requests, which means the site has to take less time loading

On the surface, this seems like a good idea. However, one drawback of JS bundling is that grouping your files would leave you with major JS files that can intensely harm your store’s performance.

Finally, the time you attempted to save by reducing HTTP requests was spent on loading the major files you contain on your computer.

Hence, it is important that you should not follow this practice and try other strategies here to speed up your store.

Site Audit Services

Mageplaza helps identify any flaws & weaknesses in your website and fix them before they start costing you a fortune.

Explore More

9. Implement lazy loading images

Among all sorts of resources requested by popular sites, images are the most commonly requested sort of resource whose number of requests, on average, account for 36.6% (desktop) of total requests. Regarding page weight, image resources on average take up 46.6% of the median page weight. That makes it bad in speed optimization that gains impressive results when you do it right.

Lazy loading is an incredible medium to boost the performance of your website since it lowers the need to load all images simultaneously. With lazy loading, images will be loaded at a later point in time as the user requests it, considerably reducing the time it needs to load a page without harming the user experience.

With Magento 2, you can perform lazy loading images to your store with extensions like Lazy Loading for Magento 2.

10. Choose lightweight themes

From impressions only, you can tell since a heavy theme seriously slows down your website, and users with a slow Internet connection and/or old-fashioned hardware capabilities will only be further affected by this.

To solve this problem, you’ll have to selectively pick your Magento themes with concentration put more toward performance. Nevertheless, we understand that it’s difficult to define whether a theme is truly lightweight. This is why you’d better check out whether the demo version of the theme feels rapid to you, and read more user feedback.

11. Deactivate flat catalogs

It used to be that activating Flat catalog was the way to go if you need to lower the time it takes to create SQL queries. Nevertheless, from Magento 2.1, this is no longer a great practice, and you should limit using any extension that involves the use of Flat catalog because this feature might lead to performance other indexing problems.

To deactivate flat catalogs, ensure that you set Use Flat Catalog Category/ Use Flat Catalog Product to No in Stores > Settings > Configuration > Catalog.

12. Eliminate unnecessary 3rd-party extensions

Normally, stacking up 3rd-party modules is not always a great idea, and these modules can trigger more issues if installed from unreliable sources. To reduce any potential problems, the best method is to keep the number of modules to a specific amount, update them on a regular basis, and only download 3rd-party modules from trusted providers.

13. Use performance optimization services

If you’re too busy with operating your store and don’t have time to improve your page speed, there are many providers offering Magento Performance Optimization services on the market. One of the most reliable services is Magento 2 website optimization from Mageplaza.

The team works professionally and dedicatedly, providing you excellent technical support and service.

Expert analysis: Mageplaza’s experts will work hard to identify your current problems (HTML coding, server, redirects, graphics, etc.
Web developers: All the web developers that assist you with page optimization are highly qualified in-house developers.
Guaranteed results: You will get calculated enhancement in your rankings, customer satisfaction, and conversion rates.
Multi-device optimization: This service will help advance your site performance in every device, including desktops, tablets, and mobiles.

The Bottom Line

With all these above techniques, you can now work to improve your Magento 2 page speed and achieve a better competitive benefit over your competitors.

Nonetheless, you should notice that performance optimization isn’t always valuable since micro-optimizations are usually a wasted effort and remain unchanged in real-world usage. The best strategy is to recognize impactful problems first and concentrate only on them until you obtain the desired results.

EXPLORE Magento 2 SEO module