June 21, 2019 Last updated June 21st, 2019 139 Reads share

How to Optimize Your Newly Migrated Magento 2 Site

optimize magento websiteImage Credit:

If you have heard this once, then you’ve most likely heard it a thousand times: Support for Magento 1 is ending soon and a Magento 2 Migration is all but inevitable.

If you haven’t migrated your eCommerce store to Magento 2 yet, you do so before June 2020. That is when Magento 1 support will officially end and there will only be support for Magento 2. If you do not migrate to Magento 2, then you will eventually lose support for Magento 1. This could mean the following:

  1. There will be no more security patches
  2. Hackers will have an easier time trying to enter your website
  3. Your website will become more outdated and you will have to cover all of the maintenance costs on your own
  4. Eventually, developers and all the research on Google will tell you to migrate your site to Magento 2

A lot of developers say that migrating to Magento is not a matter of if, but a matter of when. With the June 2020 deadline quickly approaching, I personally recommend that the best time to Migrate to Magento 2 is as quickly as possible.

If you have migrated your website to Magento 2, you would know that you had to build a whole new theme and collect new extensions for your website. Adjusting to a newly migrated Magento 2 website may feel like having to adjust to a new website altogether. In fact, a lot of eCommerce store owners have trouble adjusting to how fast the site loads.

While having a Magento 2 site is good for security, a slow site can be bad for business. In this piece, I will explain the best ways to optimize your newly migrated Magento 2 site.

Magento 2 Migration Speed Optimization

One of the first things that you need to optimize is your Magento 2 site speed. In this day and age, it’s not enough for eCommerce businesses to just have a storefront. You need to think about the full scope of the customer experience, which seeks to answer the primary question:

What does the site user want and how can your experience convert the site user into the customer that you need?

The short answer to this question is that the site user wants the product you are selling. However, store owners need to ask themselves what are the means the customer is willing to take to get what the store owner is selling. Now, you have to ask yourself more specific questions about the site user’s experience:

  • How easily can the site user get to the product they are looking for? Is our navigation menu clear?
  • What is the checkout process like for the site user? Does our website make it easy to pay for the product?
  • How quickly can the site user get to the product they are looking for? Is our website fast?

Believe it or not, the user experience depends on more than the price of a product or the aesthetic of a website. It depends on everything from the moment the site user tries to enter the site to the moment the site user leaves the website. One of the most important features for a website to have is speed. Now, more than ever, site speed is becoming an essential part of a site user’s experience. While some people say that Magento 2 can be a slow platform, there are a lot of great strategies to speed up your website. Below, you will find three great strategies for optimizing the speed on your Magento 2 website.

Take Advantage of Varnish and ElasticSearch

In the latest versions of Magento, users will now find ElasticSearch there is now built-in the platform. ElasticSearch is a search tool that shows recommendations to the site user when they search for products. Take the following website below as an example:

Notice how I typed “Le” into the search box and you can already see that it’s suggesting to me popular products that I could be looking for (ledger paper, legal paper, letter paper, etc.).

Another really great tool that Magento 2 users have access to is Varnish. This is a great cache tool that makes websites load incredibly fast. The best thing about Varnish is that it stores files, or fragments of files, in your computer memory so that those files can be used to reduce the response time for a website.

You can even into your code and write out your own caching policies in Varnish’s language and that code will be translated to C code, thus increasing the speed of the website. 

Optimize Your TTFB

Time to First Byte (TTFB) measures the time it takes for an initial user page request to reach the first byte from the server to the users’ browser. To optimize TTFB means that you are going to have to go into Magento’s code base. There’s a lot of helpful tools out there that can help you do that, but a good way to optimize TTFB without going into your code is to make sure that you use as minimal code as possible. An ideal TTFB should be at 200 milliseconds.

Never Use JS Bundling

JS bundling (or JavaScript bundling) is the idea that when you bundle two small JavaScript files together, you can reduce the amount of JavaScript files on your server, thus reducing the number of requests to your server as well. By theory, this idea will help make your website load faster.

However, the theory ended up being a bad idea.

Early on, there was a bug found in which no matter how large the bundled files were, the files would always add up to 13 MegaBytes. It was also seen that the larger files took much longer to load than the smaller files. That means that the time you were supposed to save through bundling went into loading the bundles.

