Easyship case study: From AngularJS to Vue - Web Performance up by 37%

For any digital product, a website may either work as a well-oiled lead generation machine or slow down business growth if the execution is mangled.

Easyship is an all-in-one shipping tool trusted by over 15,000 eCommerce vendors. As part of a continuous effort to be a leader in eCommerce logistics, they knew they had to upgrade their website to stay on top of the competition and increase their conversion rate. Additionally, this was their opportunity to fix performance issues to enhance the overall user experience, and introduce a refreshed feel and look that would reflect their professional and cutting-edge product.

And they nailed it. Paul Lugagne Delpon, the co-founder and CTO at Easyship, and his team worked hand in hand with designers (from their in-house team) and Monterail developers to take their website from merely OK to outright exceptional.

The results? Overall website performance increased by 37%, conversion rates improved by 36%, and users began spending 19% more time on the website. Combined, all these improvements translated to a lot of new business.

Identifying the Core of the Problem

AngularJS is falling behind modern frameworks regarding SEO, performance, and flexibility. Plus, it has just recently entered its long-term support period, meaning the Google team will no longer be merging any new features or fixes that would require even a minor breaking change. 2018 was definitely a year for migration. Therefore, switching to another modern framework made perfect sense to Easyship and Vue.js seemed like a viable option.

That’s exactly why they came to us: to find Vue development experts who would help them implement new designs and facilitate their transition from AngularJS to Vue. As we have already delivered over 30 Vue-based projects and personally favor Vue among other libraries and frameworks, our developers were definitely up for the challenge.

What key problems Easyship wanted to solve with the new website?

• The old version of the website was way too slow which made users bounce too often.
• The AngularJS framework is not SEO-friendly out of the box. It’s not properly indexing content and gives Google-bots serious link-crawling issues.
• Old designs were lacking a modern look and feel and required an update.
• Marketing-wise, Easyship was considering the new website as a conversion rate optimization opportunity.

Winning the SEO Game with Nuxt.js

On to the most fun part! One of the key goals of the Easyship overhaul project was improving their SEO. The most obvious way to do that was to use server-side rendering (SSR), so right at the start of the project, we decided to go with Nuxt.js—a powerful Vue.js framework for universal applications which ships SSR as their core feature. This alone meant that we would need to think differently about how we fetch data server-side and pass it to the client side. Nuxt, however, provided a smooth and easy-to-use mechanism to do just that.

Another step towards improving the SEO entailed porting all the existing meta-tags for every page. Small reminder—meta-tags are extra, well… tags that you can put inside the page header that won’t influence the content on the page itself, but will give useful hints to search engines, allowing them to interpret your page better and produce a higher SEO ranking as a result.

Some of those meta-tags are global, the JSON-LD definition of the Easyship organization and business, for instance, which causes the following data to be ingested by Google Knowledge Graph:

 

The rest of the meta-tags have to be defined for each page since they refer to the contents or the URL location of that specific page. Those tags fall into one of the following categories:

• meta-tags based on the URL location that would hint URLs of similar pages, namely meta-tags with hreflang and canonical URLs
• meta-tags describing the page content: title, description, keywords, breadcrumbs (as JSON-LD)
• Twitter-specific meta-tags that make for better thumbnails when sharing links to the website, those also have their versions for URL and page content meta-tags
• Open Graph meta-tags: similar to Twitter ones, but for a broader standard supported by Facebook, LinkedIn, Google+, etc.

In the case of URL meta-tags, we could generate them for each page generically, based on the current URL and language.

Other Perks of the Easyship Project

Working with sleek, modern designs with lots of animations and SEO challenges in one project was pure pleasure. The project also involved a lot of CSS work with responsiveness as a top priority.

For best performance, we settled on a Nuxt.js and Express-based setup, with MongoDB for translations. The development proceeded very quickly, especially at the very beginning, as we felt confident working with a setup we knew from prior experience. Working on logic-heavy pages, like the rates page or the crowdfunding campaigns page, was definitely the most challenging.

For Easyship, it was great to see that the implementation and designs were very concise. They got their website exactly as they wanted in less than three months.

The loading times and overall performance of their website improved by 37%. Thanks to the incredible powers of Vue.js, the new, responsive website improved conversion rates by 36%. SEO-wise, the new implementation helped the Easyship team drive 14% more organic traffic which converts to new businesses.