November 19, 2024

I bought a cheap React template

I bought a cheap React portfolio template at Themeforest for only 14 dollar. The big question is: is it good? Well it looks very stylish, but what about the code? I analyzed the code and ported the template to Hugo. Here you can find the verdict (and a comparison).

Very slow

When you compare the Hugo version to the React version, you will see that React is very slow (this is backed up by a 50/100 performance score from Google Lighthouse). The difference can best be seen when you load the homepage. It loads 1.8Mb, while the similarly looking Hugo version loads just 0.5Mb. Why is there such a big difference between these two visually similar websites? I created a table to break it down:

You can see that the amount of JS has dramatically decreased, while there was a significant increase in the amount of HTML. This is expected and is due to the nature of both frameworks. You can also see that the image size has decreased. These two things make the Hugo version more than three times lighter and more than two times faster than the React version (as reported by Google Lighthouse).

Not accessible

The React version was not only slower, it had also some accessibility issues. The focus rings were missing, making it impossible to operate the website by keyboard and some links lacked accessible names. The labels in the form also disappeared as soon as you selected the inputs, making it harder to fill out the form. I fixed those issues in the Hugo version. This improves conversion and prevents legal problems in the future.

Bad SEO

The portfolio items in the React version did not have their own URL’s. I fixed this in the Hugo version, so the portfolio items can (also) be discovered and indexed by the search engine. This will improve visibility on portfolio related keywords and improves the overall SEO.

Bad images

The images in the React version were (strangely enough) lacking retina support and a lightbox. I added this to the Hugo version. I also implemented automatic image-optimization, leading to the huge difference in file size (as shown above). This optimization occurs on every update, making it impossible to serve unoptimized images in the future.

No CMS

Because Hugo stores its content in Markdown files, it was very easy to add a CMS to the Hugo version. This enables the site owner to update this website without the help of a programmer. This is something that was lacking from the React version as well.

Conclusion

The optimizations above transformed a cheap, but good looking, React template into a valuable website. The optimization/rewrite was quite costly, but I challenge you to think about what NOT optimizing these things would have costed. Think about hiring a programmer due to the lack of a CMS, the resizing and coloring of all images every time you add a new post or project, the legal issues due to poor accessibility and the missed conversion due to bad SEO.

Cheap can be expensive.

()  Joost van der Schee