Aside from that, it’s pointless to even use JS bundling if you have HTTP2 because all of your JS files will be downloaded at once, which eliminates the need for lowering server requests.

Magento 2 Migration SEO

For those who do not know, SEO stands for Search Engine Optimization. In the most basic sense, SEO works to get your website on the first page of search engines like Google. There are many ways that you can accomplish this, but if you are looking for a comprehensive guide, Moz is an incredible source for learning in-depth SEO.

Now, having an SEO strategy is so important because it will help your website get seen by potential customers. However, a big flaw in Magento 2 is that the platform isn’t very SEO friendly.

Optimize Your Images

A really important SEO technique is to optimize your images. Two really great ways to do this is to make sure that your images have alt text on them and making sure they are sized correctly.

Alt text

Alt text is used within HTML to describe an image on a page. Some eCommerce store owners like to use this space to stuff keywords into their photos. However, this is more of a space where SEO Specialists would like to describe the photo for search engines, more than anything else.

Let’s pretend you are optimizing this photo for SEO. You are selling the sweater in your eCommerce store and you want to highlight the sweater in your alt text. A good way to optimize the alt text on this image would be to insert the following code into your HTML:

<img src=”BlueSweater.png” alt=”Blue Lightweight Sweater with Zipper”>

Now, a bad way to optimize this photo would be to use this code in your HTML:

<img src=”BlueSweater.png” alt=”Blue Sweater Sweater with Zipper Athletic Sweater Lightweight Sweater Lightweight Sweaters for Women Sweaters for Women Blue Sweaters for Women Best Sweaters for women”>

Honestly, I could go on, but I believe you understand the point.

When creating alt text, a good rule of thumb is to describe it to someone who can’t see the photo.

Sizing Images

An important part about optimizing images is making sure they are sized properly. Let’s pretend that you are using a large image to fill up a small space on your website. If you download that photo to use it on your website, the chances are that the large photo will have no problem fitting into the large space. In fact, it will look really good!

Despite this, when you upload the photo to your photo library, the library will save your photo in its original large size. This means that your website will have to load the large photo every single time your website begins to load. This can take up extra space on your server and can slow down your website’s loading time.

In order to prevent this, there are many free tools that will optimize your photo size for you. The process is generally like this:

  1. You upload a photo to the site
  2. The site will lower the number of pixels of the photo, without compromising the resolution of the photo
  3. You will be able to download the photo to upload to your site

Generally, these tools work to optimize the photo without ruining the resolution of the photo, so it will look just as clear as it did when you originally had it.

Canonical URLs and Pagination in Magento 2

When websites migrated to Magento 2, the URLs appeared to have problems. Magento 2 saves new URLs at the time they are created, which means that Magento 2 will take category URLs from your Magento 1 website and create another URL as if it were a new category. This has caused duplicate content problems for many eCommerce store owners. It has also set back a lot of SEO strategies.

eCommerce stores should also beware of Pagination, which is a practice that focuses on duplicate content in product catalogs. An example of this would be the following URLs:

www.domain.com/category/page1
www.domain.com/category/page2

Both of these URLs are pages showing off a selection of products based on a category, but the content is different on both pages. This can confuse crawlers and they may mark your category pages as duplicate content. You can find a really great example here.

You can deal with these issues in the following ways:

  • The following code should restore the category URLs you had in Magento 1: auto_resolve_urlrewrite_duplicates
  • Adding canonical links can really help site crawlers and work to your benefit. To do so, you need to:
    1. Go to AdminStoresSettingsConfiguration Catalog
    2. Look for Search Engine OptimizationMagento-2-SEO
    3. Select yes in the Use Canonical Link choices.

Optimize for Mobile

Another really important thing for eCommerce sites to have is a mobile-friendly page. In search engines, most websites without a mobile-friendly page are pushed further back the search results. Aside from that, so many people are browsing the internet on mobile devices now that it would be difficult for desktop only websites to make sales.

A great way to make your website mobile friendly is to build a progressive web app for your site. A progressive web app (PWA) is a mobile website that looks like an app. Progressive Web Apps are fast, secure, and responsive, among other things. Magento 2.3 users can install one for their site by using PWA studio. PWA studio is a Magento program that will help users build a Progressive Web app quickly and efficiently.

Ecommerce

Konstantin Gerasimov

Konstantin Gerasimov

Read Full Bio