Back to Blog »

Refactor time

Recently I spent a good amount of time refactoring several websites code base and this made me want to tighten up my own sites. So my first step was to start with my boilerplate repo that I use to kick start any new projects. It includes an optimized Craft CMS starter layout with Webpack(Mix), Sass and Vue. It has a Capistrano setup included for deployment if you want to go that route. The first thing I decided to adjust, was removing all jQuery from the site. 

There was not that many things using it, but this reduced the vendor.js payload by more than 50%. With ES6 you can really do a lot of the same things pretty easily, including ajax and form submissions. I used this github gist that had a lot of helpful hints on transitioning. I also found Bootstrap Native that does not use jQuery but instead it used vanilla js. Once I was done optimizing my boilerplate, I converted over this website and added a static html file cache plugin to test out. So far even with an applied slow 4g Lighthouse test, I am at 98% and above on all items. 

My biggest take away from all of this is how far things have come as I can remember not that long ago thinking that jQuery was the best thing ever and now, it seems like a crutch. With the advent of Vue, React, etc a lot of the interactive functionality is taken care of and with a little bit of vanilla js you can do the rest. I even recently built out my own image lazy load js that works great and is 170 lines of code which includes a es5 fallback and is bot friendly.