Themes Harbor site improvements: v2.1

We have not been very active in working on the updates for our themes for the past two weeks due to the work on improvements for Themes Harbor. The results are great! We were able to improve performance of the site and to learn some new things that we are going to apply to our themes.

Visually, there are not a lot of changes on the site except the Testimonial section. We’ve changed the layout of the testimonial a little bit to improve readability. Also, the home page no longer shows a carousel for the testimonials section.

Now, we use a regular list layout to display testimonials, so it does not require additional user actions (clicks) to view the testimonials. Moreover, it has fixed the issues we used to have for this section in mobile views. We have also created a dedicated page for a single testimonial.

The reason why we have spent a good amount of time on improving the testimonial section is because we want to make it easier for the site visitors to learn more about the products and the services provided on the site.

Now let’s talk about the performance. We have decided to rewrite our styles a little bit. Previously, we have used a one stylesheet for all the styles on the site. Now, this stylesheet has been broken into two categories: critical and non-critical.

For the critical styles, we’ve decided to create a design system to reduce a style repetition. Non-critical styles include the custom styles that are needed for a specific page. Basically, the site loads the critical styles first, and then non-critical styles (if needed) as an additional to the critical styles. Note, not all the pages will load these non critical styles.

There also non-critical stylesheets for specific pages and their size is in a range from 300 bytes to 7 kb.

As you can see, a new approach has dramatically reduced the size of our stylesheet, and as a result, it has improved the performance of the site a little bit.

There were some other changes made on the site. The structure of some pages has been changed by reducing the number of unnecessary HTML elements used on the page. Also, we have prevented a load of the 3rd party scripts and styles for the pages that do not use these scripts and styles.

Here are some results. The old data was collected on 7/30/19. The new data was collected on 08/16/19.

Home page

Singular product page

Blog page

Checkout page

This is an ongoing process and it was just the first stage of the improvement process for the site. Follow us on twitter and instagram for the latest news and updates.