/ WhatILearned

Optimizing DiviTheme by minimizing javascript and css

Over the past month, the Photomatico Photobooth website's bandwidth has been shooting through the roof.

Previously, photomatico's bandwidth is proportional to the number of users and while this is cause for celebration it was a bit concerning. If it's increasing why isn't the number of In-App-Purchases on my Chrome store increasing proportionally as well? (It wasn't).

I dug deeper into Awstats and noticed that there were two types of files that was accounting for over 60% of the bandwidth: javascript and css.

Photomatico's website is using DiviTheme and while it was really easy to setup the layout, I pulled up the inspector and noticed that one of my landing pages was accounting for around 1MB per visit (!!!). At 160 views per day, that accounted for 160-200MB of bandwidth a day.

I looked at the network waterfall view in the inspector and noticed that with DiviTheme it was serving two files, jquery and a style.css stylesheet. Both of these files added to almost 1MB. Both of these have no reason to be that large and should be minified (compressed).

I hunted around and installed the W3 Total Cache wordpress plugin.

Here's the steps I did :

  1. Install W3 Total Cache by logging into your wordpress site
  2. On the menu, mouseover Plugins and click on Add New.
  3. Search for W3 Total Cache
  4. Click Install
  5. Once installed, click on the Settings link for W3 Total Cache
  6. Scroll down to the minify section and verify that the checkbox beside Enable is checked.
    See screenshot below:
  7. Click on the button labeled Save all settings.

After installing and setting it up, I noticed that the bandwidth per page went down significantly (by almost 50%).