--- title: 'Checkout Wows New Tailwind Design' url: 'https://www.worldoweb.co.uk/2021/checkout-wows-new-tailwind-design' markdown: 'https://www.worldoweb.co.uk/2021/checkout-wows-new-tailwind-design.md' date: '2021-06-27' description: 'Discover the new tailwind design for Wow’s blog, including the reasons for the redesign, the changes made to reduce loading time speed, and the health benefits of going dark.' taxonomy: category: - 'Web Development' tag: - News - Tailwind --- # Checkout Wows New Tailwind Design Published on June 27, 2021 by Tracy Ridge in [Web Development](https://www.worldoweb.co.uk/category/category:Web%20Development) Welcome to WOW blog’s new tailwind design. Wow has gone dark! After having the previous design for 2 years it was time for a change. One of the major reasons for the redesign was to reduce the loading time speed. Another reason is to increase health benefits, bizarre I know but read on. Amongst all these changes there have been plenty of changes under the hood too. Venture on to check out the trials and tribulations of the new design, if you dare! On a whole, the design took 3 months to build in my spare time. Alongside my full-time job in education and studying. The new design aims to embrace Dark mode, which reduces energy usage in devices. Yet, the main reason behind going dark is the health benefits. The blue light emitted from screens can cause eye strain. Dark mode reduces the blue light, which causes symptoms such as insomnia and headaches. As stated another reason to change was to increase the speed of loading the site. WordPress loads a lot of dynamic content. Thus, it is difficult to reduce the speed compared to a static website. Here are 3 steps that I considered. - Reduce scripts - Remove Unused CSS - Remove plugins ## Reducing Scripts In my [previous theme](https://www.worldoweb.co.uk/2019/new-design-live-dedicated-to-the-life-of-my-dad), I used the Font Awesome icon library. Like many, I loaded the whole library to use a few icons. To reduce this usage I opted to use inline SVGs. The code adds a little weight to each page but it has also removed an HTTP request in loading font-awesome. [WordPress](https://www.wordpress.org/) theme and plugin developers have made use of the jQuery library. I too have also have used jQuery for menu navigation and the projects page. I decided it was time to ditch jQuery in favour of modern vanilla JavaScript. As a result, I rewrote several components of the page including the projects page After a 6 month trial of using Google AdSense, I decided to remove ads. This wasn’t a difficult choice to make. A good majority of users block ads, including myself. Removing them speeds up the site more. ## Reducing CSS In my previous theme, I used the [Bulma](https://www.worldoweb.co.uk/2018/hello-bulma-css-goodbye-bootstrap) CSS framework. Frameworks are great, but they can also add a lot of bloat and unused styles, which increases the CSS file size. With this in mind, I switched from Bulma to Tailwind to design my new theme. Don’t get me wrong I still love Bulma and will continue to use it for my projects. I wanted to increase my website sped so switching to Tailwind was a no-brainer for me. ### Tailwind Design Speed Gains Tailwind is a utility-based framework. As with Bulma, you add CSS classes to your HTML elements. With the help of Node and PostCSS, it produces a CSS file with only the styles you use. As a result, the new Tailwind design compiled a stylesheet **41.2 kb** in size. Compare that to the previous Bulma stylesheet which was **208.7 kb**. You don’t need me to point out the savings in size. ## Removing Redundant Plugins WordPress is great but having too many plugins can reduce the speed. Over the years I have removed several plugins. If I required a particular feature I created it or decided to go without. The main thing is to adhere to the WordPress coding conventions. ## Other Changes I have made a valiant effort to make my blog more accessible for assistive technology. This is something that I plan to research more and make further improvements in the future. My last design used a custom NavWalker to build the main navigation. This was rewritten to incorporate the inline SVGs, mega menu and search feature. ## Tests I ran the same test in CloudFlare before and after changing the theme, with Adsense running at the time. Here are the results. ![Bulma and Tailwind Design Speed Tests](https://www.worldoweb.co.uk/images/e/e/4/f/4/ee4f46c88e30aa26be7713c60698807bb7d9014a-tailwind-design-vs-bulma-design.png)CloudFlare Comparison Between Bulma and Tailwind Design ## Conclusion WordPress is a good platform to work with, but it is more demanding on the server with every new release. This makes websites slower as a result. By switching to the new tailwind design my site speed has improved. ### Share [X](https://x.com/intent/tweet?text=Checkout%20Wows%20New%20Tailwind%20Design&url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2021%2Fcheckout-wows-new-tailwind-design&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.worldoweb.co.uk%2F2021%2Fcheckout-wows-new-tailwind-design "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2021%2Fcheckout-wows-new-tailwind-design&title=Checkout%20Wows%20New%20Tailwind%20Design "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2021%2Fcheckout-wows-new-tailwind-design "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=Checkout%20Wows%20New%20Tailwind%20Design%20https%3A%2F%2Fwww.worldoweb.co.uk%2F2021%2Fcheckout-wows-new-tailwind-design "Share on Bluesky") [Email](mailto:?subject=Checkout%20Wows%20New%20Tailwind%20Design&body=https%3A%2F%2Fwww.worldoweb.co.uk%2F2021%2Fcheckout-wows-new-tailwind-design "Share via email") #### Tags [ News](https://www.worldoweb.co.uk/tag/tag:News) [ Tailwind](https://www.worldoweb.co.uk/tag/tag:Tailwind) ##### Next [ ← My Book Live NAS Drives Exploit ](https://www.worldoweb.co.uk/2021/my-book-live-nas-drives-exploit) OR ##### Previous [ 10 Google Ads Mistakes and How To Avoid Them → ](https://www.worldoweb.co.uk/2021/10-google-ads-mistakes-how-to-avoid-them) --- ## Navigation - Previous: [My Book Live NAS Drives Exploit](https://www.worldoweb.co.uk/2021/my-book-live-nas-drives-exploit.md) - Next: [10 Google Ads Mistakes and How To Avoid Them](https://www.worldoweb.co.uk/2021/10-google-ads-mistakes-how-to-avoid-them.md)